From 21f1637e437398ec56b6078cf28b58bd4a0299ba Mon Sep 17 00:00:00 2001
From: Ariadne Conill <ariadne@dereferenced.org>
Date: Mon, 11 Nov 2019 14:14:44 -0600
Subject: nav panel: refactor to use vuex mapState

---
 src/components/nav_panel/nav_panel.js | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

(limited to 'src/components')

diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js
index aa3f7605..bfcab62e 100644
--- a/src/components/nav_panel/nav_panel.js
+++ b/src/components/nav_panel/nav_panel.js
@@ -1,4 +1,5 @@
 import followRequestFetcher from '../../services/follow_request_fetcher/follow_request_fetcher.service'
+import { mapState } from 'vuex'
 
 const NavPanel = {
   created () {
@@ -9,17 +10,11 @@ const NavPanel = {
       followRequestFetcher.startFetching({ store, credentials })
     }
   },
-  computed: {
-    currentUser () {
-      return this.$store.state.users.currentUser
-    },
-    chat () {
-      return this.$store.state.chat.channel
-    },
-    followRequestCount () {
-      return this.$store.state.api.followRequests.length
-    }
-  }
+  computed: mapState({
+    currentUser: state => state.users.currentUser,
+    chat: state => state.chat.channel,
+    followRequestCount: state => state.api.followRequests.length
+  })
 }
 
 export default NavPanel
-- 
cgit v1.2.3-70-g09d2


From 1f9674350cdf7455fe5540d377eb327edf1336ce Mon Sep 17 00:00:00 2001
From: Ariadne Conill <ariadne@dereferenced.org>
Date: Mon, 11 Nov 2019 14:18:36 -0600
Subject: nav panel: disable TWKN if federation disabled, disable Public and
 TWKN if privateMode is enabled

---
 src/components/nav_panel/nav_panel.js  | 4 +++-
 src/components/nav_panel/nav_panel.vue | 4 ++--
 2 files changed, 5 insertions(+), 3 deletions(-)

(limited to 'src/components')

diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js
index bfcab62e..a6426d13 100644
--- a/src/components/nav_panel/nav_panel.js
+++ b/src/components/nav_panel/nav_panel.js
@@ -13,7 +13,9 @@ const NavPanel = {
   computed: mapState({
     currentUser: state => state.users.currentUser,
     chat: state => state.chat.channel,
-    followRequestCount: state => state.api.followRequests.length
+    followRequestCount: state => state.api.followRequests.length,
+    privateMode: state => state.instance.private,
+    federating: state => state.instance.federationPolicy.federating || true
   })
 }
 
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 28589bb1..d85c28bd 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -28,12 +28,12 @@
             </span>
           </router-link>
         </li>
-        <li>
+        <li v-if="currentUser || !privateMode">
           <router-link :to="{ name: 'public-timeline' }">
             {{ $t("nav.public_tl") }}
           </router-link>
         </li>
-        <li>
+        <li v-if="(currentUser || !privateMode) && federating">
           <router-link :to="{ name: 'public-external-timeline' }">
             {{ $t("nav.twkn") }}
           </router-link>
-- 
cgit v1.2.3-70-g09d2


From 43d4d17b41863dd5784f1d611857a9064759946b Mon Sep 17 00:00:00 2001
From: Ariadne Conill <ariadne@dereferenced.org>
Date: Mon, 11 Nov 2019 14:37:14 -0600
Subject: side drawer: same treatment

---
 src/components/side_drawer/side_drawer.js  | 6 ++++++
 src/components/side_drawer/side_drawer.vue | 6 +++---
 2 files changed, 9 insertions(+), 3 deletions(-)

(limited to 'src/components')

diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js
index 567d2e5e..2725d43a 100644
--- a/src/components/side_drawer/side_drawer.js
+++ b/src/components/side_drawer/side_drawer.js
@@ -34,6 +34,12 @@ const SideDrawer = {
     },
     followRequestCount () {
       return this.$store.state.api.followRequests.length
+    },
+    privateMode () {
+      return this.$store.state.instance.private
+    },
+    federating () {
+      return this.$store.state.instance.federationPolicy.federating || true
     }
   },
   methods: {
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 214b8e0c..be18a5d7 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -79,12 +79,12 @@
             </span>
           </router-link>
         </li>
-        <li @click="toggleDrawer">
+        <li @click="toggleDrawer" v-if="currentUser || !privateMode">
           <router-link to="/main/public">
             {{ $t("nav.public_tl") }}
           </router-link>
         </li>
-        <li @click="toggleDrawer">
+        <li @click="toggleDrawer" v-if="(currentUser || !privateMode) && federating">
           <router-link to="/main/all">
             {{ $t("nav.twkn") }}
           </router-link>
@@ -99,7 +99,7 @@
         </li>
       </ul>
       <ul>
-        <li @click="toggleDrawer">
+        <li @click="toggleDrawer" v-if="currentUser || !privateMode">
           <router-link :to="{ name: 'search' }">
             {{ $t("nav.search") }}
           </router-link>
-- 
cgit v1.2.3-70-g09d2


From d0075026290c90d8406c7ac81413259a8ae58ec7 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shpuld@shpposter.club>
Date: Fri, 15 Nov 2019 08:39:21 +0200
Subject: add fetching for emoji reactions, draft design

---
 src/components/conversation/conversation.js        |  1 +
 src/components/status/status.js                    |  6 +++++
 src/components/status/status.vue                   | 28 ++++++++++++++++++++++
 src/modules/statuses.js                            | 14 ++++++++++-
 src/services/api/api.service.js                    |  6 +++++
 .../backend_interactor_service.js                  |  2 ++
 6 files changed, 56 insertions(+), 1 deletion(-)

(limited to 'src/components')

diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index 72ee9c39..715804ff 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -149,6 +149,7 @@ const conversation = {
       if (!id) return
       this.highlight = id
       this.$store.dispatch('fetchFavsAndRepeats', id)
+      this.$store.dispatch('fetchEmojiReactions', id)
     },
     getHighlight () {
       return this.isExpanded ? this.highlight : null
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 4fbd5ac3..8268e615 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -278,6 +278,12 @@ const Status = {
     hidePostStats () {
       return this.mergedConfig.hidePostStats
     },
+    emojiReactions () {
+      return {
+        '🤔': [{ 'id': 'xyz..' }, { 'id': 'zyx...' }],
+        '🐻': [{ 'id': 'abc...' }]
+      }
+    },
     ...mapGetters(['mergedConfig'])
   },
   components: {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 65778b2e..aae58a5e 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -354,6 +354,17 @@
             </div>
           </transition>
 
+          <div class="emoji-reactions">
+            <button
+              class="emoji-reaction btn btn-default"
+              v-for="(users, emoji) in emojiReactions"
+              :key="emoji"
+            >
+              <span>{{users.length}}</span>
+              <span>{{emoji}}</span>
+            </button>
+          </div>
+
           <div
             v-if="!noHeading && !isPreview"
             class="status-actions media-body"
@@ -771,6 +782,23 @@ $status-margin: 0.75em;
   }
 }
 
+.emoji-reactions {
+  display: flex;
+  margin-top: 0.75em;
+}
+
+.emoji-reaction {
+  padding: 0 0.5em;
+  margin-right: 0.5em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  :first-child {
+    margin-right: 0.25em;
+  }
+}
+
 .button-icon.icon-reply {
   &:not(.button-icon-disabled):hover,
   &.button-icon-active {
diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index f11ffdcd..c285b452 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -1,4 +1,4 @@
-import { remove, slice, each, findIndex, find, maxBy, minBy, merge, first, last, isArray, omitBy } from 'lodash'
+import { remove, slice, each, findIndex, find, maxBy, minBy, merge, first, last, isArray, omitBy, findKey } from 'lodash'
 import { set } from 'vue'
 import apiService from '../services/api/api.service.js'
 // import parse from '../services/status_parser/status_parser.js'
@@ -510,6 +510,11 @@ export const mutations = {
     newStatus.fave_num = newStatus.favoritedBy.length
     newStatus.favorited = !!newStatus.favoritedBy.find(({ id }) => currentUser.id === id)
   },
+  addEmojiReactions (state, { id, emojiReactions, currentUser }) {
+    const status = state.allStatusesObject[id]
+    status.emojiReactions = emojiReactions
+    status.reactedWithEmoji = findKey(emojiReactions, { id: currentUser.id })
+  },
   updateStatusWithPoll (state, { id, poll }) {
     const status = state.allStatusesObject[id]
     status.poll = poll
@@ -611,6 +616,13 @@ const statuses = {
         commit('addRepeats', { id, rebloggedByUsers, currentUser: rootState.users.currentUser })
       })
     },
+    fetchEmojiReactions ({ rootState, commit }, id) {
+      rootState.api.backendInteractor.fetchEmojiReactions(id).then(
+        emojiReactions => {
+          commit('addEmojiReactions', { id, emojiReactions, currentUser: rootState.users.currentUser })
+        }
+      )
+    },
     fetchFavs ({ rootState, commit }, id) {
       rootState.api.backendInteractor.fetchFavoritedByUsers(id)
         .then(favoritedByUsers => commit('addFavs', { id, favoritedByUsers, currentUser: rootState.users.currentUser }))
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 8f5eb416..7ef4b74a 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -71,6 +71,7 @@ const MASTODON_MUTE_CONVERSATION = id => `/api/v1/statuses/${id}/mute`
 const MASTODON_UNMUTE_CONVERSATION = id => `/api/v1/statuses/${id}/unmute`
 const MASTODON_SEARCH_2 = `/api/v2/search`
 const MASTODON_USER_SEARCH_URL = '/api/v1/accounts/search'
+const PLEROMA_EMOJI_REACTIONS_URL = id => `/api/v1/pleroma/statuses/${id}/emoji_reactions_by`
 
 const oldfetch = window.fetch
 
@@ -864,6 +865,10 @@ const fetchRebloggedByUsers = ({ id }) => {
   return promisedRequest({ url: MASTODON_STATUS_REBLOGGEDBY_URL(id) }).then((users) => users.map(parseUser))
 }
 
+const fetchEmojiReactions = ({ id }) => {
+  return promisedRequest({ url: PLEROMA_EMOJI_REACTIONS_URL(id) })
+}
+
 const reportUser = ({ credentials, userId, statusIds, comment, forward }) => {
   return promisedRequest({
     url: MASTODON_REPORT_USER_URL,
@@ -997,6 +1002,7 @@ const apiService = {
   fetchPoll,
   fetchFavoritedByUsers,
   fetchRebloggedByUsers,
+  fetchEmojiReactions,
   reportUser,
   updateNotificationSettings,
   search2,
diff --git a/src/services/backend_interactor_service/backend_interactor_service.js b/src/services/backend_interactor_service/backend_interactor_service.js
index d6617276..52234fcc 100644
--- a/src/services/backend_interactor_service/backend_interactor_service.js
+++ b/src/services/backend_interactor_service/backend_interactor_service.js
@@ -143,6 +143,7 @@ const backendInteractorService = credentials => {
 
   const fetchFavoritedByUsers = (id) => apiService.fetchFavoritedByUsers({ id })
   const fetchRebloggedByUsers = (id) => apiService.fetchRebloggedByUsers({ id })
+  const fetchEmojiReactions = (id) => apiService.fetchEmojiReactions({ id })
   const reportUser = (params) => apiService.reportUser({ credentials, ...params })
 
   const favorite = (id) => apiService.favorite({ id, credentials })
@@ -210,6 +211,7 @@ const backendInteractorService = credentials => {
     fetchPoll,
     fetchFavoritedByUsers,
     fetchRebloggedByUsers,
+    fetchEmojiReactions,
     reportUser,
     favorite,
     unfavorite,
-- 
cgit v1.2.3-70-g09d2


From de945ba3e9470b28dd010fb32f658b42053f19d3 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shpuld@shpposter.club>
Date: Fri, 15 Nov 2019 16:29:25 +0200
Subject: wip commit, add basic popover for emoji reaction select

---
 src/components/react_button/react_button.js  | 50 ++++++++++++++++++
 src/components/react_button/react_button.vue | 78 ++++++++++++++++++++++++++++
 src/components/status/status.js              |  2 +
 src/components/status/status.vue             | 10 ++--
 src/i18n/en.json                             |  1 +
 5 files changed, 138 insertions(+), 3 deletions(-)
 create mode 100644 src/components/react_button/react_button.js
 create mode 100644 src/components/react_button/react_button.vue

(limited to 'src/components')

diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js
new file mode 100644
index 00000000..d1d15d93
--- /dev/null
+++ b/src/components/react_button/react_button.js
@@ -0,0 +1,50 @@
+import { mapGetters } from 'vuex'
+
+const ReactButton = {
+  props: ['status', 'loggedIn'],
+  data () {
+    return {
+      animated: false,
+      showTooltip: false,
+      popperOptions: {
+        modifiers: {
+          preventOverflow: { padding: { top: 50 }, boundariesElement: 'viewport' }
+        }
+      }
+    }
+  },
+  methods: {
+    openReactionSelect () {
+      console.log('test')
+      this.showTooltip = true
+    },
+    closeReactionSelect () {
+      this.showTooltip = false
+    },
+    favorite () {
+      if (!this.status.favorited) {
+        this.$store.dispatch('favorite', { id: this.status.id })
+      } else {
+        this.$store.dispatch('unfavorite', { id: this.status.id })
+      }
+      this.animated = true
+      setTimeout(() => {
+        this.animated = false
+      }, 500)
+    }
+  },
+  computed: {
+    emojis () {
+      return this.$store.state.instance.emoji || []
+    },
+    classes () {
+      return {
+        'icon-smile': true,
+        'animate-spin': this.animated
+      }
+    },
+    ...mapGetters(['mergedConfig'])
+  }
+}
+
+export default ReactButton
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
new file mode 100644
index 00000000..93638770
--- /dev/null
+++ b/src/components/react_button/react_button.vue
@@ -0,0 +1,78 @@
+<template>
+  <v-popover
+    :popper-options="popperOptions"
+    :open="showTooltip"
+    trigger="manual"
+    placement="top"
+    class="react-button-popover"
+    @close-group="closeReactionSelect"
+  >
+    <div slot="popover">
+      <div class="reaction-picker">
+        <span
+          v-for="(emoji, key) in emojis"
+          :key="key"
+          class="emoji-reaction-button"
+        >
+          {{ emoji.replacement }}
+        </span>
+        <div class="reaction-bottom-fader" />
+      </div>
+    </div>
+    <div @click.prevent="openReactionSelect" v-if="loggedIn">
+      <i
+        :class="classes"
+        class="button-icon favorite-button fav-active"
+        :title="$t('tool_tip.add_reaction')"
+      />
+      <span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span>
+    </div>
+  </v-popover>
+</template>
+
+<script src="./react_button.js" ></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.reaction-picker {
+  width: 10em;
+  height: 8em;
+  font-size: 1.5em;
+  overflow-y: scroll;
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0.5em;
+  text-align:center;
+
+  mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
+    linear-gradient(to bottom, white 0, transparent 100%) top no-repeat,
+    linear-gradient(to top, white, white);
+  transition: mask-size 150ms;
+  mask-size: 100% 20px, 100% 20px, auto;
+  // Autoprefixed seem to ignore this one, and also syntax is different
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+}
+
+.emoji-reaction-button {
+  flex-basis: 20%;
+  line-height: 1.5em;
+  align-content: center;
+}
+
+.fav-active {
+  cursor: pointer;
+  animation-duration: 0.6s;
+
+  &:hover {
+    color: $fallback--cOrange;
+    color: var(--cOrange, $fallback--cOrange);
+  }
+}
+
+.favorite-button.icon-star {
+  color: $fallback--cOrange;
+  color: var(--cOrange, $fallback--cOrange);
+}
+</style>
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 8268e615..8c6fc0cf 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -1,5 +1,6 @@
 import Attachment from '../attachment/attachment.vue'
 import FavoriteButton from '../favorite_button/favorite_button.vue'
+import ReactButton from '../react_button/react_button.vue'
 import RetweetButton from '../retweet_button/retweet_button.vue'
 import Poll from '../poll/poll.vue'
 import ExtraButtons from '../extra_buttons/extra_buttons.vue'
@@ -289,6 +290,7 @@ const Status = {
   components: {
     Attachment,
     FavoriteButton,
+    ReactButton,
     RetweetButton,
     ExtraButtons,
     PostStatusForm,
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index aae58a5e..d455ccf6 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -356,12 +356,12 @@
 
           <div class="emoji-reactions">
             <button
-              class="emoji-reaction btn btn-default"
               v-for="(users, emoji) in emojiReactions"
               :key="emoji"
+              class="emoji-reaction btn btn-default"
             >
-              <span>{{users.length}}</span>
-              <span>{{emoji}}</span>
+              <span>{{ users.length }}</span>
+              <span>{{ emoji }}</span>
             </button>
           </div>
 
@@ -393,6 +393,10 @@
               :logged-in="loggedIn"
               :status="status"
             />
+            <ReactButton
+              :logged-in="loggedIn"
+              :status="status"
+            />
             <extra-buttons
               :status="status"
               @onError="showError"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index ad3e671d..febbf2ea 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -632,6 +632,7 @@
     "repeat": "Repeat",
     "reply": "Reply",
     "favorite": "Favorite",
+    "add_reaction": "Add Reaction",
     "user_settings": "User Settings"
   },
   "upload":{
-- 
cgit v1.2.3-70-g09d2


From ddb6fb9217789e90490a4ec1ce7a2dd9ced67631 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 24 Nov 2019 13:57:46 +0200
Subject: Backend Interactor service overhaul, removed the need for copypasting

---
 .../follow_request_card/follow_request_card.js     |   4 +-
 .../moderation_tools/moderation_tools.js           |  16 +-
 .../user_reporting_modal/user_reporting_modal.js   |   2 +-
 src/components/user_settings/user_settings.js      |   8 +-
 src/modules/oauth_tokens.js                        |   2 +-
 src/modules/polls.js                               |   4 +-
 src/modules/statuses.js                            |  26 +--
 src/modules/users.js                               |  16 +-
 .../backend_interactor_service.js                  | 231 ++-------------------
 .../follow_manipulate/follow_manipulate.js         |   2 +-
 10 files changed, 55 insertions(+), 256 deletions(-)

(limited to 'src/components')

diff --git a/src/components/follow_request_card/follow_request_card.js b/src/components/follow_request_card/follow_request_card.js
index 1a00a1c1..a8931787 100644
--- a/src/components/follow_request_card/follow_request_card.js
+++ b/src/components/follow_request_card/follow_request_card.js
@@ -7,11 +7,11 @@ const FollowRequestCard = {
   },
   methods: {
     approveUser () {
-      this.$store.state.api.backendInteractor.approveUser(this.user.id)
+      this.$store.state.api.backendInteractor.approveUser({ id: this.user.id })
       this.$store.dispatch('removeFollowRequest', this.user)
     },
     denyUser () {
-      this.$store.state.api.backendInteractor.denyUser(this.user.id)
+      this.$store.state.api.backendInteractor.denyUser({ id: this.user.id })
       this.$store.dispatch('removeFollowRequest', this.user)
     }
   }
diff --git a/src/components/moderation_tools/moderation_tools.js b/src/components/moderation_tools/moderation_tools.js
index 8aadc8c5..5bb76497 100644
--- a/src/components/moderation_tools/moderation_tools.js
+++ b/src/components/moderation_tools/moderation_tools.js
@@ -45,12 +45,12 @@ const ModerationTools = {
     toggleTag (tag) {
       const store = this.$store
       if (this.tagsSet.has(tag)) {
-        store.state.api.backendInteractor.untagUser(this.user, tag).then(response => {
+        store.state.api.backendInteractor.untagUser({ user: this.user, tag }).then(response => {
           if (!response.ok) { return }
           store.commit('untagUser', { user: this.user, tag })
         })
       } else {
-        store.state.api.backendInteractor.tagUser(this.user, tag).then(response => {
+        store.state.api.backendInteractor.tagUser({ user: this.user, tag }).then(response => {
           if (!response.ok) { return }
           store.commit('tagUser', { user: this.user, tag })
         })
@@ -59,21 +59,21 @@ const ModerationTools = {
     toggleRight (right) {
       const store = this.$store
       if (this.user.rights[right]) {
-        store.state.api.backendInteractor.deleteRight(this.user, right).then(response => {
+        store.state.api.backendInteractor.deleteRight({ user: this.user, right }).then(response => {
           if (!response.ok) { return }
-          store.commit('updateRight', { user: this.user, right: right, value: false })
+          store.commit('updateRight', { user: this.user, right, value: false })
         })
       } else {
-        store.state.api.backendInteractor.addRight(this.user, right).then(response => {
+        store.state.api.backendInteractor.addRight({ user: this.user, right }).then(response => {
           if (!response.ok) { return }
-          store.commit('updateRight', { user: this.user, right: right, value: true })
+          store.commit('updateRight', { user: this.user, right, value: true })
         })
       }
     },
     toggleActivationStatus () {
       const store = this.$store
       const status = !!this.user.deactivated
-      store.state.api.backendInteractor.setActivationStatus(this.user, status).then(response => {
+      store.state.api.backendInteractor.setActivationStatus({ user: this.user, status }).then(response => {
         if (!response.ok) { return }
         store.commit('updateActivationStatus', { user: this.user, status: status })
       })
@@ -85,7 +85,7 @@ const ModerationTools = {
       const store = this.$store
       const user = this.user
       const { id, name } = user
-      store.state.api.backendInteractor.deleteUser(user)
+      store.state.api.backendInteractor.deleteUser({ user })
         .then(e => {
           this.$store.dispatch('markStatusesAsDeleted', status => user.id === status.user.id)
           const isProfile = this.$route.name === 'external-user-profile' || this.$route.name === 'user-profile'
diff --git a/src/components/user_reporting_modal/user_reporting_modal.js b/src/components/user_reporting_modal/user_reporting_modal.js
index 833fa98a..38cf117b 100644
--- a/src/components/user_reporting_modal/user_reporting_modal.js
+++ b/src/components/user_reporting_modal/user_reporting_modal.js
@@ -64,7 +64,7 @@ const UserReportingModal = {
         forward: this.forward,
         statusIds: this.statusIdsToReport
       }
-      this.$store.state.api.backendInteractor.reportUser(params)
+      this.$store.state.api.backendInteractor.reportUser({ ...params })
         .then(() => {
           this.processing = false
           this.resetState()
diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index 3fdc5340..d5d671e4 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -242,7 +242,7 @@ const UserSettings = {
       })
     },
     importFollows (file) {
-      return this.$store.state.api.backendInteractor.importFollows(file)
+      return this.$store.state.api.backendInteractor.importFollows({ file })
         .then((status) => {
           if (!status) {
             throw new Error('failed')
@@ -250,7 +250,7 @@ const UserSettings = {
         })
     },
     importBlocks (file) {
-      return this.$store.state.api.backendInteractor.importBlocks(file)
+      return this.$store.state.api.backendInteractor.importBlocks({ file })
         .then((status) => {
           if (!status) {
             throw new Error('failed')
@@ -297,7 +297,7 @@ const UserSettings = {
         newPassword: this.changePasswordInputs[1],
         newPasswordConfirmation: this.changePasswordInputs[2]
       }
-      this.$store.state.api.backendInteractor.changePassword(params)
+      this.$store.state.api.backendInteractor.changePassword({ params })
         .then((res) => {
           if (res.status === 'success') {
             this.changedPassword = true
@@ -314,7 +314,7 @@ const UserSettings = {
         email: this.newEmail,
         password: this.changeEmailPassword
       }
-      this.$store.state.api.backendInteractor.changeEmail(params)
+      this.$store.state.api.backendInteractor.changeEmail({ params })
         .then((res) => {
           if (res.status === 'success') {
             this.changedEmail = true
diff --git a/src/modules/oauth_tokens.js b/src/modules/oauth_tokens.js
index 0159a3f1..907cae4a 100644
--- a/src/modules/oauth_tokens.js
+++ b/src/modules/oauth_tokens.js
@@ -9,7 +9,7 @@ const oauthTokens = {
       })
     },
     revokeToken ({ rootState, commit, state }, id) {
-      rootState.api.backendInteractor.revokeOAuthToken(id).then((response) => {
+      rootState.api.backendInteractor.revokeOAuthToken({ id }).then((response) => {
         if (response.status === 201) {
           commit('swapTokens', state.tokens.filter(token => token.id !== id))
         }
diff --git a/src/modules/polls.js b/src/modules/polls.js
index e6158b63..92b89a06 100644
--- a/src/modules/polls.js
+++ b/src/modules/polls.js
@@ -40,7 +40,7 @@ const polls = {
       commit('mergeOrAddPoll', poll)
     },
     updateTrackedPoll ({ rootState, dispatch, commit }, pollId) {
-      rootState.api.backendInteractor.fetchPoll(pollId).then(poll => {
+      rootState.api.backendInteractor.fetchPoll({ pollId }).then(poll => {
         setTimeout(() => {
           if (rootState.polls.trackedPolls[pollId]) {
             dispatch('updateTrackedPoll', pollId)
@@ -59,7 +59,7 @@ const polls = {
       commit('untrackPoll', pollId)
     },
     votePoll ({ rootState, commit }, { id, pollId, choices }) {
-      return rootState.api.backendInteractor.vote(pollId, choices).then(poll => {
+      return rootState.api.backendInteractor.vote({ pollId, choices }).then(poll => {
         commit('mergeOrAddPoll', poll)
         return poll
       })
diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index f11ffdcd..6a743a4a 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -551,45 +551,45 @@ const statuses = {
     favorite ({ rootState, commit }, status) {
       // Optimistic favoriting...
       commit('setFavorited', { status, value: true })
-      rootState.api.backendInteractor.favorite(status.id)
+      rootState.api.backendInteractor.favorite({ id: status.id })
         .then(status => commit('setFavoritedConfirm', { status, user: rootState.users.currentUser }))
     },
     unfavorite ({ rootState, commit }, status) {
       // Optimistic unfavoriting...
       commit('setFavorited', { status, value: false })
-      rootState.api.backendInteractor.unfavorite(status.id)
+      rootState.api.backendInteractor.unfavorite({ id: status.id })
         .then(status => commit('setFavoritedConfirm', { status, user: rootState.users.currentUser }))
     },
     fetchPinnedStatuses ({ rootState, dispatch }, userId) {
-      rootState.api.backendInteractor.fetchPinnedStatuses(userId)
+      rootState.api.backendInteractor.fetchPinnedStatuses({ id: userId })
         .then(statuses => dispatch('addNewStatuses', { statuses, timeline: 'user', userId, showImmediately: true, noIdUpdate: true }))
     },
     pinStatus ({ rootState, dispatch }, statusId) {
-      return rootState.api.backendInteractor.pinOwnStatus(statusId)
+      return rootState.api.backendInteractor.pinOwnStatus({ id: statusId })
         .then((status) => dispatch('addNewStatuses', { statuses: [status] }))
     },
     unpinStatus ({ rootState, dispatch }, statusId) {
-      rootState.api.backendInteractor.unpinOwnStatus(statusId)
+      rootState.api.backendInteractor.unpinOwnStatus({ id: statusId })
         .then((status) => dispatch('addNewStatuses', { statuses: [status] }))
     },
     muteConversation ({ rootState, commit }, statusId) {
-      return rootState.api.backendInteractor.muteConversation(statusId)
+      return rootState.api.backendInteractor.muteConversation({ id: statusId })
         .then((status) => commit('setMutedStatus', status))
     },
     unmuteConversation ({ rootState, commit }, statusId) {
-      return rootState.api.backendInteractor.unmuteConversation(statusId)
+      return rootState.api.backendInteractor.unmuteConversation({ id: statusId })
         .then((status) => commit('setMutedStatus', status))
     },
     retweet ({ rootState, commit }, status) {
       // Optimistic retweeting...
       commit('setRetweeted', { status, value: true })
-      rootState.api.backendInteractor.retweet(status.id)
+      rootState.api.backendInteractor.retweet({ id: status.id })
         .then(status => commit('setRetweetedConfirm', { status: status.retweeted_status, user: rootState.users.currentUser }))
     },
     unretweet ({ rootState, commit }, status) {
       // Optimistic unretweeting...
       commit('setRetweeted', { status, value: false })
-      rootState.api.backendInteractor.unretweet(status.id)
+      rootState.api.backendInteractor.unretweet({ id: status.id })
         .then(status => commit('setRetweetedConfirm', { status, user: rootState.users.currentUser }))
     },
     queueFlush ({ rootState, commit }, { timeline, id }) {
@@ -604,19 +604,19 @@ const statuses = {
     },
     fetchFavsAndRepeats ({ rootState, commit }, id) {
       Promise.all([
-        rootState.api.backendInteractor.fetchFavoritedByUsers(id),
-        rootState.api.backendInteractor.fetchRebloggedByUsers(id)
+        rootState.api.backendInteractor.fetchFavoritedByUsers({ id }),
+        rootState.api.backendInteractor.fetchRebloggedByUsers({ id })
       ]).then(([favoritedByUsers, rebloggedByUsers]) => {
         commit('addFavs', { id, favoritedByUsers, currentUser: rootState.users.currentUser })
         commit('addRepeats', { id, rebloggedByUsers, currentUser: rootState.users.currentUser })
       })
     },
     fetchFavs ({ rootState, commit }, id) {
-      rootState.api.backendInteractor.fetchFavoritedByUsers(id)
+      rootState.api.backendInteractor.fetchFavoritedByUsers({ id })
         .then(favoritedByUsers => commit('addFavs', { id, favoritedByUsers, currentUser: rootState.users.currentUser }))
     },
     fetchRepeats ({ rootState, commit }, id) {
-      rootState.api.backendInteractor.fetchRebloggedByUsers(id)
+      rootState.api.backendInteractor.fetchRebloggedByUsers({ id })
         .then(rebloggedByUsers => commit('addRepeats', { id, rebloggedByUsers, currentUser: rootState.users.currentUser }))
     },
     search (store, { q, resolve, limit, offset, following }) {
diff --git a/src/modules/users.js b/src/modules/users.js
index 14b2d8b5..e1373220 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -32,7 +32,7 @@ const getNotificationPermission = () => {
 }
 
 const blockUser = (store, id) => {
-  return store.rootState.api.backendInteractor.blockUser(id)
+  return store.rootState.api.backendInteractor.blockUser({ id })
     .then((relationship) => {
       store.commit('updateUserRelationship', [relationship])
       store.commit('addBlockId', id)
@@ -43,12 +43,12 @@ const blockUser = (store, id) => {
 }
 
 const unblockUser = (store, id) => {
-  return store.rootState.api.backendInteractor.unblockUser(id)
+  return store.rootState.api.backendInteractor.unblockUser({ id })
     .then((relationship) => store.commit('updateUserRelationship', [relationship]))
 }
 
 const muteUser = (store, id) => {
-  return store.rootState.api.backendInteractor.muteUser(id)
+  return store.rootState.api.backendInteractor.muteUser({ id })
     .then((relationship) => {
       store.commit('updateUserRelationship', [relationship])
       store.commit('addMuteId', id)
@@ -56,7 +56,7 @@ const muteUser = (store, id) => {
 }
 
 const unmuteUser = (store, id) => {
-  return store.rootState.api.backendInteractor.unmuteUser(id)
+  return store.rootState.api.backendInteractor.unmuteUser({ id })
     .then((relationship) => store.commit('updateUserRelationship', [relationship]))
 }
 
@@ -324,11 +324,11 @@ const users = {
       commit('clearFollowers', userId)
     },
     subscribeUser ({ rootState, commit }, id) {
-      return rootState.api.backendInteractor.subscribeUser(id)
+      return rootState.api.backendInteractor.subscribeUser({ id })
         .then((relationship) => commit('updateUserRelationship', [relationship]))
     },
     unsubscribeUser ({ rootState, commit }, id) {
-      return rootState.api.backendInteractor.unsubscribeUser(id)
+      return rootState.api.backendInteractor.unsubscribeUser({ id })
         .then((relationship) => commit('updateUserRelationship', [relationship]))
     },
     registerPushNotifications (store) {
@@ -382,7 +382,7 @@ const users = {
       })
     },
     searchUsers (store, query) {
-      return store.rootState.api.backendInteractor.searchUsers(query)
+      return store.rootState.api.backendInteractor.searchUsers({ query })
         .then((users) => {
           store.commit('addNewUsers', users)
           return users
@@ -394,7 +394,7 @@ const users = {
       let rootState = store.rootState
 
       try {
-        let data = await rootState.api.backendInteractor.register(userInfo)
+        let data = await rootState.api.backendInteractor.register({ ...userInfo })
         store.commit('signUpSuccess')
         store.commit('setToken', data.access_token)
         store.dispatch('loginUser', data.access_token)
diff --git a/src/services/backend_interactor_service/backend_interactor_service.js b/src/services/backend_interactor_service/backend_interactor_service.js
index c16bd1f1..57fdccde 100644
--- a/src/services/backend_interactor_service/backend_interactor_service.js
+++ b/src/services/backend_interactor_service/backend_interactor_service.js
@@ -3,228 +3,27 @@ import timelineFetcherService from '../timeline_fetcher/timeline_fetcher.service
 import notificationsFetcher from '../notifications_fetcher/notifications_fetcher.service.js'
 import followRequestFetcher from '../../services/follow_request_fetcher/follow_request_fetcher.service'
 
-const backendInteractorService = credentials => {
-  const fetchStatus = ({ id }) => {
-    return apiService.fetchStatus({ id, credentials })
-  }
-
-  const fetchConversation = ({ id }) => {
-    return apiService.fetchConversation({ id, credentials })
-  }
-
-  const fetchFriends = ({ id, maxId, sinceId, limit }) => {
-    return apiService.fetchFriends({ id, maxId, sinceId, limit, credentials })
-  }
-
-  const exportFriends = ({ id }) => {
-    return apiService.exportFriends({ id, credentials })
-  }
-
-  const fetchFollowers = ({ id, maxId, sinceId, limit }) => {
-    return apiService.fetchFollowers({ id, maxId, sinceId, limit, credentials })
-  }
-
-  const fetchUser = ({ id }) => {
-    return apiService.fetchUser({ id, credentials })
-  }
-
-  const fetchUserRelationship = ({ id }) => {
-    return apiService.fetchUserRelationship({ id, credentials })
-  }
-
-  const followUser = ({ id, reblogs }) => {
-    return apiService.followUser({ credentials, id, reblogs })
-  }
-
-  const unfollowUser = (id) => {
-    return apiService.unfollowUser({ credentials, id })
-  }
-
-  const blockUser = (id) => {
-    return apiService.blockUser({ credentials, id })
-  }
-
-  const unblockUser = (id) => {
-    return apiService.unblockUser({ credentials, id })
-  }
-
-  const approveUser = (id) => {
-    return apiService.approveUser({ credentials, id })
-  }
-
-  const denyUser = (id) => {
-    return apiService.denyUser({ credentials, id })
-  }
-
-  const startFetchingTimeline = ({ timeline, store, userId = false, tag }) => {
+const backendInteractorService = credentials => ({
+  startFetchingTimeline ({ timeline, store, userId = false, tag }) {
     return timelineFetcherService.startFetching({ timeline, store, credentials, userId, tag })
-  }
+  },
 
-  const startFetchingNotifications = ({ store }) => {
+  startFetchingNotifications ({ store }) {
     return notificationsFetcher.startFetching({ store, credentials })
-  }
+  },
 
-  const startFetchingFollowRequest = ({ store }) => {
+  startFetchingFollowRequest ({ store }) {
     return followRequestFetcher.startFetching({ store, credentials })
-  }
-
-  // eslint-disable-next-line camelcase
-  const tagUser = ({ screen_name }, tag) => {
-    return apiService.tagUser({ screen_name, tag, credentials })
-  }
-
-  // eslint-disable-next-line camelcase
-  const untagUser = ({ screen_name }, tag) => {
-    return apiService.untagUser({ screen_name, tag, credentials })
-  }
-
-  // eslint-disable-next-line camelcase
-  const addRight = ({ screen_name }, right) => {
-    return apiService.addRight({ screen_name, right, credentials })
-  }
-
-  // eslint-disable-next-line camelcase
-  const deleteRight = ({ screen_name }, right) => {
-    return apiService.deleteRight({ screen_name, right, credentials })
-  }
-
-  // eslint-disable-next-line camelcase
-  const setActivationStatus = ({ screen_name }, status) => {
-    return apiService.setActivationStatus({ screen_name, status, credentials })
-  }
-
-  // eslint-disable-next-line camelcase
-  const deleteUser = ({ screen_name }) => {
-    return apiService.deleteUser({ screen_name, credentials })
-  }
-
-  const vote = (pollId, choices) => {
-    return apiService.vote({ credentials, pollId, choices })
-  }
-
-  const fetchPoll = (pollId) => {
-    return apiService.fetchPoll({ credentials, pollId })
-  }
-
-  const updateNotificationSettings = ({ settings }) => {
-    return apiService.updateNotificationSettings({ credentials, settings })
-  }
-
-  const fetchMutes = () => apiService.fetchMutes({ credentials })
-  const muteUser = (id) => apiService.muteUser({ credentials, id })
-  const unmuteUser = (id) => apiService.unmuteUser({ credentials, id })
-  const subscribeUser = (id) => apiService.subscribeUser({ credentials, id })
-  const unsubscribeUser = (id) => apiService.unsubscribeUser({ credentials, id })
-  const fetchBlocks = () => apiService.fetchBlocks({ credentials })
-  const fetchOAuthTokens = () => apiService.fetchOAuthTokens({ credentials })
-  const revokeOAuthToken = (id) => apiService.revokeOAuthToken({ id, credentials })
-  const fetchPinnedStatuses = (id) => apiService.fetchPinnedStatuses({ credentials, id })
-  const pinOwnStatus = (id) => apiService.pinOwnStatus({ credentials, id })
-  const unpinOwnStatus = (id) => apiService.unpinOwnStatus({ credentials, id })
-  const muteConversation = (id) => apiService.muteConversation({ credentials, id })
-  const unmuteConversation = (id) => apiService.unmuteConversation({ credentials, id })
-
-  const getCaptcha = () => apiService.getCaptcha()
-  const register = (params) => apiService.register({ credentials, params })
-  const updateAvatar = ({ avatar }) => apiService.updateAvatar({ credentials, avatar })
-  const updateBg = ({ background }) => apiService.updateBg({ credentials, background })
-  const updateBanner = ({ banner }) => apiService.updateBanner({ credentials, banner })
-  const updateProfile = ({ params }) => apiService.updateProfile({ credentials, params })
-
-  const importBlocks = (file) => apiService.importBlocks({ file, credentials })
-  const importFollows = (file) => apiService.importFollows({ file, credentials })
-
-  const deleteAccount = ({ password }) => apiService.deleteAccount({ credentials, password })
-  const changeEmail = ({ email, password }) => apiService.changeEmail({ credentials, email, password })
-  const changePassword = ({ password, newPassword, newPasswordConfirmation }) =>
-    apiService.changePassword({ credentials, password, newPassword, newPasswordConfirmation })
-
-  const fetchSettingsMFA = () => apiService.settingsMFA({ credentials })
-  const generateMfaBackupCodes = () => apiService.generateMfaBackupCodes({ credentials })
-  const mfaSetupOTP = () => apiService.mfaSetupOTP({ credentials })
-  const mfaConfirmOTP = ({ password, token }) => apiService.mfaConfirmOTP({ credentials, password, token })
-  const mfaDisableOTP = ({ password }) => apiService.mfaDisableOTP({ credentials, password })
-
-  const fetchFavoritedByUsers = (id) => apiService.fetchFavoritedByUsers({ id })
-  const fetchRebloggedByUsers = (id) => apiService.fetchRebloggedByUsers({ id })
-  const reportUser = (params) => apiService.reportUser({ credentials, ...params })
-
-  const favorite = (id) => apiService.favorite({ id, credentials })
-  const unfavorite = (id) => apiService.unfavorite({ id, credentials })
-  const retweet = (id) => apiService.retweet({ id, credentials })
-  const unretweet = (id) => apiService.unretweet({ id, credentials })
-  const search2 = ({ q, resolve, limit, offset, following }) =>
-    apiService.search2({ credentials, q, resolve, limit, offset, following })
-  const searchUsers = (query) => apiService.searchUsers({ query, credentials })
+  },
 
-  const backendInteractorServiceInstance = {
-    fetchStatus,
-    fetchConversation,
-    fetchFriends,
-    exportFriends,
-    fetchFollowers,
-    followUser,
-    unfollowUser,
-    blockUser,
-    unblockUser,
-    fetchUser,
-    fetchUserRelationship,
-    verifyCredentials: apiService.verifyCredentials,
-    startFetchingTimeline,
-    startFetchingNotifications,
-    startFetchingFollowRequest,
-    fetchMutes,
-    muteUser,
-    unmuteUser,
-    subscribeUser,
-    unsubscribeUser,
-    fetchBlocks,
-    fetchOAuthTokens,
-    revokeOAuthToken,
-    fetchPinnedStatuses,
-    pinOwnStatus,
-    unpinOwnStatus,
-    muteConversation,
-    unmuteConversation,
-    tagUser,
-    untagUser,
-    addRight,
-    deleteRight,
-    deleteUser,
-    setActivationStatus,
-    register,
-    getCaptcha,
-    updateAvatar,
-    updateBg,
-    updateBanner,
-    updateProfile,
-    importBlocks,
-    importFollows,
-    deleteAccount,
-    changeEmail,
-    changePassword,
-    fetchSettingsMFA,
-    generateMfaBackupCodes,
-    mfaSetupOTP,
-    mfaConfirmOTP,
-    mfaDisableOTP,
-    approveUser,
-    denyUser,
-    vote,
-    fetchPoll,
-    fetchFavoritedByUsers,
-    fetchRebloggedByUsers,
-    reportUser,
-    favorite,
-    unfavorite,
-    retweet,
-    unretweet,
-    updateNotificationSettings,
-    search2,
-    searchUsers
-  }
+  ...Object.entries(apiService).reduce((acc, [key, func]) => {
+    return {
+      ...acc,
+      [key]: (args) => func({ credentials, ...args })
+    }
+  }, {}),
 
-  return backendInteractorServiceInstance
-}
+  verifyCredentials: apiService.verifyCredentials
+})
 
 export default backendInteractorService
diff --git a/src/services/follow_manipulate/follow_manipulate.js b/src/services/follow_manipulate/follow_manipulate.js
index 598cb5f7..29b38a0f 100644
--- a/src/services/follow_manipulate/follow_manipulate.js
+++ b/src/services/follow_manipulate/follow_manipulate.js
@@ -39,7 +39,7 @@ export const requestFollow = (user, store) => new Promise((resolve, reject) => {
 })
 
 export const requestUnfollow = (user, store) => new Promise((resolve, reject) => {
-  store.state.api.backendInteractor.unfollowUser(user.id)
+  store.state.api.backendInteractor.unfollowUser({ id: user.id })
     .then((updated) => {
       store.commit('updateUserRelationship', [updated])
       resolve({
-- 
cgit v1.2.3-70-g09d2


From 172ebaf4e67358852bfaafd8f069763ca5e602b1 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 24 Nov 2019 22:01:12 +0200
Subject: improved initial notifications fetching

---
 src/components/notifications/notifications.js      |  5 +++++
 src/modules/api.js                                 | 23 +++++++++++++++++++---
 src/modules/users.js                               |  2 +-
 .../backend_interactor_service.js                  |  9 +++++++--
 4 files changed, 33 insertions(+), 6 deletions(-)

(limited to 'src/components')

diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index 6c4054fd..a89c0cdc 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -47,6 +47,11 @@ const Notifications = {
   components: {
     Notification
   },
+  created () {
+    const { dispatch } = this.$store
+
+    dispatch('fetchAndUpdateNotifications')
+  },
   watch: {
     unseenCount (count) {
       if (count > 0) {
diff --git a/src/modules/api.js b/src/modules/api.js
index 1bf65db5..0e7e5e19 100644
--- a/src/modules/api.js
+++ b/src/modules/api.js
@@ -31,18 +31,32 @@ const api = {
   },
   actions: {
     startMastoSocket (store) {
-      store.state.mastoSocket = store.state.backendInteractor
+      const { state, dispatch } = store
+      state.mastoSocket = state.backendInteractor
         .startUserSocket({
           store,
           onMessage: (message) => {
             if (!message) return
             if (message.event === 'notification') {
-              store.dispatch('addNewNotifications', { notifications: [message.notification], older: false })
+              dispatch('addNewNotifications', {
+                notifications: [message.notification],
+                older: false
+              })
             } else if (message.event === 'update') {
-              store.dispatch('addNewStatuses', { statuses: [message.status], userId: false, showImmediately: false, timeline: 'friends' })
+              dispatch('addNewStatuses', {
+                statuses: [message.status],
+                userId: false,
+                showImmediately: false,
+                timeline: 'friends'
+              })
             }
           }
         })
+      state.mastoSocket.addEventListener('error', error => {
+        console.error('Error with MastoAPI websocket:', error)
+        dispatch('startFetchingTimeline', { timeline: 'friends' })
+        dispatch('startFetchingNotifications')
+      })
     },
     startFetchingTimeline (store, { timeline = 'friends', tag = false, userId = false }) {
       // Don't start fetching if we already are.
@@ -58,6 +72,9 @@ const api = {
       const fetcher = store.state.backendInteractor.startFetchingNotifications({ store })
       store.commit('addFetcher', { fetcherName: 'notifications', fetcher })
     },
+    fetchAndUpdateNotifications (store) {
+      store.state.backendInteractor.fetchAndUpdateNotifications({ store })
+    },
     startFetchingFollowRequest (store) {
       // Don't start fetching if we already are.
       if (store.state.fetchers['followRequest']) return
diff --git a/src/modules/users.js b/src/modules/users.js
index 861a2f4f..eff0c5d5 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -470,7 +470,7 @@ const users = {
               }
 
               store.dispatch('startMastoSocket').catch((error) => {
-                console.error(error)
+                console.error('Failed initializing MastoAPI Streaming socket', error)
                 // Start getting fresh posts.
                 store.dispatch('startFetchingTimeline', { timeline: 'friends' })
 
diff --git a/src/services/backend_interactor_service/backend_interactor_service.js b/src/services/backend_interactor_service/backend_interactor_service.js
index 0cef4640..850b7867 100644
--- a/src/services/backend_interactor_service/backend_interactor_service.js
+++ b/src/services/backend_interactor_service/backend_interactor_service.js
@@ -12,18 +12,23 @@ const backendInteractorService = credentials => ({
     return notificationsFetcher.startFetching({ store, credentials })
   },
 
+  fetchAndUpdateNotifications ({ store }) {
+    return notificationsFetcher.fetchAndUpdate({ store, credentials })
+  },
+
   startFetchingFollowRequest ({ store }) {
     return followRequestFetcher.startFetching({ store, credentials })
   },
 
   startUserSocket ({ store, onMessage }) {
-    const serv = store.rootState.instance.server.replace('https', 'wss')
-    // const serb = 'ws://localhost:8080/'
+    const serv = store.rootState.instance.server.replace('http', 'ws')
     const url = serv + getMastodonSocketURI({ credentials, stream: 'user' })
     const socket = new WebSocket(url)
     console.log(socket)
     if (socket) {
       socket.addEventListener('message', (wsEvent) => onMessage(handleMastoWS(wsEvent)))
+      socket.addEventListener('error', (error) => console.error('WebSocket Error:', error))
+      return socket
     } else {
       throw new Error('failed to connect to socket')
     }
-- 
cgit v1.2.3-70-g09d2


From 40e774e05abfce6da3c558c09ce1750c132a580f Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Mon, 25 Nov 2019 12:25:01 -0500
Subject: restore muted users collapsing logic on other user’s profiles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/conversation/conversation.js  | 3 ++-
 src/components/conversation/conversation.vue | 1 +
 src/components/status/status.js              | 5 +++--
 src/components/timeline/timeline.vue         | 2 ++
 4 files changed, 8 insertions(+), 3 deletions(-)

(limited to 'src/components')

diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index 72ee9c39..08283fff 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -43,7 +43,8 @@ const conversation = {
     'collapsable',
     'isPage',
     'pinnedStatusIdsObject',
-    'inProfile'
+    'inProfile',
+    'profileUserId'
   ],
   created () {
     if (this.isPage) {
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 0f1de55f..2e48240a 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -27,6 +27,7 @@
       :highlight="getHighlight()"
       :replies="getReplies(status.id)"
       :in-profile="inProfile"
+      :profile-user-id="profileUserId"
       class="status-fadein panel-body"
       @goto="setHighlight"
       @toggleExpanded="toggleExpanded"
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 714ea6d2..c49e729c 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -33,7 +33,8 @@ const Status = {
     'noHeading',
     'inlineExpanded',
     'showPinned',
-    'inProfile'
+    'inProfile',
+    'profileUserId'
   ],
   data () {
     return {
@@ -115,7 +116,7 @@ const Status = {
 
       return hits
     },
-    muted () { return !this.unmuted && ((!this.inProfile && this.status.user.muted) || (!this.inConversation && this.status.thread_muted) || this.muteWordHits.length > 0) },
+    muted () { return !this.unmuted && ((!(this.inProfile && this.status.user.id === this.profileUserId) && this.status.user.muted) || (!this.inConversation && this.status.thread_muted) || this.muteWordHits.length > 0) },
     hideFilteredStatuses () {
       return this.mergedConfig.hideFilteredStatuses
     },
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index f1d3903a..93f6f570 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -37,6 +37,7 @@
             :collapsable="true"
             :pinned-status-ids-object="pinnedStatusIdsObject"
             :in-profile="inProfile"
+            :profile-user-id="userId"
           />
         </template>
         <template v-for="status in timeline.visibleStatuses">
@@ -47,6 +48,7 @@
             :status-id="status.id"
             :collapsable="true"
             :in-profile="inProfile"
+            :profile-user-id="userId"
           />
         </template>
       </div>
-- 
cgit v1.2.3-70-g09d2


From 7ebf3602d5d9a8630ffbe239bfe4431655046821 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Tue, 26 Nov 2019 19:57:27 -0500
Subject: move mention button right next to mute button

---
 src/components/account_actions/account_actions.js  |  3 ---
 src/components/account_actions/account_actions.vue | 18 ++++--------------
 src/components/user_card/user_card.js              |  3 +++
 src/components/user_card/user_card.vue             |  8 ++++++++
 4 files changed, 15 insertions(+), 17 deletions(-)

(limited to 'src/components')

diff --git a/src/components/account_actions/account_actions.js b/src/components/account_actions/account_actions.js
index 204d506a..d2153680 100644
--- a/src/components/account_actions/account_actions.js
+++ b/src/components/account_actions/account_actions.js
@@ -25,9 +25,6 @@ const AccountActions = {
     },
     reportUser () {
       this.$store.dispatch('openUserReportingModal', this.user.id)
-    },
-    mentionUser () {
-      this.$store.dispatch('openPostStatusModal', { replyTo: true, repliedUser: this.user })
     }
   }
 }
diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index 046cba93..d3235be1 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -9,17 +9,7 @@
     >
       <div slot="popover">
         <div class="dropdown-menu">
-          <button
-            class="btn btn-default btn-block dropdown-item"
-            @click="mentionUser"
-          >
-            {{ $t('user_card.mention') }}
-          </button>
           <template v-if="user.following">
-            <div
-              role="separator"
-              class="dropdown-divider"
-            />
             <button
               v-if="user.showing_reblogs"
               class="btn btn-default dropdown-item"
@@ -34,11 +24,11 @@
             >
               {{ $t('user_card.show_repeats') }}
             </button>
+            <div
+              role="separator"
+              class="dropdown-divider"
+            />
           </template>
-          <div
-            role="separator"
-            class="dropdown-divider"
-          />
           <button
             v-if="user.statusnet_blocking"
             class="btn btn-default btn-block dropdown-item"
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index a9278200..2f649910 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -149,6 +149,9 @@ export default {
       }
       this.$store.dispatch('setMedia', [attachment])
       this.$store.dispatch('setCurrent', attachment)
+    },
+    mentionUser () {
+      this.$store.dispatch('openPostStatusModal', { replyTo: true, repliedUser: this.user })
     }
   }
 }
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 96acf610..93d55fff 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -175,6 +175,14 @@
               {{ $t('user_card.mute') }}
             </button>
           </div>
+          <div>
+            <button
+              class="btn btn-default btn-block"
+              @click="mentionUser"
+            >
+              {{ $t('user_card.mention') }}
+            </button>
+          </div>
           <ModerationTools
             v-if="loggedIn.role === &quot;admin&quot;"
             :user="user"
-- 
cgit v1.2.3-70-g09d2


From fa38a41e42dbbbd5aa9d1aa2efb107d99ce8cd7d Mon Sep 17 00:00:00 2001
From: Shpuld Shpludson <shp@cock.li>
Date: Mon, 2 Dec 2019 12:20:24 +0000
Subject: fix "can't find property of undefined" errors in mrf transparency
 panel

---
 .../mrf_transparency_panel.js                      | 31 +++++++++++++++-------
 .../mrf_transparency_panel.vue                     |  4 ++-
 2 files changed, 24 insertions(+), 11 deletions(-)

(limited to 'src/components')

diff --git a/src/components/mrf_transparency_panel/mrf_transparency_panel.js b/src/components/mrf_transparency_panel/mrf_transparency_panel.js
index 20f8a08a..6a1baec8 100644
--- a/src/components/mrf_transparency_panel/mrf_transparency_panel.js
+++ b/src/components/mrf_transparency_panel/mrf_transparency_panel.js
@@ -1,16 +1,27 @@
 import { mapState } from 'vuex'
+import { get } from 'lodash'
 
 const MRFTransparencyPanel = {
-  computed: mapState({
-    federationPolicy: state => state.instance.federationPolicy,
-    mrfPolicies: state => state.instance.federationPolicy.mrf_policies,
-    acceptInstances: state => state.instance.federationPolicy.mrf_simple.accept,
-    rejectInstances: state => state.instance.federationPolicy.mrf_simple.reject,
-    quarantineInstances: state => state.instance.federationPolicy.quarantined_instances,
-    ftlRemovalInstances: state => state.instance.federationPolicy.mrf_simple.federated_timeline_removal,
-    mediaNsfwInstances: state => state.instance.federationPolicy.mrf_simple.media_nsfw,
-    mediaRemovalInstances: state => state.instance.federationPolicy.mrf_simple.media_removal
-  })
+  computed: {
+    ...mapState({
+      federationPolicy: state => get(state, 'instance.federationPolicy'),
+      mrfPolicies: state => get(state, 'instance.federationPolicy.mrf_policies', []),
+      quarantineInstances: state => get(state, 'instance.federationPolicy.quarantined_instances', []),
+      acceptInstances: state => get(state, 'instance.federationPolicy.mrf_simple.accept', []),
+      rejectInstances: state => get(state, 'instance.federationPolicy.mrf_simple.reject', []),
+      ftlRemovalInstances: state => get(state, 'instance.federationPolicy.mrf_simple.federated_timeline_removal', []),
+      mediaNsfwInstances: state => get(state, 'instance.federationPolicy.mrf_simple.media_nsfw', []),
+      mediaRemovalInstances: state => get(state, 'instance.federationPolicy.mrf_simple.media_removal', [])
+    }),
+    hasInstanceSpecificPolicies () {
+      return this.quarantineInstances.length ||
+        this.acceptInstances.length ||
+        this.rejectInstances.length ||
+        this.ftlRemovalInstances.length ||
+        this.mediaNsfwInstances.length ||
+        this.mediaRemovalInstances.length
+    }
+  }
 }
 
 export default MRFTransparencyPanel
diff --git a/src/components/mrf_transparency_panel/mrf_transparency_panel.vue b/src/components/mrf_transparency_panel/mrf_transparency_panel.vue
index 2640d68c..d6495dc6 100644
--- a/src/components/mrf_transparency_panel/mrf_transparency_panel.vue
+++ b/src/components/mrf_transparency_panel/mrf_transparency_panel.vue
@@ -22,7 +22,9 @@
             />
           </ul>
 
-          <h2>{{ $t("about.mrf_policy_simple") }}</h2>
+          <h2 v-if="hasInstanceSpecificPolicies">
+            {{ $t("about.mrf_policy_simple") }}
+          </h2>
 
           <div v-if="acceptInstances.length">
             <h4>{{ $t("about.mrf_policy_simple_accept") }}</h4>
-- 
cgit v1.2.3-70-g09d2


From 13fc2612ae388dec682829ae2b6211bb3cb8ccb3 Mon Sep 17 00:00:00 2001
From: Wyatt Benno <wyattbenno@gmail.com>
Date: Thu, 5 Dec 2019 11:48:37 +0900
Subject: Change 403 messaging

---
 src/components/timeline/timeline.js                   |  7 ++++++-
 src/components/timeline/timeline.vue                  | 19 ++++++++++++++++---
 src/i18n/en.json                                      |  2 ++
 src/modules/statuses.js                               |  7 +++++++
 src/services/api/api.service.js                       | 10 ++++++++--
 .../timeline_fetcher/timeline_fetcher.service.js      |  6 ++++++
 6 files changed, 45 insertions(+), 6 deletions(-)

(limited to 'src/components')

diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 27a9a55e..6086336c 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -36,7 +36,12 @@ const Timeline = {
     }
   },
   computed: {
-    timelineError () { return this.$store.state.statuses.error },
+    timelineError () {
+      return this.$store.state.statuses.error
+    },
+    error403 () {
+      return this.$store.state.statuses.error403
+    },
     newStatusCount () {
       return this.timeline.newStatusCount
     },
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 93f6f570..1c45d0f6 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -11,15 +11,22 @@
       >
         {{ $t('timeline.error_fetching') }}
       </div>
+      <div
+        v-else-if="error403"
+        class="loadmore-error alert error"
+        @click.prevent
+      >
+        {{ $t('timeline.error_403') }}
+      </div>
       <button
-        v-if="timeline.newStatusCount > 0 && !timelineError"
+        v-if="timeline.newStatusCount > 0 && !timelineError && !error403"
         class="loadmore-button"
         @click.prevent="showNewStatuses"
       >
         {{ $t('timeline.show_new') }}{{ newStatusCountStr }}
       </button>
       <div
-        v-if="!timeline.newStatusCount > 0 && !timelineError"
+        v-if="!timeline.newStatusCount > 0 && !timelineError && !error403"
         class="loadmore-text faint"
         @click.prevent
       >
@@ -67,12 +74,18 @@
         {{ $t('timeline.no_more_statuses') }}
       </div>
       <a
-        v-else-if="!timeline.loading"
+        v-else-if="!timeline.loading && !error403"
         href="#"
         @click.prevent="fetchOlderStatuses()"
       >
         <div class="new-status-notification text-center panel-footer">{{ $t('timeline.load_older') }}</div>
       </a>
+      <a
+        v-else-if="error403"
+        href="#"
+      >
+        <div class="new-status-notification text-center panel-footer">{{ $t('timeline.error_403_message') }}</div>
+      </a>
       <div
         v-else
         class="new-status-notification text-center panel-footer"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 85146ef5..c203e156 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -535,6 +535,8 @@
     "collapse": "Collapse",
     "conversation": "Conversation",
     "error_fetching": "Error fetching updates",
+    "error_403": "This timeline is not public.",
+    "error_403_message": "Please sign in.",
     "load_older": "Load older statuses",
     "no_retweet_hint": "Post is marked as followers-only or direct and cannot be repeated",
     "repeated": "repeated",
diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index f11ffdcd..d0e871c8 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -38,6 +38,7 @@ export const defaultState = () => ({
   notifications: emptyNotifications(),
   favorites: new Set(),
   error: false,
+  error403: false,
   timelines: {
     mentions: emptyTl(),
     public: emptyTl(),
@@ -479,6 +480,9 @@ export const mutations = {
   setError (state, { value }) {
     state.error = value
   },
+  set403Error (state, { value }) {
+    state.error403 = value
+  },
   setNotificationsLoading (state, { value }) {
     state.notifications.loading = value
   },
@@ -528,6 +532,9 @@ const statuses = {
     setError ({ rootState, commit }, { value }) {
       commit('setError', { value })
     },
+    set403Error ({ rootState, commit }, { value }) {
+      commit('set403Error', { value })
+    },
     setNotificationsLoading ({ rootState, commit }, { value }) {
       commit('setNotificationsLoading', { value })
     },
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 8f5eb416..a2aa802f 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -532,13 +532,19 @@ const fetchTimeline = ({
 
   return fetch(url, { headers: authHeaders(credentials) })
     .then((data) => {
-      if (data.ok) {
+      if (data.ok || data.status === 403) {
         return data
       }
       throw new Error('Error fetching timeline', data)
     })
     .then((data) => data.json())
-    .then((data) => data.map(isNotifications ? parseNotification : parseStatus))
+    .then((data) => {
+      if (!data.error) {
+        return data.map(isNotifications ? parseNotification : parseStatus)
+      } else {
+        return data
+      }
+    })
 }
 
 const fetchPinnedStatuses = ({ id, credentials }) => {
diff --git a/src/services/timeline_fetcher/timeline_fetcher.service.js b/src/services/timeline_fetcher/timeline_fetcher.service.js
index 9eb30c2d..9352d73a 100644
--- a/src/services/timeline_fetcher/timeline_fetcher.service.js
+++ b/src/services/timeline_fetcher/timeline_fetcher.service.js
@@ -6,6 +6,7 @@ const update = ({ store, statuses, timeline, showImmediately, userId }) => {
   const ccTimeline = camelCase(timeline)
 
   store.dispatch('setError', { value: false })
+  store.dispatch('set403Error', { value: false })
 
   store.dispatch('addNewStatuses', {
     timeline: ccTimeline,
@@ -45,6 +46,11 @@ const fetchAndUpdate = ({
 
   return apiService.fetchTimeline(args)
     .then((statuses) => {
+      // Change messaging if not public
+      if (statuses.error) {
+        store.dispatch('set403Error', { value: true })
+        return
+      }
       if (!older && statuses.length >= 20 && !timelineData.loading && numStatusesBeforeFetch > 0) {
         store.dispatch('queueFlush', { timeline: timeline, id: timelineData.maxId })
       }
-- 
cgit v1.2.3-70-g09d2


From 01855f315c7db813d7bbf2f3683017819d2fb70c Mon Sep 17 00:00:00 2001
From: Wyatt Benno <wyattbenno@gmail.com>
Date: Fri, 6 Dec 2019 09:38:55 +0900
Subject: Wording updates

---
 src/components/timeline/timeline.vue                      | 2 +-
 src/i18n/en.json                                          | 3 +--
 src/services/timeline_fetcher/timeline_fetcher.service.js | 2 +-
 3 files changed, 3 insertions(+), 4 deletions(-)

(limited to 'src/components')

diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 1c45d0f6..e4d453b8 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -84,7 +84,7 @@
         v-else-if="error403"
         href="#"
       >
-        <div class="new-status-notification text-center panel-footer">{{ $t('timeline.error_403_message') }}</div>
+        <div class="new-status-notification text-center panel-footer">{{ error403 }}</div>
       </a>
       <div
         v-else
diff --git a/src/i18n/en.json b/src/i18n/en.json
index c203e156..1dd99062 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -535,8 +535,7 @@
     "collapse": "Collapse",
     "conversation": "Conversation",
     "error_fetching": "Error fetching updates",
-    "error_403": "This timeline is not public.",
-    "error_403_message": "Please sign in.",
+    "error_403": "Access denied",
     "load_older": "Load older statuses",
     "no_retweet_hint": "Post is marked as followers-only or direct and cannot be repeated",
     "repeated": "repeated",
diff --git a/src/services/timeline_fetcher/timeline_fetcher.service.js b/src/services/timeline_fetcher/timeline_fetcher.service.js
index 9352d73a..b7952050 100644
--- a/src/services/timeline_fetcher/timeline_fetcher.service.js
+++ b/src/services/timeline_fetcher/timeline_fetcher.service.js
@@ -48,7 +48,7 @@ const fetchAndUpdate = ({
     .then((statuses) => {
       // Change messaging if not public
       if (statuses.error) {
-        store.dispatch('set403Error', { value: true })
+        store.dispatch('set403Error', { value: statuses.error })
         return
       }
       if (!older && statuses.length >= 20 && !timelineData.loading && numStatusesBeforeFetch > 0) {
-- 
cgit v1.2.3-70-g09d2


From 914c78398469988f549930bd35d044082d155277 Mon Sep 17 00:00:00 2001
From: Absturztaube <me@absturztau.be>
Date: Sat, 7 Dec 2019 10:29:53 +0100
Subject: fix sticker picker height in emojo picker

---
 src/components/emoji_picker/emoji_picker.scss | 4 ++++
 1 file changed, 4 insertions(+)

(limited to 'src/components')

diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index 6608f393..29010c5b 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -101,6 +101,10 @@
     }
   }
 
+  .stickers-content {
+    min-height: 269px;
+  }
+
   .emoji {
     &-search {
       padding: 5px;
-- 
cgit v1.2.3-70-g09d2


From 3b11860d3445271c9495b08f8c68330e48c5f33e Mon Sep 17 00:00:00 2001
From: rinpatch <rinpatch@sdf.org>
Date: Sun, 8 Dec 2019 02:05:50 +0300
Subject: Remove whitespace hack on empty post content

It's no longer necessary since the backend handles posts with empty
content fine and also fixes an odd whitespace when attachment links are
disabled.
---
 src/components/post_status_form/post_status_form.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

(limited to 'src/components')

diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index af6299e4..74067fef 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -169,9 +169,7 @@ const PostStatusForm = {
       if (this.submitDisabled) { return }
 
       if (this.newStatus.status === '') {
-        if (this.newStatus.files.length > 0) {
-          this.newStatus.status = '\u200b' // hack
-        } else {
+        if (this.newStatus.files.length === 0) {
           this.error = 'Cannot post an empty status with no files'
           return
         }
-- 
cgit v1.2.3-70-g09d2


From ff95d865d223fed5bab2a4d72ff3a22f014d3c56 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 8 Dec 2019 16:05:41 +0200
Subject: Updated streaming and improved error-handling, some more refactoring
 to api

---
 .../public_and_external_timeline.js                |  2 +-
 src/components/public_timeline/public_timeline.js  |  2 +-
 src/components/tag_timeline/tag_timeline.js        |  2 +-
 src/components/user_profile/user_profile.js        |  6 +-
 src/modules/api.js                                 | 99 ++++++++++++++++------
 src/modules/users.js                               |  8 +-
 .../backend_interactor_service.js                  |  5 +-
 7 files changed, 84 insertions(+), 40 deletions(-)

(limited to 'src/components')

diff --git a/src/components/public_and_external_timeline/public_and_external_timeline.js b/src/components/public_and_external_timeline/public_and_external_timeline.js
index f614c13b..cbd4491b 100644
--- a/src/components/public_and_external_timeline/public_and_external_timeline.js
+++ b/src/components/public_and_external_timeline/public_and_external_timeline.js
@@ -10,7 +10,7 @@ const PublicAndExternalTimeline = {
     this.$store.dispatch('startFetchingTimeline', { timeline: 'publicAndExternal' })
   },
   destroyed () {
-    this.$store.dispatch('stopFetching', 'publicAndExternal')
+    this.$store.dispatch('stopFetchingTimeline', 'publicAndExternal')
   }
 }
 
diff --git a/src/components/public_timeline/public_timeline.js b/src/components/public_timeline/public_timeline.js
index 8976a99c..66c40d3a 100644
--- a/src/components/public_timeline/public_timeline.js
+++ b/src/components/public_timeline/public_timeline.js
@@ -10,7 +10,7 @@ const PublicTimeline = {
     this.$store.dispatch('startFetchingTimeline', { timeline: 'public' })
   },
   destroyed () {
-    this.$store.dispatch('stopFetching', 'public')
+    this.$store.dispatch('stopFetchingTimeline', 'public')
   }
 
 }
diff --git a/src/components/tag_timeline/tag_timeline.js b/src/components/tag_timeline/tag_timeline.js
index 458eb1c5..400c6a4b 100644
--- a/src/components/tag_timeline/tag_timeline.js
+++ b/src/components/tag_timeline/tag_timeline.js
@@ -19,7 +19,7 @@ const TagTimeline = {
     }
   },
   destroyed () {
-    this.$store.dispatch('stopFetching', 'tag')
+    this.$store.dispatch('stopFetchingTimeline', 'tag')
   }
 }
 
diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
index 00055707..9558a0bd 100644
--- a/src/components/user_profile/user_profile.js
+++ b/src/components/user_profile/user_profile.js
@@ -112,9 +112,9 @@ const UserProfile = {
       }
     },
     stopFetching () {
-      this.$store.dispatch('stopFetching', 'user')
-      this.$store.dispatch('stopFetching', 'favorites')
-      this.$store.dispatch('stopFetching', 'media')
+      this.$store.dispatch('stopFetchingTimeline', 'user')
+      this.$store.dispatch('stopFetchingTimeline', 'favorites')
+      this.$store.dispatch('stopFetchingTimeline', 'media')
     },
     switchUser (userNameOrId) {
       this.stopFetching()
diff --git a/src/modules/api.js b/src/modules/api.js
index 0e7e5e19..185c9db6 100644
--- a/src/modules/api.js
+++ b/src/modules/api.js
@@ -6,7 +6,7 @@ const api = {
     backendInteractor: backendInteractorService(),
     fetchers: {},
     socket: null,
-    mastoSocket: null,
+    mastoUserSocket: null,
     followRequests: []
   },
   mutations: {
@@ -16,7 +16,8 @@ const api = {
     addFetcher (state, { fetcherName, fetcher }) {
       state.fetchers[fetcherName] = fetcher
     },
-    removeFetcher (state, { fetcherName }) {
+    removeFetcher (state, { fetcherName, fetcher }) {
+      window.clearInterval(fetcher)
       delete state.fetchers[fetcherName]
     },
     setWsToken (state, token) {
@@ -30,13 +31,14 @@ const api = {
     }
   },
   actions: {
-    startMastoSocket (store) {
+    // MastoAPI 'User' sockets
+    startMastoUserSocket (store) {
       const { state, dispatch } = store
-      state.mastoSocket = state.backendInteractor
+      state.mastoUserSocket = state.backendInteractor
         .startUserSocket({
           store,
           onMessage: (message) => {
-            if (!message) return
+            if (!message) return // pings
             if (message.event === 'notification') {
               dispatch('addNewNotifications', {
                 notifications: [message.notification],
@@ -52,41 +54,86 @@ const api = {
             }
           }
         })
-      state.mastoSocket.addEventListener('error', error => {
-        console.error('Error with MastoAPI websocket:', error)
-        dispatch('startFetchingTimeline', { timeline: 'friends' })
-        dispatch('startFetchingNotifications')
+      state.mastoUserSocket.addEventListener('error', error => {
+        console.error('Error in MastoAPI websocket:', error)
+      })
+      state.mastoUserSocket.addEventListener('close', closeEvent => {
+        const ignoreCodes = new Set([
+          1000, // Normal (intended) closure
+          1001 // Going away
+        ])
+        const { code } = closeEvent
+        console.debug('Socket closure event:', closeEvent)
+        if (ignoreCodes.has(code)) {
+          console.debug(`Not restarting socket becasue of closure code ${code} is in ignore list`)
+        } else {
+          console.warn(`MastoAPI websocket disconnected, restarting. CloseEvent code: ${code}`)
+          dispatch('startFetchingTimeline', { timeline: 'friends' })
+          dispatch('startFetchingNotifications')
+          dispatch('restartMastoUserSocket')
+        }
       })
     },
-    startFetchingTimeline (store, { timeline = 'friends', tag = false, userId = false }) {
-      // Don't start fetching if we already are.
+    restartMastoUserSocket ({ dispatch }) {
+      // This basically starts MastoAPI user socket and stops conventional
+      // fetchers when connection reestablished
+      dispatch('startMastoUserSocket').then(() => {
+        dispatch('stopFetchingTimeline', { timeline: 'friends' })
+        dispatch('stopFetchingNotifications')
+      })
+    },
+
+    // Timelines
+    startFetchingTimeline (store, {
+      timeline = 'friends',
+      tag = false,
+      userId = false
+    }) {
       if (store.state.fetchers[timeline]) return
 
-      const fetcher = store.state.backendInteractor.startFetchingTimeline({ timeline, store, userId, tag })
+      const fetcher = store.state.backendInteractor.startFetchingTimeline({
+        timeline, store, userId, tag
+      })
       store.commit('addFetcher', { fetcherName: timeline, fetcher })
     },
-    startFetchingNotifications (store) {
-      // Don't start fetching if we already are.
-      if (store.state.fetchers['notifications']) return
+    stopFetchingTimeline (store, timeline) {
+      const fetcher = store.state.fetchers[timeline]
+      if (!fetcher) return
+      store.commit('removeFetcher', { fetcherName: timeline, fetcher })
+    },
 
+    // Notifications
+    startFetchingNotifications (store) {
+      if (store.state.fetchers.notifications) return
       const fetcher = store.state.backendInteractor.startFetchingNotifications({ store })
       store.commit('addFetcher', { fetcherName: 'notifications', fetcher })
     },
+    stopFetchingNotifications (store) {
+      const fetcher = store.state.fetchers.notifications
+      if (!fetcher) return
+      store.commit('removeFetcher', { fetcherName: 'notifications', fetcher })
+    },
     fetchAndUpdateNotifications (store) {
       store.state.backendInteractor.fetchAndUpdateNotifications({ store })
     },
-    startFetchingFollowRequest (store) {
-      // Don't start fetching if we already are.
-      if (store.state.fetchers['followRequest']) return
 
-      const fetcher = store.state.backendInteractor.startFetchingFollowRequest({ store })
-      store.commit('addFetcher', { fetcherName: 'followRequest', fetcher })
+    // Follow requests
+    startFetchingFollowRequests (store) {
+      if (store.state.fetchers['followRequests']) return
+      const fetcher = store.state.backendInteractor.startFetchingFollowRequests({ store })
+      store.commit('addFetcher', { fetcherName: 'followRequests', fetcher })
     },
-    stopFetching (store, fetcherName) {
-      const fetcher = store.state.fetchers[fetcherName]
-      window.clearInterval(fetcher)
-      store.commit('removeFetcher', { fetcherName })
+    stopFetchingFollowRequests (store) {
+      const fetcher = store.state.fetchers.followRequests
+      if (!fetcher) return
+      store.commit('removeFetcher', { fetcherName: 'followRequests', fetcher })
+    },
+    removeFollowRequest (store, request) {
+      let requests = store.state.followRequests.filter((it) => it !== request)
+      store.commit('setFollowRequests', requests)
     },
+
+    // Pleroma websocket
     setWsToken (store, token) {
       store.commit('setWsToken', token)
     },
@@ -104,10 +151,6 @@ const api = {
     disconnectFromSocket ({ commit, state }) {
       state.socket && state.socket.disconnect()
       commit('setSocket', null)
-    },
-    removeFollowRequest (store, request) {
-      let requests = store.state.followRequests.filter((it) => it !== request)
-      store.commit('setFollowRequests', requests)
     }
   }
 }
diff --git a/src/modules/users.js b/src/modules/users.js
index eff0c5d5..6bdaf193 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -431,10 +431,10 @@ const users = {
           store.commit('clearCurrentUser')
           store.dispatch('disconnectFromSocket')
           store.commit('clearToken')
-          store.dispatch('stopFetching', 'friends')
+          store.dispatch('stopFetchingTimeline', 'friends')
           store.commit('setBackendInteractor', backendInteractorService(store.getters.getToken()))
-          store.dispatch('stopFetching', 'notifications')
-          store.dispatch('stopFetching', 'followRequest')
+          store.dispatch('stopFetchingNotifications')
+          store.dispatch('stopFetchingFollowRequests')
           store.commit('clearNotifications')
           store.commit('resetStatuses')
         })
@@ -469,7 +469,7 @@ const users = {
                 store.dispatch('initializeSocket')
               }
 
-              store.dispatch('startMastoSocket').catch((error) => {
+              store.dispatch('startMastoUserSocket').catch((error) => {
                 console.error('Failed initializing MastoAPI Streaming socket', error)
                 // Start getting fresh posts.
                 store.dispatch('startFetchingTimeline', { timeline: 'friends' })
diff --git a/src/services/backend_interactor_service/backend_interactor_service.js b/src/services/backend_interactor_service/backend_interactor_service.js
index 850b7867..33b79a40 100644
--- a/src/services/backend_interactor_service/backend_interactor_service.js
+++ b/src/services/backend_interactor_service/backend_interactor_service.js
@@ -24,10 +24,11 @@ const backendInteractorService = credentials => ({
     const serv = store.rootState.instance.server.replace('http', 'ws')
     const url = serv + getMastodonSocketURI({ credentials, stream: 'user' })
     const socket = new WebSocket(url)
-    console.log(socket)
+    console.debug('Socket created:', socket)
     if (socket) {
+      socket.addEventListener('open', (wsEvent) => console.debug('MastoAPI User WebSocket connection established'))
       socket.addEventListener('message', (wsEvent) => onMessage(handleMastoWS(wsEvent)))
-      socket.addEventListener('error', (error) => console.error('WebSocket Error:', error))
+      socket.addEventListener('error', (error) => console.error('MastoApi User WebSocket Error:', error))
       return socket
     } else {
       throw new Error('failed to connect to socket')
-- 
cgit v1.2.3-70-g09d2


From e86af0c965d459d016d638c0822bc9af6a6c0ee1 Mon Sep 17 00:00:00 2001
From: Wyatt Benno <wyattbenno@gmail.com>
Date: Mon, 9 Dec 2019 09:02:34 +0900
Subject: Change naming, make more general

---
 src/components/timeline/timeline.js                       |  4 ++--
 src/components/timeline/timeline.vue                      | 12 ++++++------
 src/modules/statuses.js                                   | 10 +++++-----
 src/services/api/api.service.js                           |  5 +----
 src/services/timeline_fetcher/timeline_fetcher.service.js |  6 +++---
 5 files changed, 17 insertions(+), 20 deletions(-)

(limited to 'src/components')

diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 6086336c..9a53acd6 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -39,8 +39,8 @@ const Timeline = {
     timelineError () {
       return this.$store.state.statuses.error
     },
-    error403 () {
-      return this.$store.state.statuses.error403
+    errorData () {
+      return this.$store.state.statuses.errorData
     },
     newStatusCount () {
       return this.timeline.newStatusCount
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index e4d453b8..d9f4025d 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -12,21 +12,21 @@
         {{ $t('timeline.error_fetching') }}
       </div>
       <div
-        v-else-if="error403"
+        v-else-if="errorData"
         class="loadmore-error alert error"
         @click.prevent
       >
         {{ $t('timeline.error_403') }}
       </div>
       <button
-        v-if="timeline.newStatusCount > 0 && !timelineError && !error403"
+        v-if="timeline.newStatusCount > 0 && !timelineError && !errorData"
         class="loadmore-button"
         @click.prevent="showNewStatuses"
       >
         {{ $t('timeline.show_new') }}{{ newStatusCountStr }}
       </button>
       <div
-        v-if="!timeline.newStatusCount > 0 && !timelineError && !error403"
+        v-if="!timeline.newStatusCount > 0 && !timelineError && !errorData"
         class="loadmore-text faint"
         @click.prevent
       >
@@ -74,17 +74,17 @@
         {{ $t('timeline.no_more_statuses') }}
       </div>
       <a
-        v-else-if="!timeline.loading && !error403"
+        v-else-if="!timeline.loading && !errorData"
         href="#"
         @click.prevent="fetchOlderStatuses()"
       >
         <div class="new-status-notification text-center panel-footer">{{ $t('timeline.load_older') }}</div>
       </a>
       <a
-        v-else-if="error403"
+        v-else-if="errorData"
         href="#"
       >
-        <div class="new-status-notification text-center panel-footer">{{ error403 }}</div>
+        <div class="new-status-notification text-center panel-footer">{{ errorData }}</div>
       </a>
       <div
         v-else
diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index d0e871c8..4068aa02 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -38,7 +38,7 @@ export const defaultState = () => ({
   notifications: emptyNotifications(),
   favorites: new Set(),
   error: false,
-  error403: false,
+  errorData: '',
   timelines: {
     mentions: emptyTl(),
     public: emptyTl(),
@@ -480,8 +480,8 @@ export const mutations = {
   setError (state, { value }) {
     state.error = value
   },
-  set403Error (state, { value }) {
-    state.error403 = value
+  setErrorData (state, { value }) {
+    state.errorData = value
   },
   setNotificationsLoading (state, { value }) {
     state.notifications.loading = value
@@ -532,8 +532,8 @@ const statuses = {
     setError ({ rootState, commit }, { value }) {
       commit('setError', { value })
     },
-    set403Error ({ rootState, commit }, { value }) {
-      commit('set403Error', { value })
+    setErrorData ({ rootState, commit }, { value }) {
+      commit('setErrorData', { value })
     },
     setNotificationsLoading ({ rootState, commit }, { value }) {
       commit('setNotificationsLoading', { value })
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index a2aa802f..45b63caf 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -532,10 +532,7 @@ const fetchTimeline = ({
 
   return fetch(url, { headers: authHeaders(credentials) })
     .then((data) => {
-      if (data.ok || data.status === 403) {
-        return data
-      }
-      throw new Error('Error fetching timeline', data)
+      return data
     })
     .then((data) => data.json())
     .then((data) => {
diff --git a/src/services/timeline_fetcher/timeline_fetcher.service.js b/src/services/timeline_fetcher/timeline_fetcher.service.js
index b7952050..1aaae563 100644
--- a/src/services/timeline_fetcher/timeline_fetcher.service.js
+++ b/src/services/timeline_fetcher/timeline_fetcher.service.js
@@ -6,7 +6,7 @@ const update = ({ store, statuses, timeline, showImmediately, userId }) => {
   const ccTimeline = camelCase(timeline)
 
   store.dispatch('setError', { value: false })
-  store.dispatch('set403Error', { value: false })
+  store.dispatch('setErrorData', { value: false })
 
   store.dispatch('addNewStatuses', {
     timeline: ccTimeline,
@@ -46,9 +46,9 @@ const fetchAndUpdate = ({
 
   return apiService.fetchTimeline(args)
     .then((statuses) => {
-      // Change messaging if not public
       if (statuses.error) {
-        store.dispatch('set403Error', { value: statuses.error })
+        console.log(statuses)
+        store.dispatch('setErrorData', { value: statuses.error })
         return
       }
       if (!older && statuses.length >= 20 && !timelineData.loading && numStatusesBeforeFetch > 0) {
-- 
cgit v1.2.3-70-g09d2


From 8ee80339555c53d45602f40fdbe6b487a6992515 Mon Sep 17 00:00:00 2001
From: Wyatt Benno <wyattbenno@gmail.com>
Date: Mon, 9 Dec 2019 10:31:57 +0900
Subject: Set error data

---
 src/components/timeline/timeline.vue                      | 4 ++--
 src/i18n/en.json                                          | 1 -
 src/modules/statuses.js                                   | 2 +-
 src/services/api/api.service.js                           | 7 ++++++-
 src/services/timeline_fetcher/timeline_fetcher.service.js | 4 ++--
 5 files changed, 11 insertions(+), 7 deletions(-)

(limited to 'src/components')

diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index d9f4025d..bb4ab379 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -16,7 +16,7 @@
         class="loadmore-error alert error"
         @click.prevent
       >
-        {{ $t('timeline.error_403') }}
+        {{ errorData.statusText }}
       </div>
       <button
         v-if="timeline.newStatusCount > 0 && !timelineError && !errorData"
@@ -84,7 +84,7 @@
         v-else-if="errorData"
         href="#"
       >
-        <div class="new-status-notification text-center panel-footer">{{ errorData }}</div>
+        <div class="new-status-notification text-center panel-footer">{{ errorData.error }}</div>
       </a>
       <div
         v-else
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 1dd99062..85146ef5 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -535,7 +535,6 @@
     "collapse": "Collapse",
     "conversation": "Conversation",
     "error_fetching": "Error fetching updates",
-    "error_403": "Access denied",
     "load_older": "Load older statuses",
     "no_retweet_hint": "Post is marked as followers-only or direct and cannot be repeated",
     "repeated": "repeated",
diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index 4068aa02..e3a1f293 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -38,7 +38,7 @@ export const defaultState = () => ({
   notifications: emptyNotifications(),
   favorites: new Set(),
   error: false,
-  errorData: '',
+  errorData: null,
   timelines: {
     mentions: emptyTl(),
     public: emptyTl(),
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 45b63caf..63e72e30 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -529,9 +529,12 @@ const fetchTimeline = ({
 
   const queryString = map(params, (param) => `${param[0]}=${param[1]}`).join('&')
   url += `?${queryString}`
-
+  let status = ''
+  let statusText = ''
   return fetch(url, { headers: authHeaders(credentials) })
     .then((data) => {
+      status = data.status
+      statusText = data.statusText
       return data
     })
     .then((data) => data.json())
@@ -539,6 +542,8 @@ const fetchTimeline = ({
       if (!data.error) {
         return data.map(isNotifications ? parseNotification : parseStatus)
       } else {
+        data.status = status
+        data.statusText = statusText
         return data
       }
     })
diff --git a/src/services/timeline_fetcher/timeline_fetcher.service.js b/src/services/timeline_fetcher/timeline_fetcher.service.js
index 68644261..c6b28ad5 100644
--- a/src/services/timeline_fetcher/timeline_fetcher.service.js
+++ b/src/services/timeline_fetcher/timeline_fetcher.service.js
@@ -6,7 +6,7 @@ const update = ({ store, statuses, timeline, showImmediately, userId }) => {
   const ccTimeline = camelCase(timeline)
 
   store.dispatch('setError', { value: false })
-  store.dispatch('setErrorData', { value: false })
+  store.dispatch('setErrorData', { value: null })
 
   store.dispatch('addNewStatuses', {
     timeline: ccTimeline,
@@ -47,7 +47,7 @@ const fetchAndUpdate = ({
   return apiService.fetchTimeline(args)
     .then((statuses) => {
       if (statuses.error) {
-        store.dispatch('setErrorData', { value: statuses.error })
+        store.dispatch('setErrorData', { value: statuses })
         return
       }
       if (!older && statuses.length >= 20 && !timelineData.loading && numStatusesBeforeFetch > 0) {
-- 
cgit v1.2.3-70-g09d2


From f6d8f245e68c8a1f747af527f59670d88bde5c08 Mon Sep 17 00:00:00 2001
From: Absturztaube <me@absturztaube.ch>
Date: Mon, 9 Dec 2019 22:15:38 +0100
Subject: Revert "fix sticker picker height in emojo picker"

This reverts commit 914c78398469988f549930bd35d044082d155277.
---
 src/components/emoji_picker/emoji_picker.scss | 4 ----
 1 file changed, 4 deletions(-)

(limited to 'src/components')

diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index 29010c5b..6608f393 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -101,10 +101,6 @@
     }
   }
 
-  .stickers-content {
-    min-height: 269px;
-  }
-
   .emoji {
     &-search {
       padding: 5px;
-- 
cgit v1.2.3-70-g09d2


From 7e3a4fa8ec183f8e04804938d713953aed6bec66 Mon Sep 17 00:00:00 2001
From: Absturztaube <me@absturztaube.ch>
Date: Mon, 9 Dec 2019 22:16:51 +0100
Subject: fix invisible tab-switcher in emoji picker

---
 src/components/sticker_picker/sticker_picker.vue | 28 ++++++++++--------------
 1 file changed, 12 insertions(+), 16 deletions(-)

(limited to 'src/components')

diff --git a/src/components/sticker_picker/sticker_picker.vue b/src/components/sticker_picker/sticker_picker.vue
index 323855b9..7d6fdc24 100644
--- a/src/components/sticker_picker/sticker_picker.vue
+++ b/src/components/sticker_picker/sticker_picker.vue
@@ -37,22 +37,18 @@
 .sticker-picker {
   width: 100%;
   position: relative;
-  .tab-switcher {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-  }
-  .sticker-picker-content {
-    .sticker {
-      display: inline-block;
-      width: 20%;
-      height: 20%;
-      img {
-        width: 100%;
-        &:hover {
-          filter: drop-shadow(0 0 5px var(--link, $fallback--link));
+  .contents {
+    min-height: 250px;
+    .sticker-picker-content {
+      .sticker {
+        display: inline-block;
+        width: 20%;
+        height: 20%;
+        img {
+          width: 100%;
+          &:hover {
+            filter: drop-shadow(0 0 5px var(--link, $fallback--link));
+          }
         }
       }
     }
-- 
cgit v1.2.3-70-g09d2


From 6af870cd9069a8fc45b7684d264656dad0cf4a70 Mon Sep 17 00:00:00 2001
From: kPherox <admin@mail.kr-kp.com>
Date: Wed, 11 Dec 2019 00:00:10 +0900
Subject: Add view for moves notifications

---
 src/components/notification/notification.vue          | 14 +++++++++++++-
 src/components/notifications/notifications.scss       |  7 ++++++-
 src/components/settings/settings.vue                  |  5 +++++
 src/i18n/en.json                                      |  1 +
 src/modules/config.js                                 |  3 ++-
 src/modules/statuses.js                               |  3 ++-
 src/services/notification_utils/notification_utils.js |  3 ++-
 src/services/push/push.js                             |  3 ++-
 static/fontello.json                                  |  6 ++++++
 9 files changed, 39 insertions(+), 6 deletions(-)

(limited to 'src/components')

diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 1f192c77..cf4d8072 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -74,9 +74,13 @@
               <i class="fa icon-user-plus lit" />
               <small>{{ $t('notifications.followed_you') }}</small>
             </span>
+            <span v-if="notification.type === 'move'">
+              <i class="fa icon-arrow-curved lit" />
+              <small>{{ $t('notifications.moved_to') }}</small>
+            </span>
           </div>
           <div
-            v-if="notification.type === 'follow'"
+            v-if="notification.type === 'follow' || notification.type === 'move'"
             class="timeago"
           >
             <span class="faint">
@@ -115,6 +119,14 @@
             @{{ notification.from_profile.screen_name }}
           </router-link>
         </div>
+        <div
+          v-else-if="notification.type === 'move'"
+          class="move-text"
+        >
+          <router-link :to="userProfileLink">
+            @{{ notification.target.screen_name }}
+          </router-link>
+        </div>
         <template v-else>
           <status
             class="faint"
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 71876b14..148ac7f2 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -76,7 +76,7 @@
     }
   }
 
-  .follow-text {
+  .follow-text, .move-text {
     padding: 0.5em 0;
   }
 
@@ -151,6 +151,11 @@
       color: var(--cOrange, $fallback--cOrange);
     }
 
+    .icon-arrow-curved.lit {
+      color: $fallback--cBlue;
+      color: var(--cBlue, $fallback--cBlue);
+    }
+
     .status-content {
       margin: 0;
       max-height: 300px;
diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
index c4021137..31329e82 100644
--- a/src/components/settings/settings.vue
+++ b/src/components/settings/settings.vue
@@ -314,6 +314,11 @@
                       {{ $t('settings.notification_visibility_mentions') }}
                     </Checkbox>
                   </li>
+                  <li>
+                    <Checkbox v-model="notificationVisibility.moves">
+                      {{ $t('settings.notification_visibility_moves') }}
+                    </Checkbox>
+                  </li>
                 </ul>
               </div>
               <div>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index f46d5b3d..dcd2f3d7 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -312,6 +312,7 @@
     "notification_visibility_likes": "Likes",
     "notification_visibility_mentions": "Mentions",
     "notification_visibility_repeats": "Repeats",
+    "notification_visibility_moves": "Moves",
     "no_rich_text_description": "Strip rich text formatting from all posts",
     "no_blocks": "No blocks",
     "no_mutes": "No mutes",
diff --git a/src/modules/config.js b/src/modules/config.js
index 329b4091..cc47c848 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -28,7 +28,8 @@ export const defaultState = {
     follows: true,
     mentions: true,
     likes: true,
-    repeats: true
+    repeats: true,
+    moves: true
   },
   webPushNotifications: false,
   muteWords: [],
diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index 3cf74a43..420b3183 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -66,7 +66,8 @@ const visibleNotificationTypes = (rootState) => {
     rootState.config.notificationVisibility.likes && 'like',
     rootState.config.notificationVisibility.mentions && 'mention',
     rootState.config.notificationVisibility.repeats && 'repeat',
-    rootState.config.notificationVisibility.follows && 'follow'
+    rootState.config.notificationVisibility.follows && 'follow',
+    rootState.config.notificationVisibility.moves && 'move'
   ].filter(_ => _)
 }
 
diff --git a/src/services/notification_utils/notification_utils.js b/src/services/notification_utils/notification_utils.js
index 7021adbd..b08514da 100644
--- a/src/services/notification_utils/notification_utils.js
+++ b/src/services/notification_utils/notification_utils.js
@@ -6,7 +6,8 @@ export const visibleTypes = store => ([
   store.state.config.notificationVisibility.likes && 'like',
   store.state.config.notificationVisibility.mentions && 'mention',
   store.state.config.notificationVisibility.repeats && 'repeat',
-  store.state.config.notificationVisibility.follows && 'follow'
+  store.state.config.notificationVisibility.follows && 'follow',
+  store.state.config.notificationVisibility.moves && 'move'
 ].filter(_ => _))
 
 const sortById = (a, b) => {
diff --git a/src/services/push/push.js b/src/services/push/push.js
index 1b189a29..5836fc26 100644
--- a/src/services/push/push.js
+++ b/src/services/push/push.js
@@ -65,7 +65,8 @@ function sendSubscriptionToBackEnd (subscription, token, notificationVisibility)
           follow: notificationVisibility.follows,
           favourite: notificationVisibility.likes,
           mention: notificationVisibility.mentions,
-          reblog: notificationVisibility.repeats
+          reblog: notificationVisibility.repeats,
+          move: notificationVisibility.moves
         }
       }
     })
diff --git a/static/fontello.json b/static/fontello.json
index c0cf1727..642381a1 100755
--- a/static/fontello.json
+++ b/static/fontello.json
@@ -303,6 +303,12 @@
       "css": "gauge",
       "code": 61668,
       "src": "fontawesome"
+    },
+    {
+      "uid": "f3ebd6751c15a280af5cc5f4a764187d",
+      "css": "arrow-curved",
+      "code": 59421,
+      "src": "iconic"
     }
   ]
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 31aa177eea8f2e50e1802d1dd51a8470199b6bcb Mon Sep 17 00:00:00 2001
From: kPherox <admin@mail.kr-kp.com>
Date: Wed, 11 Dec 2019 04:02:25 +0900
Subject: Fix target account link

---
 src/components/notification/notification.js  | 12 ++++++++++++
 src/components/notification/notification.vue |  2 +-
 2 files changed, 13 insertions(+), 1 deletion(-)

(limited to 'src/components')

diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index 7d46eb5a..93edf2fa 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -55,6 +55,18 @@ const Notification = {
     userProfileLink () {
       return this.generateUserProfileLink(this.user)
     },
+    targetUserInStore () {
+      return this.$store.getters.findUser(this.notification.target.id)
+    },
+    targetUser () {
+      if (this.targetUserInStore) {
+        return this.targetUserInStore
+      }
+      return this.notification.target
+    },
+    targetUserProfileLink () {
+      return this.generateUserProfileLink(this.targetUser)
+    },
     needMute () {
       return this.user.muted
     }
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index cf4d8072..33ae054f 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -123,7 +123,7 @@
           v-else-if="notification.type === 'move'"
           class="move-text"
         >
-          <router-link :to="userProfileLink">
+          <router-link :to="targetUserProfileLink">
             @{{ notification.target.screen_name }}
           </router-link>
         </div>
-- 
cgit v1.2.3-70-g09d2


From 6acd889589e46b18491d96b5fa992154b4e58d88 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 10 Dec 2019 21:30:27 +0200
Subject: Option to enable streaming

---
 src/components/settings/settings.js  | 14 +++++++++++++-
 src/components/settings/settings.vue |  9 +++++++++
 src/i18n/en.json                     |  2 ++
 src/i18n/ru.json                     |  2 ++
 src/modules/api.js                   | 18 ++++++++++++++++++
 src/modules/config.js                |  1 +
 src/modules/users.js                 | 14 +++++++++++---
 src/services/api/api.service.js      |  6 ++++++
 8 files changed, 62 insertions(+), 4 deletions(-)

(limited to 'src/components')

diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js
index c49083f9..2d7723cc 100644
--- a/src/components/settings/settings.js
+++ b/src/components/settings/settings.js
@@ -84,7 +84,7 @@ const settings = {
         }
       }])
       .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),
-    // Special cases (need to transform values)
+    // Special cases (need to transform values or perform actions first)
     muteWordsString: {
       get () { return this.$store.getters.mergedConfig.muteWords.join('\n') },
       set (value) {
@@ -93,6 +93,18 @@ const settings = {
           value: filter(value.split('\n'), (word) => trim(word).length > 0)
         })
       }
+    },
+    useStreamingApi: {
+      get () { return this.$store.getters.mergedConfig.useStreamingApi },
+      set (value) {
+        const promise = value
+          ? this.$store.dispatch('enableMastoSockets')
+          : this.$store.dispatch('disableMastoSockets')
+
+        promise.then(() => {
+          this.$store.dispatch('setOption', { name: 'useStreamingApi', value })
+        })
+      }
     }
   },
   // Updating nested properties
diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
index c4021137..b40c85dd 100644
--- a/src/components/settings/settings.vue
+++ b/src/components/settings/settings.vue
@@ -73,6 +73,15 @@
                     </li>
                   </ul>
                 </li>
+                <li>
+                  <Checkbox v-model="useStreamingApi">
+                    {{ $t('settings.useStreamingApi') }}
+                    <br/>
+                    <small>
+                    {{ $t('settings.useStreamingApiWarning') }}
+                    </small>
+                  </Checkbox>
+                </li>
                 <li>
                   <Checkbox v-model="autoLoad">
                     {{ $t('settings.autoload') }}
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 85146ef5..60fc792f 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -358,6 +358,8 @@
     "post_status_content_type": "Post status content type",
     "stop_gifs": "Play-on-hover GIFs",
     "streaming": "Enable automatic streaming of new posts when scrolled to the top",
+    "useStreamingApi": "Receive posts and notifications real-time",
+    "useStreamingApiWarning": "(Not recommended, experimental, known to skip posts)",
     "text": "Text",
     "theme": "Theme",
     "theme_help": "Use hex color codes (#rrggbb) to customize your color theme.",
diff --git a/src/i18n/ru.json b/src/i18n/ru.json
index 19e10f1e..4cb2d497 100644
--- a/src/i18n/ru.json
+++ b/src/i18n/ru.json
@@ -219,6 +219,8 @@
     "subject_input_always_show": "Всегда показывать поле ввода темы",
     "stop_gifs": "Проигрывать GIF анимации только при наведении",
     "streaming": "Включить автоматическую загрузку новых сообщений при прокрутке вверх",
+    "useStreamingApi": "Получать сообщения и уведомления в реальном времени",
+    "useStreamingApiWarning": "(Не рекомендуется, экспериментально, сообщения могут пропадать)",
     "text": "Текст",
     "theme": "Тема",
     "theme_help": "Используйте шестнадцатеричные коды цветов (#rrggbb) для настройки темы.",
diff --git a/src/modules/api.js b/src/modules/api.js
index 593f8498..dc91d00e 100644
--- a/src/modules/api.js
+++ b/src/modules/api.js
@@ -31,6 +31,18 @@ const api = {
     }
   },
   actions: {
+    // Global MastoAPI socket control, in future should disable ALL sockets/(re)start relevant sockets
+    enableMastoSockets (store) {
+      const { state, dispatch } = store
+      if (state.mastoUserSocket) return
+      dispatch('startMastoUserSocket')
+    },
+    disableMastoSockets (store) {
+      const { state, dispatch } = store
+      if (!state.mastoUserSocket) return
+      dispatch('stopMastoUserSocket')
+    },
+
     // MastoAPI 'User' sockets
     startMastoUserSocket (store) {
       const { state, dispatch } = store
@@ -81,6 +93,12 @@ const api = {
         dispatch('stopFetchingNotifications')
       })
     },
+    stopMastoUserSocket ({ state, dispatch }) {
+      dispatch('startFetchingTimeline', { timeline: 'friends' })
+      dispatch('startFetchingNotifications')
+      console.log(state.mastoUserSocket)
+      state.mastoUserSocket.close()
+    },
 
     // Timelines
     startFetchingTimeline (store, {
diff --git a/src/modules/config.js b/src/modules/config.js
index 329b4091..74025db1 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -35,6 +35,7 @@ export const defaultState = {
   highlight: {},
   interfaceLanguage: browserLocale,
   hideScopeNotice: false,
+  useStreamingApi: false,
   scopeCopy: undefined, // instance default
   subjectLineBehavior: undefined, // instance default
   alwaysShowSubjectInput: undefined, // instance default
diff --git a/src/modules/users.js b/src/modules/users.js
index 6bdaf193..cbec6063 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -469,14 +469,22 @@ const users = {
                 store.dispatch('initializeSocket')
               }
 
-              store.dispatch('startMastoUserSocket').catch((error) => {
-                console.error('Failed initializing MastoAPI Streaming socket', error)
+              const startPolling = () => {
                 // Start getting fresh posts.
                 store.dispatch('startFetchingTimeline', { timeline: 'friends' })
 
                 // Start fetching notifications
                 store.dispatch('startFetchingNotifications')
-              })
+              }
+
+              if (store.getters.mergedConfig.useStreamingApi) {
+                store.dispatch('enableMastoSockets').catch((error) => {
+                  console.error('Failed initializing MastoAPI Streaming socket', error)
+                  startPolling()
+                })
+              } else {
+                startPolling()
+              }
 
               // Get user mutes
               store.dispatch('fetchMutes')
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index c6818df4..517b953e 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -983,18 +983,24 @@ export const ProcessedWS = ({
       wsEvent
     )
   })
+  // Commented code reason: very spammy, uncomment to enable message debug logging
+  /*
   socket.addEventListener('message', (wsEvent) => {
     console.debug(
       `[WS][${id}] Message received`,
       wsEvent
     )
   })
+  /**/
 
   proxy(socket, 'open')
   proxy(socket, 'close')
   proxy(socket, 'message', preprocessor)
   proxy(socket, 'error')
 
+  // 1000 = Normal Closure
+  eventTarget.close = () => { socket.close(1000, 'Shutting down socket') }
+
   return eventTarget
 }
 
-- 
cgit v1.2.3-70-g09d2


From e8333fff8dc048f5d5d8406c71cb80e95ea1982c Mon Sep 17 00:00:00 2001
From: kPherox <admin@mail.kr-kp.com>
Date: Wed, 11 Dec 2019 18:20:23 +0900
Subject: change the expression of `move`

---
 src/components/notification/notification.vue | 2 +-
 src/i18n/en.json                             | 4 ++--
 src/modules/statuses.js                      | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

(limited to 'src/components')

diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 33ae054f..16124e50 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -76,7 +76,7 @@
             </span>
             <span v-if="notification.type === 'move'">
               <i class="fa icon-arrow-curved lit" />
-              <small>{{ $t('notifications.moved_to') }}</small>
+              <small>{{ $t('notifications.migrated_to') }}</small>
             </span>
           </div>
           <div
diff --git a/src/i18n/en.json b/src/i18n/en.json
index dcd2f3d7..4fd8ee0b 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -111,7 +111,7 @@
     "read": "Read!",
     "repeated_you": "repeated your status",
     "no_more_notifications": "No more notifications",
-    "moved_to": "moved to"
+    "migrated_to": "migrated to"
   },
   "polls": {
     "add_poll": "Add Poll",
@@ -312,7 +312,7 @@
     "notification_visibility_likes": "Likes",
     "notification_visibility_mentions": "Mentions",
     "notification_visibility_repeats": "Repeats",
-    "notification_visibility_moves": "Moves",
+    "notification_visibility_moves": "User Migrates",
     "no_rich_text_description": "Strip rich text formatting from all posts",
     "no_blocks": "No blocks",
     "no_mutes": "No mutes",
diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index 420b3183..f3fc0f21 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -340,7 +340,7 @@ const addNewNotifications = (state, { dispatch, notifications, older, visibleNot
             i18nString = 'followed_you'
             break
           case 'move':
-            i18nString = 'moved_to'
+            i18nString = 'migrated_to'
             break
         }
 
-- 
cgit v1.2.3-70-g09d2


From b4acbf5311b5f8db21bc2e32a9e5246425edcec4 Mon Sep 17 00:00:00 2001
From: kPherox <admin@mail.kr-kp.com>
Date: Wed, 11 Dec 2019 18:25:52 +0900
Subject: Add user migrates filter to interactions

---
 src/components/interactions/interactions.js  | 3 ++-
 src/components/interactions/interactions.vue | 4 ++++
 src/i18n/en.json                             | 1 +
 3 files changed, 7 insertions(+), 1 deletion(-)

(limited to 'src/components')

diff --git a/src/components/interactions/interactions.js b/src/components/interactions/interactions.js
index 1f8a9de9..cc31ff20 100644
--- a/src/components/interactions/interactions.js
+++ b/src/components/interactions/interactions.js
@@ -3,7 +3,8 @@ import Notifications from '../notifications/notifications.vue'
 const tabModeDict = {
   mentions: ['mention'],
   'likes+repeats': ['repeat', 'like'],
-  follows: ['follow']
+  follows: ['follow'],
+  moves: ['move']
 }
 
 const Interactions = {
diff --git a/src/components/interactions/interactions.vue b/src/components/interactions/interactions.vue
index 08cee343..a2e252ab 100644
--- a/src/components/interactions/interactions.vue
+++ b/src/components/interactions/interactions.vue
@@ -21,6 +21,10 @@
         key="follows"
         :label="$t('interactions.follows')"
       />
+      <span
+        key="moves"
+        :label="$t('interactions.moves')"
+      />
     </tab-switcher>
     <Notifications
       ref="notifications"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 4fd8ee0b..effc139f 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -141,6 +141,7 @@
   "interactions": {
     "favs_repeats": "Repeats and Favorites",
     "follows": "New follows",
+    "moves": "User migrates",
     "load_older": "Load older interactions"
   },
   "post_status": {
-- 
cgit v1.2.3-70-g09d2


From c3e7806acbd32483eab497a347f947158ab8febf Mon Sep 17 00:00:00 2001
From: kPherox <admin@mail.kr-kp.com>
Date: Wed, 11 Dec 2019 18:48:18 +0900
Subject: remove unused fallback

---
 src/components/notification/notification.js | 16 ++--------------
 src/modules/users.js                        |  2 ++
 2 files changed, 4 insertions(+), 14 deletions(-)

(limited to 'src/components')

diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index 93edf2fa..e7bd769e 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -43,26 +43,14 @@ const Notification = {
       const user = this.notification.from_profile
       return highlightStyle(highlight[user.screen_name])
     },
-    userInStore () {
-      return this.$store.getters.findUser(this.notification.from_profile.id)
-    },
     user () {
-      if (this.userInStore) {
-        return this.userInStore
-      }
-      return this.notification.from_profile
+      return this.$store.getters.findUser(this.notification.from_profile.id)
     },
     userProfileLink () {
       return this.generateUserProfileLink(this.user)
     },
-    targetUserInStore () {
-      return this.$store.getters.findUser(this.notification.target.id)
-    },
     targetUser () {
-      if (this.targetUserInStore) {
-        return this.targetUserInStore
-      }
-      return this.notification.target
+      return this.$store.getters.findUser(this.notification.target.id)
     },
     targetUserProfileLink () {
       return this.generateUserProfileLink(this.targetUser)
diff --git a/src/modules/users.js b/src/modules/users.js
index 14b2d8b5..f209b23b 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -368,8 +368,10 @@ const users = {
     },
     addNewNotifications (store, { notifications }) {
       const users = map(notifications, 'from_profile')
+      const targetUsers = map(notifications, 'target')
       const notificationIds = notifications.map(_ => _.id)
       store.commit('addNewUsers', users)
+      store.commit('addNewUsers', targetUsers)
 
       const notificationsObject = store.rootState.statuses.notifications.idStore
       const relevantNotifications = Object.entries(notificationsObject)
-- 
cgit v1.2.3-70-g09d2


From d0c78989aa9e5f5142dbc09a8935c004a2050257 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Sun, 1 Dec 2019 19:34:01 -0500
Subject: hide instance url/link/text in header using hideSitename option

---
 src/App.js                                 | 1 +
 src/App.vue                                | 1 +
 src/boot/after_store.js                    | 1 +
 src/components/mobile_nav/mobile_nav.js    | 1 +
 src/components/mobile_nav/mobile_nav.vue   | 1 +
 src/components/side_drawer/side_drawer.js  | 3 +++
 src/components/side_drawer/side_drawer.vue | 2 +-
 src/modules/instance.js                    | 1 +
 8 files changed, 10 insertions(+), 1 deletion(-)

(limited to 'src/components')

diff --git a/src/App.js b/src/App.js
index 04a40e30..78ff29da 100644
--- a/src/App.js
+++ b/src/App.js
@@ -90,6 +90,7 @@ export default {
     },
     sitename () { return this.$store.state.instance.name },
     chat () { return this.$store.state.chat.channel.state === 'joined' },
+    hideSitename () { return this.$store.state.instance.hideSitename },
     suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled },
     showInstanceSpecificPanel () {
       return this.$store.state.instance.showInstanceSpecificPanel &&
diff --git a/src/App.vue b/src/App.vue
index dbe842ec..c66df843 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -31,6 +31,7 @@
         </div>
         <div class="item">
           <router-link
+            v-if="!hideSitename"
             class="site-name"
             :to="{ name: 'root' }"
             active-class="home"
diff --git a/src/boot/after_store.js b/src/boot/after_store.js
index 226b67d8..e18cd657 100644
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@@ -108,6 +108,7 @@ const setSettings = async ({ apiConfig, staticConfig, store }) => {
   copyInstanceOption('alwaysShowSubjectInput')
   copyInstanceOption('noAttachmentLinks')
   copyInstanceOption('showFeaturesPanel')
+  copyInstanceOption('hideSitename')
 
   return store.dispatch('setTheme', config['theme'])
 }
diff --git a/src/components/mobile_nav/mobile_nav.js b/src/components/mobile_nav/mobile_nav.js
index 5a90c31f..c1166a0c 100644
--- a/src/components/mobile_nav/mobile_nav.js
+++ b/src/components/mobile_nav/mobile_nav.js
@@ -29,6 +29,7 @@ const MobileNav = {
     unseenNotificationsCount () {
       return this.unseenNotifications.length
     },
+    hideSitename () { return this.$store.state.instance.hideSitename },
     sitename () { return this.$store.state.instance.name }
   },
   methods: {
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index d1c24e56..51f1d636 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -17,6 +17,7 @@
             <i class="button-icon icon-menu" />
           </a>
           <router-link
+            v-if="!hideSitename"
             class="site-name"
             :to="{ name: 'root' }"
             active-class="home"
diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js
index 0188cf3e..65c96e47 100644
--- a/src/components/side_drawer/side_drawer.js
+++ b/src/components/side_drawer/side_drawer.js
@@ -33,6 +33,9 @@ const SideDrawer = {
     logo () {
       return this.$store.state.instance.logo
     },
+    hideSitename () {
+      return this.$store.state.instance.hideSitename
+    },
     sitename () {
       return this.$store.state.instance.name
     },
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 214b8e0c..eb429f29 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -27,7 +27,7 @@
           class="side-drawer-logo-wrapper"
         >
           <img :src="logo">
-          <span>{{ sitename }}</span>
+          <span v-if="!hideSitename">{{ sitename }}</span>
         </div>
       </div>
       <ul>
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 96f14ed5..625323b9 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -27,6 +27,7 @@ const defaultState = {
   scopeCopy: true,
   subjectLineBehavior: 'email',
   postContentType: 'text/plain',
+  hideSitename: false,
   nsfwCensorImage: undefined,
   vapidPublicKey: undefined,
   noAttachmentLinks: false,
-- 
cgit v1.2.3-70-g09d2


From 386719b0d03475fb5cab667ce28a5aff354fbc4d Mon Sep 17 00:00:00 2001
From: seven <sjang8762@outlook.com>
Date: Thu, 12 Dec 2019 08:33:40 +0500
Subject: fix css runtime loading issue

---
 src/App.scss                         | 13 +++++++++++++
 src/components/timeline/timeline.vue | 13 -------------
 2 files changed, 13 insertions(+), 13 deletions(-)

(limited to 'src/components')

diff --git a/src/App.scss b/src/App.scss
index 925913f2..754ca62e 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -870,3 +870,16 @@ nav {
     transform: rotate(359deg);
   }
 }
+
+.new-status-notification {
+  position:relative;
+  margin-top: -1px;
+  font-size: 1.1em;
+  border-width: 1px 0 0 0;
+  border-style: solid;
+  border-color: var(--border, $fallback--border);
+  padding: 10px;
+  z-index: 1;
+  background-color: $fallback--fg;
+  background-color: var(--panel, $fallback--fg);
+}
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 93f6f570..a6fba452 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -93,17 +93,4 @@
     opacity: 1;
   }
 }
-
-.new-status-notification {
-  position:relative;
-  margin-top: -1px;
-  font-size: 1.1em;
-  border-width: 1px 0 0 0;
-  border-style: solid;
-  border-color: var(--border, $fallback--border);
-  padding: 10px;
-  z-index: 1;
-  background-color: $fallback--fg;
-  background-color: var(--panel, $fallback--fg);
-}
 </style>
-- 
cgit v1.2.3-70-g09d2


From f70fe28f644c037326a1d2c1fdffbf6d365e0a02 Mon Sep 17 00:00:00 2001
From: Maksim Pechnikov <parallel588@gmail.com>
Date: Thu, 12 Dec 2019 08:42:21 +0300
Subject: mfa: fix login and recovery form

---
 src/components/mfa_form/recovery_form.js | 11 ++++++++---
 src/components/mfa_form/totp_form.js     | 10 ++++++++--
 src/services/new_api/mfa.js              | 12 ++++++------
 3 files changed, 22 insertions(+), 11 deletions(-)

(limited to 'src/components')

diff --git a/src/components/mfa_form/recovery_form.js b/src/components/mfa_form/recovery_form.js
index 7a3cc22d..b25c65dd 100644
--- a/src/components/mfa_form/recovery_form.js
+++ b/src/components/mfa_form/recovery_form.js
@@ -8,18 +8,23 @@ export default {
   }),
   computed: {
     ...mapGetters({
-      authApp: 'authFlow/app',
       authSettings: 'authFlow/settings'
     }),
-    ...mapState({ instance: 'instance' })
+    ...mapState({
+      instance: 'instance',
+      oauth: 'oauth'
+    })
   },
   methods: {
     ...mapMutations('authFlow', ['requireTOTP', 'abortMFA']),
     ...mapActions({ login: 'authFlow/login' }),
     clearError () { this.error = false },
     submit () {
+      const { clientId, clientSecret } = this.oauth
+
       const data = {
-        app: this.authApp,
+        clientId,
+        clientSecret,
         instance: this.instance.server,
         mfaToken: this.authSettings.mfa_token,
         code: this.code
diff --git a/src/components/mfa_form/totp_form.js b/src/components/mfa_form/totp_form.js
index 778bf8dc..1ec7576b 100644
--- a/src/components/mfa_form/totp_form.js
+++ b/src/components/mfa_form/totp_form.js
@@ -10,15 +10,21 @@ export default {
       authApp: 'authFlow/app',
       authSettings: 'authFlow/settings'
     }),
-    ...mapState({ instance: 'instance' })
+    ...mapState({
+      instance: 'instance',
+      oauth: 'oauth'
+    })
   },
   methods: {
     ...mapMutations('authFlow', ['requireRecovery', 'abortMFA']),
     ...mapActions({ login: 'authFlow/login' }),
     clearError () { this.error = false },
     submit () {
+      const { clientId, clientSecret } = this.oauth
+
       const data = {
-        app: this.authApp,
+        clientId,
+        clientSecret,
         instance: this.instance.server,
         mfaToken: this.authSettings.mfa_token,
         code: this.code
diff --git a/src/services/new_api/mfa.js b/src/services/new_api/mfa.js
index cbba06d5..c944667c 100644
--- a/src/services/new_api/mfa.js
+++ b/src/services/new_api/mfa.js
@@ -1,9 +1,9 @@
-const verifyOTPCode = ({ app, instance, mfaToken, code }) => {
+const verifyOTPCode = ({ clientId, clientSecret, instance, mfaToken, code }) => {
   const url = `${instance}/oauth/mfa/challenge`
   const form = new window.FormData()
 
-  form.append('client_id', app.client_id)
-  form.append('client_secret', app.client_secret)
+  form.append('client_id', clientId)
+  form.append('client_secret', clientSecret)
   form.append('mfa_token', mfaToken)
   form.append('code', code)
   form.append('challenge_type', 'totp')
@@ -14,12 +14,12 @@ const verifyOTPCode = ({ app, instance, mfaToken, code }) => {
   }).then((data) => data.json())
 }
 
-const verifyRecoveryCode = ({ app, instance, mfaToken, code }) => {
+const verifyRecoveryCode = ({ clientId, clientSecret, instance, mfaToken, code }) => {
   const url = `${instance}/oauth/mfa/challenge`
   const form = new window.FormData()
 
-  form.append('client_id', app.client_id)
-  form.append('client_secret', app.client_secret)
+  form.append('client_id', clientId)
+  form.append('client_secret', clientSecret)
   form.append('mfa_token', mfaToken)
   form.append('code', code)
   form.append('challenge_type', 'recovery')
-- 
cgit v1.2.3-70-g09d2


From ed3144eb1168ece5fcd3eed2867c653f785039d8 Mon Sep 17 00:00:00 2001
From: Egor Kislitsyn <egor@kislitsyn.com>
Date: Thu, 12 Dec 2019 18:19:46 +0700
Subject: Support "native" captcha

---
 src/components/registration/registration.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components')

diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
index 5bb06a4f..222b67a8 100644
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@@ -172,7 +172,7 @@
                 for="captcha-label"
               >{{ $t('captcha') }}</label>
 
-              <template v-if="captcha.type == 'kocaptcha'">
+              <template v-if="['kocaptcha', 'native'].includes(captcha.type)">
                 <img
                   :src="captcha.url"
                   @click="setCaptcha"
-- 
cgit v1.2.3-70-g09d2


From 7fa294f11c9ea3912b134a16225b3fc0c2ad29cc Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Sat, 30 Nov 2019 12:30:25 -0500
Subject: add icons to nav panel

---
 src/components/nav_panel/nav_panel.vue     | 14 +++++++-------
 src/components/side_drawer/side_drawer.vue | 28 ++++++++++++++--------------
 static/fontello.json                       | 30 ++++++++++++++++++++++++++++++
 3 files changed, 51 insertions(+), 21 deletions(-)

(limited to 'src/components')

diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 28589bb1..d660f189 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -4,22 +4,22 @@
       <ul>
         <li v-if="currentUser">
           <router-link :to="{ name: 'friends' }">
-            {{ $t("nav.timeline") }}
+            <i class="button-icon icon-home-2" /> {{ $t("nav.timeline") }}
           </router-link>
         </li>
         <li v-if="currentUser">
           <router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
-            {{ $t("nav.interactions") }}
+            <i class="button-icon icon-bell-alt" /> {{ $t("nav.interactions") }}
           </router-link>
         </li>
         <li v-if="currentUser">
           <router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }">
-            {{ $t("nav.dms") }}
+            <i class="button-icon icon-mail-alt" /> {{ $t("nav.dms") }}
           </router-link>
         </li>
         <li v-if="currentUser && currentUser.locked">
           <router-link :to="{ name: 'friend-requests' }">
-            {{ $t("nav.friend_requests") }}
+            <i class="button-icon icon-user-plus" /> {{ $t("nav.friend_requests") }}
             <span
               v-if="followRequestCount > 0"
               class="badge follow-request-count"
@@ -30,17 +30,17 @@
         </li>
         <li>
           <router-link :to="{ name: 'public-timeline' }">
-            {{ $t("nav.public_tl") }}
+            <i class="button-icon icon-users" /> {{ $t("nav.public_tl") }}
           </router-link>
         </li>
         <li>
           <router-link :to="{ name: 'public-external-timeline' }">
-            {{ $t("nav.twkn") }}
+            <i class="button-icon icon-globe" /> {{ $t("nav.twkn") }}
           </router-link>
         </li>
         <li>
           <router-link :to="{ name: 'about' }">
-            {{ $t("nav.about") }}
+            <i class="button-icon icon-info-circled" /> {{ $t("nav.about") }}
           </router-link>
         </li>
       </ul>
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index eb429f29..1c65c173 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -36,7 +36,7 @@
           @click="toggleDrawer"
         >
           <router-link :to="{ name: 'login' }">
-            {{ $t("login.login") }}
+            <i class="button-icon icon-login" /> {{ $t("login.login") }}
           </router-link>
         </li>
         <li
@@ -44,7 +44,7 @@
           @click="toggleDrawer"
         >
           <router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }">
-            {{ $t("nav.dms") }}
+            <i class="button-icon icon-mail-alt" /> {{ $t("nav.dms") }}
           </router-link>
         </li>
         <li
@@ -52,7 +52,7 @@
           @click="toggleDrawer"
         >
           <router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
-            {{ $t("nav.interactions") }}
+            <i class="button-icon icon-bell-alt" /> {{ $t("nav.interactions") }}
           </router-link>
         </li>
       </ul>
@@ -62,7 +62,7 @@
           @click="toggleDrawer"
         >
           <router-link :to="{ name: 'friends' }">
-            {{ $t("nav.timeline") }}
+            <i class="button-icon icon-home-2" /> {{ $t("nav.timeline") }}
           </router-link>
         </li>
         <li
@@ -70,7 +70,7 @@
           @click="toggleDrawer"
         >
           <router-link to="/friend-requests">
-            {{ $t("nav.friend_requests") }}
+            <i class="button-icon icon-user-plus" /> {{ $t("nav.friend_requests") }}
             <span
               v-if="followRequestCount > 0"
               class="badge follow-request-count"
@@ -81,12 +81,12 @@
         </li>
         <li @click="toggleDrawer">
           <router-link to="/main/public">
-            {{ $t("nav.public_tl") }}
+            <i class="button-icon icon-users" /> {{ $t("nav.public_tl") }}
           </router-link>
         </li>
         <li @click="toggleDrawer">
           <router-link to="/main/all">
-            {{ $t("nav.twkn") }}
+            <i class="button-icon icon-globe" /> {{ $t("nav.twkn") }}
           </router-link>
         </li>
         <li
@@ -94,14 +94,14 @@
           @click="toggleDrawer"
         >
           <router-link :to="{ name: 'chat' }">
-            {{ $t("nav.chat") }}
+            <i class="button-icon icon-chat" /> {{ $t("nav.chat") }}
           </router-link>
         </li>
       </ul>
       <ul>
         <li @click="toggleDrawer">
           <router-link :to="{ name: 'search' }">
-            {{ $t("nav.search") }}
+            <i class="button-icon icon-search" /> {{ $t("nav.search") }}
           </router-link>
         </li>
         <li
@@ -109,17 +109,17 @@
           @click="toggleDrawer"
         >
           <router-link :to="{ name: 'who-to-follow' }">
-            {{ $t("nav.who_to_follow") }}
+            <i class="button-icon icon-user-plus" /> {{ $t("nav.who_to_follow") }}
           </router-link>
         </li>
         <li @click="toggleDrawer">
           <router-link :to="{ name: 'settings' }">
-            {{ $t("settings.settings") }}
+            <i class="button-icon icon-cog" /> {{ $t("settings.settings") }}
           </router-link>
         </li>
         <li @click="toggleDrawer">
           <router-link :to="{ name: 'about'}">
-            {{ $t("nav.about") }}
+            <i class="button-icon icon-info-circled" /> {{ $t("nav.about") }}
           </router-link>
         </li>
         <li
@@ -130,7 +130,7 @@
             href="/pleroma/admin/#/login-pleroma"
             target="_blank"
           >
-            {{ $t("nav.administration") }}
+            <i class="button-icon icon-gauge" /> {{ $t("nav.administration") }}
           </a>
         </li>
         <li
@@ -141,7 +141,7 @@
             href="#"
             @click="doLogout"
           >
-            {{ $t("login.logout") }}
+            <i class="button-icon icon-logout" /> {{ $t("login.logout") }}
           </a>
         </li>
       </ul>
diff --git a/static/fontello.json b/static/fontello.json
index c0cf1727..c1ed3393 100755
--- a/static/fontello.json
+++ b/static/fontello.json
@@ -303,6 +303,36 @@
       "css": "gauge",
       "code": 61668,
       "src": "fontawesome"
+    },
+    {
+      "uid": "31972e4e9d080eaa796290349ae6c1fd",
+      "css": "users",
+      "code": 59421,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "e82cedfa1d5f15b00c5a81c9bd731ea2",
+      "css": "info-circled",
+      "code": 59423,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "w3nzesrlbezu6f30q7ytyq919p6gdlb6",
+      "css": "home-2",
+      "code": 59425,
+      "src": "typicons"
+    },
+    {
+      "uid": "dcedf50ab1ede3283d7a6c70e2fe32f3",
+      "css": "chat",
+      "code": 59422,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "3a00327e61b997b58518bd43ed83c3df",
+      "css": "login",
+      "code": 59424,
+      "src": "fontawesome"
     }
   ]
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From a412b53801bb9e9398c4c32aad7c430bf922c723 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Mon, 2 Dec 2019 11:45:55 -0500
Subject: increase icon width a little bit in the nav panel

---
 src/components/nav_panel/nav_panel.vue     | 4 ++++
 src/components/side_drawer/side_drawer.vue | 4 ++++
 2 files changed, 8 insertions(+)

(limited to 'src/components')

diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index d660f189..4b79b500 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -113,4 +113,8 @@
     }
   }
 }
+
+.nav-panel .button-icon:before {
+  width: 1.1em;
+}
 </style>
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 1c65c173..31724fa2 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -215,6 +215,10 @@
   box-shadow: var(--panelShadow);
   background-color: $fallback--bg;
   background-color: var(--bg, $fallback--bg);
+
+  .button-icon:before {
+    width: 1.1em;
+  }
 }
 
 .side-drawer-logo-wrapper {
-- 
cgit v1.2.3-70-g09d2


From addacf36d1ee080158b7acba44b70d31e1edb3da Mon Sep 17 00:00:00 2001
From: Maksim Pechnikov <parallel588@gmail.com>
Date: Thu, 12 Dec 2019 21:19:13 +0300
Subject: mfa: removed unused code

---
 src/components/login_form/login_form.js | 2 +-
 src/components/mfa_form/totp_form.js    | 1 -
 src/modules/auth_flow.js                | 8 +-------
 3 files changed, 2 insertions(+), 9 deletions(-)

(limited to 'src/components')

diff --git a/src/components/login_form/login_form.js b/src/components/login_form/login_form.js
index 0b574a04..0d8f1da6 100644
--- a/src/components/login_form/login_form.js
+++ b/src/components/login_form/login_form.js
@@ -58,7 +58,7 @@ const LoginForm = {
         ).then((result) => {
           if (result.error) {
             if (result.error === 'mfa_required') {
-              this.requireMFA({ app: app, settings: result })
+              this.requireMFA({ settings: result })
             } else if (result.identifier === 'password_reset_required') {
               this.$router.push({ name: 'password-reset', params: { passwordResetRequested: true } })
             } else {
diff --git a/src/components/mfa_form/totp_form.js b/src/components/mfa_form/totp_form.js
index 1ec7576b..b774f2d0 100644
--- a/src/components/mfa_form/totp_form.js
+++ b/src/components/mfa_form/totp_form.js
@@ -7,7 +7,6 @@ export default {
   }),
   computed: {
     ...mapGetters({
-      authApp: 'authFlow/app',
       authSettings: 'authFlow/settings'
     }),
     ...mapState({
diff --git a/src/modules/auth_flow.js b/src/modules/auth_flow.js
index d0a90feb..956d40e8 100644
--- a/src/modules/auth_flow.js
+++ b/src/modules/auth_flow.js
@@ -7,7 +7,6 @@ const RECOVERY_STRATEGY = 'recovery'
 
 // initial state
 const state = {
-  app: null,
   settings: {},
   strategy: PASSWORD_STRATEGY,
   initStrategy: PASSWORD_STRATEGY // default strategy from config
@@ -16,14 +15,10 @@ const state = {
 const resetState = (state) => {
   state.strategy = state.initStrategy
   state.settings = {}
-  state.app = null
 }
 
 // getters
 const getters = {
-  app: (state, getters) => {
-    return state.app
-  },
   settings: (state, getters) => {
     return state.settings
   },
@@ -55,9 +50,8 @@ const mutations = {
   requireToken (state) {
     state.strategy = TOKEN_STRATEGY
   },
-  requireMFA (state, { app, settings }) {
+  requireMFA (state, { settings }) {
     state.settings = settings
-    state.app = app
     state.strategy = TOTP_STRATEGY // default strategy of MFA
   },
   requireRecovery (state) {
-- 
cgit v1.2.3-70-g09d2


From 3eeb3dc57296cba13e3760a79b635fba5a332be0 Mon Sep 17 00:00:00 2001
From: Mark Felder <feld@FreeBSD.org>
Date: Thu, 12 Dec 2019 13:37:32 -0600
Subject: Lint

---
 src/App.vue                           | 2 +-
 src/components/nav_panel/nav_panel.js | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

(limited to 'src/components')

diff --git a/src/App.vue b/src/App.vue
index d455e9ed..5f8517d4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -43,8 +43,8 @@
           <search-bar
             class="nav-icon mobile-hidden"
             @toggled="onSearchBarToggled"
-            @click.stop.native
             v-if="currentUser || !privateMode"
+            @click.stop.native
           />
           <router-link
             class="mobile-hidden"
diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js
index dbbfb096..f27727fc 100644
--- a/src/components/nav_panel/nav_panel.js
+++ b/src/components/nav_panel/nav_panel.js
@@ -1,4 +1,3 @@
-import followRequestFetcher from '../../services/follow_request_fetcher/follow_request_fetcher.service'
 import { mapState } from 'vuex'
 
 const NavPanel = {
-- 
cgit v1.2.3-70-g09d2


From 211d25cd5a4df92f9de249e053e00a7c788aacba Mon Sep 17 00:00:00 2001
From: Mark Felder <feld@FreeBSD.org>
Date: Thu, 12 Dec 2019 13:39:18 -0600
Subject: More lint

---
 src/components/side_drawer/side_drawer.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

(limited to 'src/components')

diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 1454e0d8..064472b9 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -79,12 +79,14 @@
             </span>
           </router-link>
         </li>
-        <li @click="toggleDrawer" v-if="currentUser || !privateMode">
+        <li @click="toggleDrawer"
+          v-if="currentUser || !privateMode">
           <router-link to="/main/public">
             <i class="button-icon icon-users" /> {{ $t("nav.public_tl") }}
           </router-link>
         </li>
-        <li @click="toggleDrawer" v-if="(currentUser || !privateMode) && federating">
+        <li @click="toggleDrawer"
+          v-if="(currentUser || !privateMode) && federating">
           <router-link to="/main/all">
             <i class="button-icon icon-globe" /> {{ $t("nav.twkn") }}
           </router-link>
@@ -99,7 +101,8 @@
         </li>
       </ul>
       <ul>
-        <li @click="toggleDrawer" v-if="currentUser || !privateMode">
+        <li @click="toggleDrawer"
+          v-if="currentUser || !privateMode">
           <router-link :to="{ name: 'search' }">
             <i class="button-icon icon-search" /> {{ $t("nav.search") }}
           </router-link>
-- 
cgit v1.2.3-70-g09d2


From afe5b3a82d5b6e9b02fa6db9354060aa72edb712 Mon Sep 17 00:00:00 2001
From: Mark Felder <feld@FreeBSD.org>
Date: Thu, 12 Dec 2019 13:41:52 -0600
Subject: More lint

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

(limited to 'src/components')

diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 064472b9..bf61d38c 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -79,14 +79,14 @@
             </span>
           </router-link>
         </li>
-        <li @click="toggleDrawer"
-          v-if="currentUser || !privateMode">
+        <li v-if="currentUser || !privateMode"
+          @click="toggleDrawer">
           <router-link to="/main/public">
             <i class="button-icon icon-users" /> {{ $t("nav.public_tl") }}
           </router-link>
         </li>
-        <li @click="toggleDrawer"
-          v-if="(currentUser || !privateMode) && federating">
+        <li v-if="(currentUser || !privateMode) && federating"
+          @click="toggleDrawer">
           <router-link to="/main/all">
             <i class="button-icon icon-globe" /> {{ $t("nav.twkn") }}
           </router-link>
@@ -101,8 +101,8 @@
         </li>
       </ul>
       <ul>
-        <li @click="toggleDrawer"
-          v-if="currentUser || !privateMode">
+        <li v-if="currentUser || !privateMode"
+          @click="toggleDrawer">
           <router-link :to="{ name: 'search' }">
             <i class="button-icon icon-search" /> {{ $t("nav.search") }}
           </router-link>
-- 
cgit v1.2.3-70-g09d2


From 7ddd5af0812a73d6a898331e38603067e0cd219b Mon Sep 17 00:00:00 2001
From: Mark Felder <feld@FreeBSD.org>
Date: Thu, 12 Dec 2019 13:46:07 -0600
Subject: Finally trust eslint

---
 src/App.vue                                |  2 +-
 src/components/side_drawer/side_drawer.vue | 18 ++++++++++++------
 2 files changed, 13 insertions(+), 7 deletions(-)

(limited to 'src/components')

diff --git a/src/App.vue b/src/App.vue
index 5f8517d4..1b1c2648 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -41,9 +41,9 @@
         </div>
         <div class="item right">
           <search-bar
+            v-if="currentUser || !privateMode"
             class="nav-icon mobile-hidden"
             @toggled="onSearchBarToggled"
-            v-if="currentUser || !privateMode"
             @click.stop.native
           />
           <router-link
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index bf61d38c..49c25bba 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -79,14 +79,18 @@
             </span>
           </router-link>
         </li>
-        <li v-if="currentUser || !privateMode"
-          @click="toggleDrawer">
+        <li
+          v-if="currentUser || !privateMode"
+          @click="toggleDrawer"
+        >
           <router-link to="/main/public">
             <i class="button-icon icon-users" /> {{ $t("nav.public_tl") }}
           </router-link>
         </li>
-        <li v-if="(currentUser || !privateMode) && federating"
-          @click="toggleDrawer">
+        <li
+          v-if="(currentUser || !privateMode) && federating"
+          @click="toggleDrawer"
+        >
           <router-link to="/main/all">
             <i class="button-icon icon-globe" /> {{ $t("nav.twkn") }}
           </router-link>
@@ -101,8 +105,10 @@
         </li>
       </ul>
       <ul>
-        <li v-if="currentUser || !privateMode"
-          @click="toggleDrawer">
+        <li
+          v-if="currentUser || !privateMode"
+          @click="toggleDrawer"
+        >
           <router-link :to="{ name: 'search' }">
             <i class="button-icon icon-search" /> {{ $t("nav.search") }}
           </router-link>
-- 
cgit v1.2.3-70-g09d2


From 2514dc183f604686d1648c0a69f6eba00d943ce7 Mon Sep 17 00:00:00 2001
From: Mark Felder <feld@FreeBSD.org>
Date: Thu, 12 Dec 2019 13:51:50 -0600
Subject: Logic should be to hide TWKN if not federating OR if instance is not
 public

Private instances should not show any timelines
---
 src/components/nav_panel/nav_panel.vue     | 2 +-
 src/components/side_drawer/side_drawer.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/components')

diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 97c36711..034259d9 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -33,7 +33,7 @@
             <i class="button-icon icon-users" /> {{ $t("nav.public_tl") }}
           </router-link>
         </li>
-        <li v-if="(currentUser || !privateMode) && federating">
+        <li v-if="federating && !privateMode">
           <router-link :to="{ name: 'public-external-timeline' }">
             <i class="button-icon icon-globe" /> {{ $t("nav.twkn") }}
           </router-link>
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 49c25bba..3fba9058 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -88,7 +88,7 @@
           </router-link>
         </li>
         <li
-          v-if="(currentUser || !privateMode) && federating"
+          v-if="federating && !privateMode"
           @click="toggleDrawer"
         >
           <router-link to="/main/all">
-- 
cgit v1.2.3-70-g09d2


From 0743fbb28b94dd4308f8e2ca01d9def91b6ffddf Mon Sep 17 00:00:00 2001
From: Mark Felder <feld@FreeBSD.org>
Date: Thu, 12 Dec 2019 13:56:07 -0600
Subject: The value we are looking for is federationPolicy.enabled, not
 federationPolicy.federating

Also the || true fallback does not work and always becomes true
---
 src/components/nav_panel/nav_panel.js     | 2 +-
 src/components/side_drawer/side_drawer.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/components')

diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js
index f27727fc..7da9f8c6 100644
--- a/src/components/nav_panel/nav_panel.js
+++ b/src/components/nav_panel/nav_panel.js
@@ -11,7 +11,7 @@ const NavPanel = {
     chat: state => state.chat.channel,
     followRequestCount: state => state.api.followRequests.length,
     privateMode: state => state.instance.private,
-    federating: state => state.instance.federationPolicy.federating || true
+    federating: state => state.instance.federationPolicy.enabled
   })
 }
 
diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js
index 22cb1a55..e08f7cbe 100644
--- a/src/components/side_drawer/side_drawer.js
+++ b/src/components/side_drawer/side_drawer.js
@@ -46,7 +46,7 @@ const SideDrawer = {
       return this.$store.state.instance.private
     },
     federating () {
-      return this.$store.state.instance.federationPolicy.federating || true
+      return this.$store.state.instance.federationPolicy.enabled
     }
   },
   methods: {
-- 
cgit v1.2.3-70-g09d2


From 8d14036a23adbd13b098abeeef9622471f4a64d3 Mon Sep 17 00:00:00 2001
From: Mark Felder <feld@FreeBSD.org>
Date: Thu, 12 Dec 2019 15:17:23 -0600
Subject: Add fallback in case BE does not report federating status in nodeinfo

---
 src/components/nav_panel/nav_panel.js     | 2 +-
 src/components/side_drawer/side_drawer.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/components')

diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js
index 7da9f8c6..515e47e6 100644
--- a/src/components/nav_panel/nav_panel.js
+++ b/src/components/nav_panel/nav_panel.js
@@ -11,7 +11,7 @@ const NavPanel = {
     chat: state => state.chat.channel,
     followRequestCount: state => state.api.followRequests.length,
     privateMode: state => state.instance.private,
-    federating: state => state.instance.federationPolicy.enabled
+    federating: state => state.instance.federationPolicy.enabled || state.instance.federationPolicy.enabled !== false
   })
 }
 
diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js
index e08f7cbe..670d28b4 100644
--- a/src/components/side_drawer/side_drawer.js
+++ b/src/components/side_drawer/side_drawer.js
@@ -46,7 +46,7 @@ const SideDrawer = {
       return this.$store.state.instance.private
     },
     federating () {
-      return this.$store.state.instance.federationPolicy.enabled
+      return this.$store.state.instance.federationPolicy.enabled || this.$store.state.instance.federationPolicy.enabled !== false
     }
   },
   methods: {
-- 
cgit v1.2.3-70-g09d2


From d899d06973c7c46e77f9e47f480d6967e83b4adf Mon Sep 17 00:00:00 2001
From: Mark Felder <feld@FreeBSD.org>
Date: Thu, 12 Dec 2019 15:29:50 -0600
Subject: Use a centralized fallback for missing values and use
 instance.federating instead of instance.federation.enabled

---
 src/boot/after_store.js                   | 6 ++++++
 src/components/nav_panel/nav_panel.js     | 2 +-
 src/components/side_drawer/side_drawer.js | 2 +-
 3 files changed, 8 insertions(+), 2 deletions(-)

(limited to 'src/components')

diff --git a/src/boot/after_store.js b/src/boot/after_store.js
index f169d7ba..228a0497 100644
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@@ -228,6 +228,12 @@ const getNodeInfo = async ({ store }) => {
 
       const federation = metadata.federation
       store.dispatch('setInstanceOption', { name: 'federationPolicy', value: federation })
+      store.dispatch('setInstanceOption', {
+        name: 'federating',
+        value: typeof federation.enabled === 'undefined'
+          ? true
+          : federation.enabled
+      })
 
       const accounts = metadata.staffAccounts
       await resolveStaffAccounts({ store, accounts })
diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js
index 515e47e6..d9268585 100644
--- a/src/components/nav_panel/nav_panel.js
+++ b/src/components/nav_panel/nav_panel.js
@@ -11,7 +11,7 @@ const NavPanel = {
     chat: state => state.chat.channel,
     followRequestCount: state => state.api.followRequests.length,
     privateMode: state => state.instance.private,
-    federating: state => state.instance.federationPolicy.enabled || state.instance.federationPolicy.enabled !== false
+    federating: state => state.instance.federating
   })
 }
 
diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js
index 670d28b4..2534eb8f 100644
--- a/src/components/side_drawer/side_drawer.js
+++ b/src/components/side_drawer/side_drawer.js
@@ -46,7 +46,7 @@ const SideDrawer = {
       return this.$store.state.instance.private
     },
     federating () {
-      return this.$store.state.instance.federationPolicy.enabled || this.$store.state.instance.federationPolicy.enabled !== false
+      return this.$store.state.instance.federating
     }
   },
   methods: {
-- 
cgit v1.2.3-70-g09d2


From 32d7a49b9d02bfa6c6e997f4d6e923752b062a90 Mon Sep 17 00:00:00 2001
From: Absturztaube <me@absturztaube.ch>
Date: Sun, 15 Dec 2019 17:58:37 +0100
Subject: use flex for stickers

---
 src/components/sticker_picker/sticker_picker.vue | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

(limited to 'src/components')

diff --git a/src/components/sticker_picker/sticker_picker.vue b/src/components/sticker_picker/sticker_picker.vue
index 7d6fdc24..3863908a 100644
--- a/src/components/sticker_picker/sticker_picker.vue
+++ b/src/components/sticker_picker/sticker_picker.vue
@@ -36,16 +36,20 @@
 
 .sticker-picker {
   width: 100%;
-  position: relative;
   .contents {
     min-height: 250px;
     .sticker-picker-content {
+      display: flex;
+      flex-wrap: wrap;
+      padding: 0 4px;
       .sticker {
-        display: inline-block;
-        width: 20%;
-        height: 20%;
+        display: flex;
+        flex: 1 1 auto;
+        margin: 4px;
+        width: 56px;
+        height: 56px;
         img {
-          width: 100%;
+          height: 100%;
           &:hover {
             filter: drop-shadow(0 0 5px var(--link, $fallback--link));
           }
-- 
cgit v1.2.3-70-g09d2


From 54f692622ad4fe6c427ae6d67816be93a7644ac8 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Sun, 15 Dec 2019 14:29:45 -0500
Subject: wire up staff accounts with correct store data

---
 src/boot/after_store.js                   | 11 ++++-------
 src/components/staff_panel/staff_panel.js |  3 ++-
 2 files changed, 6 insertions(+), 8 deletions(-)

(limited to 'src/components')

diff --git a/src/boot/after_store.js b/src/boot/after_store.js
index 228a0497..0bb1b2b4 100644
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@@ -185,12 +185,9 @@ const getAppSecret = async ({ store }) => {
     })
 }
 
-const resolveStaffAccounts = async ({ store, accounts }) => {
-  const backendInteractor = store.state.api.backendInteractor
-  let nicknames = accounts.map(uri => uri.split('/').pop())
-    .map(id => backendInteractor.fetchUser({ id }))
-  nicknames = await Promise.all(nicknames)
-
+const resolveStaffAccounts = ({ store, accounts }) => {
+  const nicknames = accounts.map(uri => uri.split('/').pop())
+  nicknames.map(nickname => store.dispatch('fetchUser', nickname))
   store.dispatch('setInstanceOption', { name: 'staffAccounts', value: nicknames })
 }
 
@@ -236,7 +233,7 @@ const getNodeInfo = async ({ store }) => {
       })
 
       const accounts = metadata.staffAccounts
-      await resolveStaffAccounts({ store, accounts })
+      resolveStaffAccounts({ store, accounts })
     } else {
       throw (res)
     }
diff --git a/src/components/staff_panel/staff_panel.js b/src/components/staff_panel/staff_panel.js
index 93e950ad..4f98fff6 100644
--- a/src/components/staff_panel/staff_panel.js
+++ b/src/components/staff_panel/staff_panel.js
@@ -1,3 +1,4 @@
+import map from 'lodash/map'
 import BasicUserCard from '../basic_user_card/basic_user_card.vue'
 
 const StaffPanel = {
@@ -6,7 +7,7 @@ const StaffPanel = {
   },
   computed: {
     staffAccounts () {
-      return this.$store.state.instance.staffAccounts
+      return map(this.$store.state.instance.staffAccounts, nickname => this.$store.getters.findUser(nickname)).filter(_ => _)
     }
   }
 }
-- 
cgit v1.2.3-70-g09d2


From 506822bed01deb2d2fb98f511902d6801819cbd8 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Mon, 18 Nov 2019 20:29:12 -0500
Subject: replace setActivationStatus api with new one

---
 src/components/moderation_tools/moderation_tools.js   |  2 +-
 src/services/api/api.service.js                       | 19 +++++++------------
 .../backend_interactor_service.js                     |  6 +++---
 3 files changed, 11 insertions(+), 16 deletions(-)

(limited to 'src/components')

diff --git a/src/components/moderation_tools/moderation_tools.js b/src/components/moderation_tools/moderation_tools.js
index 8aadc8c5..10a20709 100644
--- a/src/components/moderation_tools/moderation_tools.js
+++ b/src/components/moderation_tools/moderation_tools.js
@@ -73,7 +73,7 @@ const ModerationTools = {
     toggleActivationStatus () {
       const store = this.$store
       const status = !!this.user.deactivated
-      store.state.api.backendInteractor.setActivationStatus(this.user, status).then(response => {
+      store.state.api.backendInteractor.toggleActivationStatus(this.user).then(response => {
         if (!response.ok) { return }
         store.commit('updateActivationStatus', { user: this.user, status: status })
       })
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 7eb0547e..dbc8320e 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -12,7 +12,7 @@ const CHANGE_EMAIL_URL = '/api/pleroma/change_email'
 const CHANGE_PASSWORD_URL = '/api/pleroma/change_password'
 const TAG_USER_URL = '/api/pleroma/admin/users/tag'
 const PERMISSION_GROUP_URL = (screenName, right) => `/api/pleroma/admin/users/${screenName}/permission_group/${right}`
-const ACTIVATION_STATUS_URL = screenName => `/api/pleroma/admin/users/${screenName}/activation_status`
+const TOGGLE_ACTIVATION_URL = screenName => `/api/pleroma/admin/users/${screenName}/toggle_activation`
 const ADMIN_USERS_URL = '/api/pleroma/admin/users'
 const SUGGESTIONS_URL = '/api/v1/suggestions'
 const NOTIFICATION_SETTINGS_URL = '/api/pleroma/notification_settings'
@@ -450,19 +450,14 @@ const deleteRight = ({ right, credentials, ...user }) => {
   })
 }
 
-const setActivationStatus = ({ status, credentials, ...user }) => {
-  const screenName = user.screen_name
-  const body = {
-    status: status
-  }
-
+// eslint-disable-next-line camelcase
+const toggleActivationStatus = ({ credentials, screen_name }) => {
   const headers = authHeaders(credentials)
   headers['Content-Type'] = 'application/json'
 
-  return fetch(ACTIVATION_STATUS_URL(screenName), {
-    method: 'PUT',
-    headers: headers,
-    body: JSON.stringify(body)
+  return fetch(TOGGLE_ACTIVATION_URL(screen_name), {
+    method: 'PATCH',
+    headers: headers
   })
 }
 
@@ -979,7 +974,7 @@ const apiService = {
   deleteUser,
   addRight,
   deleteRight,
-  setActivationStatus,
+  toggleActivationStatus,
   register,
   getCaptcha,
   updateAvatar,
diff --git a/src/services/backend_interactor_service/backend_interactor_service.js b/src/services/backend_interactor_service/backend_interactor_service.js
index c16bd1f1..e0a15d3b 100644
--- a/src/services/backend_interactor_service/backend_interactor_service.js
+++ b/src/services/backend_interactor_service/backend_interactor_service.js
@@ -89,8 +89,8 @@ const backendInteractorService = credentials => {
   }
 
   // eslint-disable-next-line camelcase
-  const setActivationStatus = ({ screen_name }, status) => {
-    return apiService.setActivationStatus({ screen_name, status, credentials })
+  const toggleActivationStatus = ({ screen_name }) => {
+    return apiService.toggleActivationStatus({ screen_name, credentials })
   }
 
   // eslint-disable-next-line camelcase
@@ -191,7 +191,7 @@ const backendInteractorService = credentials => {
     addRight,
     deleteRight,
     deleteUser,
-    setActivationStatus,
+    toggleActivationStatus,
     register,
     getCaptcha,
     updateAvatar,
-- 
cgit v1.2.3-70-g09d2


From 36376ce57c93c81317b6a8b0b50699d6b8488f57 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Mon, 18 Nov 2019 20:42:10 -0500
Subject: use vuex action

---
 src/components/moderation_tools/moderation_tools.js |  7 +------
 src/modules/users.js                                | 10 ++++++++--
 2 files changed, 9 insertions(+), 8 deletions(-)

(limited to 'src/components')

diff --git a/src/components/moderation_tools/moderation_tools.js b/src/components/moderation_tools/moderation_tools.js
index 10a20709..02b92fef 100644
--- a/src/components/moderation_tools/moderation_tools.js
+++ b/src/components/moderation_tools/moderation_tools.js
@@ -71,12 +71,7 @@ const ModerationTools = {
       }
     },
     toggleActivationStatus () {
-      const store = this.$store
-      const status = !!this.user.deactivated
-      store.state.api.backendInteractor.toggleActivationStatus(this.user).then(response => {
-        if (!response.ok) { return }
-        store.commit('updateActivationStatus', { user: this.user, status: status })
-      })
+      this.$store.dispatch('toggleActivationStatus', this.user)
     },
     deleteUserDialog (show) {
       this.showDeleteUserDialog = show
diff --git a/src/modules/users.js b/src/modules/users.js
index 14b2d8b5..ec2ef608 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -95,9 +95,9 @@ export const mutations = {
     newRights[right] = value
     set(user, 'rights', newRights)
   },
-  updateActivationStatus (state, { user: { id }, status }) {
+  updateActivationStatus (state, { user: { id }, deactivated }) {
     const user = state.usersObject[id]
-    set(user, 'deactivated', !status)
+    set(user, 'deactivated', deactivated)
   },
   setCurrentUser (state, user) {
     state.lastLoginName = user.screen_name
@@ -331,6 +331,12 @@ const users = {
       return rootState.api.backendInteractor.unsubscribeUser(id)
         .then((relationship) => commit('updateUserRelationship', [relationship]))
     },
+    toggleActivationStatus ({ rootState, commit }, user) {
+      rootState.api.backendInteractor.toggleActivationStatus(user)
+        .then(response => {
+          commit('updateActivationStatus', { user, deactivated: response.deactivated })
+        })
+    },
     registerPushNotifications (store) {
       const token = store.state.currentUser.credentials
       const vapidPublicKey = store.rootState.instance.vapidPublicKey
-- 
cgit v1.2.3-70-g09d2


From 43197c424366099301e59d3d1c7be58b987cb833 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 26 Dec 2019 14:12:35 +0200
Subject: Some error handling

---
 src/components/settings/settings.js |  4 ++
 src/modules/api.js                  | 87 ++++++++++++++++++++-----------------
 2 files changed, 51 insertions(+), 40 deletions(-)

(limited to 'src/components')

diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js
index 2d7723cc..31a9e9be 100644
--- a/src/components/settings/settings.js
+++ b/src/components/settings/settings.js
@@ -103,6 +103,10 @@ const settings = {
 
         promise.then(() => {
           this.$store.dispatch('setOption', { name: 'useStreamingApi', value })
+        }).catch((e) => {
+          console.error('Failed starting MastoAPI Streaming socket', e)
+          this.$store.dispatch('disableMastoSockets')
+          this.$store.dispatch('setOption', { name: 'useStreamingApi', value: false })
         })
       }
     }
diff --git a/src/modules/api.js b/src/modules/api.js
index dc91d00e..b6dd7fcf 100644
--- a/src/modules/api.js
+++ b/src/modules/api.js
@@ -35,60 +35,67 @@ const api = {
     enableMastoSockets (store) {
       const { state, dispatch } = store
       if (state.mastoUserSocket) return
-      dispatch('startMastoUserSocket')
+      return dispatch('startMastoUserSocket')
     },
     disableMastoSockets (store) {
       const { state, dispatch } = store
       if (!state.mastoUserSocket) return
-      dispatch('stopMastoUserSocket')
+      return dispatch('stopMastoUserSocket')
     },
 
     // MastoAPI 'User' sockets
     startMastoUserSocket (store) {
-      const { state, dispatch } = store
-      state.mastoUserSocket = state.backendInteractor.startUserSocket({ store })
-      state.mastoUserSocket.addEventListener(
-        'message',
-        ({ detail: message }) => {
-          if (!message) return // pings
-          if (message.event === 'notification') {
-            dispatch('addNewNotifications', {
-              notifications: [message.notification],
-              older: false
-            })
-          } else if (message.event === 'update') {
-            dispatch('addNewStatuses', {
-              statuses: [message.status],
-              userId: false,
-              showImmediately: false,
-              timeline: 'friends'
-            })
-          }
-        }
-      )
-      state.mastoUserSocket.addEventListener('error', ({ detail: error }) => {
-        console.error('Error in MastoAPI websocket:', error)
-      })
-      state.mastoUserSocket.addEventListener('close', ({ detail: closeEvent }) => {
-        const ignoreCodes = new Set([
-          1000, // Normal (intended) closure
-          1001 // Going away
-        ])
-        const { code } = closeEvent
-        if (ignoreCodes.has(code)) {
-          console.debug(`Not restarting socket becasue of closure code ${code} is in ignore list`)
-        } else {
-          console.warn(`MastoAPI websocket disconnected, restarting. CloseEvent code: ${code}`)
-          dispatch('startFetchingTimeline', { timeline: 'friends' })
-          dispatch('startFetchingNotifications')
-          dispatch('restartMastoUserSocket')
+      return new Promise((resolve, reject) => {
+        try {
+          const { state, dispatch } = store
+          state.mastoUserSocket = state.backendInteractor.startUserSocket({ store })
+          state.mastoUserSocket.addEventListener(
+            'message',
+            ({ detail: message }) => {
+              if (!message) return // pings
+              if (message.event === 'notification') {
+                dispatch('addNewNotifications', {
+                  notifications: [message.notification],
+                  older: false
+                })
+              } else if (message.event === 'update') {
+                dispatch('addNewStatuses', {
+                  statuses: [message.status],
+                  userId: false,
+                  showImmediately: false,
+                  timeline: 'friends'
+                })
+              }
+            }
+          )
+          state.mastoUserSocket.addEventListener('error', ({ detail: error }) => {
+            console.error('Error in MastoAPI websocket:', error)
+          })
+          state.mastoUserSocket.addEventListener('close', ({ detail: closeEvent }) => {
+            const ignoreCodes = new Set([
+              1000, // Normal (intended) closure
+              1001 // Going away
+            ])
+            const { code } = closeEvent
+            if (ignoreCodes.has(code)) {
+              console.debug(`Not restarting socket becasue of closure code ${code} is in ignore list`)
+            } else {
+              console.warn(`MastoAPI websocket disconnected, restarting. CloseEvent code: ${code}`)
+              dispatch('startFetchingTimeline', { timeline: 'friends' })
+              dispatch('startFetchingNotifications')
+              dispatch('restartMastoUserSocket')
+            }
+          })
+          resolve()
+        } catch (e) {
+          reject(e)
         }
       })
     },
     restartMastoUserSocket ({ dispatch }) {
       // This basically starts MastoAPI user socket and stops conventional
       // fetchers when connection reestablished
-      dispatch('startMastoUserSocket').then(() => {
+      return dispatch('startMastoUserSocket').then(() => {
         dispatch('stopFetchingTimeline', { timeline: 'friends' })
         dispatch('stopFetchingNotifications')
       })
-- 
cgit v1.2.3-70-g09d2


From e5a34870f0f7154712783fb6d9c20edf4c06ad35 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sat, 28 Dec 2019 15:55:42 +0200
Subject: Accent works

---
 src/App.scss                                     |  2 +-
 src/components/color_input/color_input.vue       | 42 +++++++++++++++++++++---
 src/components/sticker_picker/sticker_picker.vue |  2 +-
 src/components/style_switcher/style_switcher.js  |  5 ++-
 src/components/style_switcher/style_switcher.vue | 11 ++++++-
 src/i18n/en.json                                 |  1 +
 src/services/style_setter/style_setter.js        | 13 ++++++--
 static/themes/breezy-dark.json                   |  2 +-
 static/themes/breezy-light.json                  |  2 +-
 9 files changed, 68 insertions(+), 12 deletions(-)

(limited to 'src/components')

diff --git a/src/App.scss b/src/App.scss
index 754ca62e..3b03a761 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -198,7 +198,7 @@ input, textarea, .select {
     &:checked + label::before {
       box-shadow: 0px 0px 2px black inset, 0px 0px 0px 4px $fallback--fg inset;
       box-shadow: var(--inputShadow), 0px 0px 0px 4px var(--fg, $fallback--fg) inset;
-      background-color: var(--link, $fallback--link);
+      background-color: var(--accent, $fallback--link);
     }
     &:disabled {
       &,
diff --git a/src/components/color_input/color_input.vue b/src/components/color_input/color_input.vue
index 9db62e81..fa26d079 100644
--- a/src/components/color_input/color_input.vue
+++ b/src/components/color_input/color_input.vue
@@ -18,7 +18,7 @@
       @input="$emit('input', typeof value === 'undefined' ? fallback : undefined)"
     >
     <label
-      v-if="typeof fallback !== 'undefined'"
+      v-if="typeof fallback !== 'undefined' && showOptionalTickbox"
       class="opt-l"
       :for="name + '-o'"
     />
@@ -43,9 +43,43 @@
 
 <script>
 export default {
-  props: [
-    'name', 'label', 'value', 'fallback', 'disabled'
-  ],
+  props: {
+    // Name of color, used for identifying
+    name: {
+      required: true,
+      type: String
+    },
+    // Readable label
+    label: {
+      required: true,
+      type: String
+    },
+    // Color value, should be required but vue cannot tell the difference
+    // between "property missing" and "property set to undefined"
+    value: {
+      required: false,
+      type: String,
+      default: undefined
+    },
+    // Color fallback to use when value is not defeind
+    fallback: {
+      required: false,
+      type: String,
+      default: undefined
+    },
+    // Disable the control
+    disabled: {
+      required: false,
+      type: Boolean,
+      default: false
+    },
+    // Show "optional" tickbox, for when value might become mandatory
+    showOptionalTickbox: {
+      required: false,
+      type: Boolean,
+      default: true
+    }
+  },
   computed: {
     present () {
       return typeof this.value !== 'undefined'
diff --git a/src/components/sticker_picker/sticker_picker.vue b/src/components/sticker_picker/sticker_picker.vue
index 3863908a..dc449ccb 100644
--- a/src/components/sticker_picker/sticker_picker.vue
+++ b/src/components/sticker_picker/sticker_picker.vue
@@ -51,7 +51,7 @@
         img {
           height: 100%;
           &:hover {
-            filter: drop-shadow(0 0 5px var(--link, $fallback--link));
+            filter: drop-shadow(0 0 5px var(--accent, $fallback--link));
           }
         }
       }
diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index ebde4475..1e512407 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -46,7 +46,8 @@ export default {
       keepFonts: false,
 
       textColorLocal: '',
-      linkColorLocal: '',
+      accentColorLocal: undefined,
+      linkColorLocal: undefined,
 
       bgColorLocal: '',
       bgOpacityLocal: undefined,
@@ -132,6 +133,8 @@ export default {
         fgText: this.fgTextColorLocal,
         fgLink: this.fgLinkColorLocal,
 
+        accent: this.accentColorLocal,
+
         panel: this.panelColorLocal,
         panelText: this.panelTextColorLocal,
         panelLink: this.panelLinkColorLocal,
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index ad032041..8bbdc7b7 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -114,9 +114,18 @@
               :label="$t('settings.text')"
             />
             <ContrastRatio :contrast="previewContrast.bgText" />
+            <ColorInput
+              v-model="accentColorLocal"
+              name="accentColor"
+              :fallback="previewTheme.colors.link"
+              :showOptionalTickbox="typeof linkColorLocal !== 'undefined'"
+              :label="$t('settings.accent')"
+            />
             <ColorInput
               v-model="linkColorLocal"
               name="linkColor"
+              :fallback="previewTheme.colors.accent"
+              :showOptionalTickbox="typeof accentColorLocal !== 'undefined'"
               :label="$t('settings.links')"
             />
             <ContrastRatio :contrast="previewContrast.bgLink" />
@@ -336,7 +345,7 @@
             <ColorInput
               v-model="faintColorLocal"
               name="faintColor"
-              :fallback="previewTheme.colors.faint || 1"
+              :fallback="previewTheme.colors.faint"
               :label="$t('settings.text')"
             />
             <ColorInput
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 60fc792f..323813f6 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -272,6 +272,7 @@
     "follow_import": "Follow import",
     "follow_import_error": "Error importing followers",
     "follows_imported": "Follows imported! Processing them will take a while.",
+    "accent": "Accent",
     "foreground": "Foreground",
     "general": "General",
     "hide_attachments_in_convo": "Hide attachments in conversations",
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index eaa495c4..1e4bc59e 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -160,7 +160,13 @@ const generateColors = (input) => {
     }
     return acc
   }, {}))
-  const col = Object.entries(input.colors || input).reduce((acc, [k, v]) => {
+
+  const inputColors = input.colors || input
+
+  const compat = input.v3compat || {}
+  const compatColors = compat.colors || {}
+
+  const col = Object.entries({ ...inputColors, ...compatColors }).reduce((acc, [k, v]) => {
     if (typeof v === 'object') {
       acc[k] = v
     } else {
@@ -174,7 +180,10 @@ const generateColors = (input) => {
 
   colors.text = col.text
   colors.lightText = brightness(20 * mod, colors.text).rgb
-  colors.link = col.link
+
+  colors.accent = col.accent || col.link
+  colors.link = col.link || col.accent
+
   colors.faint = col.faint || Object.assign({}, col.text)
 
   colors.bg = col.bg
diff --git a/static/themes/breezy-dark.json b/static/themes/breezy-dark.json
index 6119bf88..7ce41384 100644
--- a/static/themes/breezy-dark.json
+++ b/static/themes/breezy-dark.json
@@ -50,7 +50,7 @@
           "y": "0",
           "blur": 0,
           "spread": "1",
-          "color": "--link",
+          "color": "--accent",
           "alpha": "0.3",
           "inset": true
         },
diff --git a/static/themes/breezy-light.json b/static/themes/breezy-light.json
index becf704f..dc43f90e 100644
--- a/static/themes/breezy-light.json
+++ b/static/themes/breezy-light.json
@@ -50,7 +50,7 @@
           "y": "0",
           "blur": 0,
           "spread": "1",
-          "color": "--link",
+          "color": "--accent",
           "alpha": "0.3",
           "inset": true
         },
-- 
cgit v1.2.3-70-g09d2


From 1a78461443e4f85461283c1921694a5fb28ea39f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sat, 28 Dec 2019 17:02:34 +0200
Subject: fixed import-export

---
 src/components/export_import/export_import.vue   |  2 +-
 src/components/style_switcher/style_switcher.js  | 34 +++++++++++++++++++-----
 src/components/style_switcher/style_switcher.vue |  4 +--
 src/services/style_setter/style_setter.js        | 27 +++++++++++++++++--
 4 files changed, 56 insertions(+), 11 deletions(-)

(limited to 'src/components')

diff --git a/src/components/export_import/export_import.vue b/src/components/export_import/export_import.vue
index 20c6f569..ae00487f 100644
--- a/src/components/export_import/export_import.vue
+++ b/src/components/export_import/export_import.vue
@@ -42,7 +42,7 @@ export default {
   },
   methods: {
     exportData () {
-      const stringified = JSON.stringify(this.exportObject) // Pretty-print and indent with 2 spaces
+      const stringified = JSON.stringify(this.exportObject, null, 2) // Pretty-print and indent with 2 spaces
 
       // Create an invisible link with a data url and simulate a click
       const e = document.createElement('a')
diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index 1e512407..b450dc8e 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -1,6 +1,7 @@
 import { rgb2hex, hex2rgb, getContrastRatio, alphaBlend } from '../../services/color_convert/color_convert.js'
 import { set, delete as del } from 'vue'
-import { generateColors, generateShadows, generateRadii, generateFonts, composePreset, getThemes } from '../../services/style_setter/style_setter.js'
+import { merge } from 'lodash'
+import { generateCompat, generateColors, generateShadows, generateRadii, generateFonts, composePreset, getThemes } from '../../services/style_setter/style_setter.js'
 import ColorInput from '../color_input/color_input.vue'
 import RangeInput from '../range_input/range_input.vue'
 import OpacityInput from '../opacity_input/opacity_input.vue'
@@ -123,6 +124,15 @@ export default {
     selectedVersion () {
       return Array.isArray(this.selected) ? 1 : 2
     },
+    currentCompat () {
+      return generateCompat({
+        shadows: this.shadowsLocal,
+        fonts: this.fontsLocal,
+        opacity: this.currentOpacity,
+        colors: this.currentColors,
+        radii: this.currentRadii
+      })
+    },
     currentColors () {
       return {
         bg: this.bgColorLocal,
@@ -332,7 +342,7 @@ export default {
 
       return {
         // To separate from other random JSON files and possible future theme formats
-        _pleroma_theme_version: 2, theme
+        _pleroma_theme_version: 2, theme: merge(theme, this.currentCompat)
       }
     }
   },
@@ -364,7 +374,7 @@ export default {
     onImport (parsed) {
       if (parsed._pleroma_theme_version === 1) {
         this.normalizeLocalState(parsed, 1)
-      } else if (parsed._pleroma_theme_version === 2) {
+      } else if (parsed._pleroma_theme_version >= 2) {
         this.normalizeLocalState(parsed.theme, 2)
       }
     },
@@ -414,6 +424,7 @@ export default {
 
     /**
      * This applies stored theme data onto form. Supports three versions of data:
+     * v3 (version = 3) - same as 2 but with some incompatible changes
      * v2 (version = 2) - newer version of themes.
      * v1 (version = 1) - older version of themes (import from file)
      * v1l (version = l1) - older version of theme (load from local storage)
@@ -421,12 +432,21 @@ export default {
      * @param {Object} input - input data
      * @param {Number} version - version of data. 0 means try to guess based on data. "l1" means v1, locastorage type
      */
-    normalizeLocalState (input, version = 0) {
-      const colors = input.colors || input
+    normalizeLocalState (originalInput, version = 0) {
+      let input
+      if (typeof originalInput.v3compat !== undefined) {
+        version = 3
+        input = merge(originalInput, originalInput.v3compat)
+      } else {
+        input = originalInput
+      }
+
+      const compat = input.v3compat
       const radii = input.radii || input
       const opacity = input.opacity
       const shadows = input.shadows || {}
       const fonts = input.fonts || {}
+      const colors = input.colors || input
 
       if (version === 0) {
         if (input.version) version = input.version
@@ -530,6 +550,7 @@ export default {
     currentColors () {
       try {
         this.previewColors = generateColors({
+          v3compat: this.currentCompat,
           opacity: this.currentOpacity,
           colors: this.currentColors
         })
@@ -542,8 +563,9 @@ export default {
     currentOpacity () {
       try {
         this.previewColors = generateColors({
+          v3compat: this.currentCompat,
           opacity: this.currentOpacity,
-          colors: this.currentColors
+          colors: this.currentColors,
         })
       } catch (e) {
         console.warn(e)
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index 8bbdc7b7..2ecd275a 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -2,7 +2,7 @@
   <div class="style-switcher">
     <div class="presets-container">
       <div class="save-load">
-        <export-import
+        <ExportImport
           :export-object="exportedTheme"
           :export-label="$t(&quot;settings.export_theme&quot;)"
           :import-label="$t(&quot;settings.import_theme&quot;)"
@@ -38,7 +38,7 @@
               </label>
             </div>
           </template>
-        </export-import>
+        </ExportImport>
       </div>
       <div class="save-load-options">
         <span class="keep-option">
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 1e4bc59e..19a06587 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -148,6 +148,26 @@ const getCssColor = (input, a) => {
   return rgb2rgba({ ...rgb, a })
 }
 
+// Generates a "patch" for theme to make it compatible with v2
+export const generateCompat = (input) => {
+  const { colors } = input
+  const v3compat = {
+    colors: {}
+  }
+  const v2colorsPatch = {}
+
+  // # Link became optional in v3
+  if (typeof colors.link === 'undefined') {
+    v2colorsPatch.link = colors.accent
+    v3compat.colors.link = null
+  }
+
+  return {
+    v3compat,
+    colors: v2colorsPatch
+  }
+}
+
 const generateColors = (input) => {
   const colors = {}
   const opacity = Object.assign({
@@ -164,7 +184,10 @@ const generateColors = (input) => {
   const inputColors = input.colors || input
 
   const compat = input.v3compat || {}
-  const compatColors = compat.colors || {}
+  const compatColors = Object.entries(compat.colors || {}).reduce((acc, [key, value]) => {
+    const newVal = value === null ? undefined : value
+    return { ...acc, [key]: newVal }
+  }, {})
 
   const col = Object.entries({ ...inputColors, ...compatColors }).reduce((acc, [k, v]) => {
     if (typeof v === 'object') {
@@ -210,7 +233,7 @@ const generateColors = (input) => {
   colors.topBarText = col.topBarText || getTextColor(colors.topBar, colors.fgText)
   colors.topBarLink = col.topBarLink || getTextColor(colors.topBar, colors.fgLink)
 
-  colors.faintLink = col.faintLink || Object.assign({}, col.link)
+  colors.faintLink = col.faintLink || Object.assign({}, col.link || col.accent)
   colors.linkBg = alphaBlend(colors.link, 0.4, colors.bg)
 
   colors.icon = mixrgb(colors.bg, colors.text)
-- 
cgit v1.2.3-70-g09d2


From 6e11924c27288e590de8f5b675fb53704581bcc8 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sat, 28 Dec 2019 18:49:35 +0200
Subject: underlay customization, updated contrast calculations to account for
 alpha blending

---
 src/App.scss                                     |  1 +
 src/components/style_switcher/style_switcher.js  | 47 ++++++++++++++----------
 src/components/style_switcher/style_switcher.vue | 14 +++++++
 src/services/color_convert/color_convert.js      | 23 ++++++++++++
 src/services/style_setter/style_setter.js        | 37 +++++++++++++------
 5 files changed, 91 insertions(+), 31 deletions(-)

(limited to 'src/components')

diff --git a/src/App.scss b/src/App.scss
index 3b03a761..b6d4943a 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -32,6 +32,7 @@ h4 {
   min-height: 100vh;
   max-width: 980px;
   background-color: rgba(0,0,0,0.15);
+  background-color: var(--underlay, rgba(0,0,0,0.15));
   align-content: flex-start;
 }
 
diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index b450dc8e..602a635e 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -1,4 +1,4 @@
-import { rgb2hex, hex2rgb, getContrastRatio, alphaBlend } from '../../services/color_convert/color_convert.js'
+import { rgb2hex, hex2rgb, getContrastRatio, getContrastRatioLayers, alphaBlend } from '../../services/color_convert/color_convert.js'
 import { set, delete as del } from 'vue'
 import { merge } from 'lodash'
 import { generateCompat, generateColors, generateShadows, generateRadii, generateFonts, composePreset, getThemes } from '../../services/style_setter/style_setter.js'
@@ -53,6 +53,9 @@ export default {
       bgColorLocal: '',
       bgOpacityLocal: undefined,
 
+      underlayColorLocal: '',
+      underlayOpacityLocal: undefined,
+
       fgColorLocal: '',
       fgTextColorLocal: undefined,
       fgLinkColorLocal: undefined,
@@ -145,6 +148,8 @@ export default {
 
         accent: this.accentColorLocal,
 
+        underlay: this.underlayColorLocal,
+
         panel: this.panelColorLocal,
         panelText: this.panelTextColorLocal,
         panelLink: this.panelLinkColorLocal,
@@ -182,7 +187,8 @@ export default {
         panel: this.panelOpacityLocal,
         topBar: this.topBarOpacityLocal,
         border: this.borderOpacityLocal,
-        faint: this.faintOpacityLocal
+        faint: this.faintOpacityLocal,
+        underlay: this.underlayOpacityLocal
       }
     },
     currentRadii () {
@@ -240,6 +246,7 @@ export default {
 
       const bgs = {
         bg: hex2rgb(colors.bg),
+        underlay: hex2rgb(colors.underlay),
         btn: hex2rgb(colors.btn),
         panel: hex2rgb(colors.panel),
         topBar: hex2rgb(colors.topBar),
@@ -249,29 +256,31 @@ export default {
         badgeNotification: hex2rgb(colors.badgeNotification)
       }
 
-      /* This is a bit confusing because "bottom layer" used is text color
-       * This is done to get worst case scenario when background below transparent
-       * layer matches text color, making it harder to read the lower alpha is.
-       */
-      const ratios = {
-        bgText: getContrastRatio(alphaBlend(bgs.bg, opacity.bg, fgs.text), fgs.text),
-        bgLink: getContrastRatio(alphaBlend(bgs.bg, opacity.bg, fgs.link), fgs.link),
-        bgRed: getContrastRatio(alphaBlend(bgs.bg, opacity.bg, fgs.red), fgs.red),
-        bgGreen: getContrastRatio(alphaBlend(bgs.bg, opacity.bg, fgs.green), fgs.green),
-        bgBlue: getContrastRatio(alphaBlend(bgs.bg, opacity.bg, fgs.blue), fgs.blue),
-        bgOrange: getContrastRatio(alphaBlend(bgs.bg, opacity.bg, fgs.orange), fgs.orange),
+      const bg = [bgs.bg, opacity.bg]
+      const underlay = [bgs.underlay, opacity.underlay]
 
+      const panel = [underlay, bg]
+
+      const ratios = {
+        bgText: getContrastRatioLayers(fgs.text, panel, fgs.text),
+        bgLink: getContrastRatioLayers(fgs.link, panel, fgs.link),
+        bgRed: getContrastRatioLayers(fgs.red, panel, fgs.red),
+        bgGreen: getContrastRatioLayers(fgs.green, panel, fgs.green),
+        bgBlue: getContrastRatioLayers(fgs.blue, panel, fgs.blue),
+        bgOrange: getContrastRatioLayers(fgs.orange, panel, fgs.orange),
+
+        // TODO what's this?
         tintText: getContrastRatio(alphaBlend(bgs.bg, 0.5, fgs.panelText), fgs.text),
 
-        panelText: getContrastRatio(alphaBlend(bgs.panel, opacity.panel, fgs.panelText), fgs.panelText),
-        panelLink: getContrastRatio(alphaBlend(bgs.panel, opacity.panel, fgs.panelLink), fgs.panelLink),
+        panelText: getContrastRatioLayers(fgs.text, [...panel, [bgs.panel, opacity.panel]], fgs.panelText),
+        panelLink: getContrastRatioLayers(fgs.link, [...panel, [bgs.panel, opacity.panel]], fgs.panelLink),
 
-        btnText: getContrastRatio(alphaBlend(bgs.btn, opacity.btn, fgs.btnText), fgs.btnText),
+        btnText: getContrastRatioLayers(fgs.text, [...panel, [bgs.btn, opacity.btn]], fgs.btnText),
 
-        inputText: getContrastRatio(alphaBlend(bgs.input, opacity.input, fgs.inputText), fgs.inputText),
+        inputText: getContrastRatioLayers(fgs.text, [...panel, [bgs.input, opacity.input]], fgs.inputText),
 
-        topBarText: getContrastRatio(alphaBlend(bgs.topBar, opacity.topBar, fgs.topBarText), fgs.topBarText),
-        topBarLink: getContrastRatio(alphaBlend(bgs.topBar, opacity.topBar, fgs.topBarLink), fgs.topBarLink)
+        topBarText: getContrastRatioLayers(fgs.text, [...panel, [bgs.topBar, opacity.topBar]], fgs.topBarText),
+        topBarLink: getContrastRatioLayers(fgs.link, [...panel, [bgs.topBar, opacity.topBar]], fgs.topBarLink)
       }
 
       return Object.entries(ratios).reduce((acc, [k, v]) => { acc[k] = hints(v); return acc }, {})
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index 2ecd275a..38ca2017 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -366,6 +366,20 @@
               :fallback="previewTheme.opacity.faint || 0.5"
             />
           </div>
+          <div class="color-item">
+            <h4>{{ $t('settings.style.advanced_colors.underlay') }}</h4>
+            <ColorInput
+              v-model="underlayColorLocal"
+              name="underlay"
+              :label="$t('settings.style.advanced_colors.underlay')"
+              fallback='#000000'
+            />
+            <OpacityInput
+              v-model="underlayOpacityLocal"
+              name="underlayOpacity"
+              :fallback="previewTheme.opacity.underlay || 0.15"
+            />
+          </div>
         </div>
 
         <div
diff --git a/src/services/color_convert/color_convert.js b/src/services/color_convert/color_convert.js
index d1b17c61..757a36bd 100644
--- a/src/services/color_convert/color_convert.js
+++ b/src/services/color_convert/color_convert.js
@@ -1,5 +1,8 @@
 import { map } from 'lodash'
 
+// useful for visualizing color when debugging
+export const consoleColor = (color) => console.log('%c##########', 'background: ' + color + '; color: ' + color)
+
 const rgb2hex = (r, g, b) => {
   if (r === null || typeof r === 'undefined') {
     return undefined
@@ -78,6 +81,16 @@ const getContrastRatio = (a, b) => {
 
   return (l1 + 0.05) / (l2 + 0.05)
 }
+/**
+ * Same as `getContrastRatio` but for multiple layers in-between
+ *
+ * @param {Object} text - text color (topmost layer)
+ * @param {[Object, Number]} layers[] - layers between text and bedrock
+ * @param {Object} bedrock - layer at the very bottom
+ */
+export const getContrastRatioLayers = (text, layers, bedrock) => {
+  return getContrastRatio(alphaBlendLayers(bedrock, layers), text)
+}
 
 /**
  * This performs alpha blending between solid background and semi-transparent foreground
@@ -97,6 +110,16 @@ const alphaBlend = (fg, fga, bg) => {
   }, {})
 }
 
+/**
+ * Same as `alphaBlend` but for multiple layers in-between
+ *
+ * @param {Object} bedrock - layer at the very bottom
+ * @param {[Object, Number]} layers[] - layers between text and bedrock
+ */
+export const alphaBlendLayers = (bedrock, layers) => layers.reduce((acc, [color, opacity]) => {
+  return alphaBlend(color, opacity, acc)
+}, bedrock)
+
 const invert = (rgb) => {
   return 'rgb'.split('').reduce((acc, c) => {
     acc[c] = 255 - rgb[c]
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 19a06587..8740fc55 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -1,6 +1,6 @@
 import { times } from 'lodash'
 import { brightness, invertLightness, convert, contrastRatio } from 'chromatism'
-import { rgb2hex, hex2rgb, mixrgb, getContrastRatio, alphaBlend } from '../color_convert/color_convert.js'
+import { rgb2hex, hex2rgb, mixrgb, getContrastRatio, alphaBlend, alphaBlendLayers } from '../color_convert/color_convert.js'
 
 // While this is not used anymore right now, I left it in if we want to do custom
 // styles that aren't just colors, so user can pick from a few different distinct
@@ -64,8 +64,10 @@ const getTextColor = function (bg, text, preserve) {
     const base = typeof text.a !== 'undefined' ? { a: text.a } : {}
     const result = Object.assign(base, invertLightness(text).rgb)
     if (!preserve && getContrastRatio(bg, result) < 4.5) {
+      // B&W
       return contrastRatio(bg, text).rgb
     }
+    // Inverted color
     return result
   }
   return text
@@ -173,7 +175,8 @@ const generateColors = (input) => {
   const opacity = Object.assign({
     alert: 0.5,
     input: 0.5,
-    faint: 0.5
+    faint: 0.5,
+    underlay: 0.15
   }, Object.entries(input.opacity || {}).reduce((acc, [k, v]) => {
     if (typeof v !== 'undefined') {
       acc[k] = v
@@ -210,28 +213,37 @@ const generateColors = (input) => {
   colors.faint = col.faint || Object.assign({}, col.text)
 
   colors.bg = col.bg
-  colors.lightBg = col.lightBg || brightness(5, colors.bg).rgb
+  colors.lightBg = col.lightBg || brightness(5 * mod, colors.bg).rgb
+
+  const underlay = [col.underlay, opacity.underlay]
+  const fg = [col.fg, opacity.fg]
+  const bg = [col.bg, opacity.bg]
 
   colors.fg = col.fg
-  colors.fgText = col.fgText || getTextColor(colors.fg, colors.text)
-  colors.fgLink = col.fgLink || getTextColor(colors.fg, colors.link, true)
+  colors.fgText = col.fgText || getTextColor(alphaBlendLayers(colors.text, [underlay, bg, fg]), colors.text)
+  colors.fgLink = col.fgLink || getTextColor(alphaBlendLayers(colors.link, [underlay, bg, fg]), colors.link, true)
+  colors.underlay = col.underlay || hex2rgb('#000000')
 
   colors.border = col.border || brightness(2 * mod, colors.fg).rgb
 
   colors.btn = col.btn || Object.assign({}, col.fg)
-  colors.btnText = col.btnText || getTextColor(colors.btn, colors.fgText)
+  const btn = [colors.btn, opacity.btn || 1]
+  colors.btnText = col.btnText || getTextColor(alphaBlendLayers(colors.fgText, [underlay, bg, fg, btn]), colors.fgText)
 
   colors.input = col.input || Object.assign({}, col.fg)
-  colors.inputText = col.inputText || getTextColor(colors.input, colors.lightText)
+  const inputCol = [colors.input, opacity.input]
+  colors.inputText = col.inputText || getTextColor(alphaBlendLayers(colors.lightText, [underlay, bg, fg, inputCol]), colors.lightText)
 
   colors.panel = col.panel || Object.assign({}, col.fg)
-  colors.panelText = col.panelText || getTextColor(colors.panel, colors.fgText)
-  colors.panelLink = col.panelLink || getTextColor(colors.panel, colors.fgLink)
-  colors.panelFaint = col.panelFaint || getTextColor(colors.panel, colors.faint)
+  const panel = [colors.panel, opacity.panel]
+  colors.panelText = col.panelText || getTextColor(alphaBlendLayers(colors.fgText, [underlay, bg, panel]), colors.fgText)
+  colors.panelLink = col.panelLink || getTextColor(alphaBlendLayers(colors.fgLink, [underlay, bg, panel]), colors.fgLink)
+  colors.panelFaint = col.panelFaint || getTextColor(alphaBlendLayers(colors.faint, [underlay, bg, panel]), colors.faint)
 
   colors.topBar = col.topBar || Object.assign({}, col.fg)
-  colors.topBarText = col.topBarText || getTextColor(colors.topBar, colors.fgText)
-  colors.topBarLink = col.topBarLink || getTextColor(colors.topBar, colors.fgLink)
+  const topBar = [colors.topBar, opacity.topBar]
+  colors.topBarText = col.topBarText || getTextColor(alphaBlendLayers(colors.fgText, [topBar]), colors.fgText)
+  colors.topBarLink = col.topBarLink || getTextColor(alphaBlendLayers(colors.fgLink, [topBar]), colors.fgLink)
 
   colors.faintLink = col.faintLink || Object.assign({}, col.link || col.accent)
   colors.linkBg = alphaBlend(colors.link, 0.4, colors.bg)
@@ -255,6 +267,7 @@ const generateColors = (input) => {
   colors.badgeNotificationText = contrastRatio(colors.badgeNotification).rgb
 
   Object.entries(opacity).forEach(([ k, v ]) => {
+    console.log(k)
     if (typeof v === 'undefined') return
     if (k === 'alert') {
       colors.alertError.a = v
-- 
cgit v1.2.3-70-g09d2


From 332d31dc02b83d6ca06837fdfb4f663050d9effd Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 30 Dec 2019 00:45:48 +0200
Subject: support for "transparent" color keyword

---
 src/components/style_switcher/style_switcher.js | 60 ++++++++++++++-----------
 src/services/color_convert/color_convert.js     |  3 +-
 src/services/style_setter/style_setter.js       | 50 ++++++++++++++-------
 static/themes/breezy-dark.json                  |  8 +++-
 static/themes/breezy-light.json                 |  5 +++
 5 files changed, 80 insertions(+), 46 deletions(-)

(limited to 'src/components')

diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index 602a635e..9fe1bf59 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -25,6 +25,14 @@ const v1OnlyNames = [
   'cOrange'
 ].map(_ => _ + 'ColorLocal')
 
+const colorConvert = (color) => {
+  if (color === 'transparent') {
+    return color
+  } else {
+    return hex2rgb(color)
+  }
+}
+
 export default {
   data () {
     return {
@@ -228,36 +236,36 @@ export default {
 
       // fgsfds :DDDD
       const fgs = {
-        text: hex2rgb(colors.text),
-        panelText: hex2rgb(colors.panelText),
-        panelLink: hex2rgb(colors.panelLink),
-        btnText: hex2rgb(colors.btnText),
-        topBarText: hex2rgb(colors.topBarText),
-        inputText: hex2rgb(colors.inputText),
-
-        link: hex2rgb(colors.link),
-        topBarLink: hex2rgb(colors.topBarLink),
-
-        red: hex2rgb(colors.cRed),
-        green: hex2rgb(colors.cGreen),
-        blue: hex2rgb(colors.cBlue),
-        orange: hex2rgb(colors.cOrange)
+        text: colorConvert(colors.text),
+        panelText: colorConvert(colors.panelText),
+        panelLink: colorConvert(colors.panelLink),
+        btnText: colorConvert(colors.btnText),
+        topBarText: colorConvert(colors.topBarText),
+        inputText: colorConvert(colors.inputText),
+
+        link: colorConvert(colors.link),
+        topBarLink: colorConvert(colors.topBarLink),
+
+        red: colorConvert(colors.cRed),
+        green: colorConvert(colors.cGreen),
+        blue: colorConvert(colors.cBlue),
+        orange: colorConvert(colors.cOrange)
       }
 
       const bgs = {
-        bg: hex2rgb(colors.bg),
-        underlay: hex2rgb(colors.underlay),
-        btn: hex2rgb(colors.btn),
-        panel: hex2rgb(colors.panel),
-        topBar: hex2rgb(colors.topBar),
-        input: hex2rgb(colors.input),
-        alertError: hex2rgb(colors.alertError),
-        alertWarning: hex2rgb(colors.alertWarning),
-        badgeNotification: hex2rgb(colors.badgeNotification)
+        bg: colorConvert(colors.bg),
+        underlay: colorConvert(colors.underlay),
+        btn: colorConvert(colors.btn),
+        panel: colorConvert(colors.panel),
+        topBar: colorConvert(colors.topBar),
+        input: colorConvert(colors.input),
+        alertError: colorConvert(colors.alertError),
+        alertWarning: colorConvert(colors.alertWarning),
+        badgeNotification: colorConvert(colors.badgeNotification)
       }
 
       const bg = [bgs.bg, opacity.bg]
-      const underlay = [bgs.underlay, opacity.underlay]
+      const underlay = [bgs.underlay || colorConvert('#000000'), opacity.underlay]
 
       const panel = [underlay, bg]
 
@@ -443,7 +451,7 @@ export default {
      */
     normalizeLocalState (originalInput, version = 0) {
       let input
-      if (typeof originalInput.v3compat !== undefined) {
+      if (typeof originalInput.v3compat !== 'undefined') {
         version = 3
         input = merge(originalInput, originalInput.v3compat)
       } else {
@@ -574,7 +582,7 @@ export default {
         this.previewColors = generateColors({
           v3compat: this.currentCompat,
           opacity: this.currentOpacity,
-          colors: this.currentColors,
+          colors: this.currentColors
         })
       } catch (e) {
         console.warn(e)
diff --git a/src/services/color_convert/color_convert.js b/src/services/color_convert/color_convert.js
index 757a36bd..32b4d50e 100644
--- a/src/services/color_convert/color_convert.js
+++ b/src/services/color_convert/color_convert.js
@@ -7,7 +7,8 @@ const rgb2hex = (r, g, b) => {
   if (r === null || typeof r === 'undefined') {
     return undefined
   }
-  if (r[0] === '#') {
+  // TODO: clean up this mess
+  if (r[0] === '#' || r === 'transparent') {
     return r
   }
   if (typeof r === 'object') {
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 8740fc55..df22f94f 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -170,23 +170,32 @@ export const generateCompat = (input) => {
   }
 }
 
-const generateColors = (input) => {
+const generateColors = (themeData) => {
   const colors = {}
-  const opacity = Object.assign({
+  const rawOpacity = Object.assign({
     alert: 0.5,
     input: 0.5,
     faint: 0.5,
     underlay: 0.15
-  }, Object.entries(input.opacity || {}).reduce((acc, [k, v]) => {
+  }, Object.entries(themeData.opacity || {}).reduce((acc, [k, v]) => {
     if (typeof v !== 'undefined') {
       acc[k] = v
     }
     return acc
   }, {}))
 
-  const inputColors = input.colors || input
+  const inputColors = themeData.colors || themeData
 
-  const compat = input.v3compat || {}
+  const transparentsOpacity = Object.entries(inputColors).reduce((acc, [k, v]) => {
+    if (v === 'transparent') {
+      acc[k] = 0
+    }
+    return acc
+  }, {})
+
+  const opacity = { ...rawOpacity, ...transparentsOpacity }
+
+  const compat = themeData.v3compat || {}
   const compatColors = Object.entries(compat.colors || {}).reduce((acc, [key, value]) => {
     const newVal = value === null ? undefined : value
     return { ...acc, [key]: newVal }
@@ -196,15 +205,22 @@ const generateColors = (input) => {
     if (typeof v === 'object') {
       acc[k] = v
     } else {
-      acc[k] = hex2rgb(v)
+      let value = v
+      if (v === 'transparent') {
+        value = '#FF00FF'
+      }
+      acc[k] = hex2rgb(value)
     }
     return acc
   }, {})
 
-  const isLightOnDark = convert(col.bg).hsl.l < convert(col.text).hsl.l
+  colors.bg = col.bg
+  colors.underlay = col.underlay || hex2rgb('#000000')
+  colors.text = col.text
+
+  const isLightOnDark = convert(colors.bg).hsl.l < convert(colors.text).hsl.l
   const mod = isLightOnDark ? 1 : -1
 
-  colors.text = col.text
   colors.lightText = brightness(20 * mod, colors.text).rgb
 
   colors.accent = col.accent || col.link
@@ -212,17 +228,15 @@ const generateColors = (input) => {
 
   colors.faint = col.faint || Object.assign({}, col.text)
 
-  colors.bg = col.bg
   colors.lightBg = col.lightBg || brightness(5 * mod, colors.bg).rgb
 
-  const underlay = [col.underlay, opacity.underlay]
+  const underlay = [colors.underlay, opacity.underlay]
   const fg = [col.fg, opacity.fg]
   const bg = [col.bg, opacity.bg]
 
   colors.fg = col.fg
   colors.fgText = col.fgText || getTextColor(alphaBlendLayers(colors.text, [underlay, bg, fg]), colors.text)
   colors.fgLink = col.fgLink || getTextColor(alphaBlendLayers(colors.link, [underlay, bg, fg]), colors.link, true)
-  colors.underlay = col.underlay || hex2rgb('#000000')
 
   colors.border = col.border || brightness(2 * mod, colors.fg).rgb
 
@@ -231,8 +245,8 @@ const generateColors = (input) => {
   colors.btnText = col.btnText || getTextColor(alphaBlendLayers(colors.fgText, [underlay, bg, fg, btn]), colors.fgText)
 
   colors.input = col.input || Object.assign({}, col.fg)
-  const inputCol = [colors.input, opacity.input]
-  colors.inputText = col.inputText || getTextColor(alphaBlendLayers(colors.lightText, [underlay, bg, fg, inputCol]), colors.lightText)
+  const input = [colors.input, opacity.input]
+  colors.inputText = col.inputText || getTextColor(alphaBlendLayers(colors.lightText, [underlay, bg, fg, input]), colors.lightText)
 
   colors.panel = col.panel || Object.assign({}, col.fg)
   const panel = [colors.panel, opacity.panel]
@@ -256,12 +270,14 @@ const generateColors = (input) => {
   colors.cOrange = col.cOrange || hex2rgb('#E3FF00')
 
   colors.alertError = col.alertError || Object.assign({}, colors.cRed)
-  colors.alertErrorText = getTextColor(alphaBlend(colors.alertError, opacity.alert, colors.bg), colors.text)
-  colors.alertErrorPanelText = getTextColor(alphaBlend(colors.alertError, opacity.alert, colors.panel), colors.panelText)
+  const alertError = [colors.alertError, opacity.alert]
+  colors.alertErrorText = getTextColor(alphaBlendLayers(colors.text, [underlay, bg, alertError]), colors.text)
+  colors.alertErrorPanelText = getTextColor(alphaBlendLayers(colors.panelText, [underlay, bg, panel, panel, alertError]), colors.panelText)
 
   colors.alertWarning = col.alertWarning || Object.assign({}, colors.cOrange)
-  colors.alertWarningText = getTextColor(alphaBlend(colors.alertWarning, opacity.alert, colors.bg), colors.text)
-  colors.alertWarningPanelText = getTextColor(alphaBlend(colors.alertWarning, opacity.alert, colors.panel), colors.panelText)
+  const alertWarning = [colors.alertWarning, opacity.alert]
+  colors.alertWarningText = getTextColor(alphaBlendLayers(colors.text, [underlay, bg, alertWarning]), colors.text)
+  colors.alertWarningPanelText = getTextColor(alphaBlendLayers(colors.panelText, [underlay, bg, panel, panel, alertWarning]), colors.panelText)
 
   colors.badgeNotification = col.badgeNotification || Object.assign({}, colors.cRed)
   colors.badgeNotificationText = contrastRatio(colors.badgeNotification).rgb
diff --git a/static/themes/breezy-dark.json b/static/themes/breezy-dark.json
index 7ce41384..0ed55184 100644
--- a/static/themes/breezy-dark.json
+++ b/static/themes/breezy-dark.json
@@ -107,8 +107,12 @@
     },
     "fonts": {},
     "opacity": {
-      "input": "1",
-      "panel": "0"
+      "input": "1"
+    },
+    "v3compat": {
+      "colors": {
+        "panel": "transparent"
+      }
     },
     "colors": {
       "bg": "#31363b",
diff --git a/static/themes/breezy-light.json b/static/themes/breezy-light.json
index dc43f90e..5db185dd 100644
--- a/static/themes/breezy-light.json
+++ b/static/themes/breezy-light.json
@@ -109,6 +109,11 @@
     "opacity": {
       "input": "1"
     },
+    "v3compat": {
+      "colors": {
+        "panel": "transparent"
+      }
+    },
     "colors": {
       "bg": "#eff0f1",
       "text": "#232627",
-- 
cgit v1.2.3-70-g09d2


From 816c077c4fdd72eb04c5d8fc8bfd567d9a292a3c Mon Sep 17 00:00:00 2001
From: Wyatt Benno <wyattbenno@gmail.com>
Date: Mon, 30 Dec 2019 19:27:44 +0900
Subject: mfa fix

---
 src/components/user_settings/mfa.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components')

diff --git a/src/components/user_settings/mfa.js b/src/components/user_settings/mfa.js
index 3090138a..abf37062 100644
--- a/src/components/user_settings/mfa.js
+++ b/src/components/user_settings/mfa.js
@@ -139,7 +139,7 @@ const Mfa = {
 
     // fetch settings from server
     async fetchSettings () {
-      let result = await this.backendInteractor.fetchSettingsMFA()
+      let result = await this.backendInteractor.settingsMFA()
       if (result.error) return
       this.settings = result.settings
       this.settings.available = true
-- 
cgit v1.2.3-70-g09d2


From 4bb1c98e0f28bcf1d0dff2d90d01013cd5487522 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 2 Jan 2020 20:36:10 +0200
Subject: Replaced `v3compat` with `source` to reduce code complexity. Made
 more slots customizable. `theme` now contains a snapshot of theme generated
 for better compatiblity and future-proofing

---
 src/components/style_switcher/style_switcher.js  |  68 ++++---
 src/components/style_switcher/style_switcher.vue |  14 +-
 src/services/style_setter/style_setter.js        |  42 ++---
 static/themes/breezy-dark.json                   | 224 ++++++++++++++++++++++-
 static/themes/breezy-light.json                  | 220 +++++++++++++++++++++-
 5 files changed, 488 insertions(+), 80 deletions(-)

(limited to 'src/components')

diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index 9fe1bf59..f751260a 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -1,7 +1,15 @@
 import { rgb2hex, hex2rgb, getContrastRatio, getContrastRatioLayers, alphaBlend } from '../../services/color_convert/color_convert.js'
 import { set, delete as del } from 'vue'
 import { merge } from 'lodash'
-import { generateCompat, generateColors, generateShadows, generateRadii, generateFonts, composePreset, getThemes } from '../../services/style_setter/style_setter.js'
+import {
+  generateColors,
+  generateShadows,
+  generateRadii,
+  generateFonts,
+  composePreset,
+  getThemes,
+  CURRENT_VERSION
+} from '../../services/style_setter/style_setter.js'
 import ColorInput from '../color_input/color_input.vue'
 import RangeInput from '../range_input/range_input.vue'
 import OpacityInput from '../opacity_input/opacity_input.vue'
@@ -135,15 +143,6 @@ export default {
     selectedVersion () {
       return Array.isArray(this.selected) ? 1 : 2
     },
-    currentCompat () {
-      return generateCompat({
-        shadows: this.shadowsLocal,
-        fonts: this.fontsLocal,
-        opacity: this.currentOpacity,
-        colors: this.currentColors,
-        radii: this.currentRadii
-      })
-    },
     currentColors () {
       return {
         bg: this.bgColorLocal,
@@ -339,27 +338,32 @@ export default {
         !this.keepColor
       )
 
-      const theme = {}
+      const source = {
+        themeEngineVersion: CURRENT_VERSION
+      }
 
       if (this.keepFonts || saveEverything) {
-        theme.fonts = this.fontsLocal
+        source.fonts = this.fontsLocal
       }
       if (this.keepShadows || saveEverything) {
-        theme.shadows = this.shadowsLocal
+        source.shadows = this.shadowsLocal
       }
       if (this.keepOpacity || saveEverything) {
-        theme.opacity = this.currentOpacity
+        source.opacity = this.currentOpacity
       }
       if (this.keepColor || saveEverything) {
-        theme.colors = this.currentColors
+        source.colors = this.currentColors
       }
       if (this.keepRoundness || saveEverything) {
-        theme.radii = this.currentRadii
+        source.radii = this.currentRadii
       }
 
+      const theme = this.previewTheme
+
+      console.log(source)
       return {
-        // To separate from other random JSON files and possible future theme formats
-        _pleroma_theme_version: 2, theme: merge(theme, this.currentCompat)
+        // To separate from other random JSON files and possible future source formats
+        _pleroma_theme_version: 2, theme, source
       }
     }
   },
@@ -392,7 +396,7 @@ export default {
       if (parsed._pleroma_theme_version === 1) {
         this.normalizeLocalState(parsed, 1)
       } else if (parsed._pleroma_theme_version >= 2) {
-        this.normalizeLocalState(parsed.theme, 2)
+        this.normalizeLocalState(parsed.theme, 2, parsed.source)
       }
     },
     importValidator (parsed) {
@@ -402,7 +406,7 @@ export default {
     clearAll () {
       const state = this.$store.getters.mergedConfig.customTheme
       const version = state.colors ? 2 : 'l1'
-      this.normalizeLocalState(this.$store.getters.mergedConfig.customTheme, version)
+      this.normalizeLocalState(this.$store.getters.mergedConfig.customTheme, version, this.$store.getters.mergedConfig.customThemeSource)
     },
 
     // Clears all the extra stuff when loading V1 theme
@@ -441,24 +445,30 @@ export default {
 
     /**
      * This applies stored theme data onto form. Supports three versions of data:
-     * v3 (version = 3) - same as 2 but with some incompatible changes
+     * v3 (version >= 3) - newest version of themes which supports snapshots for better compatiblity
      * v2 (version = 2) - newer version of themes.
      * v1 (version = 1) - older version of themes (import from file)
      * v1l (version = l1) - older version of theme (load from local storage)
      * v1 and v1l differ because of way themes were stored/exported.
-     * @param {Object} input - input data
+     * @param {Object} theme - theme data (snapshot)
      * @param {Number} version - version of data. 0 means try to guess based on data. "l1" means v1, locastorage type
+     * @param {Object} source - theme source - this will be used if compatible
+     * @param {Boolean} source - by default source won't be used if version doesn't match since it might render differently
+     *                           this allows importing source anyway
      */
-    normalizeLocalState (originalInput, version = 0) {
+    normalizeLocalState (theme, version = 0, source, forceSource = false) {
       let input
-      if (typeof originalInput.v3compat !== 'undefined') {
-        version = 3
-        input = merge(originalInput, originalInput.v3compat)
+      if (typeof source !== 'undefined') {
+        if (forceSource || source.themeEngineVersion === CURRENT_VERSION) {
+          input = source
+          version = source.themeEngineVersion
+        } else {
+          input = theme
+        }
       } else {
-        input = originalInput
+        input = theme
       }
 
-      const compat = input.v3compat
       const radii = input.radii || input
       const opacity = input.opacity
       const shadows = input.shadows || {}
@@ -615,7 +625,7 @@ export default {
           this.cOrangeColorLocal = this.selected[8]
         }
       } else if (this.selectedVersion >= 2) {
-        this.normalizeLocalState(this.selected.theme, 2)
+        this.normalizeLocalState(this.selected.theme, 2, this.selected.source)
       }
     }
   }
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index 38ca2017..2eadbe25 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -106,7 +106,7 @@
             <OpacityInput
               v-model="bgOpacityLocal"
               name="bgOpacity"
-              :fallback="previewTheme.opacity.bg || 1"
+              :fallback="previewTheme.opacity.bg"
             />
             <ColorInput
               v-model="textColorLocal"
@@ -238,7 +238,7 @@
             <OpacityInput
               v-model="panelOpacityLocal"
               name="panelOpacity"
-              :fallback="previewTheme.opacity.panel || 1"
+              :fallback="previewTheme.opacity.panel"
             />
             <ColorInput
               v-model="panelTextColorLocal"
@@ -295,7 +295,7 @@
             <OpacityInput
               v-model="inputOpacityLocal"
               name="inputOpacity"
-              :fallback="previewTheme.opacity.input || 1"
+              :fallback="previewTheme.opacity.input"
             />
             <ColorInput
               v-model="inputTextColorLocal"
@@ -316,7 +316,7 @@
             <OpacityInput
               v-model="btnOpacityLocal"
               name="btnOpacity"
-              :fallback="previewTheme.opacity.btn || 1"
+              :fallback="previewTheme.opacity.btn"
             />
             <ColorInput
               v-model="btnTextColorLocal"
@@ -337,7 +337,7 @@
             <OpacityInput
               v-model="borderOpacityLocal"
               name="borderOpacity"
-              :fallback="previewTheme.opacity.border || 1"
+              :fallback="previewTheme.opacity.border"
             />
           </div>
           <div class="color-item">
@@ -363,7 +363,7 @@
             <OpacityInput
               v-model="faintOpacityLocal"
               name="faintOpacity"
-              :fallback="previewTheme.opacity.faint || 0.5"
+              :fallback="previewTheme.opacity.faint"
             />
           </div>
           <div class="color-item">
@@ -377,7 +377,7 @@
             <OpacityInput
               v-model="underlayOpacityLocal"
               name="underlayOpacity"
-              :fallback="previewTheme.opacity.underlay || 0.15"
+              :fallback="previewTheme.opacity.underlay"
             />
           </div>
         </div>
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index df22f94f..e8a64517 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -2,6 +2,8 @@ import { times } from 'lodash'
 import { brightness, invertLightness, convert, contrastRatio } from 'chromatism'
 import { rgb2hex, hex2rgb, mixrgb, getContrastRatio, alphaBlend, alphaBlendLayers } from '../color_convert/color_convert.js'
 
+export const CURRENT_VERSION = 3
+
 // While this is not used anymore right now, I left it in if we want to do custom
 // styles that aren't just colors, so user can pick from a few different distinct
 // styles as well as set their own colors in the future.
@@ -150,29 +152,13 @@ const getCssColor = (input, a) => {
   return rgb2rgba({ ...rgb, a })
 }
 
-// Generates a "patch" for theme to make it compatible with v2
-export const generateCompat = (input) => {
-  const { colors } = input
-  const v3compat = {
-    colors: {}
-  }
-  const v2colorsPatch = {}
-
-  // # Link became optional in v3
-  if (typeof colors.link === 'undefined') {
-    v2colorsPatch.link = colors.accent
-    v3compat.colors.link = null
-  }
-
-  return {
-    v3compat,
-    colors: v2colorsPatch
-  }
-}
-
 const generateColors = (themeData) => {
   const colors = {}
   const rawOpacity = Object.assign({
+    panel: 1,
+    btn: 1,
+    border: 1,
+    bg: 1,
     alert: 0.5,
     input: 0.5,
     faint: 0.5,
@@ -207,6 +193,7 @@ const generateColors = (themeData) => {
     } else {
       let value = v
       if (v === 'transparent') {
+        // TODO: hack to keep rest of the code from complaining
         value = '#FF00FF'
       }
       acc[k] = hex2rgb(value)
@@ -221,7 +208,7 @@ const generateColors = (themeData) => {
   const isLightOnDark = convert(colors.bg).hsl.l < convert(colors.text).hsl.l
   const mod = isLightOnDark ? 1 : -1
 
-  colors.lightText = brightness(20 * mod, colors.text).rgb
+  colors.lightText = col.lightText || brightness(20 * mod, colors.text).rgb
 
   colors.accent = col.accent || col.link
   colors.link = col.link || col.accent
@@ -231,7 +218,8 @@ const generateColors = (themeData) => {
   colors.lightBg = col.lightBg || brightness(5 * mod, colors.bg).rgb
 
   const underlay = [colors.underlay, opacity.underlay]
-  const fg = [col.fg, opacity.fg]
+  // Technically, foreground can't be transparent (descendants can) but let's keep it just in case
+  const fg = [col.fg, opacity.fg || 1]
   const bg = [col.bg, opacity.bg]
 
   colors.fg = col.fg
@@ -271,16 +259,16 @@ const generateColors = (themeData) => {
 
   colors.alertError = col.alertError || Object.assign({}, colors.cRed)
   const alertError = [colors.alertError, opacity.alert]
-  colors.alertErrorText = getTextColor(alphaBlendLayers(colors.text, [underlay, bg, alertError]), colors.text)
-  colors.alertErrorPanelText = getTextColor(alphaBlendLayers(colors.panelText, [underlay, bg, panel, panel, alertError]), colors.panelText)
+  colors.alertErrorText = col.alertErrorText || getTextColor(alphaBlendLayers(colors.text, [underlay, bg, alertError]), colors.text)
+  colors.alertErrorPanelText = col.alertErrorPanelText || getTextColor(alphaBlendLayers(colors.panelText, [underlay, bg, panel, panel, alertError]), colors.panelText)
 
   colors.alertWarning = col.alertWarning || Object.assign({}, colors.cOrange)
   const alertWarning = [colors.alertWarning, opacity.alert]
-  colors.alertWarningText = getTextColor(alphaBlendLayers(colors.text, [underlay, bg, alertWarning]), colors.text)
-  colors.alertWarningPanelText = getTextColor(alphaBlendLayers(colors.panelText, [underlay, bg, panel, panel, alertWarning]), colors.panelText)
+  colors.alertWarningText = col.alertWarningText || getTextColor(alphaBlendLayers(colors.text, [underlay, bg, alertWarning]), colors.text)
+  colors.alertWarningPanelText = col.alertWarningPanelText || getTextColor(alphaBlendLayers(colors.panelText, [underlay, bg, panel, panel, alertWarning]), colors.panelText)
 
   colors.badgeNotification = col.badgeNotification || Object.assign({}, colors.cRed)
-  colors.badgeNotificationText = contrastRatio(colors.badgeNotification).rgb
+  colors.badgeNotificationText = colors.badgeNotificationText || contrastRatio(colors.badgeNotification).rgb
 
   Object.entries(opacity).forEach(([ k, v ]) => {
     console.log(k)
diff --git a/static/themes/breezy-dark.json b/static/themes/breezy-dark.json
index 0ed55184..d447005f 100644
--- a/static/themes/breezy-dark.json
+++ b/static/themes/breezy-dark.json
@@ -2,6 +2,218 @@
   "_pleroma_theme_version": 2,
   "name": "Breezy Dark (beta)",
   "theme": {
+    "shadows": {
+      "panel": [
+        {
+          "x": "1",
+          "y": "2",
+          "blur": "6",
+          "spread": 0,
+          "color": "#000000",
+          "alpha": 0.6
+        }
+      ],
+      "topBar": [
+        {
+          "x": 0,
+          "y": 0,
+          "blur": 4,
+          "spread": 0,
+          "color": "#000000",
+          "alpha": 0.6
+        }
+      ],
+      "popup": [
+        {
+          "x": 2,
+          "y": 2,
+          "blur": 3,
+          "spread": 0,
+          "color": "#000000",
+          "alpha": 0.5
+        }
+      ],
+      "avatar": [
+        {
+          "x": 0,
+          "y": 1,
+          "blur": 8,
+          "spread": 0,
+          "color": "#000000",
+          "alpha": 0.7
+        }
+      ],
+      "avatarStatus": [],
+      "panelHeader": [
+        {
+          "x": 0,
+          "y": "40",
+          "blur": "40",
+          "spread": "-40",
+          "inset": true,
+          "color": "#ffffff",
+          "alpha": "0.1"
+        }
+      ],
+      "button": [
+        {
+          "x": 0,
+          "y": "0",
+          "blur": "0",
+          "spread": "1",
+          "color": "#ffffff",
+          "alpha": "0.15",
+          "inset": true
+        },
+        {
+          "x": "1",
+          "y": "1",
+          "blur": "1",
+          "spread": 0,
+          "color": "#000000",
+          "alpha": "0.3",
+          "inset": false
+        }
+      ],
+      "buttonHover": [
+        {
+          "x": 0,
+          "y": "0",
+          "blur": 0,
+          "spread": "1",
+          "color": "--accent",
+          "alpha": "0.3",
+          "inset": true
+        },
+        {
+          "x": "1",
+          "y": "1",
+          "blur": "1",
+          "spread": 0,
+          "color": "#000000",
+          "alpha": "0.3",
+          "inset": false
+        }
+      ],
+      "buttonPressed": [
+        {
+          "x": 0,
+          "y": 0,
+          "blur": "0",
+          "spread": "50",
+          "color": "--faint",
+          "alpha": 1,
+          "inset": true
+        },
+        {
+          "x": 0,
+          "y": "0",
+          "blur": 0,
+          "spread": "1",
+          "color": "#ffffff",
+          "alpha": 0.2,
+          "inset": true
+        },
+        {
+          "x": "1",
+          "y": "1",
+          "blur": 0,
+          "spread": 0,
+          "color": "#000000",
+          "alpha": "0.3",
+          "inset": false
+        }
+      ],
+      "input": [
+        {
+          "x": 0,
+          "y": "0",
+          "blur": 0,
+          "spread": "1",
+          "color": "#FFFFFF",
+          "alpha": "0.2",
+          "inset": true
+        }
+      ]
+    },
+    "colors": {
+      "bg": "#31363b",
+      "underlay": "#000000",
+      "text": "#eff0f1",
+      "lightText": "#ffffff",
+      "accent": "#3daee9",
+      "link": "#3daee9",
+      "faint": "#eff0f1",
+      "lightBg": "#3d4349",
+      "fg": "#31363b",
+      "fgText": "#eff0f1",
+      "fgLink": "#3daee9",
+      "border": "#4c545b",
+      "btn": "#31363b",
+      "btnText": "#eff0f1",
+      "input": "#232629",
+      "inputText": "#ffffff",
+      "panel": "#ff00ff",
+      "panelText": "#eff0f1",
+      "panelLink": "#3daee9",
+      "panelFaint": "#eff0f1",
+      "topBar": "#31363b",
+      "topBarText": "#eff0f1",
+      "topBarLink": "#eff0f1",
+      "faintLink": "#3daee9",
+      "linkBg": "#366681",
+      "icon": "#909396",
+      "cBlue": "#3daee9",
+      "cRed": "#da4453",
+      "cGreen": "#27ae60",
+      "cOrange": "#f67400",
+      "alertError": "#da4453",
+      "alertErrorText": "#eff0f1",
+      "alertErrorPanelText": "#eff0f1",
+      "alertWarning": "#f67400",
+      "alertWarningText": "#eff0f1",
+      "alertWarningPanelText": "#eff0f1",
+      "badgeNotification": "#da4453",
+      "badgeNotificationText": "#ffffff"
+    },
+    "opacity": {
+      "panel": 0,
+      "btn": 1,
+      "border": 1,
+      "bg": 1,
+      "alert": 0.5,
+      "input": 0.5,
+      "faint": 0.5,
+      "underlay": 0.15
+    },
+    "radii": {
+      "btn": "2",
+      "input": "2",
+      "checkbox": "1",
+      "panel": "2",
+      "avatar": "2",
+      "avatarAlt": "2",
+      "tooltip": "2",
+      "attachment": "2"
+    },
+    "fonts": {
+      "interface": {
+        "family": "sans-serif"
+      },
+      "input": {
+        "family": "inherit"
+      },
+      "post": {
+        "family": "inherit"
+      },
+      "postCode": {
+        "family": "monospace"
+      }
+    }
+  },
+  "source": {
+    "themeEngineVersion": 3,
+    "fonts": {},
     "shadows": {
       "panel": [
         {
@@ -105,21 +317,13 @@
         }
       ]
     },
-    "fonts": {},
-    "opacity": {
-      "input": "1"
-    },
-    "v3compat": {
-      "colors": {
-        "panel": "transparent"
-      }
-    },
+    "opacity": {},
     "colors": {
       "bg": "#31363b",
       "text": "#eff0f1",
       "link": "#3daee9",
       "fg": "#31363b",
-      "panel": "#31363b",
+      "panel": "transparent",
       "input": "#232629",
       "topBarLink": "#eff0f1",
       "btn": "#31363b",
diff --git a/static/themes/breezy-light.json b/static/themes/breezy-light.json
index 5db185dd..243b8593 100644
--- a/static/themes/breezy-light.json
+++ b/static/themes/breezy-light.json
@@ -2,6 +2,218 @@
   "_pleroma_theme_version": 2,
   "name": "Breezy Light (beta)",
   "theme": {
+    "shadows": {
+      "panel": [
+        {
+          "x": "1",
+          "y": "2",
+          "blur": "6",
+          "spread": 0,
+          "color": "#000000",
+          "alpha": 0.6
+        }
+      ],
+      "topBar": [
+        {
+          "x": 0,
+          "y": 0,
+          "blur": 4,
+          "spread": 0,
+          "color": "#000000",
+          "alpha": 0.6
+        }
+      ],
+      "popup": [
+        {
+          "x": 2,
+          "y": 2,
+          "blur": 3,
+          "spread": 0,
+          "color": "#000000",
+          "alpha": 0.5
+        }
+      ],
+      "avatar": [
+        {
+          "x": 0,
+          "y": 1,
+          "blur": 8,
+          "spread": 0,
+          "color": "#000000",
+          "alpha": 0.7
+        }
+      ],
+      "avatarStatus": [],
+      "panelHeader": [
+        {
+          "x": 0,
+          "y": "40",
+          "blur": "40",
+          "spread": "-40",
+          "inset": true,
+          "color": "#ffffff",
+          "alpha": "0.1"
+        }
+      ],
+      "button": [
+        {
+          "x": 0,
+          "y": "0",
+          "blur": "0",
+          "spread": "1",
+          "color": "#000000",
+          "alpha": "0.3",
+          "inset": true
+        },
+        {
+          "x": "1",
+          "y": "1",
+          "blur": "1",
+          "spread": 0,
+          "color": "#000000",
+          "alpha": "0.3",
+          "inset": false
+        }
+      ],
+      "buttonHover": [
+        {
+          "x": 0,
+          "y": "0",
+          "blur": 0,
+          "spread": "1",
+          "color": "--accent",
+          "alpha": "0.3",
+          "inset": true
+        },
+        {
+          "x": "1",
+          "y": "1",
+          "blur": "1",
+          "spread": 0,
+          "color": "#000000",
+          "alpha": "0.3",
+          "inset": false
+        }
+      ],
+      "buttonPressed": [
+        {
+          "x": 0,
+          "y": 0,
+          "blur": "0",
+          "spread": "50",
+          "color": "--faint",
+          "alpha": 1,
+          "inset": true
+        },
+        {
+          "x": 0,
+          "y": "0",
+          "blur": 0,
+          "spread": "1",
+          "color": "#ffffff",
+          "alpha": 0.2,
+          "inset": true
+        },
+        {
+          "x": "1",
+          "y": "1",
+          "blur": 0,
+          "spread": 0,
+          "color": "#000000",
+          "alpha": "0.3",
+          "inset": false
+        }
+      ],
+      "input": [
+        {
+          "x": 0,
+          "y": "0",
+          "blur": 0,
+          "spread": "1",
+          "color": "#000000",
+          "alpha": "0.2",
+          "inset": true
+        }
+      ]
+    },
+    "colors": {
+      "bg": "#eff0f1",
+      "underlay": "#000000",
+      "text": "#232627",
+      "lightText": "#000000",
+      "accent": "#2980b9",
+      "link": "#2980b9",
+      "faint": "#232627",
+      "lightBg": "#e2e4e6",
+      "fg": "#bcc2c7",
+      "fgText": "#232627",
+      "fgLink": "#2980b9",
+      "border": "#b7bdc3",
+      "btn": "#eff0f1",
+      "btnText": "#232627",
+      "input": "#fcfcfc",
+      "inputText": "#000000",
+      "panel": "#475057",
+      "panelText": "#fcfcfc",
+      "panelLink": "#ffffff",
+      "panelFaint": "#d8dbdc",
+      "topBar": "#475057",
+      "topBarText": "#d8dbdc",
+      "topBarLink": "#eff0f1",
+      "faintLink": "#2980b9",
+      "linkBg": "#a0c4db",
+      "icon": "#898b8c",
+      "cBlue": "#2980b9",
+      "cRed": "#da4453",
+      "cGreen": "#27ae60",
+      "cOrange": "#f67400",
+      "alertError": "#da4453",
+      "alertErrorText": "#232627",
+      "alertErrorPanelText": "#fcfcfc",
+      "alertWarning": "#f67400",
+      "alertWarningText": "#232627",
+      "alertWarningPanelText": "#fcfcfc",
+      "badgeNotification": "#da4453",
+      "badgeNotificationText": "#ffffff"
+    },
+    "opacity": {
+      "panel": 1,
+      "btn": 1,
+      "border": 1,
+      "bg": 1,
+      "alert": 0.5,
+      "input": "1",
+      "faint": 0.5,
+      "underlay": 0.15
+    },
+    "radii": {
+      "btn": "2",
+      "input": "2",
+      "checkbox": "1",
+      "panel": "2",
+      "avatar": "2",
+      "avatarAlt": "2",
+      "tooltip": "2",
+      "attachment": "2"
+    },
+    "fonts": {
+      "interface": {
+        "family": "sans-serif"
+      },
+      "input": {
+        "family": "inherit"
+      },
+      "post": {
+        "family": "inherit"
+      },
+      "postCode": {
+        "family": "monospace"
+      }
+    }
+  },
+  "source": {
+    "themeEngineVersion": 3,
+    "fonts": {},
     "shadows": {
       "panel": [
         {
@@ -105,20 +317,14 @@
         }
       ]
     },
-    "fonts": {},
     "opacity": {
       "input": "1"
     },
-    "v3compat": {
-      "colors": {
-        "panel": "transparent"
-      }
-    },
     "colors": {
       "bg": "#eff0f1",
       "text": "#232627",
-      "link": "#2980b9",
       "fg": "#bcc2c7",
+      "accent": "#2980b9",
       "panel": "#475057",
       "panelText": "#fcfcfc",
       "input": "#fcfcfc",
-- 
cgit v1.2.3-70-g09d2


From adbab6ad2a413357b24edbd5b9beec3baae695fa Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 2 Jan 2020 21:36:01 +0200
Subject: added optional checkbox for opacity, similar to color input

---
 src/components/opacity_input/opacity_input.vue   | 37 +++++++++++++++++++++---
 src/components/style_switcher/style_switcher.vue |  9 ++++--
 2 files changed, 40 insertions(+), 6 deletions(-)

(limited to 'src/components')

diff --git a/src/components/opacity_input/opacity_input.vue b/src/components/opacity_input/opacity_input.vue
index c677f18c..f7b10d30 100644
--- a/src/components/opacity_input/opacity_input.vue
+++ b/src/components/opacity_input/opacity_input.vue
@@ -18,7 +18,7 @@
       @input="$emit('input', !present ? fallback : undefined)"
     >
     <label
-      v-if="typeof fallback !== 'undefined'"
+      v-if="typeof fallback !== 'undefined' && showOptionalTickbox"
       class="opt-l"
       :for="name + '-o'"
     />
@@ -38,9 +38,38 @@
 
 <script>
 export default {
-  props: [
-    'name', 'value', 'fallback', 'disabled'
-  ],
+  props: {
+    // Name of opacity, used for identifying
+    name: {
+      required: true,
+      type: String
+    },
+    // Opacity value, should be required but vue cannot tell the difference
+    // between "property missing" and "property set to undefined"
+    value: {
+      required: false,
+      type: Number,
+      default: undefined
+    },
+    // Opacity fallback to use when value is not defeind
+    fallback: {
+      required: false,
+      type: Number,
+      default: undefined
+    },
+    // Disable the control
+    disabled: {
+      required: false,
+      type: Boolean,
+      default: false
+    },
+    // Show "optional" tickbox, for when value might become mandatory
+    showOptionalTickbox: {
+      required: false,
+      type: Boolean,
+      default: true
+    }
+  },
   computed: {
     present () {
       return typeof this.value !== 'undefined'
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index 2eadbe25..f5b12e7e 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -118,15 +118,15 @@
               v-model="accentColorLocal"
               name="accentColor"
               :fallback="previewTheme.colors.link"
-              :showOptionalTickbox="typeof linkColorLocal !== 'undefined'"
               :label="$t('settings.accent')"
+              :showOptionalTickbox="typeof linkColorLocal !== 'undefined'"
             />
             <ColorInput
               v-model="linkColorLocal"
               name="linkColor"
               :fallback="previewTheme.colors.accent"
-              :showOptionalTickbox="typeof accentColorLocal !== 'undefined'"
               :label="$t('settings.links')"
+              :showOptionalTickbox="typeof accentColorLocal !== 'undefined'"
             />
             <ContrastRatio :contrast="previewContrast.bgLink" />
           </div>
@@ -239,6 +239,7 @@
               v-model="panelOpacityLocal"
               name="panelOpacity"
               :fallback="previewTheme.opacity.panel"
+              :showOptionalTickbox="panelColorLocal !== 'transparent'"
             />
             <ColorInput
               v-model="panelTextColorLocal"
@@ -296,6 +297,7 @@
               v-model="inputOpacityLocal"
               name="inputOpacity"
               :fallback="previewTheme.opacity.input"
+              :showOptionalTickbox="inputColorLocal !== 'transparent'"
             />
             <ColorInput
               v-model="inputTextColorLocal"
@@ -317,6 +319,7 @@
               v-model="btnOpacityLocal"
               name="btnOpacity"
               :fallback="previewTheme.opacity.btn"
+              :showOptionalTickbox="btnColorLocal !== 'transparent'"
             />
             <ColorInput
               v-model="btnTextColorLocal"
@@ -338,6 +341,7 @@
               v-model="borderOpacityLocal"
               name="borderOpacity"
               :fallback="previewTheme.opacity.border"
+              :showOptionalTickbox="borderColorLocal !== 'transparent'"
             />
           </div>
           <div class="color-item">
@@ -378,6 +382,7 @@
               v-model="underlayOpacityLocal"
               name="underlayOpacity"
               :fallback="previewTheme.opacity.underlay"
+              :showOptionalTickbox="underlayOpacityLocal !== 'transparent'"
             />
           </div>
         </div>
-- 
cgit v1.2.3-70-g09d2


From c7e9f21da0eb035b73a165e16f77a9cd18036305 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 2 Jan 2020 22:44:54 +0200
Subject: color input and opacity input now use Checkbox component. Cleanup.

---
 src/components/color_input/color_input.vue        | 20 ++++-----
 src/components/opacity_input/opacity_input.vue    | 51 +++++------------------
 src/components/range_input/range_input.vue        |  2 +-
 src/components/style_switcher/style_switcher.scss | 12 +++---
 src/components/style_switcher/style_switcher.vue  | 10 ++---
 5 files changed, 30 insertions(+), 65 deletions(-)

(limited to 'src/components')

diff --git a/src/components/color_input/color_input.vue b/src/components/color_input/color_input.vue
index fa26d079..aa289288 100644
--- a/src/components/color_input/color_input.vue
+++ b/src/components/color_input/color_input.vue
@@ -9,18 +9,12 @@
     >
       {{ label }}
     </label>
-    <input
-      v-if="typeof fallback !== 'undefined'"
-      :id="name + '-o'"
-      class="opt exlcude-disabled"
-      type="checkbox"
-      :checked="present"
-      @input="$emit('input', typeof value === 'undefined' ? fallback : undefined)"
-    >
-    <label
+    <Checkbox
       v-if="typeof fallback !== 'undefined' && showOptionalTickbox"
-      class="opt-l"
-      :for="name + '-o'"
+      :checked="present"
+      :disabled="disabled"
+      @change="$emit('input', typeof value === 'undefined' ? fallback : undefined)"
+      class="opt"
     />
     <input
       :id="name"
@@ -42,6 +36,7 @@
 </template>
 
 <script>
+import Checkbox from '../checkbox/checkbox.vue'
 export default {
   props: {
     // Name of color, used for identifying
@@ -80,6 +75,9 @@ export default {
       default: true
     }
   },
+  components: {
+    Checkbox
+  },
   computed: {
     present () {
       return typeof this.value !== 'undefined'
diff --git a/src/components/opacity_input/opacity_input.vue b/src/components/opacity_input/opacity_input.vue
index f7b10d30..cfda9926 100644
--- a/src/components/opacity_input/opacity_input.vue
+++ b/src/components/opacity_input/opacity_input.vue
@@ -9,18 +9,12 @@
     >
       {{ $t('settings.style.common.opacity') }}
     </label>
-    <input
+    <Checkbox
       v-if="typeof fallback !== 'undefined'"
-      :id="name + '-o'"
-      class="opt exclude-disabled"
-      type="checkbox"
       :checked="present"
-      @input="$emit('input', !present ? fallback : undefined)"
-    >
-    <label
-      v-if="typeof fallback !== 'undefined' && showOptionalTickbox"
-      class="opt-l"
-      :for="name + '-o'"
+      :disabled="disabled"
+      @change="$emit('input', !present ? fallback : undefined)"
+      class="opt"
     />
     <input
       :id="name"
@@ -37,38 +31,13 @@
 </template>
 
 <script>
+import Checkbox from '../checkbox/checkbox.vue'
 export default {
-  props: {
-    // Name of opacity, used for identifying
-    name: {
-      required: true,
-      type: String
-    },
-    // Opacity value, should be required but vue cannot tell the difference
-    // between "property missing" and "property set to undefined"
-    value: {
-      required: false,
-      type: Number,
-      default: undefined
-    },
-    // Opacity fallback to use when value is not defeind
-    fallback: {
-      required: false,
-      type: Number,
-      default: undefined
-    },
-    // Disable the control
-    disabled: {
-      required: false,
-      type: Boolean,
-      default: false
-    },
-    // Show "optional" tickbox, for when value might become mandatory
-    showOptionalTickbox: {
-      required: false,
-      type: Boolean,
-      default: true
-    }
+  props: [
+    'name', 'value', 'fallback', 'disabled'
+  ],
+  components: {
+    Checkbox
   },
   computed: {
     present () {
diff --git a/src/components/range_input/range_input.vue b/src/components/range_input/range_input.vue
index aaa2ed26..5857a5c1 100644
--- a/src/components/range_input/range_input.vue
+++ b/src/components/range_input/range_input.vue
@@ -12,7 +12,7 @@
     <input
       v-if="typeof fallback !== 'undefined'"
       :id="name + '-o'"
-      class="opt exclude-disabled"
+      class="opt"
       type="checkbox"
       :checked="present"
       @input="$emit('input', !present ? fallback : undefined)"
diff --git a/src/components/style_switcher/style_switcher.scss b/src/components/style_switcher/style_switcher.scss
index 135c113a..7291a884 100644
--- a/src/components/style_switcher/style_switcher.scss
+++ b/src/components/style_switcher/style_switcher.scss
@@ -15,12 +15,14 @@
 
     &.disabled {
       input, select {
-        &:not(.exclude-disabled) {
-          opacity: .5
-        }
+        opacity: .5
       }
     }
 
+    .opt {
+      margin: .5em;
+    }
+
     input, select {
       min-width: 3em;
       margin: 0;
@@ -44,10 +46,6 @@
         min-width: 3em;
       }
 
-      &[type=checkbox] + label {
-        margin: 6px 0;
-      }
-
       &:not([type=number]):not([type=text]) {
         align-self: flex-start;
       }
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index f5b12e7e..f993e070 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -239,7 +239,7 @@
               v-model="panelOpacityLocal"
               name="panelOpacity"
               :fallback="previewTheme.opacity.panel"
-              :showOptionalTickbox="panelColorLocal !== 'transparent'"
+              :disabled="panelColorLocal === 'transparent'"
             />
             <ColorInput
               v-model="panelTextColorLocal"
@@ -297,7 +297,7 @@
               v-model="inputOpacityLocal"
               name="inputOpacity"
               :fallback="previewTheme.opacity.input"
-              :showOptionalTickbox="inputColorLocal !== 'transparent'"
+              :disabled="inputColorLocal === 'transparent'"
             />
             <ColorInput
               v-model="inputTextColorLocal"
@@ -319,7 +319,7 @@
               v-model="btnOpacityLocal"
               name="btnOpacity"
               :fallback="previewTheme.opacity.btn"
-              :showOptionalTickbox="btnColorLocal !== 'transparent'"
+              :disabled="btnColorLocal === 'transparent'"
             />
             <ColorInput
               v-model="btnTextColorLocal"
@@ -341,7 +341,7 @@
               v-model="borderOpacityLocal"
               name="borderOpacity"
               :fallback="previewTheme.opacity.border"
-              :showOptionalTickbox="borderColorLocal !== 'transparent'"
+              :disabled="borderColorLocal === 'transparent'"
             />
           </div>
           <div class="color-item">
@@ -382,7 +382,7 @@
               v-model="underlayOpacityLocal"
               name="underlayOpacity"
               :fallback="previewTheme.opacity.underlay"
-              :showOptionalTickbox="underlayOpacityLocal !== 'transparent'"
+              :disabled="underlayOpacityLocal === 'transparent'"
             />
           </div>
         </div>
-- 
cgit v1.2.3-70-g09d2


From a2f676d31741f51d037fa4031855f63e1c43f2b3 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 2 Jan 2020 23:48:52 +0200
Subject: Improved ColorInput to showcase transparent color, improved global
 input styles a bit

---
 src/App.scss                                      | 17 +++++---
 src/components/color_input/color_input.vue        | 50 +++++++++++++++--------
 src/components/style_switcher/style_switcher.scss | 16 ++------
 3 files changed, 48 insertions(+), 35 deletions(-)

(limited to 'src/components')

diff --git a/src/App.scss b/src/App.scss
index b6d4943a..7c9c91af 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -122,12 +122,15 @@ button {
   }
 }
 
-label.select {
-  padding: 0;
+input, textarea, .select, .input {
 
-}
+  &.unstyled {
+    border-radius: 0;
+    background: none;
+    box-shadow: none;
+    height: unset;
+  }
 
-input, textarea, .select {
   border: none;
   border-radius: $fallback--inputRadius;
   border-radius: var(--inputRadius, $fallback--inputRadius);
@@ -141,13 +144,17 @@ input, textarea, .select {
   font-family: var(--inputFont, sans-serif);
   font-size: 14px;
   margin: 0;
-  padding: 8px .5em;
   box-sizing: border-box;
   display: inline-block;
   position: relative;
   height: 28px;
   line-height: 16px;
   hyphens: none;
+  padding: 8px .5em;
+
+  &.select {
+    padding: 0;
+  }
 
   &:disabled, &[disabled=disabled] {
     cursor: not-allowed;
diff --git a/src/components/color_input/color_input.vue b/src/components/color_input/color_input.vue
index aa289288..7fe04433 100644
--- a/src/components/color_input/color_input.vue
+++ b/src/components/color_input/color_input.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="color-control style-control"
+    class="color-input style-control"
     :class="{ disabled: !present || disabled }"
   >
     <label
@@ -16,27 +16,35 @@
       @change="$emit('input', typeof value === 'undefined' ? fallback : undefined)"
       class="opt"
     />
-    <input
-      :id="name"
-      class="color-input"
-      type="color"
-      :value="value || fallback"
-      :disabled="!present || disabled"
-      @input="$emit('input', $event.target.value)"
-    >
-    <input
-      :id="name + '-t'"
-      class="text-input"
-      type="text"
-      :value="value || fallback"
-      :disabled="!present || disabled"
-      @input="$emit('input', $event.target.value)"
-    >
+    <div class="input color-input-field">
+      <input
+        :id="name + '-t'"
+        class="textColor unstyled"
+        type="text"
+        :value="value || fallback"
+        :disabled="!present || disabled"
+        @input="$emit('input', $event.target.value)"
+      >
+      <input
+        v-if="validColor"
+        :id="name"
+        class="nativeColor unstyled"
+        type="color"
+        :value="value || fallback"
+        :disabled="!present || disabled"
+        @input="$emit('input', $event.target.value)"
+      >
+      <div
+        v-if="transparentColor"
+        class="transparentIndicator"
+      />
+    </div>
   </div>
 </template>
-
+<style lang="scss" src="./color_input.scss"></style>
 <script>
 import Checkbox from '../checkbox/checkbox.vue'
+import { hex2rgb } from '../../services/color_convert/color_convert.js'
 export default {
   props: {
     // Name of color, used for identifying
@@ -81,6 +89,12 @@ export default {
   computed: {
     present () {
       return typeof this.value !== 'undefined'
+    },
+    validColor () {
+      return hex2rgb(this.value || this.fallback)
+    },
+    transparentColor () {
+      return this.value === 'transparent'
     }
   }
 }
diff --git a/src/components/style_switcher/style_switcher.scss b/src/components/style_switcher/style_switcher.scss
index 7291a884..987245a2 100644
--- a/src/components/style_switcher/style_switcher.scss
+++ b/src/components/style_switcher/style_switcher.scss
@@ -23,20 +23,15 @@
       margin: .5em;
     }
 
+    .color-input {
+      flex: 0 0 0;
+    }
+
     input, select {
       min-width: 3em;
       margin: 0;
       flex: 0;
 
-      &[type=color] {
-        padding: 1px;
-        cursor: pointer;
-        height: 29px;
-        min-width: 2em;
-        border: none;
-        align-self: stretch;
-      }
-
       &[type=number] {
         min-width: 5em;
       }
@@ -44,9 +39,6 @@
       &[type=range] {
         flex: 1;
         min-width: 3em;
-      }
-
-      &:not([type=number]):not([type=text]) {
         align-self: flex-start;
       }
     }
-- 
cgit v1.2.3-70-g09d2


From 622c9d388e0df1f53c544c34b7def2bb6fe498cd Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 12 Jan 2020 03:44:06 +0200
Subject: Refactoring, forgotten files

---
 src/components/color_input/color_input.scss        |  65 +++
 src/services/color_convert/color_convert.js        |  99 ++++-
 src/services/style_setter/style_setter.js          | 442 ++-------------------
 src/services/theme_data/theme_data.service.js      | 315 +++++++++++++++
 .../services/style_setter/style_setter.spec.js     |  79 ++++
 5 files changed, 578 insertions(+), 422 deletions(-)
 create mode 100644 src/components/color_input/color_input.scss
 create mode 100644 src/services/theme_data/theme_data.service.js
 create mode 100644 test/unit/specs/services/style_setter/style_setter.spec.js

(limited to 'src/components')

diff --git a/src/components/color_input/color_input.scss b/src/components/color_input/color_input.scss
new file mode 100644
index 00000000..92bf87c5
--- /dev/null
+++ b/src/components/color_input/color_input.scss
@@ -0,0 +1,65 @@
+@import '../../_variables.scss';
+
+.color-input {
+  display: inline-flex;
+
+  &-field.input {
+    display: inline-flex;
+    flex: 0 0 0;
+    max-width: 9em;
+    align-items: stretch;
+    padding: .2em 8px;
+
+    input {
+      background: none;
+      color: $fallback--lightText;
+      color: var(--inputText, $fallback--lightText);
+      border: none;
+      padding: 0;
+      margin: 0;
+
+      &.textColor {
+        flex: 1 0 3em;
+        min-width: 3em;
+        padding: 0;
+      }
+
+      &.nativeColor {
+        flex: 0 0 2em;
+        min-width: 2em;
+        align-self: center;
+        height: 100%;
+      }
+    }
+    .transparentIndicator {
+      flex: 0 0 2em;
+      min-width: 2em;
+      align-self: center;
+      height: 100%;
+      // forgot to install counter-strike source, ooops
+      background-color: #FF00FF;
+      position: relative;
+      &::before, &::after {
+        display: block;
+        content: '';
+        background-color: #000000;
+        position: absolute;
+        height: 50%;
+        width: 50%;
+      }
+      &::after {
+        top: 0;
+        left: 0;
+      }
+      &::before {
+        bottom: 0;
+        right: 0;
+      }
+    }
+  }
+
+  .label {
+    flex: 1 1 auto;
+  }
+
+}
diff --git a/src/services/color_convert/color_convert.js b/src/services/color_convert/color_convert.js
index 32b4d50e..464f6495 100644
--- a/src/services/color_convert/color_convert.js
+++ b/src/services/color_convert/color_convert.js
@@ -1,9 +1,16 @@
-import { map } from 'lodash'
+import { invertLightness, convert, contrastRatio } from 'chromatism'
 
 // useful for visualizing color when debugging
 export const consoleColor = (color) => console.log('%c##########', 'background: ' + color + '; color: ' + color)
 
-const rgb2hex = (r, g, b) => {
+/**
+ * Convert r, g, b values into hex notation. All components are [0-255]
+ *
+ * @param {Number|String|Object} r - Either red component, {r,g,b} object, or hex string
+ * @param {Number} [g] - Green component
+ * @param {Number} [b] - Blue component
+ */
+export const rgb2hex = (r, g, b) => {
   if (r === null || typeof r === 'undefined') {
     return undefined
   }
@@ -14,7 +21,7 @@ const rgb2hex = (r, g, b) => {
   if (typeof r === 'object') {
     ({ r, g, b } = r)
   }
-  [r, g, b] = map([r, g, b], (val) => {
+  [r, g, b] = [r, g, b].map(val => {
     val = Math.ceil(val)
     val = val < 0 ? 0 : val
     val = val > 255 ? 255 : val
@@ -82,6 +89,7 @@ const getContrastRatio = (a, b) => {
 
   return (l1 + 0.05) / (l2 + 0.05)
 }
+
 /**
  * Same as `getContrastRatio` but for multiple layers in-between
  *
@@ -101,7 +109,7 @@ export const getContrastRatioLayers = (text, layers, bedrock) => {
  * @param {Object} bg - bottom layer color
  * @returns {Object} sRGB of resulting color
  */
-const alphaBlend = (fg, fga, bg) => {
+export const alphaBlend = (fg, fga, bg) => {
   if (fga === 1 || typeof fga === 'undefined') return fg
   return 'rgb'.split('').reduce((acc, c) => {
     // Simplified https://en.wikipedia.org/wiki/Alpha_compositing#Alpha_blending
@@ -121,14 +129,20 @@ export const alphaBlendLayers = (bedrock, layers) => layers.reduce((acc, [color,
   return alphaBlend(color, opacity, acc)
 }, bedrock)
 
-const invert = (rgb) => {
+export const invert = (rgb) => {
   return 'rgb'.split('').reduce((acc, c) => {
     acc[c] = 255 - rgb[c]
     return acc
   }, {})
 }
 
-const hex2rgb = (hex) => {
+/**
+ * Converts #rrggbb hex notation into an {r, g, b} object
+ *
+ * @param {String} hex - #rrggbb string
+ * @returns {Object} rgb representation of the color, values are 0-255
+ */
+export const hex2rgb = (hex) => {
   const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
   return result ? {
     r: parseInt(result[1], 16),
@@ -137,18 +151,75 @@ const hex2rgb = (hex) => {
   } : null
 }
 
-const mixrgb = (a, b) => {
+/**
+ * Old somewhat weird function for mixing two colors together
+ *
+ * @param {Object} a - one color (rgb)
+ * @param {Object} b - other color (rgb)
+ * @returns {Object} result
+ */
+export const mixrgb = (a, b) => {
   return Object.keys(a).reduce((acc, k) => {
     acc[k] = (a[k] + b[k]) / 2
     return acc
   }, {})
 }
+/**
+ * Converts rgb object into a CSS rgba() color
+ *
+ * @param {Object} color - rgb
+ * @returns {String} CSS rgba() color
+ */
+export const rgba2css = function (rgba) {
+  return `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`
+}
+
+/**
+ * Get text color for given background color and intended text color
+ * This checks if text and background don't have enough color and inverts
+ * text color's lightness if needed. If text color is still not enough it
+ * will fall back to black or white
+ *
+ * @param {Object} bg - background color
+ * @param {Object} text - intended text color
+ * @param {Boolean} preserve - try to preserve intended text color's hue/saturation (i.e. no BW)
+ */
+export const getTextColor = function (bg, text, preserve) {
+  const bgIsLight = convert(bg).hsl.l > 50
+  const textIsLight = convert(text).hsl.l > 50
+
+  if ((bgIsLight && textIsLight) || (!bgIsLight && !textIsLight)) {
+    const base = typeof text.a !== 'undefined' ? { a: text.a } : {}
+    const result = Object.assign(base, invertLightness(text).rgb)
+    if (!preserve && getContrastRatio(bg, result) < 4.5) {
+      // B&W
+      return contrastRatio(bg, text).rgb
+    }
+    // Inverted color
+    return result
+  }
+  return text
+}
 
-export {
-  rgb2hex,
-  hex2rgb,
-  mixrgb,
-  invert,
-  getContrastRatio,
-  alphaBlend
+/**
+ * Converts color to CSS Color value
+ *
+ * @param {Object|String} input - color
+ * @param {Number} [a] - alpha value
+ * @returns {String} a CSS Color value
+ */
+export const getCssColor = (input, a) => {
+  let rgb = {}
+  if (typeof input === 'object') {
+    rgb = input
+  } else if (typeof input === 'string') {
+    if (input.startsWith('#')) {
+      rgb = hex2rgb(input)
+    } else if (input.startsWith('--')) {
+      return `var(${input})`
+    } else {
+      return input
+    }
+  }
+  return rgba2css({ ...rgb, a })
 }
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 992b3194..46b08628 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -1,275 +1,13 @@
 import { times } from 'lodash'
-import { brightness, invertLightness, convert, contrastRatio } from 'chromatism'
-import { rgb2hex, hex2rgb, mixrgb, getContrastRatio, alphaBlend, alphaBlendLayers } from '../color_convert/color_convert.js'
-
-export const CURRENT_VERSION = 3
-/* This is a definition of all layer combinations
- * each key is a topmost layer, each value represents layer underneath
- * this is essentially a simplified tree
- */
-export const LAYERS = {
-  undelay: null, // root
-  topBar: null, // no transparency support
-  badge: null, //  no transparency support
-  fg: null,
-  bg: 'underlay',
-  panel: 'bg',
-  btn: 'bg',
-  btnPanel: 'panel',
-  btnTopBar: 'topBar',
-  input: 'bg',
-  inputPanel: 'panel',
-  inputTopBar: 'topBar',
-  alert: 'bg',
-  alertPanel: 'panel'
-}
-
-export const SLOT_INHERITANCE = {
-  bg: null,
-  fg: null,
-  text: null,
-  underlay: '#000000',
-  link: '--accent',
-  accent: '--link',
-  faint: '--text',
-  faintLink: '--link',
-
-  cBlue: '#0000ff',
-  cRed: '#FF0000',
-  cGreen: '#00FF00',
-  cOrange: '#E3FF00',
-
-  lightBg: {
-    depends: ['bg'],
-    color: (mod, bg) => brightness(5 * mod, bg).rgb
-  },
-  lightText: {
-    depends: ['text'],
-    color: (mod, text) => brightness(20 * mod, text).rgb
-  },
-
-  border: {
-    depends: 'fg',
-    color: (mod, fg) => brightness(2 * mod, fg).rgb
-  },
-
-  linkBg: {
-    depends: ['accent', 'bg'],
-    color: (mod, accent, bg) => alphaBlend(accent, 0.4, bg).rgb
-  },
-
-  icon: {
-    depends: ['bg', 'text'],
-    color: (mod, bg, text) => mixrgb(bg, text)
-  },
-
-  // Foreground
-  fgText: {
-    depends: ['text'],
-    layer: 'fg',
-    textColor: true
-  },
-  fgLink: {
-    depends: ['link'],
-    layer: 'fg',
-    textColor: 'preserve'
-  },
-
-  // Panel header
-  panel: '--fg',
-  panelText: {
-    depends: ['fgText'],
-    layer: 'panel',
-    textColor: true
-  },
-  panelFaint: {
-    depends: ['fgText'],
-    layer: 'panel',
-    textColor: true
-  },
-  panelLink: {
-    depends: ['fgLink'],
-    layer: 'panel',
-    textColor: 'preserve'
-  },
-
-  // Top bar
-  topBar: '--fg',
-  topBarText: {
-    depends: ['fgText'],
-    layer: 'topBar',
-    textColor: true
-  },
-  topBarLink: {
-    depends: ['fgLink'],
-    layer: 'topBar',
-    textColor: 'preserve'
-  },
-
-  // Buttons
-  btn: '--fg',
-  btnText: {
-    depends: ['fgText'],
-    layer: 'btn'
-  },
-  btnPanelText: {
-    depends: ['panelText'],
-    layer: 'btnPanel',
-    variant: 'btn',
-    textColor: true
-  },
-  btnTopBarText: {
-    depends: ['topBarText'],
-    layer: 'btnTopBar',
-    variant: 'btn',
-    textColor: true
-  },
-
-  // Input fields
-  input: '--fg',
-  inputText: {
-    depends: ['text'],
-    layer: 'input',
-    textColor: true
-  },
-  inputPanelText: {
-    depends: ['panelText'],
-    layer: 'inputPanel',
-    variant: 'input',
-    textColor: true
-  },
-  inputTopbarText: {
-    depends: ['topBarText'],
-    layer: 'inputTopBar',
-    variant: 'input',
-    textColor: true
-  },
-
-  alertError: '--cRed',
-  alertErrorText: {
-    depends: ['text', 'alertError'],
-    layer: 'alert',
-    variant: 'alertError',
-    textColor: true
-  },
-  alertErrorPanelText: {
-    depends: ['panelText', 'alertError'],
-    layer: 'alertPanel',
-    variant: 'alertError',
-    textColor: true
-  },
-
-  alertWarning: '--cOrange',
-  alertWarningText: {
-    depends: ['text', 'alertWarning'],
-    layer: 'alert',
-    variant: 'alertWarning',
-    textColor: true
-  },
-  alertWarningPanelText: {
-    depends: ['panelText', 'alertWarning'],
-    layer: 'alertPanel',
-    variant: 'alertWarning',
-    textColor: true
-  },
-
-  badgeNotification: '--cRed',
-  badgeNotificationText: {
-    depends: ['text', 'badgeNotification'],
-    layer: 'badge',
-    variant: 'badgeNotification',
-    textColor: 'bw'
-  }
-}
-
-export const getLayersArray = (layer, data = LAYERS) => {
-  let array = [layer]
-  let parent = data[layer]
-  while (parent) {
-    array.unshift(parent)
-    parent = data[parent]
-  }
-  return array
-}
-
-export const getLayers = (layer, variant = layer, colors, opacity) => {
-  return getLayersArray(layer).map((currentLayer) => ([
-    currentLayer === layer
-      ? colors[variant]
-      : colors[currentLayer],
-    opacity[currentLayer]
-  ]))
-}
-
-const getDependencies = (key, inheritance) => {
-  const data = inheritance[key]
-  if (typeof data === 'string' && data.startsWith('--')) {
-    return [data.substring(2)]
-  } else {
-    if (data === null) return []
-    const { depends, layer, variant } = data
-    const layerDeps = layer
-      ? getLayersArray(layer).map(currentLayer => {
-        return currentLayer === layer
-          ? variant || layer
-          : currentLayer
-      })
-      : []
-    if (Array.isArray(depends)) {
-      return [...depends, ...layerDeps]
-    } else {
-      return [...layerDeps]
-    }
-  }
-}
-
-export const topoSort = (
-  inheritance = SLOT_INHERITANCE,
-  getDeps = getDependencies
-) => {
-  // This is an implementation of https://en.wikipedia.org/wiki/Tarjan%27s_strongly_connected_components_algorithm
-
-  const allKeys = Object.keys(inheritance)
-  const whites = new Set(allKeys)
-  const grays = new Set()
-  const blacks = new Set()
-  const unprocessed = [...allKeys]
-  const output = []
-
-  const step = (node) => {
-    if (whites.has(node)) {
-      // Make node "gray"
-      whites.delete(node)
-      grays.add(node)
-      // Do step for each node connected to it (one way)
-      getDeps(node, inheritance).forEach(step)
-      // Make node "black"
-      grays.delete(node)
-      blacks.add(node)
-      // Put it into the output list
-      output.push(node)
-    } else if (grays.has(node)) {
-      console.debug('Cyclic depenency in topoSort, ignoring')
-      output.push(node)
-    } else if (blacks.has(node)) {
-      // do nothing
-    } else {
-      throw new Error('Unintended condition in topoSort!')
-    }
-  }
-  while (unprocessed.length > 0) {
-    step(unprocessed.pop())
-  }
-  return output
-}
-
-export const SLOT_ORDERED = topoSort(SLOT_INHERITANCE)
+import { convert } from 'chromatism'
+import { rgb2hex, hex2rgb, rgba2css, getCssColor } from '../color_convert/color_convert.js'
+import { getColors } from '../theme_data/theme_data.service.js'
 
 // While this is not used anymore right now, I left it in if we want to do custom
 // styles that aren't just colors, so user can pick from a few different distinct
 // styles as well as set their own colors in the future.
 
-const setStyle = (href, commit) => {
+export const setStyle = (href, commit) => {
   /***
       What's going on here?
       I want to make it easy for admins to style this application. To have
@@ -315,30 +53,7 @@ const setStyle = (href, commit) => {
   cssEl.addEventListener('load', setDynamic)
 }
 
-const rgb2rgba = function (rgba) {
-  return `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`
-}
-
-const getTextColor = function (bg, text, preserve) {
-  const bgIsLight = convert(bg).hsl.l > 50
-  const textIsLight = convert(text).hsl.l > 50
-
-  console.log(bgIsLight, textIsLight)
-
-  if ((bgIsLight && textIsLight) || (!bgIsLight && !textIsLight)) {
-    const base = typeof text.a !== 'undefined' ? { a: text.a } : {}
-    const result = Object.assign(base, invertLightness(text).rgb)
-    if (!preserve && getContrastRatio(bg, result) < 4.5) {
-      // B&W
-      return contrastRatio(bg, text).rgb
-    }
-    // Inverted color
-    return result
-  }
-  return text
-}
-
-const applyTheme = (input, commit) => {
+export const applyTheme = (input, commit) => {
   const { rules, theme } = generatePreset(input)
   const head = document.head
   const body = document.body
@@ -399,22 +114,6 @@ const getCssShadowFilter = (input) => {
     .join(' ')
 }
 
-const getCssColor = (input, a) => {
-  let rgb = {}
-  if (typeof input === 'object') {
-    rgb = input
-  } else if (typeof input === 'string') {
-    if (input.startsWith('#')) {
-      rgb = hex2rgb(input)
-    } else if (input.startsWith('--')) {
-      return `var(${input})`
-    } else {
-      return input
-    }
-  }
-  return rgb2rgba({ ...rgb, a })
-}
-
 const generateColors = (themeData) => {
   const rawOpacity = Object.assign({
     panel: 1,
@@ -435,14 +134,16 @@ const generateColors = (themeData) => {
   }, {}))
 
   const inputColors = themeData.colors || themeData
-  const transparentsOpacity = Object.entries(inputColors).reduce((acc, [k, v]) => {
-    if (v === 'transparent') {
-      acc[k] = 0
-    }
-    return acc
-  }, {})
 
-  const opacity = { ...rawOpacity, ...transparentsOpacity }
+  const opacity = {
+    ...rawOpacity,
+    ...Object.entries(inputColors).reduce((acc, [k, v]) => {
+      if (v === 'transparent') {
+        acc[k] = 0
+      }
+      return acc
+    }, {})
+  }
 
   // Cycle one: just whatever we have
   const sourceColors = Object.entries(inputColors).reduce((acc, [k, v]) => {
@@ -462,55 +163,7 @@ const generateColors = (themeData) => {
   const isLightOnDark = convert(sourceColors.bg).hsl.l < convert(sourceColors.text).hsl.l
   const mod = isLightOnDark ? 1 : -1
 
-  const colors = SLOT_ORDERED.reduce((acc, key) => {
-    const value = SLOT_INHERITANCE[key]
-    if (sourceColors[key]) {
-      return { ...acc, [key]: { ...sourceColors[key] } }
-    } else if (typeof value === 'string' && value.startsWith('#')) {
-      return { ...acc, [key]: convert(value).rgb }
-    } else {
-      const isObject = typeof value === 'object'
-      const defaultColorFunc = (mod, dep) => ({ ...dep })
-      const deps = getDependencies(key, SLOT_INHERITANCE)
-      const colorFunc = (isObject && value.color) || defaultColorFunc
-
-      if (value.textColor) {
-        const bg = alphaBlendLayers(
-          { ...acc[deps[0]] },
-          getLayers(
-            value.layer,
-            value.variant || value.layer,
-            acc,
-            opacity
-          )
-        )
-        if (value.textColor === 'bw') {
-          return {
-            ...acc,
-            [key]: contrastRatio(bg)
-          }
-        } else {
-          return {
-            ...acc,
-            [key]: getTextColor(
-              bg,
-              { ...acc[deps[0]] },
-              value.textColor === 'preserve'
-            )
-          }
-        }
-      } else {
-        console.log('BENIS', key, deps, deps.map((dep) => ({ ...acc[dep] })))
-        return {
-          ...acc,
-          [key]: colorFunc(
-            mod,
-            ...deps.map((dep) => ({ ...acc[dep] }))
-          )
-        }
-      }
-    }
-  }, {})
+  const colors = getColors(sourceColors, opacity, mod)
 
   // Inheriting opacities
   Object.entries(opacity).forEach(([ k, v ]) => {
@@ -541,7 +194,7 @@ const generateColors = (themeData) => {
     .reduce((acc, [k, v]) => {
       if (!v) return acc
       acc.solid[k] = rgb2hex(v)
-      acc.complete[k] = typeof v.a === 'undefined' ? rgb2hex(v) : rgb2rgba(v)
+      acc.complete[k] = typeof v.a === 'undefined' ? rgb2hex(v) : rgba2css(v)
       return acc
     }, { complete: {}, solid: {} })
   return {
@@ -740,14 +393,12 @@ const composePreset = (colors, radii, shadows, fonts) => {
   }
 }
 
-const generatePreset = (input) => {
-  const shadows = generateShadows(input)
-  const colors = generateColors(input)
-  const radii = generateRadii(input)
-  const fonts = generateFonts(input)
-
-  return composePreset(colors, radii, shadows, fonts)
-}
+const generatePreset = (input) => composePreset(
+  generateColors(input),
+  generateRadii(input),
+  generateShadows(input),
+  generateFonts(input)
+)
 
 const getThemes = () => {
   return window.fetch('/static/styles.json')
@@ -779,33 +430,24 @@ const getThemes = () => {
     })
 }
 
-const setPreset = (val, commit) => {
+export const setPreset = (val, commit) => {
   return getThemes().then((themes) => {
     const theme = themes[val] ? themes[val] : themes['pleroma-dark']
     const isV1 = Array.isArray(theme)
     const data = isV1 ? {} : theme.theme
 
     if (isV1) {
-      const bgRgb = hex2rgb(theme[1])
-      const fgRgb = hex2rgb(theme[2])
-      const textRgb = hex2rgb(theme[3])
-      const linkRgb = hex2rgb(theme[4])
-
-      const cRedRgb = hex2rgb(theme[5] || '#FF0000')
-      const cGreenRgb = hex2rgb(theme[6] || '#00FF00')
-      const cBlueRgb = hex2rgb(theme[7] || '#0000FF')
-      const cOrangeRgb = hex2rgb(theme[8] || '#E3FF00')
-
-      data.colors = {
-        bg: bgRgb,
-        fg: fgRgb,
-        text: textRgb,
-        link: linkRgb,
-        cRed: cRedRgb,
-        cBlue: cBlueRgb,
-        cGreen: cGreenRgb,
-        cOrange: cOrangeRgb
-      }
+      const bg = hex2rgb(theme[1])
+      const fg = hex2rgb(theme[2])
+      const text = hex2rgb(theme[3])
+      const link = hex2rgb(theme[4])
+
+      const cRed = hex2rgb(theme[5] || '#FF0000')
+      const cGreen = hex2rgb(theme[6] || '#00FF00')
+      const cBlue = hex2rgb(theme[7] || '#0000FF')
+      const cOrange = hex2rgb(theme[8] || '#E3FF00')
+
+      data.colors = { bg, fg, text, link, cRed, cBlue, cGreen, cOrange }
     }
 
     // This is a hack, this function is only called during initial load.
@@ -819,19 +461,3 @@ const setPreset = (val, commit) => {
     }
   })
 }
-
-export {
-  setStyle,
-  setPreset,
-  applyTheme,
-  getTextColor,
-  generateColors,
-  generateRadii,
-  generateShadows,
-  generateFonts,
-  generatePreset,
-  getThemes,
-  composePreset,
-  getCssShadow,
-  getCssShadowFilter
-}
diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
new file mode 100644
index 00000000..c9c80727
--- /dev/null
+++ b/src/services/theme_data/theme_data.service.js
@@ -0,0 +1,315 @@
+import { convert, brightness, contrastRatio } from 'chromatism'
+import { alphaBlend, alphaBlendLayers, getTextColor, mixrgb } from '../color_convert/color_convert.js'
+
+export const CURRENT_VERSION = 3
+/* This is a definition of all layer combinations
+ * each key is a topmost layer, each value represents layer underneath
+ * this is essentially a simplified tree
+ */
+export const LAYERS = {
+  undelay: null, // root
+  topBar: null, // no transparency support
+  badge: null, //  no transparency support
+  fg: null,
+  bg: 'underlay',
+  panel: 'bg',
+  btn: 'bg',
+  btnPanel: 'panel',
+  btnTopBar: 'topBar',
+  input: 'bg',
+  inputPanel: 'panel',
+  inputTopBar: 'topBar',
+  alert: 'bg',
+  alertPanel: 'panel'
+}
+
+export const SLOT_INHERITANCE = {
+  bg: null,
+  fg: null,
+  text: null,
+  underlay: '#000000',
+  link: '--accent',
+  accent: '--link',
+  faint: '--text',
+  faintLink: '--link',
+
+  cBlue: '#0000ff',
+  cRed: '#FF0000',
+  cGreen: '#00FF00',
+  cOrange: '#E3FF00',
+
+  lightBg: {
+    depends: ['bg'],
+    color: (mod, bg) => brightness(5 * mod, bg).rgb
+  },
+  lightText: {
+    depends: ['text'],
+    color: (mod, text) => brightness(20 * mod, text).rgb
+  },
+
+  border: {
+    depends: 'fg',
+    color: (mod, fg) => brightness(2 * mod, fg).rgb
+  },
+
+  linkBg: {
+    depends: ['accent', 'bg'],
+    color: (mod, accent, bg) => alphaBlend(accent, 0.4, bg).rgb
+  },
+
+  icon: {
+    depends: ['bg', 'text'],
+    color: (mod, bg, text) => mixrgb(bg, text)
+  },
+
+  // Foreground
+  fgText: {
+    depends: ['text'],
+    layer: 'fg',
+    textColor: true
+  },
+  fgLink: {
+    depends: ['link'],
+    layer: 'fg',
+    textColor: 'preserve'
+  },
+
+  // Panel header
+  panel: '--fg',
+  panelText: {
+    depends: ['fgText'],
+    layer: 'panel',
+    textColor: true
+  },
+  panelFaint: {
+    depends: ['fgText'],
+    layer: 'panel',
+    textColor: true
+  },
+  panelLink: {
+    depends: ['fgLink'],
+    layer: 'panel',
+    textColor: 'preserve'
+  },
+
+  // Top bar
+  topBar: '--fg',
+  topBarText: {
+    depends: ['fgText'],
+    layer: 'topBar',
+    textColor: true
+  },
+  topBarLink: {
+    depends: ['fgLink'],
+    layer: 'topBar',
+    textColor: 'preserve'
+  },
+
+  // Buttons
+  btn: '--fg',
+  btnText: {
+    depends: ['fgText'],
+    layer: 'btn'
+  },
+  btnPanelText: {
+    depends: ['panelText'],
+    layer: 'btnPanel',
+    variant: 'btn',
+    textColor: true
+  },
+  btnTopBarText: {
+    depends: ['topBarText'],
+    layer: 'btnTopBar',
+    variant: 'btn',
+    textColor: true
+  },
+
+  // Input fields
+  input: '--fg',
+  inputText: {
+    depends: ['text'],
+    layer: 'input',
+    textColor: true
+  },
+  inputPanelText: {
+    depends: ['panelText'],
+    layer: 'inputPanel',
+    variant: 'input',
+    textColor: true
+  },
+  inputTopbarText: {
+    depends: ['topBarText'],
+    layer: 'inputTopBar',
+    variant: 'input',
+    textColor: true
+  },
+
+  alertError: '--cRed',
+  alertErrorText: {
+    depends: ['text', 'alertError'],
+    layer: 'alert',
+    variant: 'alertError',
+    textColor: true
+  },
+  alertErrorPanelText: {
+    depends: ['panelText', 'alertError'],
+    layer: 'alertPanel',
+    variant: 'alertError',
+    textColor: true
+  },
+
+  alertWarning: '--cOrange',
+  alertWarningText: {
+    depends: ['text', 'alertWarning'],
+    layer: 'alert',
+    variant: 'alertWarning',
+    textColor: true
+  },
+  alertWarningPanelText: {
+    depends: ['panelText', 'alertWarning'],
+    layer: 'alertPanel',
+    variant: 'alertWarning',
+    textColor: true
+  },
+
+  badgeNotification: '--cRed',
+  badgeNotificationText: {
+    depends: ['text', 'badgeNotification'],
+    layer: 'badge',
+    variant: 'badgeNotification',
+    textColor: 'bw'
+  }
+}
+
+export const getLayersArray = (layer, data = LAYERS) => {
+  let array = [layer]
+  let parent = data[layer]
+  while (parent) {
+    array.unshift(parent)
+    parent = data[parent]
+  }
+  return array
+}
+
+export const getLayers = (layer, variant = layer, colors, opacity) => {
+  return getLayersArray(layer).map((currentLayer) => ([
+    currentLayer === layer
+      ? colors[variant]
+      : colors[currentLayer],
+    opacity[currentLayer]
+  ]))
+}
+
+const getDependencies = (key, inheritance) => {
+  const data = inheritance[key]
+  if (typeof data === 'string' && data.startsWith('--')) {
+    return [data.substring(2)]
+  } else {
+    if (data === null) return []
+    const { depends, layer, variant } = data
+    const layerDeps = layer
+      ? getLayersArray(layer).map(currentLayer => {
+        return currentLayer === layer
+          ? variant || layer
+          : currentLayer
+      })
+      : []
+    if (Array.isArray(depends)) {
+      return [...depends, ...layerDeps]
+    } else {
+      return [...layerDeps]
+    }
+  }
+}
+
+export const topoSort = (
+  inheritance = SLOT_INHERITANCE,
+  getDeps = getDependencies
+) => {
+  // This is an implementation of https://en.wikipedia.org/wiki/Tarjan%27s_strongly_connected_components_algorithm
+
+  const allKeys = Object.keys(inheritance)
+  const whites = new Set(allKeys)
+  const grays = new Set()
+  const blacks = new Set()
+  const unprocessed = [...allKeys]
+  const output = []
+
+  const step = (node) => {
+    if (whites.has(node)) {
+      // Make node "gray"
+      whites.delete(node)
+      grays.add(node)
+      // Do step for each node connected to it (one way)
+      getDeps(node, inheritance).forEach(step)
+      // Make node "black"
+      grays.delete(node)
+      blacks.add(node)
+      // Put it into the output list
+      output.push(node)
+    } else if (grays.has(node)) {
+      console.debug('Cyclic depenency in topoSort, ignoring')
+      output.push(node)
+    } else if (blacks.has(node)) {
+      // do nothing
+    } else {
+      throw new Error('Unintended condition in topoSort!')
+    }
+  }
+  while (unprocessed.length > 0) {
+    step(unprocessed.pop())
+  }
+  return output
+}
+
+export const SLOT_ORDERED = topoSort(SLOT_INHERITANCE)
+
+export const getColors = (sourceColors, sourceOpacity, mod) => SLOT_ORDERED.reduce((acc, key) => {
+  const value = SLOT_INHERITANCE[key]
+  if (sourceColors[key]) {
+    return { ...acc, [key]: { ...sourceColors[key] } }
+  } else if (typeof value === 'string' && value.startsWith('#')) {
+    return { ...acc, [key]: convert(value).rgb }
+  } else {
+    const isObject = typeof value === 'object'
+    const defaultColorFunc = (mod, dep) => ({ ...dep })
+    const deps = getDependencies(key, SLOT_INHERITANCE)
+    const colorFunc = (isObject && value.color) || defaultColorFunc
+
+    if (value.textColor) {
+      const bg = alphaBlendLayers(
+        { ...acc[deps[0]] },
+        getLayers(
+          value.layer,
+          value.variant || value.layer,
+          acc,
+          sourceOpacity
+        )
+      )
+      if (value.textColor === 'bw') {
+        return {
+          ...acc,
+          [key]: contrastRatio(bg)
+        }
+      } else {
+        return {
+          ...acc,
+          [key]: getTextColor(
+            bg,
+            { ...acc[deps[0]] },
+            value.textColor === 'preserve'
+          )
+        }
+      }
+    } else {
+      console.log('BENIS', key, deps, deps.map((dep) => ({ ...acc[dep] })))
+      return {
+        ...acc,
+        [key]: colorFunc(
+          mod,
+          ...deps.map((dep) => ({ ...acc[dep] }))
+        )
+      }
+    }
+  }
+}, {})
diff --git a/test/unit/specs/services/style_setter/style_setter.spec.js b/test/unit/specs/services/style_setter/style_setter.spec.js
new file mode 100644
index 00000000..7f789124
--- /dev/null
+++ b/test/unit/specs/services/style_setter/style_setter.spec.js
@@ -0,0 +1,79 @@
+import { getLayersArray, topoSort } from 'src/services/style_setter/style_setter'
+
+describe('getLayersArray', () => {
+  const fixture = {
+    layer1: null,
+    layer2: 'layer1',
+    layer3a: 'layer2',
+    layer3b: 'layer2'
+  }
+
+  it('should expand layers properly (3b)', () => {
+    const out = getLayersArray('layer3b', fixture)
+    expect(out).to.eql(['layer1', 'layer2', 'layer3b'])
+  })
+
+  it('should expand layers properly (3a)', () => {
+    const out = getLayersArray('layer3a', fixture)
+    expect(out).to.eql(['layer1', 'layer2', 'layer3a'])
+  })
+
+  it('should expand layers properly (2)', () => {
+    const out = getLayersArray('layer2', fixture)
+    expect(out).to.eql(['layer1', 'layer2'])
+  })
+
+  it('should expand layers properly (1)', () => {
+    const out = getLayersArray('layer1', fixture)
+    expect(out).to.eql(['layer1'])
+  })
+})
+
+describe('topoSort', () => {
+  const fixture1 = {
+    layerA: [],
+    layer1A: ['layerA'],
+    layer2A: ['layer1A'],
+    layerB: [],
+    layer1B: ['layerB'],
+    layer2B: ['layer1B'],
+    layer3AB: ['layer2B', 'layer2A']
+  }
+
+  // Same thing but messed up order
+  const fixture2 = {
+    layer1A: ['layerA'],
+    layer1B: ['layerB'],
+    layer2A: ['layer1A'],
+    layerB: [],
+    layer3AB: ['layer2B', 'layer2A'],
+    layer2B: ['layer1B'],
+    layerA: []
+  }
+
+  it('should make a topologically sorted array', () => {
+    const out = topoSort(fixture1, (node, inheritance) => inheritance[node])
+    // This basically checks all ordering that matters
+    expect(out.indexOf('layerA')).to.be.below(out.indexOf('layer1A'))
+    expect(out.indexOf('layer1A')).to.be.below(out.indexOf('layer2A'))
+    expect(out.indexOf('layerB')).to.be.below(out.indexOf('layer1B'))
+    expect(out.indexOf('layer1B')).to.be.below(out.indexOf('layer2B'))
+    expect(out.indexOf('layer2A')).to.be.below(out.indexOf('layer3AB'))
+    expect(out.indexOf('layer2B')).to.be.below(out.indexOf('layer3AB'))
+  })
+
+  it('order in object shouldn\'t matter', () => {
+    const out = topoSort(fixture2, (node, inheritance) => inheritance[node])
+    // This basically checks all ordering that matters
+    expect(out.indexOf('layerA')).to.be.below(out.indexOf('layer1A'))
+    expect(out.indexOf('layer1A')).to.be.below(out.indexOf('layer2A'))
+    expect(out.indexOf('layerB')).to.be.below(out.indexOf('layer1B'))
+    expect(out.indexOf('layer1B')).to.be.below(out.indexOf('layer2B'))
+    expect(out.indexOf('layer2A')).to.be.below(out.indexOf('layer3AB'))
+    expect(out.indexOf('layer2B')).to.be.below(out.indexOf('layer3AB'))
+  })
+  it('ignores cyclic dependencies', () => {
+    const out = topoSort({ a: 'b', b: 'a', c: 'a' }, (node, inheritance) => inheritance[node])
+    expect(out.indexOf('a')).to.be.below(out.indexOf('c'))
+  })
+})
-- 
cgit v1.2.3-70-g09d2


From a9a1fc37f546840f3d0fbaed493b131cb9c60669 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 12 Jan 2020 04:00:41 +0200
Subject: fixes, cleanup

---
 src/components/style_switcher/style_switcher.js | 13 +++++++++----
 src/services/style_setter/style_setter.js       | 15 ++++++++-------
 2 files changed, 17 insertions(+), 11 deletions(-)

(limited to 'src/components')

diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index f751260a..4749d3f7 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -1,15 +1,20 @@
-import { rgb2hex, hex2rgb, getContrastRatio, getContrastRatioLayers, alphaBlend } from '../../services/color_convert/color_convert.js'
 import { set, delete as del } from 'vue'
-import { merge } from 'lodash'
+import {
+  rgb2hex,
+  hex2rgb,
+  getContrastRatio,
+  getContrastRatioLayers,
+  alphaBlend
+} from '../../services/color_convert/color_convert.js'
 import {
   generateColors,
   generateShadows,
   generateRadii,
   generateFonts,
   composePreset,
-  getThemes,
-  CURRENT_VERSION
+  getThemes
 } from '../../services/style_setter/style_setter.js'
+import { CURRENT_VERSION } from '../../services/theme_data/theme_data.service.js'
 import ColorInput from '../color_input/color_input.vue'
 import RangeInput from '../range_input/range_input.vue'
 import OpacityInput from '../opacity_input/opacity_input.vue'
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 46b08628..516fb5f6 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -114,7 +114,7 @@ const getCssShadowFilter = (input) => {
     .join(' ')
 }
 
-const generateColors = (themeData) => {
+export const generateColors = (themeData) => {
   const rawOpacity = Object.assign({
     panel: 1,
     btn: 1,
@@ -182,6 +182,7 @@ const generateColors = (themeData) => {
     }
     if (k === 'badge') {
       colors['badgeNotification'].a = v
+      return
     }
     if (colors[k]) {
       colors[k].a = v
@@ -211,7 +212,7 @@ const generateColors = (themeData) => {
   }
 }
 
-const generateRadii = (input) => {
+export const generateRadii = (input) => {
   let inputRadii = input.radii || {}
   // v1 -> v2
   if (typeof input.btnRadius !== 'undefined') {
@@ -244,7 +245,7 @@ const generateRadii = (input) => {
   }
 }
 
-const generateFonts = (input) => {
+export const generateFonts = (input) => {
   const fonts = Object.entries(input.fonts || {}).filter(([k, v]) => v).reduce((acc, [k, v]) => {
     acc[k] = Object.entries(v).filter(([k, v]) => v).reduce((acc, [k, v]) => {
       acc[k] = v
@@ -279,7 +280,7 @@ const generateFonts = (input) => {
   }
 }
 
-const generateShadows = (input) => {
+export const generateShadows = (input) => {
   const border = (top, shadow) => ({
     x: 0,
     y: top ? 1 : -1,
@@ -376,7 +377,7 @@ const generateShadows = (input) => {
   }
 }
 
-const composePreset = (colors, radii, shadows, fonts) => {
+export const composePreset = (colors, radii, shadows, fonts) => {
   return {
     rules: {
       ...shadows.rules,
@@ -393,14 +394,14 @@ const composePreset = (colors, radii, shadows, fonts) => {
   }
 }
 
-const generatePreset = (input) => composePreset(
+export const generatePreset = (input) => composePreset(
   generateColors(input),
   generateRadii(input),
   generateShadows(input),
   generateFonts(input)
 )
 
-const getThemes = () => {
+export const getThemes = () => {
   return window.fetch('/static/styles.json')
     .then((data) => data.json())
     .then((themes) => {
-- 
cgit v1.2.3-70-g09d2


From 4418baf62aa7a8bef05568e7590b9b4303c29dc7 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 12 Jan 2020 04:16:04 +0200
Subject: fix

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

(limited to 'src/components')

diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index f993e070..82b85bd5 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -27,8 +27,8 @@
                     :key="style.name"
                     :value="style"
                     :style="{
-                      backgroundColor: style[1] || style.theme.colors.bg,
-                      color: style[3] || style.theme.colors.text
+                      backgroundColor: style[1] || (style.theme || style.source).colors.bg,
+                      color: style[3] || (style.theme || style.source).colors.text
                     }"
                   >
                     {{ style[0] || style.name }}
-- 
cgit v1.2.3-70-g09d2


From d52d1812273ff21bc0436dd261e8934c6010d52f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 12 Jan 2020 15:04:05 +0200
Subject: more fixes

---
 src/components/shadow_control/shadow_control.js | 3 +--
 src/services/theme_data/theme_data.service.js   | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

(limited to 'src/components')

diff --git a/src/components/shadow_control/shadow_control.js b/src/components/shadow_control/shadow_control.js
index 44e4a22f..7e82b9c0 100644
--- a/src/components/shadow_control/shadow_control.js
+++ b/src/components/shadow_control/shadow_control.js
@@ -1,7 +1,6 @@
 import ColorInput from '../color_input/color_input.vue'
 import OpacityInput from '../opacity_input/opacity_input.vue'
-import { getCssShadow } from '../../services/style_setter/style_setter.js'
-import { hex2rgb } from '../../services/color_convert/color_convert.js'
+import { hex2rgb, getCssShadow } from '../../services/color_convert/color_convert.js'
 
 export default {
   // 'Value' and 'Fallback' can be undefined, but if they are
diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
index a4df97c2..1117ab05 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@@ -48,7 +48,7 @@ export const SLOT_INHERITANCE = {
   },
 
   border: {
-    depends: 'fg',
+    depends: ['fg'],
     color: (mod, fg) => brightness(2 * mod, fg).rgb
   },
 
-- 
cgit v1.2.3-70-g09d2


From 88f83fc9fa3652efdbe6aa622d3e0089883e8057 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 12 Jan 2020 17:46:07 +0200
Subject: overhaul how style-switcher makes state, removed tons of copy-paste

---
 src/components/style_switcher/style_switcher.js  | 214 ++++++-----------------
 src/components/style_switcher/style_switcher.vue |  12 ++
 src/services/style_setter/style_setter.js        |  15 +-
 src/services/theme_data/theme_data.service.js    |  15 +-
 4 files changed, 85 insertions(+), 171 deletions(-)

(limited to 'src/components')

diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index 4749d3f7..9c6f3266 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -14,7 +14,12 @@ import {
   composePreset,
   getThemes
 } from '../../services/style_setter/style_setter.js'
-import { CURRENT_VERSION } from '../../services/theme_data/theme_data.service.js'
+import {
+  CURRENT_VERSION,
+  SLOT_INHERITANCE,
+  DEFAULT_OPACITY,
+  getLayers
+} from '../../services/theme_data/theme_data.service.js'
 import ColorInput from '../color_input/color_input.vue'
 import RangeInput from '../range_input/range_input.vue'
 import OpacityInput from '../opacity_input/opacity_input.vue'
@@ -67,55 +72,13 @@ export default {
       keepRoundness: false,
       keepFonts: false,
 
-      textColorLocal: '',
-      accentColorLocal: undefined,
-      linkColorLocal: undefined,
-
-      bgColorLocal: '',
-      bgOpacityLocal: undefined,
-
-      underlayColorLocal: '',
-      underlayOpacityLocal: undefined,
-
-      fgColorLocal: '',
-      fgTextColorLocal: undefined,
-      fgLinkColorLocal: undefined,
-
-      btnColorLocal: undefined,
-      btnTextColorLocal: undefined,
-      btnOpacityLocal: undefined,
-
-      inputColorLocal: undefined,
-      inputTextColorLocal: undefined,
-      inputOpacityLocal: undefined,
-
-      panelColorLocal: undefined,
-      panelTextColorLocal: undefined,
-      panelLinkColorLocal: undefined,
-      panelFaintColorLocal: undefined,
-      panelOpacityLocal: undefined,
-
-      topBarColorLocal: undefined,
-      topBarTextColorLocal: undefined,
-      topBarLinkColorLocal: undefined,
-
-      alertErrorColorLocal: undefined,
-      alertWarningColorLocal: undefined,
-
-      badgeOpacityLocal: undefined,
-      badgeNotificationColorLocal: undefined,
+      ...Object.keys(SLOT_INHERITANCE)
+        .map(key => [key, ''])
+        .reduce((acc, [key, val]) => ({ ...acc, [ key + 'ColorLocal' ]: val }), {}),
 
-      borderColorLocal: undefined,
-      borderOpacityLocal: undefined,
-
-      faintColorLocal: undefined,
-      faintOpacityLocal: undefined,
-      faintLinkColorLocal: undefined,
-
-      cRedColorLocal: '',
-      cBlueColorLocal: '',
-      cGreenColorLocal: '',
-      cOrangeColorLocal: '',
+      ...Object.keys(DEFAULT_OPACITY)
+        .map(key => [key, undefined])
+        .reduce((acc, [key, val]) => ({ ...acc, [ key + 'OpacityLocal' ]: val }), {}),
 
       shadowSelected: undefined,
       shadowsLocal: {},
@@ -149,59 +112,14 @@ export default {
       return Array.isArray(this.selected) ? 1 : 2
     },
     currentColors () {
-      return {
-        bg: this.bgColorLocal,
-        text: this.textColorLocal,
-        link: this.linkColorLocal,
-
-        fg: this.fgColorLocal,
-        fgText: this.fgTextColorLocal,
-        fgLink: this.fgLinkColorLocal,
-
-        accent: this.accentColorLocal,
-
-        underlay: this.underlayColorLocal,
-
-        panel: this.panelColorLocal,
-        panelText: this.panelTextColorLocal,
-        panelLink: this.panelLinkColorLocal,
-        panelFaint: this.panelFaintColorLocal,
-
-        input: this.inputColorLocal,
-        inputText: this.inputTextColorLocal,
-
-        topBar: this.topBarColorLocal,
-        topBarText: this.topBarTextColorLocal,
-        topBarLink: this.topBarLinkColorLocal,
-
-        btn: this.btnColorLocal,
-        btnText: this.btnTextColorLocal,
-
-        alertError: this.alertErrorColorLocal,
-        alertWarning: this.alertWarningColorLocal,
-        badgeNotification: this.badgeNotificationColorLocal,
-
-        faint: this.faintColorLocal,
-        faintLink: this.faintLinkColorLocal,
-        border: this.borderColorLocal,
-
-        cRed: this.cRedColorLocal,
-        cBlue: this.cBlueColorLocal,
-        cGreen: this.cGreenColorLocal,
-        cOrange: this.cOrangeColorLocal
-      }
+      return Object.keys(SLOT_INHERITANCE)
+        .map(key => [key, this[key + 'ColorLocal']])
+        .reduce((acc, [key, val]) => ({ ...acc, [ key ]: val }), {})
     },
     currentOpacity () {
-      return {
-        bg: this.bgOpacityLocal,
-        btn: this.btnOpacityLocal,
-        input: this.inputOpacityLocal,
-        panel: this.panelOpacityLocal,
-        topBar: this.topBarOpacityLocal,
-        border: this.borderOpacityLocal,
-        faint: this.faintOpacityLocal,
-        underlay: this.underlayOpacityLocal
-      }
+      return Object.keys(DEFAULT_OPACITY)
+        .map(key => [key, this[key + 'OpacityLocal']])
+        .reduce((acc, [key, val]) => ({ ...acc, [ key + 'OpacityLocal' ]: val }), {})
     },
     currentRadii () {
       return {
@@ -237,63 +155,45 @@ export default {
         laa: ratio >= 3,
         laaa: ratio >= 4.5
       })
-
-      // fgsfds :DDDD
-      const fgs = {
-        text: colorConvert(colors.text),
-        panelText: colorConvert(colors.panelText),
-        panelLink: colorConvert(colors.panelLink),
-        btnText: colorConvert(colors.btnText),
-        topBarText: colorConvert(colors.topBarText),
-        inputText: colorConvert(colors.inputText),
-
-        link: colorConvert(colors.link),
-        topBarLink: colorConvert(colors.topBarLink),
-
-        red: colorConvert(colors.cRed),
-        green: colorConvert(colors.cGreen),
-        blue: colorConvert(colors.cBlue),
-        orange: colorConvert(colors.cOrange)
-      }
-
-      const bgs = {
-        bg: colorConvert(colors.bg),
-        underlay: colorConvert(colors.underlay),
-        btn: colorConvert(colors.btn),
-        panel: colorConvert(colors.panel),
-        topBar: colorConvert(colors.topBar),
-        input: colorConvert(colors.input),
-        alertError: colorConvert(colors.alertError),
-        alertWarning: colorConvert(colors.alertWarning),
-        badgeNotification: colorConvert(colors.badgeNotification)
-      }
-
-      const bg = [bgs.bg, opacity.bg]
-      const underlay = [bgs.underlay || colorConvert('#000000'), opacity.underlay]
-
-      const panel = [underlay, bg]
-
-      const ratios = {
-        bgText: getContrastRatioLayers(fgs.text, panel, fgs.text),
-        bgLink: getContrastRatioLayers(fgs.link, panel, fgs.link),
-        bgRed: getContrastRatioLayers(fgs.red, panel, fgs.red),
-        bgGreen: getContrastRatioLayers(fgs.green, panel, fgs.green),
-        bgBlue: getContrastRatioLayers(fgs.blue, panel, fgs.blue),
-        bgOrange: getContrastRatioLayers(fgs.orange, panel, fgs.orange),
-
-        // TODO what's this?
-        tintText: getContrastRatio(alphaBlend(bgs.bg, 0.5, fgs.panelText), fgs.text),
-
-        panelText: getContrastRatioLayers(fgs.text, [...panel, [bgs.panel, opacity.panel]], fgs.panelText),
-        panelLink: getContrastRatioLayers(fgs.link, [...panel, [bgs.panel, opacity.panel]], fgs.panelLink),
-
-        btnText: getContrastRatioLayers(fgs.text, [...panel, [bgs.btn, opacity.btn]], fgs.btnText),
-
-        inputText: getContrastRatioLayers(fgs.text, [...panel, [bgs.input, opacity.input]], fgs.inputText),
-
-        topBarText: getContrastRatioLayers(fgs.text, [...panel, [bgs.topBar, opacity.topBar]], fgs.topBarText),
-        topBarLink: getContrastRatioLayers(fgs.link, [...panel, [bgs.topBar, opacity.topBar]], fgs.topBarLink)
-      }
+      const colorsConverted = Object.entries(colors).reduce((acc, [key, value]) => ({ ...acc, [key]: colorConvert(value) }), {})
+
+      const ratios = Object.entries(SLOT_INHERITANCE).reduce((acc, [key, value]) => {
+        const slotIsBaseText = key === 'text' || key === 'link'
+        const slotIsText = slotIsBaseText || (
+          typeof value === 'object' && value !== null && value.textColor
+        )
+        if (!slotIsText) return acc
+        const { layer, variant } = slotIsBaseText ? { layer: 'bg' } : value
+        const background = variant || layer
+        const textColors = [
+          key,
+          ...(background === 'bg' ? ['cRed', 'cGreen', 'cBlue', 'cOrange'] : [])
+        ]
+
+        const layers = getLayers(
+          layer,
+          variant || layer,
+          colorsConverted,
+          opacity
+        )
+
+        return {
+          ...acc,
+          ...textColors.reduce((acc, textColorKey) => {
+            const newKey = slotIsBaseText
+              ? 'bg' + textColorKey[0].toUpperCase() + textColorKey.slice(1)
+              : textColorKey
+            return {
+              ...acc,
+              [newKey]: getContrastRatioLayers(
+                colorsConverted[textColorKey],
+                layers,
+                colorsConverted[textColorKey]
+              )
+            }
+          }, {})
+        }
+      }, {})
 
       return Object.entries(ratios).reduce((acc, [k, v]) => { acc[k] = hints(v); return acc }, {})
     },
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index 82b85bd5..b059eb8a 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -209,6 +209,12 @@
               :label="$t('settings.style.advanced_colors.alert_error')"
               :fallback="previewTheme.colors.alertError"
             />
+            <ColorInput
+              v-model="alertErrorTextColorLocal"
+              name="alertErrorText"
+              :label="$t('settings.text')"
+              :fallback="previewTheme.colors.alertErrorText"
+            />
             <ContrastRatio :contrast="previewContrast.alertError" />
             <ColorInput
               v-model="alertWarningColorLocal"
@@ -217,6 +223,12 @@
               :fallback="previewTheme.colors.alertWarning"
             />
             <ContrastRatio :contrast="previewContrast.alertWarning" />
+            <ColorInput
+              v-model="alertWarningTextColorLocal"
+              name="alertWarningText"
+              :label="$t('settings.text')"
+              :fallback="previewTheme.colors.alertWarningText"
+            />
           </div>
           <div class="color-item">
             <h4>{{ $t('settings.style.advanced_colors.badge') }}</h4>
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 516fb5f6..e11516c0 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -1,7 +1,7 @@
 import { times } from 'lodash'
 import { convert } from 'chromatism'
 import { rgb2hex, hex2rgb, rgba2css, getCssColor } from '../color_convert/color_convert.js'
-import { getColors } from '../theme_data/theme_data.service.js'
+import { getColors, DEFAULT_OPACITY } from '../theme_data/theme_data.service.js'
 
 // While this is not used anymore right now, I left it in if we want to do custom
 // styles that aren't just colors, so user can pick from a few different distinct
@@ -115,18 +115,7 @@ const getCssShadowFilter = (input) => {
 }
 
 export const generateColors = (themeData) => {
-  const rawOpacity = Object.assign({
-    panel: 1,
-    btn: 1,
-    border: 1,
-    bg: 1,
-    badge: 1,
-    text: 1,
-    alert: 0.5,
-    input: 0.5,
-    faint: 0.5,
-    underlay: 0.15
-  }, Object.entries(themeData.opacity || {}).reduce((acc, [k, v]) => {
+  const rawOpacity = Object.assign({ ...DEFAULT_OPACITY }, Object.entries(themeData.opacity || {}).reduce((acc, [k, v]) => {
     if (typeof v !== 'undefined') {
       acc[k] = v
     }
diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
index 1117ab05..297d0223 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@@ -23,6 +23,19 @@ export const LAYERS = {
   alertPanel: 'panel'
 }
 
+export const DEFAULT_OPACITY = {
+  panel: 1,
+  btn: 1,
+  border: 1,
+  bg: 1,
+  badge: 1,
+  text: 1,
+  alert: 0.5,
+  input: 0.5,
+  faint: 0.5,
+  underlay: 0.15
+}
+
 export const SLOT_INHERITANCE = {
   bg: null,
   fg: null,
@@ -289,7 +302,7 @@ export const getColors = (sourceColors, sourceOpacity, mod) => SLOT_ORDERED.redu
       if (value.textColor === 'bw') {
         return {
           ...acc,
-          [key]: contrastRatio(bg)
+          [key]: contrastRatio(bg).rgb
         }
       } else {
         return {
-- 
cgit v1.2.3-70-g09d2


From 39dd08e69423722a172bcc3cec3791ae172a8175 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 12 Jan 2020 17:58:26 +0200
Subject: replace hsl's l with relative luminance for better lightness
 detection

---
 src/components/style_switcher/style_switcher.js | 5 +----
 src/i18n/en.json                                | 3 ++-
 src/services/color_convert/color_convert.js     | 6 +++---
 src/services/theme_data/theme_data.service.js   | 8 ++++----
 4 files changed, 10 insertions(+), 12 deletions(-)

(limited to 'src/components')

diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index 9c6f3266..49b34405 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -2,9 +2,7 @@ import { set, delete as del } from 'vue'
 import {
   rgb2hex,
   hex2rgb,
-  getContrastRatio,
-  getContrastRatioLayers,
-  alphaBlend
+  getContrastRatioLayers
 } from '../../services/color_convert/color_convert.js'
 import {
   generateColors,
@@ -265,7 +263,6 @@ export default {
 
       const theme = this.previewTheme
 
-      console.log(source)
       return {
         // To separate from other random JSON files and possible future source formats
         _pleroma_theme_version: 2, theme, source
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 323813f6..d97b4909 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -430,7 +430,8 @@
         "borders": "Borders",
         "buttons": "Buttons",
         "inputs": "Input fields",
-        "faint_text": "Faded text"
+        "faint_text": "Faded text",
+        "underlay": "Underlay"
       },
       "radii": {
         "_tab_label": "Roundness"
diff --git a/src/services/color_convert/color_convert.js b/src/services/color_convert/color_convert.js
index 576bf902..c727a9fe 100644
--- a/src/services/color_convert/color_convert.js
+++ b/src/services/color_convert/color_convert.js
@@ -1,4 +1,4 @@
-import { invertLightness, convert, contrastRatio } from 'chromatism'
+import { invertLightness, contrastRatio } from 'chromatism'
 
 // useful for visualizing color when debugging
 export const consoleColor = (color) => console.log('%c##########', 'background: ' + color + '; color: ' + color)
@@ -185,8 +185,8 @@ export const rgba2css = function (rgba) {
  * @param {Boolean} preserve - try to preserve intended text color's hue/saturation (i.e. no BW)
  */
 export const getTextColor = function (bg, text, preserve) {
-  const bgIsLight = convert(bg).hsl.l > 50
-  const textIsLight = convert(text).hsl.l > 50
+  const bgIsLight = relativeLuminance(bg) > 0.5
+  const textIsLight = relativeLuminance(text) > 0.5
 
   if ((bgIsLight && textIsLight) || (!bgIsLight && !textIsLight)) {
     const base = typeof text.a !== 'undefined' ? { a: text.a } : {}
diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
index 297d0223..e2e9331c 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@@ -159,13 +159,13 @@ export const SLOT_INHERITANCE = {
 
   alertError: '--cRed',
   alertErrorText: {
-    depends: ['text', 'alertError'],
+    depends: ['text'],
     layer: 'alert',
     variant: 'alertError',
     textColor: true
   },
   alertErrorPanelText: {
-    depends: ['panelText', 'alertError'],
+    depends: ['panelText'],
     layer: 'alertPanel',
     variant: 'alertError',
     textColor: true
@@ -173,13 +173,13 @@ export const SLOT_INHERITANCE = {
 
   alertWarning: '--cOrange',
   alertWarningText: {
-    depends: ['text', 'alertWarning'],
+    depends: ['text'],
     layer: 'alert',
     variant: 'alertWarning',
     textColor: true
   },
   alertWarningPanelText: {
-    depends: ['panelText', 'alertWarning'],
+    depends: ['panelText'],
     layer: 'alertPanel',
     variant: 'alertWarning',
     textColor: true
-- 
cgit v1.2.3-70-g09d2


From 3492d7f81ec3f99c4f15f9ab75f658b3d1db7799 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 12 Jan 2020 17:59:41 +0200
Subject: eslint

---
 src/components/color_input/color_input.vue       | 8 ++++----
 src/components/opacity_input/opacity_input.vue   | 8 ++++----
 src/components/settings/settings.vue             | 4 ++--
 src/components/style_switcher/style_switcher.vue | 6 +++---
 4 files changed, 13 insertions(+), 13 deletions(-)

(limited to 'src/components')

diff --git a/src/components/color_input/color_input.vue b/src/components/color_input/color_input.vue
index 7fe04433..e54409fe 100644
--- a/src/components/color_input/color_input.vue
+++ b/src/components/color_input/color_input.vue
@@ -13,8 +13,8 @@
       v-if="typeof fallback !== 'undefined' && showOptionalTickbox"
       :checked="present"
       :disabled="disabled"
-      @change="$emit('input', typeof value === 'undefined' ? fallback : undefined)"
       class="opt"
+      @change="$emit('input', typeof value === 'undefined' ? fallback : undefined)"
     />
     <div class="input color-input-field">
       <input
@@ -46,6 +46,9 @@
 import Checkbox from '../checkbox/checkbox.vue'
 import { hex2rgb } from '../../services/color_convert/color_convert.js'
 export default {
+  components: {
+    Checkbox
+  },
   props: {
     // Name of color, used for identifying
     name: {
@@ -83,9 +86,6 @@ export default {
       default: true
     }
   },
-  components: {
-    Checkbox
-  },
   computed: {
     present () {
       return typeof this.value !== 'undefined'
diff --git a/src/components/opacity_input/opacity_input.vue b/src/components/opacity_input/opacity_input.vue
index cfda9926..3cc3942b 100644
--- a/src/components/opacity_input/opacity_input.vue
+++ b/src/components/opacity_input/opacity_input.vue
@@ -13,8 +13,8 @@
       v-if="typeof fallback !== 'undefined'"
       :checked="present"
       :disabled="disabled"
-      @change="$emit('input', !present ? fallback : undefined)"
       class="opt"
+      @change="$emit('input', !present ? fallback : undefined)"
     />
     <input
       :id="name"
@@ -33,12 +33,12 @@
 <script>
 import Checkbox from '../checkbox/checkbox.vue'
 export default {
-  props: [
-    'name', 'value', 'fallback', 'disabled'
-  ],
   components: {
     Checkbox
   },
+  props: [
+    'name', 'value', 'fallback', 'disabled'
+  ],
   computed: {
     present () {
       return typeof this.value !== 'undefined'
diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
index b40c85dd..e118dbcc 100644
--- a/src/components/settings/settings.vue
+++ b/src/components/settings/settings.vue
@@ -76,9 +76,9 @@
                 <li>
                   <Checkbox v-model="useStreamingApi">
                     {{ $t('settings.useStreamingApi') }}
-                    <br/>
+                    <br>
                     <small>
-                    {{ $t('settings.useStreamingApiWarning') }}
+                      {{ $t('settings.useStreamingApiWarning') }}
                     </small>
                   </Checkbox>
                 </li>
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index b059eb8a..ff6a8264 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -119,14 +119,14 @@
               name="accentColor"
               :fallback="previewTheme.colors.link"
               :label="$t('settings.accent')"
-              :showOptionalTickbox="typeof linkColorLocal !== 'undefined'"
+              :show-optional-tickbox="typeof linkColorLocal !== 'undefined'"
             />
             <ColorInput
               v-model="linkColorLocal"
               name="linkColor"
               :fallback="previewTheme.colors.accent"
               :label="$t('settings.links')"
-              :showOptionalTickbox="typeof accentColorLocal !== 'undefined'"
+              :show-optional-tickbox="typeof accentColorLocal !== 'undefined'"
             />
             <ContrastRatio :contrast="previewContrast.bgLink" />
           </div>
@@ -388,7 +388,7 @@
               v-model="underlayColorLocal"
               name="underlay"
               :label="$t('settings.style.advanced_colors.underlay')"
-              fallback='#000000'
+              fallback="#000000"
             />
             <OpacityInput
               v-model="underlayOpacityLocal"
-- 
cgit v1.2.3-70-g09d2


From 40ba3e225209539639b65c2f636fa1b5af9861ff Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 12 Jan 2020 23:41:11 +0200
Subject: added more slots to UI

---
 src/components/poll/poll.vue                     |  4 ++-
 src/components/style_switcher/style_switcher.vue | 37 ++++++++++++++++++++++--
 src/i18n/en.json                                 |  4 ++-
 src/services/theme_data/theme_data.service.js    | 15 +++++++---
 4 files changed, 51 insertions(+), 9 deletions(-)

(limited to 'src/components')

diff --git a/src/components/poll/poll.vue b/src/components/poll/poll.vue
index db8e33b3..56e91cca 100644
--- a/src/components/poll/poll.vue
+++ b/src/components/poll/poll.vue
@@ -104,8 +104,10 @@
   .result-fill {
     height: 100%;
     position: absolute;
+    color: $fallback--text;
+    color: var(--pollText, $fallback--text);
     background-color: $fallback--lightBg;
-    background-color: var(--linkBg, $fallback--lightBg);
+    background-color: var(--poll, $fallback--lightBg);
     border-radius: $fallback--panelRadius;
     border-radius: var(--panelRadius, $fallback--panelRadius);
     top: 0;
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index ff6a8264..e0894b6d 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -215,20 +215,20 @@
               :label="$t('settings.text')"
               :fallback="previewTheme.colors.alertErrorText"
             />
-            <ContrastRatio :contrast="previewContrast.alertError" />
+            <ContrastRatio :contrast="previewContrast.alertErrorText" large="1"/>
             <ColorInput
               v-model="alertWarningColorLocal"
               name="alertWarning"
               :label="$t('settings.style.advanced_colors.alert_warning')"
               :fallback="previewTheme.colors.alertWarning"
             />
-            <ContrastRatio :contrast="previewContrast.alertWarning" />
             <ColorInput
               v-model="alertWarningTextColorLocal"
               name="alertWarningText"
               :label="$t('settings.text')"
               :fallback="previewTheme.colors.alertWarningText"
             />
+            <ContrastRatio :contrast="previewContrast.alertWarningText" large="1"/>
           </div>
           <div class="color-item">
             <h4>{{ $t('settings.style.advanced_colors.badge') }}</h4>
@@ -238,6 +238,13 @@
               :label="$t('settings.style.advanced_colors.badge_notification')"
               :fallback="previewTheme.colors.badgeNotification"
             />
+            <ColorInput
+              v-model="badgeNotificationTextColorLocal"
+              name="badgeNotificationText"
+              :label="$t('settings.text')"
+              :fallback="previewTheme.colors.badgeNotificationText"
+            />
+            <ContrastRatio :contrast="previewContrast.badgeNotificationText" large="1" />
           </div>
           <div class="color-item">
             <h4>{{ $t('settings.style.advanced_colors.panel_header') }}</h4>
@@ -388,7 +395,7 @@
               v-model="underlayColorLocal"
               name="underlay"
               :label="$t('settings.style.advanced_colors.underlay')"
-              fallback="#000000"
+              :fallback="previewTheme.colors.underlay"
             />
             <OpacityInput
               v-model="underlayOpacityLocal"
@@ -397,6 +404,30 @@
               :disabled="underlayOpacityLocal === 'transparent'"
             />
           </div>
+          <div class="color-item">
+            <h4>{{ $t('settings.style.advanced_colors.poll') }}</h4>
+            <ColorInput
+              v-model="pollColorLocal"
+              name="poll"
+              :label="$t('settings.background')"
+              :fallback="previewTheme.colors.poll"
+            />
+            <ColorInput
+              v-model="pollTextColorLocal"
+              name="poll"
+              :label="$t('settings.text')"
+              :fallback="previewTheme.colors.pollText"
+            />
+          </div>
+          <div class="color-item">
+            <h4>{{ $t('settings.style.advanced_colors.icons') }}</h4>
+            <ColorInput
+              v-model="iconColorLocal"
+              name="poll"
+              :label="$t('settings.style.advanced_colors.icons')"
+              :fallback="previewTheme.colors.icon"
+            />
+          </div>
         </div>
 
         <div
diff --git a/src/i18n/en.json b/src/i18n/en.json
index d97b4909..bd3d7413 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -431,7 +431,9 @@
         "buttons": "Buttons",
         "inputs": "Input fields",
         "faint_text": "Faded text",
-        "underlay": "Underlay"
+        "underlay": "Underlay",
+        "poll": "Poll graph",
+        "icons": "Icons"
       },
       "radii": {
         "_tab_label": "Roundness"
diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
index e2e9331c..21bab1a2 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@@ -20,7 +20,8 @@ export const LAYERS = {
   inputPanel: 'panel',
   inputTopBar: 'topBar',
   alert: 'bg',
-  alertPanel: 'panel'
+  alertPanel: 'panel',
+  poll: 'bg'
 }
 
 export const DEFAULT_OPACITY = {
@@ -33,7 +34,8 @@ export const DEFAULT_OPACITY = {
   alert: 0.5,
   input: 0.5,
   faint: 0.5,
-  underlay: 0.15
+  underlay: 0.15,
+  poll: 1
 }
 
 export const SLOT_INHERITANCE = {
@@ -65,9 +67,14 @@ export const SLOT_INHERITANCE = {
     color: (mod, fg) => brightness(2 * mod, fg).rgb
   },
 
-  linkBg: {
+  poll: {
     depends: ['accent', 'bg'],
-    color: (mod, accent, bg) => alphaBlend(accent, 0.4, bg).rgb
+    color: (mod, accent, bg) => alphaBlend(accent, 0.4, bg)
+  },
+  pollText: {
+    depends: ['text'],
+    layer: 'poll',
+    textColor: true
   },
 
   icon: {
-- 
cgit v1.2.3-70-g09d2


From 8f63bbb64fa2860e73d8562de9d6c62629a8668f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 13 Jan 2020 00:33:04 +0200
Subject: poll slot renamed, lightBg customization implemented

---
 src/App.scss                                       |  4 ++++
 src/components/autosuggest/autosuggest.vue         |  4 ++--
 src/components/dialog_modal/dialog_modal.vue       | 12 +++++-----
 src/components/emoji_input/emoji_input.vue         |  4 ++++
 src/components/nav_panel/nav_panel.vue             | 10 ++++++++
 src/components/selectable_list/selectable_list.vue |  4 ++++
 src/components/side_drawer/side_drawer.vue         |  5 ++++
 src/components/status/status.vue                   |  7 ++++--
 src/components/style_switcher/style_switcher.vue   | 27 ++++++++++++++++++++--
 src/services/style_setter/style_setter.js          |  4 +++-
 src/services/theme_data/theme_data.service.js      | 26 +++++++++++++++++++++
 11 files changed, 94 insertions(+), 13 deletions(-)

(limited to 'src/components')

diff --git a/src/App.scss b/src/App.scss
index 7c9c91af..7da3688a 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -495,6 +495,10 @@ main-router {
     color: $fallback--faint;
     color: var(--panelFaint, $fallback--faint);
   }
+  .faint-link {
+    color: $fallback--faint;
+    color: var(--faintLink, $fallback--faint);
+  }
 
   .alert {
     white-space: nowrap;
diff --git a/src/components/autosuggest/autosuggest.vue b/src/components/autosuggest/autosuggest.vue
index 1f86e996..f283ab82 100644
--- a/src/components/autosuggest/autosuggest.vue
+++ b/src/components/autosuggest/autosuggest.vue
@@ -40,8 +40,8 @@
     top: 100%;
     right: 0;
     max-height: 400px;
-    background-color: $fallback--lightBg;
-    background-color: var(--lightBg, $fallback--lightBg);
+    background-color: $fallback--bg;
+    background-color: var(--bg, $fallback--bg);
     border-style: solid;
     border-width: 1px;
     border-color: $fallback--border;
diff --git a/src/components/dialog_modal/dialog_modal.vue b/src/components/dialog_modal/dialog_modal.vue
index 55d7a7d2..3241ce3e 100644
--- a/src/components/dialog_modal/dialog_modal.vue
+++ b/src/components/dialog_modal/dialog_modal.vue
@@ -75,18 +75,18 @@
   .dialog-modal-content {
     margin: 0;
     padding: 1rem 1rem;
-    background-color: $fallback--lightBg;
-    background-color: var(--lightBg, $fallback--lightBg);
+    background-color: $fallback--bg;
+    background-color: var(--bg, $fallback--bg);
     white-space: normal;
   }
 
   .dialog-modal-footer {
     margin: 0;
     padding: .5em .5em;
-    background-color: $fallback--lightBg;
-    background-color: var(--lightBg, $fallback--lightBg);
-    border-top: 1px solid $fallback--bg;
-    border-top: 1px solid var(--bg, $fallback--bg);
+    background-color: $fallback--bg;
+    background-color: var(--bg, $fallback--bg);
+    border-top: 1px solid $fallback--border;
+    border-top: 1px solid var(--border, $fallback--border);
     display: flex;
     justify-content: flex-end;
 
diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index a7215670..dcf51ff9 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -158,6 +158,10 @@
       &.highlighted {
         background-color: $fallback--fg;
         background-color: var(--lightBg, $fallback--fg);
+        color: var(--lightBgText, $fallback--text);
+        --faint: var(--lightBgFaintText, $fallback--faint);
+        --faintLink: var(--lightBgFaintLink, $fallback--faint);
+        --icon: var(--lightBgIcon, $fallback--icon);
       }
     }
   }
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 034259d9..0886bf8c 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -101,12 +101,22 @@
   &:hover {
     background-color: $fallback--lightBg;
     background-color: var(--lightBg, $fallback--lightBg);
+    color: $fallback--link;
+    color: var(--lightBgText, $fallback--link);
+    --faint: var(--lightBgFaintText, $fallback--faint);
+    --faintLink: var(--lightBgFaintLink, $fallback--faint);
+    --icon: var(--lightBgIcon, $fallback--icon);
   }
 
   &.router-link-active {
     font-weight: bolder;
     background-color: $fallback--lightBg;
     background-color: var(--lightBg, $fallback--lightBg);
+    color: $fallback--text;
+    color: var(--lightBgText, $fallback--text);
+    --faint: var(--lightBgFaintText, $fallback--faint);
+    --faintLink: var(--lightBgFaintLink, $fallback--faint);
+    --icon: var(--lightBgIcon, $fallback--icon);
 
     &:hover {
       text-decoration: underline;
diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index d9ec7ece..416c9b6a 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -69,6 +69,10 @@
   &-item-selected-inner {
     background-color: $fallback--lightBg;
     background-color: var(--lightBg, $fallback--lightBg);
+    color: var(--lightBgText, $fallback--text);
+    --faint: var(--lightBgFaintText, $fallback--faint);
+    --faintLink: var(--lightBgFaintLink, $fallback--faint);
+    --icon: var(--lightBgIcon, $fallback--icon);
   }
 
   &-header {
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 3fba9058..6d75221f 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -290,6 +290,11 @@
     &:hover {
       background-color: $fallback--lightBg;
       background-color: var(--lightBg, $fallback--lightBg);
+      color: $fallback--text;
+      color: var(--lightBgText, $fallback--text);
+      --faint: var(--lightBgFaintText, $fallback--faint);
+      --faintLink: var(--lightBgFaintLink, $fallback--faint);
+      --icon: var(--lightBgIcon, $fallback--icon);
     }
   }
 }
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index d291e762..72e9b25a 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -446,6 +446,11 @@ $status-margin: 0.75em;
   &_focused {
     background-color: $fallback--lightBg;
     background-color: var(--lightBg, $fallback--lightBg);
+    color: $fallback--text;
+    color: var(--lightBgText, $fallback--text);
+    --faint: var(--lightBgFaintText, $fallback--faint);
+    --faintLink: var(--lightBgFaintLink, $fallback--faint);
+    --icon: var(--lightBgIcon, $fallback--icon);
   }
 
   .timeline & {
@@ -573,8 +578,6 @@ $status-margin: 0.75em;
       overflow: hidden;
       text-overflow: ellipsis;
       margin: 0 0.4em 0 0.2em;
-      color: $fallback--faint;
-      color: var(--faint, $fallback--faint);
     }
 
     .replies-separator {
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index e0894b6d..1381f1fb 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -414,7 +414,7 @@
             />
             <ColorInput
               v-model="pollTextColorLocal"
-              name="poll"
+              name="pollText"
               :label="$t('settings.text')"
               :fallback="previewTheme.colors.pollText"
             />
@@ -423,11 +423,34 @@
             <h4>{{ $t('settings.style.advanced_colors.icons') }}</h4>
             <ColorInput
               v-model="iconColorLocal"
-              name="poll"
+              name="icon"
               :label="$t('settings.style.advanced_colors.icons')"
               :fallback="previewTheme.colors.icon"
             />
           </div>
+          <div class="color-item">
+            <h4>{{ $t('settings.style.advanced_colors.lightBg') }}</h4>
+            <ColorInput
+              v-model="lightBgColorLocal"
+              name="lightBg"
+              :label="$t('settings.style.advanced_colors.lightBg')"
+              :fallback="previewTheme.colors.lightBg"
+            />
+            <ColorInput
+              v-model="lightBgTextColorLocal"
+              name="lightBgText"
+              :label="$t('settings.text')"
+              :fallback="previewTheme.colors.lightBgText"
+            />
+            <ContrastRatio :contrast="previewContrast.lightBgText" />
+            <ColorInput
+              v-model="lightBgLinkColorLocal"
+              name="lightBgLink"
+              :label="$t('settings.links')"
+              :fallback="previewTheme.colors.lightBgLink"
+            />
+            <ContrastRatio :contrast="previewContrast.lightBgLink" />
+          </div>
         </div>
 
         <div
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index e11516c0..204c162b 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -163,8 +163,10 @@ export const generateColors = (themeData) => {
       return
     }
     if (k === 'faint') {
-      colors[k + 'Link'].a = v
+      colors['faintLink'].a = v
       colors['panelFaint'].a = v
+      colors['lightBgFaintText'].a = v
+      colors['lightBgFaintLink'].a = v
     }
     if (k === 'bg') {
       colors['lightBg'].a = v
diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
index 21bab1a2..808f67d5 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@@ -12,6 +12,7 @@ export const LAYERS = {
   badge: null, //  no transparency support
   fg: null,
   bg: 'underlay',
+  lightBg: 'bg',
   panel: 'bg',
   btn: 'bg',
   btnPanel: 'panel',
@@ -57,6 +58,31 @@ export const SLOT_INHERITANCE = {
     depends: ['bg'],
     color: (mod, bg) => brightness(5 * mod, bg).rgb
   },
+  lightBgFaintText: {
+    depends: ['faint'],
+    layer: 'lightBg',
+    textColor: true
+  },
+  lightBgFaintLink: {
+    depends: ['faintLink'],
+    layer: 'lightBg',
+    textColor: 'preserve'
+  },
+  lightBgText: {
+    depends: ['text'],
+    layer: 'lightBg',
+    textColor: true
+  },
+  lightBgLink: {
+    depends: ['link'],
+    layer: 'lightBg',
+    textColor: 'preserve'
+  },
+  lightBgIcon: {
+    depends: ['lightBg', 'lightBgText'],
+    color: (mod, bg, text) => mixrgb(bg, text)
+  },
+
   lightText: {
     depends: ['text'],
     color: (mod, text) => brightness(20 * mod, text).rgb
-- 
cgit v1.2.3-70-g09d2


From fa2fcc882737c8c057fd12d4cc1a85d67f3b672e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 13 Jan 2020 01:54:56 +0200
Subject: better fallbacks in UI

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

(limited to 'src/components')

diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index 1381f1fb..c1ec7c9a 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -251,7 +251,7 @@
             <ColorInput
               v-model="panelColorLocal"
               name="panelColor"
-              :fallback="fgColorLocal"
+              :fallback="previewTheme.colors.panel"
               :label="$t('settings.background')"
             />
             <OpacityInput
@@ -286,7 +286,7 @@
             <ColorInput
               v-model="topBarColorLocal"
               name="topBarColor"
-              :fallback="fgColorLocal"
+              :fallback="previewTheme.colors.topBar"
               :label="$t('settings.background')"
             />
             <ColorInput
@@ -309,7 +309,7 @@
             <ColorInput
               v-model="inputColorLocal"
               name="inputColor"
-              :fallback="fgColorLocal"
+              :fallback="previewTheme.colors.input"
               :label="$t('settings.background')"
             />
             <OpacityInput
@@ -331,7 +331,7 @@
             <ColorInput
               v-model="btnColorLocal"
               name="btnColor"
-              :fallback="fgColorLocal"
+              :fallback="previewTheme.colors.btn"
               :label="$t('settings.background')"
             />
             <OpacityInput
-- 
cgit v1.2.3-70-g09d2


From 5881c13adc312f864a280f9216993839ee86ef1e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 13 Jan 2020 01:55:10 +0200
Subject: computed color display support in color_input

---
 src/components/color_input/color_input.scss | 3 +++
 src/components/color_input/color_input.vue  | 8 ++++++++
 2 files changed, 11 insertions(+)

(limited to 'src/components')

diff --git a/src/components/color_input/color_input.scss b/src/components/color_input/color_input.scss
index 92bf87c5..8e9923cf 100644
--- a/src/components/color_input/color_input.scss
+++ b/src/components/color_input/color_input.scss
@@ -31,11 +31,14 @@
         height: 100%;
       }
     }
+    .computedIndicator,
     .transparentIndicator {
       flex: 0 0 2em;
       min-width: 2em;
       align-self: center;
       height: 100%;
+    }
+    .transparentIndicator {
       // forgot to install counter-strike source, ooops
       background-color: #FF00FF;
       position: relative;
diff --git a/src/components/color_input/color_input.vue b/src/components/color_input/color_input.vue
index e54409fe..8fb16113 100644
--- a/src/components/color_input/color_input.vue
+++ b/src/components/color_input/color_input.vue
@@ -38,6 +38,11 @@
         v-if="transparentColor"
         class="transparentIndicator"
       />
+      <div
+        v-if="computedColor"
+        class="computedIndicator"
+        :style="{backgroundColor: fallback}"
+      />
     </div>
   </div>
 </template>
@@ -95,6 +100,9 @@ export default {
     },
     transparentColor () {
       return this.value === 'transparent'
+    },
+    computedColor () {
+      return this.value && this.value.startsWith('--')
     }
   }
 }
-- 
cgit v1.2.3-70-g09d2


From 8d2f2866f6d32b4ada155d76e07910b92c218146 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 13 Jan 2020 01:56:29 +0200
Subject: computed colors support

---
 src/App.scss                                     |  4 ++
 src/components/style_switcher/style_switcher.js  |  6 ++-
 src/components/style_switcher/style_switcher.vue | 16 +++++-
 src/i18n/en.json                                 |  4 +-
 src/services/style_setter/style_setter.js        |  6 ++-
 src/services/theme_data/theme_data.service.js    | 69 +++++++++++++++++++++---
 6 files changed, 92 insertions(+), 13 deletions(-)

(limited to 'src/components')

diff --git a/src/App.scss b/src/App.scss
index 7da3688a..ef139e88 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -99,6 +99,10 @@ button {
   &:active {
     box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.3), 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset;
     box-shadow: var(--buttonPressedShadow);
+    color: $fallback--text;
+    color: var(--btnPressedText, $fallback--text);
+    background-color: $fallback--fg;
+    background-color: var(--btnPressed, $fallback--fg)
   }
 
   &:disabled {
diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index 49b34405..b84d2489 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -42,7 +42,7 @@ const v1OnlyNames = [
 ].map(_ => _ + 'ColorLocal')
 
 const colorConvert = (color) => {
-  if (color === 'transparent') {
+  if (color.startsWith('--') || color === 'transparent') {
     return color
   } else {
     return hex2rgb(color)
@@ -409,7 +409,9 @@ export default {
         }
 
         keys.forEach(key => {
-          this[key + 'ColorLocal'] = rgb2hex(colors[key])
+          const color = colors[key]
+          const hex = rgb2hex(colors[key])
+          this[key + 'ColorLocal'] = hex === '#aN' ? color : hex
         })
       }
 
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index c1ec7c9a..f2fdfea2 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -347,6 +347,20 @@
               :label="$t('settings.text')"
             />
             <ContrastRatio :contrast="previewContrast.btnText" />
+            <h4>{{ $t('settings.style.advanced_colors.pressed') }}</h4>
+            <ColorInput
+              v-model="btnPressedColorLocal"
+              name="btnPressedColor"
+              :fallback="previewTheme.colors.btnPressed"
+              :label="$t('settings.background')"
+            />
+            <ColorInput
+              v-model="btnPressedTextColorLocal"
+              name="btnPressedTextColor"
+              :fallback="previewTheme.colors.btnPressedText"
+              :label="$t('settings.text')"
+            />
+            <ContrastRatio :contrast="previewContrast.btnText" />
           </div>
           <div class="color-item">
             <h4>{{ $t('settings.style.advanced_colors.borders') }}</h4>
@@ -433,7 +447,7 @@
             <ColorInput
               v-model="lightBgColorLocal"
               name="lightBg"
-              :label="$t('settings.style.advanced_colors.lightBg')"
+              :label="$t('settings.background')"
               :fallback="previewTheme.colors.lightBg"
             />
             <ColorInput
diff --git a/src/i18n/en.json b/src/i18n/en.json
index bd3d7413..544bc2ba 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -433,7 +433,9 @@
         "faint_text": "Faded text",
         "underlay": "Underlay",
         "poll": "Poll graph",
-        "icons": "Icons"
+        "icons": "Icons",
+        "lightBg": "Highlighted elements",
+        "pressed": "Pressed"
       },
       "radii": {
         "_tab_label": "Roundness"
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 204c162b..61612cf4 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -144,7 +144,11 @@ export const generateColors = (themeData) => {
         // TODO: hack to keep rest of the code from complaining
         value = '#FF00FF'
       }
-      acc[k] = hex2rgb(value)
+      if (!value || value.startsWith('--')) {
+        acc[k] = value
+      } else {
+        acc[k] = hex2rgb(value)
+      }
     }
     return acc
   }, {})
diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
index 808f67d5..221c3b48 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@@ -40,12 +40,27 @@ export const DEFAULT_OPACITY = {
 }
 
 export const SLOT_INHERITANCE = {
-  bg: null,
-  fg: null,
-  text: null,
+  bg: {
+    depends: [],
+    priority: 1
+  },
+  fg: {
+    depends: [],
+    priority: 1
+  },
+  text: {
+    depends: [],
+    priority: 1
+  },
   underlay: '#000000',
-  link: '--accent',
-  accent: '--link',
+  link: {
+    depends: ['accent'],
+    priority: 1
+  },
+  accent: {
+    depends: ['link'],
+    priority: 1
+  },
   faint: '--text',
   faintLink: '--link',
 
@@ -170,6 +185,26 @@ export const SLOT_INHERITANCE = {
     textColor: true
   },
 
+  btnPressed: '--btn',
+  btnPressedText: {
+    depends: ['btnText'],
+    layer: 'btn',
+    variant: 'btnPressed',
+    textColor: true
+  },
+  btnPressedPanelText: {
+    depends: ['btnPanelText'],
+    layer: 'btnPanel',
+    variant: 'btnPressed',
+    textColor: true
+  },
+  btnPressedTopBarText: {
+    depends: ['btnTopBarText'],
+    layer: 'btnTopBar',
+    variant: 'btnPressed',
+    textColor: true
+  },
+
   // Input fields
   input: '--fg',
   inputText: {
@@ -308,12 +343,30 @@ export const topoSort = (
   return output
 }
 
-export const SLOT_ORDERED = topoSort(SLOT_INHERITANCE)
+export const SLOT_ORDERED = topoSort(
+  Object.entries(SLOT_INHERITANCE)
+    .sort(([aK, aV], [bK, bV]) => ((aV && aV.priority) || 0) - ((bV && bV.priority) || 0))
+    .reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {})
+)
+
+console.log(SLOT_ORDERED)
 
 export const getColors = (sourceColors, sourceOpacity, mod) => SLOT_ORDERED.reduce((acc, key) => {
   const value = SLOT_INHERITANCE[key]
-  if (sourceColors[key]) {
-    return { ...acc, [key]: { ...sourceColors[key] } }
+  const sourceColor = sourceColors[key]
+  if (sourceColor) {
+    let targetColor = sourceColor
+    if (typeof sourceColor === 'string' && sourceColor.startsWith('--')) {
+      const [variable, modifier] = sourceColor.split(/,/g).map(str => str.trim())
+      const variableSlot = variable.substring(2)
+      targetColor = acc[variableSlot] || sourceColors[variableSlot]
+      if (modifier) {
+        console.log(targetColor, acc, variableSlot)
+        targetColor = brightness(Number.parseFloat(modifier) * mod, targetColor).rgb
+      }
+      console.log(targetColor, acc, variableSlot)
+    }
+    return { ...acc, [key]: { ...targetColor } }
   } else if (typeof value === 'string' && value.startsWith('#')) {
     return { ...acc, [key]: convert(value).rgb }
   } else {
-- 
cgit v1.2.3-70-g09d2


From 9943e1cc4306675f4ce5cad7e3be8e3353356f60 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 13 Jan 2020 02:02:31 +0200
Subject: removed references to v3compat

---
 src/components/style_switcher/style_switcher.js | 2 --
 1 file changed, 2 deletions(-)

(limited to 'src/components')

diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index b84d2489..34826f9f 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -481,7 +481,6 @@ export default {
     currentColors () {
       try {
         this.previewColors = generateColors({
-          v3compat: this.currentCompat,
           opacity: this.currentOpacity,
           colors: this.currentColors
         })
@@ -494,7 +493,6 @@ export default {
     currentOpacity () {
       try {
         this.previewColors = generateColors({
-          v3compat: this.currentCompat,
           opacity: this.currentOpacity,
           colors: this.currentColors
         })
-- 
cgit v1.2.3-70-g09d2


From 29a0b4a593219a54c01faa982be4752bcddfc7d0 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 13 Jan 2020 02:08:39 +0200
Subject: fix shadow and opacity

---
 src/components/shadow_control/shadow_control.js | 3 ++-
 src/components/style_switcher/style_switcher.js | 2 +-
 src/services/style_setter/style_setter.js       | 2 +-
 3 files changed, 4 insertions(+), 3 deletions(-)

(limited to 'src/components')

diff --git a/src/components/shadow_control/shadow_control.js b/src/components/shadow_control/shadow_control.js
index 7e82b9c0..44e4a22f 100644
--- a/src/components/shadow_control/shadow_control.js
+++ b/src/components/shadow_control/shadow_control.js
@@ -1,6 +1,7 @@
 import ColorInput from '../color_input/color_input.vue'
 import OpacityInput from '../opacity_input/opacity_input.vue'
-import { hex2rgb, getCssShadow } from '../../services/color_convert/color_convert.js'
+import { getCssShadow } from '../../services/style_setter/style_setter.js'
+import { hex2rgb } from '../../services/color_convert/color_convert.js'
 
 export default {
   // 'Value' and 'Fallback' can be undefined, but if they are
diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index 34826f9f..98c2cbc5 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -117,7 +117,7 @@ export default {
     currentOpacity () {
       return Object.keys(DEFAULT_OPACITY)
         .map(key => [key, this[key + 'OpacityLocal']])
-        .reduce((acc, [key, val]) => ({ ...acc, [ key + 'OpacityLocal' ]: val }), {})
+        .reduce((acc, [key, val]) => ({ ...acc, [ key ]: val }), {})
     },
     currentRadii () {
       return {
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 61612cf4..c1a25101 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -76,7 +76,7 @@ export const applyTheme = (input, commit) => {
   commit('setOption', { name: 'colors', value: theme.colors })
 }
 
-const getCssShadow = (input, usesDropShadow) => {
+export const getCssShadow = (input, usesDropShadow) => {
   if (input.length === 0) {
     return 'none'
   }
-- 
cgit v1.2.3-70-g09d2


From 8a7f3fc16a511e6c5917c0e25cba1f6163659264 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 13 Jan 2020 20:40:16 +0200
Subject: selectedPost and selectedMenu support

---
 src/components/emoji_input/emoji_input.vue         | 10 ++---
 src/components/nav_panel/nav_panel.vue             | 20 ++++-----
 src/components/selectable_list/selectable_list.vue | 10 ++---
 src/components/side_drawer/side_drawer.vue         | 10 ++---
 src/components/status/status.vue                   | 10 ++---
 src/components/style_switcher/style_switcher.vue   | 46 +++++++++++++++++++
 src/services/theme_data/theme_data.service.js      | 52 ++++++++++++++++++++++
 7 files changed, 128 insertions(+), 30 deletions(-)

(limited to 'src/components')

diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index dcf51ff9..46ed6f25 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -157,11 +157,11 @@
 
       &.highlighted {
         background-color: $fallback--fg;
-        background-color: var(--lightBg, $fallback--fg);
-        color: var(--lightBgText, $fallback--text);
-        --faint: var(--lightBgFaintText, $fallback--faint);
-        --faintLink: var(--lightBgFaintLink, $fallback--faint);
-        --icon: var(--lightBgIcon, $fallback--icon);
+        background-color: var(--selectedMenu, $fallback--fg);
+        color: var(--selectedMenuText, $fallback--text);
+        --faint: var(--selectedMenuFaintText, $fallback--faint);
+        --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
+        --icon: var(--selectedMenuIcon, $fallback--icon);
       }
     }
   }
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 0886bf8c..afc611ea 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -100,23 +100,23 @@
 
   &:hover {
     background-color: $fallback--lightBg;
-    background-color: var(--lightBg, $fallback--lightBg);
+    background-color: var(--selectedMenu, $fallback--lightBg);
     color: $fallback--link;
-    color: var(--lightBgText, $fallback--link);
-    --faint: var(--lightBgFaintText, $fallback--faint);
-    --faintLink: var(--lightBgFaintLink, $fallback--faint);
-    --icon: var(--lightBgIcon, $fallback--icon);
+    color: var(--selectedMenuText, $fallback--link);
+    --faint: var(--selectedMenuFaintText, $fallback--faint);
+    --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
+    --icon: var(--selectedMenuIcon, $fallback--icon);
   }
 
   &.router-link-active {
     font-weight: bolder;
     background-color: $fallback--lightBg;
-    background-color: var(--lightBg, $fallback--lightBg);
+    background-color: var(--selectedMenu, $fallback--lightBg);
     color: $fallback--text;
-    color: var(--lightBgText, $fallback--text);
-    --faint: var(--lightBgFaintText, $fallback--faint);
-    --faintLink: var(--lightBgFaintLink, $fallback--faint);
-    --icon: var(--lightBgIcon, $fallback--icon);
+    color: var(--selectedMenuText, $fallback--text);
+    --faint: var(--selectedMenuFaintText, $fallback--faint);
+    --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
+    --icon: var(--selectedMenuIcon, $fallback--icon);
 
     &:hover {
       text-decoration: underline;
diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index 416c9b6a..2d1e44a3 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -68,11 +68,11 @@
 
   &-item-selected-inner {
     background-color: $fallback--lightBg;
-    background-color: var(--lightBg, $fallback--lightBg);
-    color: var(--lightBgText, $fallback--text);
-    --faint: var(--lightBgFaintText, $fallback--faint);
-    --faintLink: var(--lightBgFaintLink, $fallback--faint);
-    --icon: var(--lightBgIcon, $fallback--icon);
+    background-color: var(--selectedMenu, $fallback--lightBg);
+    color: var(--selectedMenuText, $fallback--text);
+    --faint: var(--selectedMenuFaintText, $fallback--faint);
+    --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
+    --icon: var(--selectedMenuIcon, $fallback--icon);
   }
 
   &-header {
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 6d75221f..3188fd59 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -289,12 +289,12 @@
 
     &:hover {
       background-color: $fallback--lightBg;
-      background-color: var(--lightBg, $fallback--lightBg);
+      background-color: var(--selectedMenu, $fallback--lightBg);
       color: $fallback--text;
-      color: var(--lightBgText, $fallback--text);
-      --faint: var(--lightBgFaintText, $fallback--faint);
-      --faintLink: var(--lightBgFaintLink, $fallback--faint);
-      --icon: var(--lightBgIcon, $fallback--icon);
+      color: var(--selectedMenuText, $fallback--text);
+      --faint: var(--selectedMenuFaintText, $fallback--faint);
+      --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
+      --icon: var(--selectedMenuIcon, $fallback--icon);
     }
   }
 }
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 72e9b25a..38d091ed 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -445,12 +445,12 @@ $status-margin: 0.75em;
 
   &_focused {
     background-color: $fallback--lightBg;
-    background-color: var(--lightBg, $fallback--lightBg);
+    background-color: var(--selectedPost, $fallback--lightBg);
     color: $fallback--text;
-    color: var(--lightBgText, $fallback--text);
-    --faint: var(--lightBgFaintText, $fallback--faint);
-    --faintLink: var(--lightBgFaintLink, $fallback--faint);
-    --icon: var(--lightBgIcon, $fallback--icon);
+    color: var(--selectedPostText, $fallback--text);
+    --faint: var(--selectedPostFaintText, $fallback--faint);
+    --faintLink: var(--selectedPostFaintLink, $fallback--faint);
+    --icon: var(--selectedPostIcon, $fallback--icon);
   }
 
   .timeline & {
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index f2fdfea2..613abd1f 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -465,6 +465,52 @@
             />
             <ContrastRatio :contrast="previewContrast.lightBgLink" />
           </div>
+          <div class="color-item">
+            <h4>{{ $t('settings.style.advanced_colors.selectedPost') }}</h4>
+            <ColorInput
+              v-model="selectedPostColorLocal"
+              name="selectedPost"
+              :label="$t('settings.background')"
+              :fallback="previewTheme.colors.selectedPost"
+            />
+            <ColorInput
+              v-model="selectedPostTextColorLocal"
+              name="selectedPostText"
+              :label="$t('settings.text')"
+              :fallback="previewTheme.colors.selectedPostText"
+            />
+            <ContrastRatio :contrast="previewContrast.selectedPostText" />
+            <ColorInput
+              v-model="selectedPostLinkColorLocal"
+              name="selectedPostLink"
+              :label="$t('settings.links')"
+              :fallback="previewTheme.colors.selectedPostLink"
+            />
+            <ContrastRatio :contrast="previewContrast.selectedPostLink" />
+          </div>
+          <div class="color-item">
+            <h4>{{ $t('settings.style.advanced_colors.selectedMenu') }}</h4>
+            <ColorInput
+              v-model="selectedMenuColorLocal"
+              name="selectedMenu"
+              :label="$t('settings.background')"
+              :fallback="previewTheme.colors.selectedMenu"
+            />
+            <ColorInput
+              v-model="selectedMenuTextColorLocal"
+              name="selectedMenuText"
+              :label="$t('settings.text')"
+              :fallback="previewTheme.colors.selectedMenuText"
+            />
+            <ContrastRatio :contrast="previewContrast.selectedMenuText" />
+            <ColorInput
+              v-model="selectedMenuLinkColorLocal"
+              name="selectedMenuLink"
+              :label="$t('settings.links')"
+              :fallback="previewTheme.colors.selectedMenuLink"
+            />
+            <ContrastRatio :contrast="previewContrast.selectedMenuLink" />
+          </div>
         </div>
 
         <div
diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
index 221c3b48..dd5f8fd0 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@@ -98,6 +98,58 @@ export const SLOT_INHERITANCE = {
     color: (mod, bg, text) => mixrgb(bg, text)
   },
 
+  selectedPost: '--lightBg',
+  selectedPostFaintText: {
+    depends: ['lightBgFaintText'],
+    layer: 'lightBg',
+    textColor: true
+  },
+  selectedPostFaintLink: {
+    depends: ['lightBgFaintLink'],
+    layer: 'lightBg',
+    textColor: 'preserve'
+  },
+  selectedPostText: {
+    depends: ['lightBgText'],
+    layer: 'lightBg',
+    textColor: true
+  },
+  selectedPostLink: {
+    depends: ['lightBgLink'],
+    layer: 'lightBg',
+    textColor: 'preserve'
+  },
+  selectedPostIcon: {
+    depends: ['selectedPost', 'selectedPostText'],
+    color: (mod, bg, text) => mixrgb(bg, text)
+  },
+
+  selectedMenu: '--lightBg',
+  selectedMenuFaintText: {
+    depends: ['lightBgFaintText'],
+    layer: 'lightBg',
+    textColor: true
+  },
+  selectedMenuFaintLink: {
+    depends: ['lightBgFaintLink'],
+    layer: 'lightBg',
+    textColor: 'preserve'
+  },
+  selectedMenuText: {
+    depends: ['lightBgText'],
+    layer: 'lightBg',
+    textColor: true
+  },
+  selectedMenuLink: {
+    depends: ['lightBgLink'],
+    layer: 'lightBg',
+    textColor: 'preserve'
+  },
+  selectedMenuIcon: {
+    depends: ['selectedMenu', 'selectedMenuText'],
+    color: (mod, bg, text) => mixrgb(bg, text)
+  },
+
   lightText: {
     depends: ['text'],
     color: (mod, text) => brightness(20 * mod, text).rgb
-- 
cgit v1.2.3-70-g09d2


From 4b8e0f0afa2c7f1d0f4f0c2f39f289b75b3cae08 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 13 Jan 2020 21:30:55 +0200
Subject: buttonPressed & buttonDisabled slots

---
 src/App.scss                                     | 44 ++++++++++++++++++++++-
 src/components/style_switcher/style_switcher.vue | 16 ++++++++-
 src/services/theme_data/theme_data.service.js    | 46 +++++++++++++++++++++---
 3 files changed, 100 insertions(+), 6 deletions(-)

(limited to 'src/components')

diff --git a/src/App.scss b/src/App.scss
index ef139e88..7f404bc6 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -107,7 +107,10 @@ button {
 
   &:disabled {
     cursor: not-allowed;
-    opacity: 0.5;
+    color: $fallback--text;
+    color: var(--btnDisabledText, $fallback--text);
+    background-color: $fallback--fg;
+    background-color: var(--btnDisabled, $fallback--fg)
   }
 
   &.pressed {
@@ -365,6 +368,26 @@ i[class*=icon-] {
   height: 50px;
   box-sizing: border-box;
 
+  button {
+    &, i[class*=icon-] {
+      color: $fallback--text;
+      color: var(--btnTopBarText, $fallback--text);
+    }
+
+    &:active {
+      background-color: $fallback--fg;
+      background-color: var(--btnTopBarPressed, $fallback--fg);
+      color: $fallback--text;
+      color: var(--btnTopBarPressedText, $fallback--text);
+    }
+
+    &:disabled {
+      color: $fallback--text;
+      color: var(--btnTopBarDisabledText, $fallback--text);
+    }
+  }
+
+
   .logo {
     display: flex;
     position: absolute;
@@ -525,6 +548,25 @@ main-router {
     align-self: stretch;
   }
 
+  button {
+    &, i[class*=icon-] {
+      color: $fallback--text;
+      color: var(--btnPanelText, $fallback--text);
+    }
+
+    &:active {
+      background-color: $fallback--fg;
+      background-color: var(--btnPanelPressed, $fallback--fg);
+      color: $fallback--text;
+      color: var(--btnPanelPressedText, $fallback--text);
+    }
+
+    &:disabled {
+      color: $fallback--text;
+      color: var(--btnPanelDisabledText, $fallback--text);
+    }
+  }
+
   a {
     color: $fallback--link;
     color: var(--panelLink, $fallback--link)
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index 613abd1f..3921c953 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -360,7 +360,21 @@
               :fallback="previewTheme.colors.btnPressedText"
               :label="$t('settings.text')"
             />
-            <ContrastRatio :contrast="previewContrast.btnText" />
+            <ContrastRatio :contrast="previewContrast.btnPressedText" />
+            <h4>{{ $t('settings.style.advanced_colors.disabled') }}</h4>
+            <ColorInput
+              v-model="btnDisabledColorLocal"
+              name="btnDisabledColor"
+              :fallback="previewTheme.colors.btnDisabled"
+              :label="$t('settings.background')"
+            />
+            <ColorInput
+              v-model="btnDisabledTextColorLocal"
+              name="btnDisabledTextColor"
+              :fallback="previewTheme.colors.btnDisabledText"
+              :label="$t('settings.text')"
+            />
+            <ContrastRatio :contrast="previewContrast.btnDisabledText" />
           </div>
           <div class="color-item">
             <h4>{{ $t('settings.style.advanced_colors.borders') }}</h4>
diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
index dd5f8fd0..c5dd8047 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@@ -36,7 +36,8 @@ export const DEFAULT_OPACITY = {
   input: 0.5,
   faint: 0.5,
   underlay: 0.15,
-  poll: 1
+  poll: 1,
+  topBar: 1
 }
 
 export const SLOT_INHERITANCE = {
@@ -222,7 +223,8 @@ export const SLOT_INHERITANCE = {
   btn: '--fg',
   btnText: {
     depends: ['fgText'],
-    layer: 'btn'
+    layer: 'btn',
+    textColor: true
   },
   btnPanelText: {
     depends: ['panelText'],
@@ -257,6 +259,32 @@ export const SLOT_INHERITANCE = {
     textColor: true
   },
 
+  btnDisabled: {
+    depends: ['btn', 'bg'],
+    color: (mod, btn, bg) => alphaBlend(btn, 0.5, bg)
+  },
+  btnDisabledText: {
+    depends: ['btnText'],
+    layer: 'btn',
+    variant: 'btnDisabled',
+    textColor: true,
+    color: (mod, text) => brightness(mod * -60, text).rgb
+  },
+  btnDisabledPanelText: {
+    depends: ['btnPanelText'],
+    layer: 'btnPanel',
+    variant: 'btnDisabled',
+    textColor: true,
+    color: (mod, text) => brightness(mod * -60, text).rgb
+  },
+  btnDisabledTopBarText: {
+    depends: ['btnTopBarText'],
+    layer: 'btnTopBar',
+    variant: 'btnDisabled',
+    textColor: true,
+    color: (mod, text) => brightness(mod * -60, text).rgb
+  },
+
   // Input fields
   input: '--fg',
   inputText: {
@@ -329,7 +357,10 @@ export const getLayers = (layer, variant = layer, colors, opacity) => {
     currentLayer === layer
       ? colors[variant]
       : colors[currentLayer],
-    opacity[currentLayer]
+    // TODO: Remove this hack when opacities/layers system is improved
+    currentLayer.startsWith('btn')
+      ? opacity.btn
+      : opacity[currentLayer]
   ]))
 }
 
@@ -443,11 +474,18 @@ export const getColors = (sourceColors, sourceOpacity, mod) => SLOT_ORDERED.redu
           [key]: contrastRatio(bg).rgb
         }
       } else {
+        let color = { ...acc[deps[0]] }
+        if (value.color) {
+          const isLightOnDark = convert(bg).hsl.l < convert(color).hsl.l
+          const mod = isLightOnDark ? 1 : -1
+          color = value.color(mod, ...deps.map((dep) => ({ ...acc[dep] })))
+        }
+
         return {
           ...acc,
           [key]: getTextColor(
             bg,
-            { ...acc[deps[0]] },
+            { ...color },
             value.textColor === 'preserve'
           )
         }
-- 
cgit v1.2.3-70-g09d2


From 9f7af191e8a77a0c5620c8698cc7b26dde02868b Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 13 Jan 2020 22:19:19 +0200
Subject: tabs & toggled (ex pressed) buttons

---
 src/App.scss                                       | 22 +++++++++---
 src/components/follow_button/follow_button.vue     |  2 +-
 .../moderation_tools/moderation_tools.vue          |  2 +-
 src/components/style_switcher/style_switcher.vue   | 23 +++++++++++++
 src/components/tab_switcher/tab_switcher.scss      |  7 ++++
 src/components/user_card/user_card.vue             | 10 ++----
 src/services/theme_data/theme_data.service.js      | 39 ++++++++++++++++++++++
 7 files changed, 90 insertions(+), 15 deletions(-)

(limited to 'src/components')

diff --git a/src/App.scss b/src/App.scss
index 7f404bc6..70983fe2 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -113,11 +113,11 @@ button {
     background-color: var(--btnDisabled, $fallback--fg)
   }
 
-  &.pressed {
-    color: $fallback--faint;
-    color: var(--faint, $fallback--faint);
-    background-color: $fallback--bg;
-    background-color: var(--bg, $fallback--bg)
+  &.toggled {
+    color: $fallback--text;
+    color: var(--btnToggledText, $fallback--text);
+    background-color: $fallback--fg;
+    background-color: var(--btnToggled, $fallback--fg)
   }
 
   &.danger {
@@ -385,6 +385,13 @@ i[class*=icon-] {
       color: $fallback--text;
       color: var(--btnTopBarDisabledText, $fallback--text);
     }
+
+    &.toggled {
+      color: $fallback--text;
+      color: var(--btnTopBarToggledText, $fallback--text);
+      background-color: $fallback--fg;
+      background-color: var(--btnTopBarToggled, $fallback--fg)
+    }
   }
 
 
@@ -565,6 +572,11 @@ main-router {
       color: $fallback--text;
       color: var(--btnPanelDisabledText, $fallback--text);
     }
+
+    &.toggled {
+      color: $fallback--text;
+      color: var(--btnPanelToggledText, $fallback--text);
+    }
   }
 
   a {
diff --git a/src/components/follow_button/follow_button.vue b/src/components/follow_button/follow_button.vue
index f0cbb94b..bfdc137b 100644
--- a/src/components/follow_button/follow_button.vue
+++ b/src/components/follow_button/follow_button.vue
@@ -1,7 +1,7 @@
 <template>
   <button
     class="btn btn-default follow-button"
-    :class="{ pressed: isPressed }"
+    :class="{ toggled: isPressed }"
     :disabled="inProgress"
     :title="title"
     @click="onClick"
diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue
index 006d6373..e78e05f1 100644
--- a/src/components/moderation_tools/moderation_tools.vue
+++ b/src/components/moderation_tools/moderation_tools.vue
@@ -123,7 +123,7 @@
       </div>
       <button
         class="btn btn-default btn-block"
-        :class="{ pressed: showDropDown }"
+        :class="{ toggled: showDropDown }"
       >
         {{ $t('user_card.admin_menu.moderation') }}
       </button>
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index 3921c953..2fca5570 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -376,6 +376,29 @@
             />
             <ContrastRatio :contrast="previewContrast.btnDisabledText" />
           </div>
+          <div class="color-item">
+            <h4>{{ $t('settings.style.advanced_colors.tabs') }}</h4>
+            <ColorInput
+              v-model="tabColorLocal"
+              name="tabColor"
+              :fallback="previewTheme.colors.tab"
+              :label="$t('settings.background')"
+            />
+            <ColorInput
+              v-model="tabTextColorLocal"
+              name="tabTextColor"
+              :fallback="previewTheme.colors.tabText"
+              :label="$t('settings.text')"
+            />
+            <ContrastRatio :contrast="previewContrast.tabText" />
+            <ColorInput
+              v-model="tabActiveTextColorLocal"
+              name="tabActiveTextColor"
+              :fallback="previewTheme.colors.tabActiveText"
+              :label="$t('settings.text')"
+            />
+            <ContrastRatio :contrast="previewContrast.tabActiveText" />
+          </div>
           <div class="color-item">
             <h4>{{ $t('settings.style.advanced_colors.borders') }}</h4>
             <ColorInput
diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
index 3e5eacd5..df585faa 100644
--- a/src/components/tab_switcher/tab_switcher.scss
+++ b/src/components/tab_switcher/tab_switcher.scss
@@ -52,6 +52,11 @@
         margin-bottom: 6px - 99px;
         white-space: nowrap;
 
+        color: $fallback--text;
+        color: var(--tabText, $fallback--text);
+        background-color: $fallback--fg;
+        background-color: var(--tab, $fallback--fg);
+
         &:not(.active) {
           z-index: 4;
 
@@ -63,6 +68,8 @@
         &.active {
           background: transparent;
           z-index: 5;
+          color: $fallback--text;
+          color: var(--tabActiveText, $fallback--text);
         }
 
         img {
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 93d55fff..e286ceea 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -151,7 +151,7 @@
               </ProgressButton>
               <ProgressButton
                 v-else
-                class="btn btn-default pressed"
+                class="btn btn-default toggled"
                 :click="unsubscribeUser"
                 :title="$t('user_card.unsubscribe')"
               >
@@ -162,7 +162,7 @@
           <div>
             <button
               v-if="user.muted"
-              class="btn btn-default btn-block pressed"
+              class="btn btn-default btn-block toggled"
               @click="unmuteUser"
             >
               {{ $t('user_card.muted') }}
@@ -538,12 +538,6 @@
 
     button {
       margin: 0;
-
-      &.pressed {
-        // TODO: This should be themed.
-        border-bottom-color: rgba(255, 255, 255, 0.2);
-        border-top-color: rgba(0, 0, 0, 0.2);
-      }
     }
   }
 }
diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
index c5dd8047..a345d996 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@@ -219,6 +219,19 @@ export const SLOT_INHERITANCE = {
     textColor: 'preserve'
   },
 
+  // Tabs
+  tab: '--btn',
+  tabText: {
+    depends: ['btnText'],
+    layer: 'btn',
+    textColor: true
+  },
+  tabActiveText: {
+    depends: ['text'],
+    layer: 'bg',
+    textColor: true
+  },
+
   // Buttons
   btn: '--fg',
   btnText: {
@@ -239,6 +252,7 @@ export const SLOT_INHERITANCE = {
     textColor: true
   },
 
+  // Buttons: pressed
   btnPressed: '--btn',
   btnPressedText: {
     depends: ['btnText'],
@@ -259,6 +273,31 @@ export const SLOT_INHERITANCE = {
     textColor: true
   },
 
+  // Buttons: toggled
+  btnToggled: {
+    depends: ['btn'],
+    color: (mod, btn) => brightness(mod * 20, btn).rgb
+  },
+  btnToggledText: {
+    depends: ['btnText'],
+    layer: 'btn',
+    variant: 'btnToggled',
+    textColor: true
+  },
+  btnToggledPanelText: {
+    depends: ['btnPanelText'],
+    layer: 'btnPanel',
+    variant: 'btnToggled',
+    textColor: true
+  },
+  btnToggledTopBarText: {
+    depends: ['btnTopBarText'],
+    layer: 'btnTopBar',
+    variant: 'btnToggled',
+    textColor: true
+  },
+
+  // Buttons: disabled
   btnDisabled: {
     depends: ['btn', 'bg'],
     color: (mod, btn, bg) => alphaBlend(btn, 0.5, bg)
-- 
cgit v1.2.3-70-g09d2


From 33abbed5a1e1d1cf99d21d481b2a22481d7533b2 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shpuld@shpposter.club>
Date: Mon, 13 Jan 2020 23:34:39 +0200
Subject: usable-but-buggy: picker, adding/removing reaction on click, search,
 styles

---
 src/components/react_button/react_button.js        | 25 +++++----
 src/components/react_button/react_button.vue       | 37 +++++++++++--
 src/components/status/status.js                    | 21 ++++++--
 src/components/status/status.vue                   | 24 +++++++--
 src/modules/statuses.js                            | 61 ++++++++++++++++++++--
 src/services/api/api.service.js                    | 22 ++++++++
 .../backend_interactor_service.js                  |  4 ++
 7 files changed, 166 insertions(+), 28 deletions(-)

(limited to 'src/components')

diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js
index d1d15d93..76a49305 100644
--- a/src/components/react_button/react_button.js
+++ b/src/components/react_button/react_button.js
@@ -6,6 +6,7 @@ const ReactButton = {
     return {
       animated: false,
       showTooltip: false,
+      filterWord: '',
       popperOptions: {
         modifiers: {
           preventOverflow: { padding: { top: 50 }, boundariesElement: 'viewport' }
@@ -14,27 +15,25 @@ const ReactButton = {
     }
   },
   methods: {
-    openReactionSelect () {
-      console.log('test')
-      this.showTooltip = true
+    toggleReactionSelect () {
+      this.showTooltip = !this.showTooltip
     },
     closeReactionSelect () {
       this.showTooltip = false
     },
-    favorite () {
-      if (!this.status.favorited) {
-        this.$store.dispatch('favorite', { id: this.status.id })
-      } else {
-        this.$store.dispatch('unfavorite', { id: this.status.id })
-      }
-      this.animated = true
-      setTimeout(() => {
-        this.animated = false
-      }, 500)
+    addReaction (event, emoji) {
+      this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })
+      this.closeReactionSelect()
     }
   },
   computed: {
+    commonEmojis () {
+      return ['💖', '😠', '👀', '😂', '🔥']
+    },
     emojis () {
+      if (this.filterWord !== '') {
+        return this.$store.state.instance.emoji.filter(emoji => emoji.displayText.includes(this.filterWord))
+      }
       return this.$store.state.instance.emoji || []
     },
     classes () {
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index 93638770..f7015316 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -5,21 +5,37 @@
     trigger="manual"
     placement="top"
     class="react-button-popover"
-    @close-group="closeReactionSelect"
+    @hide="closeReactionSelect"
   >
     <div slot="popover">
+      <div class="reaction-picker-filter">
+        <input v-model="filterWord" placeholder="Search...">
+      </div>
       <div class="reaction-picker">
+        <span
+          v-for="emoji in commonEmojis"
+          :key="emoji"
+          class="emoji-reaction-button"
+          @click="addReaction($event, emoji)"
+        >
+          {{ emoji }}
+        </span>
+        <div class="reaction-picker-divider" />
         <span
           v-for="(emoji, key) in emojis"
           :key="key"
           class="emoji-reaction-button"
+          @click="addReaction($event, emoji.replacement)"
         >
           {{ emoji.replacement }}
         </span>
         <div class="reaction-bottom-fader" />
       </div>
     </div>
-    <div @click.prevent="openReactionSelect" v-if="loggedIn">
+    <div
+      v-if="loggedIn"
+      @click.prevent="toggleReactionSelect"
+    >
       <i
         :class="classes"
         class="button-icon favorite-button fav-active"
@@ -35,15 +51,28 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
+.reaction-picker-filter {
+  padding: 0.5em;
+}
+
+.reaction-picker-divider {
+  height: 1px;
+  width: 100%;
+  margin: 0.4em;
+  background-color: var(--border, $fallback--border);
+}
+
 .reaction-picker {
   width: 10em;
-  height: 8em;
+  height: 9em;
   font-size: 1.5em;
   overflow-y: scroll;
   display: flex;
   flex-wrap: wrap;
   padding: 0.5em;
-  text-align:center;
+  text-align: center;
+  align-content: flex-start;
+  user-select: none;
 
   mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
     linear-gradient(to bottom, white 0, transparent 100%) top no-repeat,
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 8c6fc0cf..cc0c9e06 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -280,10 +280,7 @@ const Status = {
       return this.mergedConfig.hidePostStats
     },
     emojiReactions () {
-      return {
-        '🤔': [{ 'id': 'xyz..' }, { 'id': 'zyx...' }],
-        '🐻': [{ 'id': 'abc...' }]
-      }
+      return this.status.emojiReactions
     },
     ...mapGetters(['mergedConfig'])
   },
@@ -385,6 +382,22 @@ const Status = {
     setMedia () {
       const attachments = this.attachmentSize === 'hide' ? this.status.attachments : this.galleryAttachments
       return () => this.$store.dispatch('setMedia', attachments)
+    },
+    reactedWith (emoji) {
+      return this.status.reactedWithEmoji.includes(emoji)
+    },
+    reactWith (emoji) {
+      this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })
+    },
+    unreact (emoji) {
+      this.$store.dispatch('unreactWithEmoji', { id: this.status.id, emoji })
+    },
+    emojiOnClick (emoji, event) {
+      if (this.reactedWith(emoji)) {
+        this.unreact(emoji)
+      } else {
+        this.reactWith(emoji)
+      }
     }
   },
   watch: {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index d455ccf6..503de98d 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -354,13 +354,15 @@
             </div>
           </transition>
 
-          <div class="emoji-reactions">
+          <div v-if="isFocused" class="emoji-reactions">
             <button
               v-for="(users, emoji) in emojiReactions"
               :key="emoji"
               class="emoji-reaction btn btn-default"
+              :class="{ 'picked-reaction': reactedWith(emoji) }"
+              @click="emojiOnClick(emoji, $event)"
             >
-              <span>{{ users.length }}</span>
+              <span v-if="users">{{ users.length }}</span>
               <span>{{ emoji }}</span>
             </button>
           </div>
@@ -788,19 +790,33 @@ $status-margin: 0.75em;
 
 .emoji-reactions {
   display: flex;
-  margin-top: 0.75em;
+  margin-top: 0.25em;
+  flex-wrap: wrap;
 }
 
 .emoji-reaction {
   padding: 0 0.5em;
   margin-right: 0.5em;
+  margin-top: 0.5em;
   display: flex;
   align-items: center;
   justify-content: center;
-
+  box-sizing: border-box;
   :first-child {
     margin-right: 0.25em;
   }
+  :last-child {
+    width: 1.5em;
+  }
+  &:focus {
+    outline: none;
+  }
+}
+
+.picked-reaction {
+  border: 1px solid var(--link, $fallback--link);
+  margin-left: -1px; // offset the border, can't use inset shadows either
+  margin-right: calc(0.5em - 1px);
 }
 
 .button-icon.icon-reply {
diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index c285b452..fcb6d1f3 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -1,4 +1,20 @@
-import { remove, slice, each, findIndex, find, maxBy, minBy, merge, first, last, isArray, omitBy, findKey } from 'lodash'
+import {
+  remove,
+  slice,
+  each,
+  findIndex,
+  find,
+  maxBy,
+  minBy,
+  merge,
+  first,
+  last,
+  isArray,
+  omitBy,
+  flow,
+  filter,
+  keys
+} from 'lodash'
 import { set } from 'vue'
 import apiService from '../services/api/api.service.js'
 // import parse from '../services/status_parser/status_parser.js'
@@ -512,8 +528,29 @@ export const mutations = {
   },
   addEmojiReactions (state, { id, emojiReactions, currentUser }) {
     const status = state.allStatusesObject[id]
-    status.emojiReactions = emojiReactions
-    status.reactedWithEmoji = findKey(emojiReactions, { id: currentUser.id })
+    set(status, 'emojiReactions', emojiReactions)
+    const reactedWithEmoji = flow(keys, filter(reaction => find(reaction, { id: currentUser.id })))(emojiReactions)
+    set(status, 'reactedWithEmoji', reactedWithEmoji)
+  },
+  addOwnReaction (state, { id, emoji, currentUser }) {
+    const status = state.allStatusesObject[id]
+    status.emojiReactions = status.emojiReactions || {}
+    const listOfUsers = (status.emojiReactions && status.emojiReactions[emoji]) || []
+    const hasSelfAlready = !!find(listOfUsers, { id: currentUser.id })
+    if (!hasSelfAlready) {
+      set(status.emojiReactions, emoji, listOfUsers.concat([{ id: currentUser.id }]))
+      set(status, 'reactedWithEmoji', emoji)
+    }
+  },
+  removeOwnReaction (state, { id, emoji, currentUser }) {
+    const status = state.allStatusesObject[id]
+    const listOfUsers = status.emojiReactions[emoji] || []
+    const hasSelfAlready = !!find(listOfUsers, { id: currentUser.id })
+    if (hasSelfAlready) {
+      const newUsers = filter(listOfUsers, user => user.id !== currentUser.id)
+      set(status.emojiReactions, emoji, newUsers)
+      set(status, 'reactedWith', emoji)
+    }
   },
   updateStatusWithPoll (state, { id, poll }) {
     const status = state.allStatusesObject[id]
@@ -616,6 +653,24 @@ const statuses = {
         commit('addRepeats', { id, rebloggedByUsers, currentUser: rootState.users.currentUser })
       })
     },
+    reactWithEmoji ({ rootState, dispatch, commit }, { id, emoji }) {
+      const currentUser = rootState.users.currentUser
+      commit('addOwnReaction', { id, emoji, currentUser })
+      rootState.api.backendInteractor.reactWithEmoji(id, emoji).then(
+        status => {
+          dispatch('fetchEmojiReactions', id)
+        }
+      )
+    },
+    unreactWithEmoji ({ rootState, dispatch, commit }, { id, emoji }) {
+      const currentUser = rootState.users.currentUser
+      commit('removeOwnReaction', { id, emoji, currentUser })
+      rootState.api.backendInteractor.unreactWithEmoji(id, emoji).then(
+        status => {
+          dispatch('fetchEmojiReactions', id)
+        }
+      )
+    },
     fetchEmojiReactions ({ rootState, commit }, id) {
       rootState.api.backendInteractor.fetchEmojiReactions(id).then(
         emojiReactions => {
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 7ef4b74a..2e96264a 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -72,6 +72,8 @@ const MASTODON_UNMUTE_CONVERSATION = id => `/api/v1/statuses/${id}/unmute`
 const MASTODON_SEARCH_2 = `/api/v2/search`
 const MASTODON_USER_SEARCH_URL = '/api/v1/accounts/search'
 const PLEROMA_EMOJI_REACTIONS_URL = id => `/api/v1/pleroma/statuses/${id}/emoji_reactions_by`
+const PLEROMA_EMOJI_REACT_URL = id => `/api/v1/pleroma/statuses/${id}/react_with_emoji`
+const PLEROMA_EMOJI_UNREACT_URL = id => `/api/v1/pleroma/statuses/${id}/unreact_with_emoji`
 
 const oldfetch = window.fetch
 
@@ -869,6 +871,24 @@ const fetchEmojiReactions = ({ id }) => {
   return promisedRequest({ url: PLEROMA_EMOJI_REACTIONS_URL(id) })
 }
 
+const reactWithEmoji = ({ id, emoji, credentials }) => {
+  return promisedRequest({
+    url: PLEROMA_EMOJI_REACT_URL(id),
+    method: 'POST',
+    credentials,
+    payload: { emoji }
+  }).then(status => parseStatus(status))
+}
+
+const unreactWithEmoji = ({ id, emoji, credentials }) => {
+  return promisedRequest({
+    url: PLEROMA_EMOJI_UNREACT_URL(id),
+    method: 'POST',
+    credentials,
+    payload: { emoji }
+  }).then(parseStatus)
+}
+
 const reportUser = ({ credentials, userId, statusIds, comment, forward }) => {
   return promisedRequest({
     url: MASTODON_REPORT_USER_URL,
@@ -1003,6 +1023,8 @@ const apiService = {
   fetchFavoritedByUsers,
   fetchRebloggedByUsers,
   fetchEmojiReactions,
+  reactWithEmoji,
+  unreactWithEmoji,
   reportUser,
   updateNotificationSettings,
   search2,
diff --git a/src/services/backend_interactor_service/backend_interactor_service.js b/src/services/backend_interactor_service/backend_interactor_service.js
index 52234fcc..44233a24 100644
--- a/src/services/backend_interactor_service/backend_interactor_service.js
+++ b/src/services/backend_interactor_service/backend_interactor_service.js
@@ -144,6 +144,8 @@ const backendInteractorService = credentials => {
   const fetchFavoritedByUsers = (id) => apiService.fetchFavoritedByUsers({ id })
   const fetchRebloggedByUsers = (id) => apiService.fetchRebloggedByUsers({ id })
   const fetchEmojiReactions = (id) => apiService.fetchEmojiReactions({ id })
+  const reactWithEmoji = (id, emoji) => apiService.reactWithEmoji({ id, emoji, credentials })
+  const unreactWithEmoji = (id, emoji) => apiService.unreactWithEmoji({ id, emoji, credentials })
   const reportUser = (params) => apiService.reportUser({ credentials, ...params })
 
   const favorite = (id) => apiService.favorite({ id, credentials })
@@ -212,6 +214,8 @@ const backendInteractorService = credentials => {
     fetchFavoritedByUsers,
     fetchRebloggedByUsers,
     fetchEmojiReactions,
+    reactWithEmoji,
+    unreactWithEmoji,
     reportUser,
     favorite,
     unfavorite,
-- 
cgit v1.2.3-70-g09d2


From b10b92a876eb185a88e751d028e69063c9117298 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shpuld@shpposter.club>
Date: Tue, 14 Jan 2020 10:06:14 +0200
Subject: clean up code, fix prediction bug

---
 src/components/emoji_reactions/emoji_reactions.js  | 30 +++++++++++++
 src/components/emoji_reactions/emoji_reactions.vue | 51 ++++++++++++++++++++++
 src/components/react_button/react_button.js        |  5 ++-
 src/components/react_button/react_button.vue       | 42 ++++++++++--------
 src/components/status/status.js                    | 23 ++--------
 src/components/status/status.vue                   | 47 ++------------------
 src/modules/statuses.js                            |  9 ++--
 7 files changed, 120 insertions(+), 87 deletions(-)
 create mode 100644 src/components/emoji_reactions/emoji_reactions.js
 create mode 100644 src/components/emoji_reactions/emoji_reactions.vue

(limited to 'src/components')

diff --git a/src/components/emoji_reactions/emoji_reactions.js b/src/components/emoji_reactions/emoji_reactions.js
new file mode 100644
index 00000000..e81e6e25
--- /dev/null
+++ b/src/components/emoji_reactions/emoji_reactions.js
@@ -0,0 +1,30 @@
+
+const EmojiReactions = {
+  name: 'EmojiReactions',
+  props: ['status'],
+  computed: {
+    emojiReactions () {
+      return this.status.emojiReactions
+    }
+  },
+  methods: {
+    reactedWith (emoji) {
+      return this.status.reactedWithEmoji.includes(emoji)
+    },
+    reactWith (emoji) {
+      this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })
+    },
+    unreact (emoji) {
+      this.$store.dispatch('unreactWithEmoji', { id: this.status.id, emoji })
+    },
+    emojiOnClick (emoji, event) {
+      if (this.reactedWith(emoji)) {
+        this.unreact(emoji)
+      } else {
+        this.reactWith(emoji)
+      }
+    }
+  }
+}
+
+export default EmojiReactions
diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
new file mode 100644
index 00000000..d83f60b6
--- /dev/null
+++ b/src/components/emoji_reactions/emoji_reactions.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="emoji-reactions">
+    <button
+      v-for="(users, emoji) in emojiReactions"
+      :key="emoji"
+      class="emoji-reaction btn btn-default"
+      :class="{ 'picked-reaction': reactedWith(emoji) }"
+      @click="emojiOnClick(emoji, $event)"
+    >
+      <span v-if="users">{{ users.length }}</span>
+      <span>{{ emoji }}</span>
+    </button>
+  </div>
+</template>
+
+<script src="./emoji_reactions.js" ></script>
+<style lang="scss">
+@import '../../_variables.scss';
+
+.emoji-reactions {
+  display: flex;
+  margin-top: 0.25em;
+  flex-wrap: wrap;
+}
+
+.emoji-reaction {
+  padding: 0 0.5em;
+  margin-right: 0.5em;
+  margin-top: 0.5em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  :first-child {
+    margin-right: 0.25em;
+  }
+  :last-child {
+    width: 1.5em;
+  }
+  &:focus {
+    outline: none;
+  }
+}
+
+.picked-reaction {
+  border: 1px solid var(--link, $fallback--link);
+  margin-left: -1px; // offset the border, can't use inset shadows either
+  margin-right: calc(0.5em - 1px);
+}
+
+</style>
diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js
index 76a49305..d1a179bc 100644
--- a/src/components/react_button/react_button.js
+++ b/src/components/react_button/react_button.js
@@ -15,8 +15,9 @@ const ReactButton = {
     }
   },
   methods: {
-    toggleReactionSelect () {
-      this.showTooltip = !this.showTooltip
+    openReactionSelect () {
+      this.showTooltip = true
+      this.filterWord = ''
     },
     closeReactionSelect () {
       this.showTooltip = false
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index f7015316..ae975dee 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -9,13 +9,16 @@
   >
     <div slot="popover">
       <div class="reaction-picker-filter">
-        <input v-model="filterWord" placeholder="Search...">
+        <input
+          v-model="filterWord"
+          :placeholder="$t('emoji.search_emoji')"
+        >
       </div>
       <div class="reaction-picker">
         <span
           v-for="emoji in commonEmojis"
           :key="emoji"
-          class="emoji-reaction-button"
+          class="emoji-button"
           @click="addReaction($event, emoji)"
         >
           {{ emoji }}
@@ -24,7 +27,7 @@
         <span
           v-for="(emoji, key) in emojis"
           :key="key"
-          class="emoji-reaction-button"
+          class="emoji-button"
           @click="addReaction($event, emoji.replacement)"
         >
           {{ emoji.replacement }}
@@ -34,11 +37,11 @@
     </div>
     <div
       v-if="loggedIn"
-      @click.prevent="toggleReactionSelect"
+      @click.prevent="openReactionSelect"
     >
       <i
         :class="classes"
-        class="button-icon favorite-button fav-active"
+        class="button-icon add-reaction-button"
         :title="$t('tool_tip.add_reaction')"
       />
       <span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span>
@@ -58,7 +61,7 @@
 .reaction-picker-divider {
   height: 1px;
   width: 100%;
-  margin: 0.4em;
+  margin: 0.5em;
   background-color: var(--border, $fallback--border);
 }
 
@@ -82,26 +85,27 @@
   // Autoprefixed seem to ignore this one, and also syntax is different
   -webkit-mask-composite: xor;
   mask-composite: exclude;
-}
 
-.emoji-reaction-button {
-  flex-basis: 20%;
-  line-height: 1.5em;
-  align-content: center;
+  .emoji-button {
+    cursor: pointer;
+
+    flex-basis: 20%;
+    line-height: 1.5em;
+    align-content: center;
+
+    &:hover {
+      transform: scale(1.25);
+    }
+  }
 }
 
-.fav-active {
+.add-reaction-button {
   cursor: pointer;
-  animation-duration: 0.6s;
 
   &:hover {
-    color: $fallback--cOrange;
-    color: var(--cOrange, $fallback--cOrange);
+    color: $fallback--text;
+    color: var(--text, $fallback--text);
   }
 }
 
-.favorite-button.icon-star {
-  color: $fallback--cOrange;
-  color: var(--cOrange, $fallback--cOrange);
-}
 </style>
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 18617938..81b57667 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -12,6 +12,7 @@ import LinkPreview from '../link-preview/link-preview.vue'
 import AvatarList from '../avatar_list/avatar_list.vue'
 import Timeago from '../timeago/timeago.vue'
 import StatusPopover from '../status_popover/status_popover.vue'
+import EmojiReactions from '../emoji_reactions/emoji_reactions.vue'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import fileType from 'src/services/file_type/file_type.service'
 import { processHtml } from 'src/services/tiny_post_html_processor/tiny_post_html_processor.service.js'
@@ -311,9 +312,6 @@ const Status = {
     hidePostStats () {
       return this.mergedConfig.hidePostStats
     },
-    emojiReactions () {
-      return this.status.emojiReactions
-    },
     ...mapGetters(['mergedConfig']),
     ...mapState({
       betterShadow: state => state.interface.browserSupport.cssFilter,
@@ -334,7 +332,8 @@ const Status = {
     LinkPreview,
     AvatarList,
     Timeago,
-    StatusPopover
+    StatusPopover,
+    EmojiReactions
   },
   methods: {
     visibilityIcon (visibility) {
@@ -418,22 +417,6 @@ const Status = {
     setMedia () {
       const attachments = this.attachmentSize === 'hide' ? this.status.attachments : this.galleryAttachments
       return () => this.$store.dispatch('setMedia', attachments)
-    },
-    reactedWith (emoji) {
-      return this.status.reactedWithEmoji.includes(emoji)
-    },
-    reactWith (emoji) {
-      this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })
-    },
-    unreact (emoji) {
-      this.$store.dispatch('unreactWithEmoji', { id: this.status.id, emoji })
-    },
-    emojiOnClick (emoji, event) {
-      if (this.reactedWith(emoji)) {
-        this.unreact(emoji)
-      } else {
-        this.reactWith(emoji)
-      }
     }
   },
   watch: {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 4ea1b74b..87e8b5da 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -354,18 +354,10 @@
             </div>
           </transition>
 
-          <div v-if="isFocused" class="emoji-reactions">
-            <button
-              v-for="(users, emoji) in emojiReactions"
-              :key="emoji"
-              class="emoji-reaction btn btn-default"
-              :class="{ 'picked-reaction': reactedWith(emoji) }"
-              @click="emojiOnClick(emoji, $event)"
-            >
-              <span v-if="users">{{ users.length }}</span>
-              <span>{{ emoji }}</span>
-            </button>
-          </div>
+          <EmojiReactions
+            v-if="isFocused"
+            :status="status"
+          />
 
           <div
             v-if="!noHeading && !isPreview"
@@ -789,37 +781,6 @@ $status-margin: 0.75em;
   }
 }
 
-.emoji-reactions {
-  display: flex;
-  margin-top: 0.25em;
-  flex-wrap: wrap;
-}
-
-.emoji-reaction {
-  padding: 0 0.5em;
-  margin-right: 0.5em;
-  margin-top: 0.5em;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  :first-child {
-    margin-right: 0.25em;
-  }
-  :last-child {
-    width: 1.5em;
-  }
-  &:focus {
-    outline: none;
-  }
-}
-
-.picked-reaction {
-  border: 1px solid var(--link, $fallback--link);
-  margin-left: -1px; // offset the border, can't use inset shadows either
-  margin-right: calc(0.5em - 1px);
-}
-
 .button-icon.icon-reply {
   &:not(.button-icon-disabled):hover,
   &.button-icon-active {
diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index ae6f6853..dbae9d38 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -537,7 +537,10 @@ export const mutations = {
   addEmojiReactions (state, { id, emojiReactions, currentUser }) {
     const status = state.allStatusesObject[id]
     set(status, 'emojiReactions', emojiReactions)
-    const reactedWithEmoji = flow(keys, filter(reaction => find(reaction, { id: currentUser.id })))(emojiReactions)
+    const reactedWithEmoji = flow(
+      keys,
+      filter(reaction => find(reaction, { id: currentUser.id }))
+    )(emojiReactions)
     set(status, 'reactedWithEmoji', reactedWithEmoji)
   },
   addOwnReaction (state, { id, emoji, currentUser }) {
@@ -547,7 +550,7 @@ export const mutations = {
     const hasSelfAlready = !!find(listOfUsers, { id: currentUser.id })
     if (!hasSelfAlready) {
       set(status.emojiReactions, emoji, listOfUsers.concat([{ id: currentUser.id }]))
-      set(status, 'reactedWithEmoji', emoji)
+      set(status, 'reactedWithEmoji', [...status.reactedWithEmoji, emoji])
     }
   },
   removeOwnReaction (state, { id, emoji, currentUser }) {
@@ -557,7 +560,7 @@ export const mutations = {
     if (hasSelfAlready) {
       const newUsers = filter(listOfUsers, user => user.id !== currentUser.id)
       set(status.emojiReactions, emoji, newUsers)
-      set(status, 'reactedWith', emoji)
+      set(status, 'reactedWithEmoji', status.reactedWithEmoji.filter(e => e !== emoji))
     }
   },
   updateStatusWithPoll (state, { id, poll }) {
-- 
cgit v1.2.3-70-g09d2


From 86380f042976557d5260a3f5c2de0a9b0bcdbac6 Mon Sep 17 00:00:00 2001
From: Shpuld Shpludson <shp@cock.li>
Date: Tue, 14 Jan 2020 13:28:57 +0000
Subject: Optimize Notifications Rendering

---
 CHANGELOG.md                                       |  2 ++
 src/components/notifications/notifications.js      | 27 ++++++++++++++++++----
 src/components/notifications/notifications.vue     |  2 +-
 .../notification_utils/notification_utils.js       |  4 ++--
 .../notification_utils/notification_utils.spec.js  |  4 ++--
 5 files changed, 30 insertions(+), 9 deletions(-)

(limited to 'src/components')

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2e17dc64..9f5a9305 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,8 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ## [Unreleased]
+### Changed
+- Notifications column now cleans itself up to optimize performance when tab is left open for a long time
 ### Fixed
 - Single notifications left unread when hitting read on another device/tab
 
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index a89c0cdc..26ffbab6 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -2,10 +2,12 @@ import Notification from '../notification/notification.vue'
 import notificationsFetcher from '../../services/notifications_fetcher/notifications_fetcher.service.js'
 import {
   notificationsFromStore,
-  visibleNotificationsFromStore,
+  filteredNotificationsFromStore,
   unseenNotificationsFromStore
 } from '../../services/notification_utils/notification_utils.js'
 
+const DEFAULT_SEEN_TO_DISPLAY_COUNT = 30
+
 const Notifications = {
   props: {
     // Disables display of panel header
@@ -18,7 +20,11 @@ const Notifications = {
   },
   data () {
     return {
-      bottomedOut: false
+      bottomedOut: false,
+      // How many seen notifications to display in the list. The more there are,
+      // the heavier the page becomes. This count is increased when loading
+      // older notifications, and cut back to default whenever hitting "Read!".
+      seenToDisplayCount: DEFAULT_SEEN_TO_DISPLAY_COUNT
     }
   },
   computed: {
@@ -34,14 +40,17 @@ const Notifications = {
     unseenNotifications () {
       return unseenNotificationsFromStore(this.$store)
     },
-    visibleNotifications () {
-      return visibleNotificationsFromStore(this.$store, this.filterMode)
+    filteredNotifications () {
+      return filteredNotificationsFromStore(this.$store, this.filterMode)
     },
     unseenCount () {
       return this.unseenNotifications.length
     },
     loading () {
       return this.$store.state.statuses.notifications.loading
+    },
+    notificationsToDisplay () {
+      return this.filteredNotifications.slice(0, this.unseenCount + this.seenToDisplayCount)
     }
   },
   components: {
@@ -64,12 +73,21 @@ const Notifications = {
   methods: {
     markAsSeen () {
       this.$store.dispatch('markNotificationsAsSeen')
+      this.seenToDisplayCount = DEFAULT_SEEN_TO_DISPLAY_COUNT
     },
     fetchOlderNotifications () {
       if (this.loading) {
         return
       }
 
+      const seenCount = this.filteredNotifications.length - this.unseenCount
+      if (this.seenToDisplayCount < seenCount) {
+        this.seenToDisplayCount = Math.min(this.seenToDisplayCount + 20, seenCount)
+        return
+      } else if (this.seenToDisplayCount > seenCount) {
+        this.seenToDisplayCount = seenCount
+      }
+
       const store = this.$store
       const credentials = store.state.users.currentUser.credentials
       store.commit('setNotificationsLoading', { value: true })
@@ -82,6 +100,7 @@ const Notifications = {
         if (notifs.length === 0) {
           this.bottomedOut = true
         }
+        this.seenToDisplayCount += notifs.length
       })
     }
   }
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index c42c35e6..d477a41b 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -32,7 +32,7 @@
       </div>
       <div class="panel-body">
         <div
-          v-for="notification in visibleNotifications"
+          v-for="notification in notificationsToDisplay"
           :key="notification.id"
           class="notification"
           :class="{&quot;unseen&quot;: !minimalMode && !notification.seen}"
diff --git a/src/services/notification_utils/notification_utils.js b/src/services/notification_utils/notification_utils.js
index b08514da..860620fc 100644
--- a/src/services/notification_utils/notification_utils.js
+++ b/src/services/notification_utils/notification_utils.js
@@ -26,7 +26,7 @@ const sortById = (a, b) => {
   }
 }
 
-export const visibleNotificationsFromStore = (store, types) => {
+export const filteredNotificationsFromStore = (store, types) => {
   // map is just to clone the array since sort mutates it and it causes some issues
   let sortedNotifications = notificationsFromStore(store).map(_ => _).sort(sortById)
   sortedNotifications = sortBy(sortedNotifications, 'seen')
@@ -36,4 +36,4 @@ export const visibleNotificationsFromStore = (store, types) => {
 }
 
 export const unseenNotificationsFromStore = store =>
-  filter(visibleNotificationsFromStore(store), ({ seen }) => !seen)
+  filter(filteredNotificationsFromStore(store), ({ seen }) => !seen)
diff --git a/test/unit/specs/services/notification_utils/notification_utils.spec.js b/test/unit/specs/services/notification_utils/notification_utils.spec.js
index 1baa5fc9..00628d83 100644
--- a/test/unit/specs/services/notification_utils/notification_utils.spec.js
+++ b/test/unit/specs/services/notification_utils/notification_utils.spec.js
@@ -1,7 +1,7 @@
 import * as NotificationUtils from 'src/services/notification_utils/notification_utils.js'
 
 describe('NotificationUtils', () => {
-  describe('visibleNotificationsFromStore', () => {
+  describe('filteredNotificationsFromStore', () => {
     it('should return sorted notifications with configured types', () => {
       const store = {
         state: {
@@ -47,7 +47,7 @@ describe('NotificationUtils', () => {
           type: 'like'
         }
       ]
-      expect(NotificationUtils.visibleNotificationsFromStore(store)).to.eql(expected)
+      expect(NotificationUtils.filteredNotificationsFromStore(store)).to.eql(expected)
     })
   })
 
-- 
cgit v1.2.3-70-g09d2


From 662afe973a72efc17e61fd4c071ed985bfe4bf6b Mon Sep 17 00:00:00 2001
From: Shpuld Shpludson <shp@cock.li>
Date: Tue, 14 Jan 2020 13:45:00 +0000
Subject: Fix #750 , fix error messages and captcha resetting

---
 CHANGELOG.md                                 |  2 ++
 src/components/registration/registration.js  |  3 ++-
 src/components/registration/registration.vue |  2 +-
 src/modules/users.js                         |  4 +++-
 src/services/errors/errors.js                | 14 ++++++++++----
 5 files changed, 18 insertions(+), 7 deletions(-)

(limited to 'src/components')

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9f5a9305..6dcbc7da 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,9 +5,11 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ## [Unreleased]
 ### Changed
+- Captcha now resets on failed registrations
 - Notifications column now cleans itself up to optimize performance when tab is left open for a long time
 ### Fixed
 - Single notifications left unread when hitting read on another device/tab
+- Registration fixed
 
 ## [1.1.8] - 2020-01-10
 ### Added
diff --git a/src/components/registration/registration.js b/src/components/registration/registration.js
index 57f3caf0..ace8cc7c 100644
--- a/src/components/registration/registration.js
+++ b/src/components/registration/registration.js
@@ -63,7 +63,8 @@ const registration = {
           await this.signUp(this.user)
           this.$router.push({ name: 'friends' })
         } catch (error) {
-          console.warn('Registration failed: ' + error)
+          console.warn('Registration failed: ', error)
+          this.setCaptcha()
         }
       }
     },
diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
index 222b67a8..fdbda007 100644
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@@ -170,7 +170,7 @@
               <label
                 class="form--label"
                 for="captcha-label"
-              >{{ $t('captcha') }}</label>
+              >{{ $t('registration.captcha') }}</label>
 
               <template v-if="['kocaptcha', 'native'].includes(captcha.type)">
                 <img
diff --git a/src/modules/users.js b/src/modules/users.js
index 84fa0255..b9ed0efa 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -401,7 +401,9 @@ const users = {
       let rootState = store.rootState
 
       try {
-        let data = await rootState.api.backendInteractor.register({ ...userInfo })
+        let data = await rootState.api.backendInteractor.register(
+          { params: { ...userInfo } }
+        )
         store.commit('signUpSuccess')
         store.commit('setToken', data.access_token)
         store.dispatch('loginUser', data.access_token)
diff --git a/src/services/errors/errors.js b/src/services/errors/errors.js
index 590552da..d4cf9132 100644
--- a/src/services/errors/errors.js
+++ b/src/services/errors/errors.js
@@ -32,12 +32,18 @@ export class RegistrationError extends Error {
       }
 
       if (typeof error === 'object') {
+        const errorContents = JSON.parse(error.error)
+        // keys will have the property that has the error, for example 'ap_id',
+        // 'email' or 'captcha', the value will be an array of its error
+        // like "ap_id": ["has been taken"] or "captcha": ["Invalid CAPTCHA"]
+
         // replace ap_id with username
-        if (error.ap_id) {
-          error.username = error.ap_id
-          delete error.ap_id
+        if (errorContents.ap_id) {
+          errorContents.username = errorContents.ap_id
+          delete errorContents.ap_id
         }
-        this.message = humanizeErrors(error)
+
+        this.message = humanizeErrors(errorContents)
       } else {
         this.message = error
       }
-- 
cgit v1.2.3-70-g09d2


From 7a013ac39392ef251c0789f27dd4660dcd30bd6d Mon Sep 17 00:00:00 2001
From: Shpuld Shpludson <shp@cock.li>
Date: Wed, 15 Jan 2020 20:22:54 +0000
Subject: Implement domain mutes v2

---
 .../domain_mute_card/domain_mute_card.js           |  15 ++
 .../domain_mute_card/domain_mute_card.vue          |  38 +++++
 src/components/user_settings/user_settings.js      |  19 ++-
 src/components/user_settings/user_settings.vue     | 157 +++++++++++++++------
 src/i18n/en.json                                   |   9 ++
 src/modules/users.js                               |  44 ++++++
 src/services/api/api.service.js                    |  28 +++-
 7 files changed, 263 insertions(+), 47 deletions(-)
 create mode 100644 src/components/domain_mute_card/domain_mute_card.js
 create mode 100644 src/components/domain_mute_card/domain_mute_card.vue

(limited to 'src/components')

diff --git a/src/components/domain_mute_card/domain_mute_card.js b/src/components/domain_mute_card/domain_mute_card.js
new file mode 100644
index 00000000..c8e838ba
--- /dev/null
+++ b/src/components/domain_mute_card/domain_mute_card.js
@@ -0,0 +1,15 @@
+import ProgressButton from '../progress_button/progress_button.vue'
+
+const DomainMuteCard = {
+  props: ['domain'],
+  components: {
+    ProgressButton
+  },
+  methods: {
+    unmuteDomain () {
+      return this.$store.dispatch('unmuteDomain', this.domain)
+    }
+  }
+}
+
+export default DomainMuteCard
diff --git a/src/components/domain_mute_card/domain_mute_card.vue b/src/components/domain_mute_card/domain_mute_card.vue
new file mode 100644
index 00000000..567d81c5
--- /dev/null
+++ b/src/components/domain_mute_card/domain_mute_card.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="domain-mute-card">
+    <div class="domain-mute-card-domain">
+      {{ domain }}
+    </div>
+    <ProgressButton
+      :click="unmuteDomain"
+      class="btn btn-default"
+    >
+      {{ $t('domain_mute_card.unmute') }}
+      <template slot="progress">
+        {{ $t('domain_mute_card.unmute_progress') }}
+      </template>
+    </ProgressButton>
+  </div>
+</template>
+
+<script src="./domain_mute_card.js"></script>
+
+<style lang="scss">
+.domain-mute-card {
+  flex: 1 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.6em 1em 0.6em 0;
+
+  &-domain {
+    margin-right: 1em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  button {
+    width: 10em;
+  }
+}
+</style>
diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index d5d671e4..1709b48f 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -9,6 +9,7 @@ import ScopeSelector from '../scope_selector/scope_selector.vue'
 import fileSizeFormatService from '../../services/file_size_format/file_size_format.js'
 import BlockCard from '../block_card/block_card.vue'
 import MuteCard from '../mute_card/mute_card.vue'
+import DomainMuteCard from '../domain_mute_card/domain_mute_card.vue'
 import SelectableList from '../selectable_list/selectable_list.vue'
 import ProgressButton from '../progress_button/progress_button.vue'
 import EmojiInput from '../emoji_input/emoji_input.vue'
@@ -32,6 +33,12 @@ const MuteList = withSubscription({
   childPropName: 'items'
 })(SelectableList)
 
+const DomainMuteList = withSubscription({
+  fetch: (props, $store) => $store.dispatch('fetchDomainMutes'),
+  select: (props, $store) => get($store.state.users.currentUser, 'domainMutes', []),
+  childPropName: 'items'
+})(SelectableList)
+
 const UserSettings = {
   data () {
     return {
@@ -67,7 +74,8 @@ const UserSettings = {
       changedPassword: false,
       changePasswordError: false,
       activeTab: 'profile',
-      notificationSettings: this.$store.state.users.currentUser.notification_settings
+      notificationSettings: this.$store.state.users.currentUser.notification_settings,
+      newDomainToMute: ''
     }
   },
   created () {
@@ -80,10 +88,12 @@ const UserSettings = {
     ImageCropper,
     BlockList,
     MuteList,
+    DomainMuteList,
     EmojiInput,
     Autosuggest,
     BlockCard,
     MuteCard,
+    DomainMuteCard,
     ProgressButton,
     Importer,
     Exporter,
@@ -365,6 +375,13 @@ const UserSettings = {
     unmuteUsers (ids) {
       return this.$store.dispatch('unmuteUsers', ids)
     },
+    unmuteDomains (domains) {
+      return this.$store.dispatch('unmuteDomains', domains)
+    },
+    muteDomain () {
+      return this.$store.dispatch('muteDomain', this.newDomainToMute)
+        .then(() => { this.newDomainToMute = '' })
+    },
     identity (value) {
       return value
     }
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index 3f1982a6..2222c293 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -509,59 +509,114 @@
         </div>
 
         <div :label="$t('settings.mutes_tab')">
-          <div class="profile-edit-usersearch-wrapper">
-            <Autosuggest
-              :filter="filterUnMutedUsers"
-              :query="queryUserIds"
-              :placeholder="$t('settings.search_user_to_mute')"
-            >
-              <MuteCard
-                slot-scope="row"
-                :user-id="row.item"
-              />
-            </Autosuggest>
-          </div>
-          <MuteList
-            :refresh="true"
-            :get-key="identity"
-          >
-            <template
-              slot="header"
-              slot-scope="{selected}"
-            >
-              <div class="profile-edit-bulk-actions">
-                <ProgressButton
-                  v-if="selected.length > 0"
-                  class="btn btn-default"
-                  :click="() => muteUsers(selected)"
+          <tab-switcher>
+            <div label="Users">
+              <div class="profile-edit-usersearch-wrapper">
+                <Autosuggest
+                  :filter="filterUnMutedUsers"
+                  :query="queryUserIds"
+                  :placeholder="$t('settings.search_user_to_mute')"
+                >
+                  <MuteCard
+                    slot-scope="row"
+                    :user-id="row.item"
+                  />
+                </Autosuggest>
+              </div>
+              <MuteList
+                :refresh="true"
+                :get-key="identity"
+              >
+                <template
+                  slot="header"
+                  slot-scope="{selected}"
+                >
+                  <div class="profile-edit-bulk-actions">
+                    <ProgressButton
+                      v-if="selected.length > 0"
+                      class="btn btn-default"
+                      :click="() => muteUsers(selected)"
+                    >
+                      {{ $t('user_card.mute') }}
+                      <template slot="progress">
+                        {{ $t('user_card.mute_progress') }}
+                      </template>
+                    </ProgressButton>
+                    <ProgressButton
+                      v-if="selected.length > 0"
+                      class="btn btn-default"
+                      :click="() => unmuteUsers(selected)"
+                    >
+                      {{ $t('user_card.unmute') }}
+                      <template slot="progress">
+                        {{ $t('user_card.unmute_progress') }}
+                      </template>
+                    </ProgressButton>
+                  </div>
+                </template>
+                <template
+                  slot="item"
+                  slot-scope="{item}"
+                >
+                  <MuteCard :user-id="item" />
+                </template>
+                <template slot="empty">
+                  {{ $t('settings.no_mutes') }}
+                </template>
+              </MuteList>
+            </div>
+
+            <div :label="$t('settings.domain_mutes')">
+              <div class="profile-edit-domain-mute-form">
+                <input
+                  v-model="newDomainToMute"
+                  :placeholder="$t('settings.type_domains_to_mute')"
+                  type="text"
+                  @keyup.enter="muteDomain"
                 >
-                  {{ $t('user_card.mute') }}
-                  <template slot="progress">
-                    {{ $t('user_card.mute_progress') }}
-                  </template>
-                </ProgressButton>
                 <ProgressButton
-                  v-if="selected.length > 0"
                   class="btn btn-default"
-                  :click="() => unmuteUsers(selected)"
+                  :click="muteDomain"
                 >
-                  {{ $t('user_card.unmute') }}
+                  {{ $t('domain_mute_card.mute') }}
                   <template slot="progress">
-                    {{ $t('user_card.unmute_progress') }}
+                    {{ $t('domain_mute_card.mute_progress') }}
                   </template>
                 </ProgressButton>
               </div>
-            </template>
-            <template
-              slot="item"
-              slot-scope="{item}"
-            >
-              <MuteCard :user-id="item" />
-            </template>
-            <template slot="empty">
-              {{ $t('settings.no_mutes') }}
-            </template>
-          </MuteList>
+              <DomainMuteList
+                :refresh="true"
+                :get-key="identity"
+              >
+                <template
+                  slot="header"
+                  slot-scope="{selected}"
+                >
+                  <div class="profile-edit-bulk-actions">
+                    <ProgressButton
+                      v-if="selected.length > 0"
+                      class="btn btn-default"
+                      :click="() => unmuteDomains(selected)"
+                    >
+                      {{ $t('domain_mute_card.unmute') }}
+                      <template slot="progress">
+                        {{ $t('domain_mute_card.unmute_progress') }}
+                      </template>
+                    </ProgressButton>
+                  </div>
+                </template>
+                <template
+                  slot="item"
+                  slot-scope="{item}"
+                >
+                  <DomainMuteCard :domain="item" />
+                </template>
+                <template slot="empty">
+                  {{ $t('settings.no_mutes') }}
+                </template>
+              </DomainMuteList>
+            </div>
+          </tab-switcher>
         </div>
       </tab-switcher>
     </div>
@@ -639,6 +694,18 @@
     }
   }
 
+  &-domain-mute-form {
+    padding: 1em;
+    display: flex;
+    flex-direction: column;
+
+    button {
+      align-self: flex-end;
+      margin-top: 1em;
+      width: 10em;
+    }
+  }
+
   .setting-subitem {
     margin-left: 1.75em;
   }
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 75d66b9f..31f4ac24 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -21,6 +21,12 @@
   "chat": {
     "title": "Chat"
   },
+  "domain_mute_card": {
+    "mute": "Mute",
+    "mute_progress": "Muting...",
+    "unmute": "Unmute",
+    "unmute_progress": "Unmuting..."
+  },
   "exporter": {
     "export": "Export",
     "processing": "Processing, you'll soon be asked to download your file"
@@ -264,6 +270,7 @@
     "delete_account_error": "There was an issue deleting your account. If this persists please contact your instance administrator.",
     "delete_account_instructions": "Type your password in the input below to confirm account deletion.",
     "discoverable": "Allow discovery of this account in search results and other services",
+    "domain_mutes": "Domains",
     "avatar_size_instruction": "The recommended minimum size for avatar images is 150x150 pixels.",
     "pad_emoji": "Pad emoji with spaces when adding from picker",
     "export_theme": "Save preset",
@@ -361,6 +368,7 @@
     "post_status_content_type": "Post status content type",
     "stop_gifs": "Play-on-hover GIFs",
     "streaming": "Enable automatic streaming of new posts when scrolled to the top",
+    "user_mutes": "Users",
     "useStreamingApi": "Receive posts and notifications real-time",
     "useStreamingApiWarning": "(Not recommended, experimental, known to skip posts)",
     "text": "Text",
@@ -369,6 +377,7 @@
     "theme_help_v2_1": "You can also override certain component's colors and opacity by toggling the checkbox, use \"Clear all\" button to clear all overrides.",
     "theme_help_v2_2": "Icons underneath some entries are background/text contrast indicators, hover over for detailed info. Please keep in mind that when using transparency contrast indicators show the worst possible case.",
     "tooltipRadius": "Tooltips/alerts",
+    "type_domains_to_mute": "Type in domains to mute",
     "upload_a_photo": "Upload a photo",
     "user_settings": "User Settings",
     "values": {
diff --git a/src/modules/users.js b/src/modules/users.js
index b9ed0efa..ce3e595d 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -72,6 +72,16 @@ const showReblogs = (store, userId) => {
     .then((relationship) => store.commit('updateUserRelationship', [relationship]))
 }
 
+const muteDomain = (store, domain) => {
+  return store.rootState.api.backendInteractor.muteDomain({ domain })
+    .then(() => store.commit('addDomainMute', domain))
+}
+
+const unmuteDomain = (store, domain) => {
+  return store.rootState.api.backendInteractor.unmuteDomain({ domain })
+    .then(() => store.commit('removeDomainMute', domain))
+}
+
 export const mutations = {
   setMuted (state, { user: { id }, muted }) {
     const user = state.usersObject[id]
@@ -177,6 +187,20 @@ export const mutations = {
       state.currentUser.muteIds.push(muteId)
     }
   },
+  saveDomainMutes (state, domainMutes) {
+    state.currentUser.domainMutes = domainMutes
+  },
+  addDomainMute (state, domain) {
+    if (state.currentUser.domainMutes.indexOf(domain) === -1) {
+      state.currentUser.domainMutes.push(domain)
+    }
+  },
+  removeDomainMute (state, domain) {
+    const index = state.currentUser.domainMutes.indexOf(domain)
+    if (index !== -1) {
+      state.currentUser.domainMutes.splice(index, 1)
+    }
+  },
   setPinnedToUser (state, status) {
     const user = state.usersObject[status.user.id]
     const index = user.pinnedStatusIds.indexOf(status.id)
@@ -297,6 +321,25 @@ const users = {
     unmuteUsers (store, ids = []) {
       return Promise.all(ids.map(id => unmuteUser(store, id)))
     },
+    fetchDomainMutes (store) {
+      return store.rootState.api.backendInteractor.fetchDomainMutes()
+        .then((domainMutes) => {
+          store.commit('saveDomainMutes', domainMutes)
+          return domainMutes
+        })
+    },
+    muteDomain (store, domain) {
+      return muteDomain(store, domain)
+    },
+    unmuteDomain (store, domain) {
+      return unmuteDomain(store, domain)
+    },
+    muteDomains (store, domains = []) {
+      return Promise.all(domains.map(domain => muteDomain(store, domain)))
+    },
+    unmuteDomains (store, domain = []) {
+      return Promise.all(domain.map(domain => unmuteDomain(store, domain)))
+    },
     fetchFriends ({ rootState, commit }, id) {
       const user = rootState.users.usersObject[id]
       const maxId = last(user.friendIds)
@@ -460,6 +503,7 @@ const users = {
               user.credentials = accessToken
               user.blockIds = []
               user.muteIds = []
+              user.domainMutes = []
               commit('setCurrentUser', user)
               commit('addNewUsers', [user])
 
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index ef0267aa..dcbedd8b 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -72,6 +72,7 @@ const MASTODON_MUTE_CONVERSATION = id => `/api/v1/statuses/${id}/mute`
 const MASTODON_UNMUTE_CONVERSATION = id => `/api/v1/statuses/${id}/unmute`
 const MASTODON_SEARCH_2 = `/api/v2/search`
 const MASTODON_USER_SEARCH_URL = '/api/v1/accounts/search'
+const MASTODON_DOMAIN_BLOCKS_URL = '/api/v1/domain_blocks'
 const MASTODON_STREAMING = '/api/v1/streaming'
 
 const oldfetch = window.fetch
@@ -948,6 +949,28 @@ const search2 = ({ credentials, q, resolve, limit, offset, following }) => {
     })
 }
 
+const fetchDomainMutes = ({ credentials }) => {
+  return promisedRequest({ url: MASTODON_DOMAIN_BLOCKS_URL, credentials })
+}
+
+const muteDomain = ({ domain, credentials }) => {
+  return promisedRequest({
+    url: MASTODON_DOMAIN_BLOCKS_URL,
+    method: 'POST',
+    payload: { domain },
+    credentials
+  })
+}
+
+const unmuteDomain = ({ domain, credentials }) => {
+  return promisedRequest({
+    url: MASTODON_DOMAIN_BLOCKS_URL,
+    method: 'DELETE',
+    payload: { domain },
+    credentials
+  })
+}
+
 export const getMastodonSocketURI = ({ credentials, stream, args = {} }) => {
   return Object.entries({
     ...(credentials
@@ -1110,7 +1133,10 @@ const apiService = {
   reportUser,
   updateNotificationSettings,
   search2,
-  searchUsers
+  searchUsers,
+  fetchDomainMutes,
+  muteDomain,
+  unmuteDomain
 }
 
 export default apiService
-- 
cgit v1.2.3-70-g09d2


From f16ec75c7011fa7e6d5deb7763553b2c70d9a86e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 16 Jan 2020 20:53:05 +0200
Subject: opacity handling

---
 src/components/style_switcher/style_switcher.js |  10 +-
 src/services/color_convert/color_convert.js     |   2 +-
 src/services/style_setter/style_setter.js       |  70 +--------
 src/services/theme_data/theme_data.service.js   | 193 +++++++++++++++++-------
 4 files changed, 149 insertions(+), 126 deletions(-)

(limited to 'src/components')

diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index 98c2cbc5..16be209a 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -15,7 +15,7 @@ import {
 import {
   CURRENT_VERSION,
   SLOT_INHERITANCE,
-  DEFAULT_OPACITY,
+  OPACITIES,
   getLayers
 } from '../../services/theme_data/theme_data.service.js'
 import ColorInput from '../color_input/color_input.vue'
@@ -74,8 +74,8 @@ export default {
         .map(key => [key, ''])
         .reduce((acc, [key, val]) => ({ ...acc, [ key + 'ColorLocal' ]: val }), {}),
 
-      ...Object.keys(DEFAULT_OPACITY)
-        .map(key => [key, undefined])
+      ...Object.keys(OPACITIES)
+        .map(key => console.log(key) || [key, ''])
         .reduce((acc, [key, val]) => ({ ...acc, [ key + 'OpacityLocal' ]: val }), {}),
 
       shadowSelected: undefined,
@@ -115,8 +115,8 @@ export default {
         .reduce((acc, [key, val]) => ({ ...acc, [ key ]: val }), {})
     },
     currentOpacity () {
-      return Object.keys(DEFAULT_OPACITY)
-        .map(key => [key, this[key + 'OpacityLocal']])
+      return Object.keys(OPACITIES)
+        .map(key => console.log(key) || [key, this[key + 'OpacityLocal']])
         .reduce((acc, [key, val]) => ({ ...acc, [ key ]: val }), {})
     },
     currentRadii () {
diff --git a/src/services/color_convert/color_convert.js b/src/services/color_convert/color_convert.js
index c727a9fe..6b228a58 100644
--- a/src/services/color_convert/color_convert.js
+++ b/src/services/color_convert/color_convert.js
@@ -159,7 +159,7 @@ export const hex2rgb = (hex) => {
  * @returns {Object} result
  */
 export const mixrgb = (a, b) => {
-  return Object.keys(a).reduce((acc, k) => {
+  return 'rgb'.split('').reduce((acc, k) => {
     acc[k] = (a[k] + b[k]) / 2
     return acc
   }, {})
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index c1a25101..9237a8dc 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -1,7 +1,7 @@
 import { times } from 'lodash'
 import { convert } from 'chromatism'
 import { rgb2hex, hex2rgb, rgba2css, getCssColor } from '../color_convert/color_convert.js'
-import { getColors, DEFAULT_OPACITY } from '../theme_data/theme_data.service.js'
+import { getColors } from '../theme_data/theme_data.service.js'
 
 // While this is not used anymore right now, I left it in if we want to do custom
 // styles that aren't just colors, so user can pick from a few different distinct
@@ -115,76 +115,12 @@ const getCssShadowFilter = (input) => {
 }
 
 export const generateColors = (themeData) => {
-  const rawOpacity = Object.assign({ ...DEFAULT_OPACITY }, Object.entries(themeData.opacity || {}).reduce((acc, [k, v]) => {
-    if (typeof v !== 'undefined') {
-      acc[k] = v
-    }
-    return acc
-  }, {}))
-
-  const inputColors = themeData.colors || themeData
-
-  const opacity = {
-    ...rawOpacity,
-    ...Object.entries(inputColors).reduce((acc, [k, v]) => {
-      if (v === 'transparent') {
-        acc[k] = 0
-      }
-      return acc
-    }, {})
-  }
-
-  // Cycle one: just whatever we have
-  const sourceColors = Object.entries(inputColors).reduce((acc, [k, v]) => {
-    if (typeof v === 'object') {
-      acc[k] = v
-    } else {
-      let value = v
-      if (v === 'transparent') {
-        // TODO: hack to keep rest of the code from complaining
-        value = '#FF00FF'
-      }
-      if (!value || value.startsWith('--')) {
-        acc[k] = value
-      } else {
-        acc[k] = hex2rgb(value)
-      }
-    }
-    return acc
-  }, {})
+  const sourceColors = themeData.colors || themeData
 
   const isLightOnDark = convert(sourceColors.bg).hsl.l < convert(sourceColors.text).hsl.l
   const mod = isLightOnDark ? 1 : -1
 
-  const colors = getColors(sourceColors, opacity, mod)
-
-  // Inheriting opacities
-  Object.entries(opacity).forEach(([ k, v ]) => {
-    if (typeof v === 'undefined') return
-    if (k === 'alert') {
-      colors.alertError.a = v
-      colors.alertWarning.a = v
-      return
-    }
-    if (k === 'faint') {
-      colors['faintLink'].a = v
-      colors['panelFaint'].a = v
-      colors['lightBgFaintText'].a = v
-      colors['lightBgFaintLink'].a = v
-    }
-    if (k === 'bg') {
-      colors['lightBg'].a = v
-    }
-    if (k === 'badge') {
-      colors['badgeNotification'].a = v
-      return
-    }
-    if (colors[k]) {
-      colors[k].a = v
-    } else {
-      console.error('Wrong key ' + k)
-    }
-  })
+  const { colors, opacity } = getColors(sourceColors, themeData.opacity || {}, mod)
 
   const htmlColors = Object.entries(colors)
     .reduce((acc, [k, v]) => {
diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
index a345d996..e76d70ed 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@@ -26,24 +26,17 @@ export const LAYERS = {
 }
 
 export const DEFAULT_OPACITY = {
-  panel: 1,
-  btn: 1,
-  border: 1,
-  bg: 1,
-  badge: 1,
-  text: 1,
   alert: 0.5,
   input: 0.5,
   faint: 0.5,
-  underlay: 0.15,
-  poll: 1,
-  topBar: 1
+  underlay: 0.15
 }
 
 export const SLOT_INHERITANCE = {
   bg: {
     depends: [],
-    priority: 1
+    priority: 1,
+    opacity: 'bg'
   },
   fg: {
     depends: [],
@@ -53,7 +46,10 @@ export const SLOT_INHERITANCE = {
     depends: [],
     priority: 1
   },
-  underlay: '#000000',
+  underlay: {
+    default: '#000000',
+    opacity: 'underlay'
+  },
   link: {
     depends: ['accent'],
     priority: 1
@@ -62,8 +58,14 @@ export const SLOT_INHERITANCE = {
     depends: ['link'],
     priority: 1
   },
-  faint: '--text',
-  faintLink: '--link',
+  faint: {
+    depends: ['text'],
+    opacity: 'faint'
+  },
+  faintLink: {
+    depends: ['link'],
+    opacity: 'faint'
+  },
 
   cBlue: '#0000ff',
   cRed: '#FF0000',
@@ -158,11 +160,13 @@ export const SLOT_INHERITANCE = {
 
   border: {
     depends: ['fg'],
+    opacity: 'border',
     color: (mod, fg) => brightness(2 * mod, fg).rgb
   },
 
   poll: {
     depends: ['accent', 'bg'],
+    copacity: 'poll',
     color: (mod, accent, bg) => alphaBlend(accent, 0.4, bg)
   },
   pollText: {
@@ -173,6 +177,7 @@ export const SLOT_INHERITANCE = {
 
   icon: {
     depends: ['bg', 'text'],
+    inheritsOpacity: false,
     color: (mod, bg, text) => mixrgb(bg, text)
   },
 
@@ -189,7 +194,10 @@ export const SLOT_INHERITANCE = {
   },
 
   // Panel header
-  panel: '--fg',
+  panel: {
+    depends: ['fg'],
+    opacity: 'panel'
+  },
   panelText: {
     depends: ['fgText'],
     layer: 'panel',
@@ -198,6 +206,7 @@ export const SLOT_INHERITANCE = {
   panelFaint: {
     depends: ['fgText'],
     layer: 'panel',
+    opacity: 'faint',
     textColor: true
   },
   panelLink: {
@@ -233,7 +242,10 @@ export const SLOT_INHERITANCE = {
   },
 
   // Buttons
-  btn: '--fg',
+  btn: {
+    depends: ['fg'],
+    opacity: 'btn'
+  },
   btnText: {
     depends: ['fgText'],
     layer: 'btn',
@@ -325,7 +337,10 @@ export const SLOT_INHERITANCE = {
   },
 
   // Input fields
-  input: '--fg',
+  input: {
+    depends: ['fg'],
+    opacity: 'input'
+  },
   inputText: {
     depends: ['text'],
     layer: 'input',
@@ -344,7 +359,10 @@ export const SLOT_INHERITANCE = {
     textColor: true
   },
 
-  alertError: '--cRed',
+  alertError: {
+    depends: ['cRed'],
+    opacity: 'alert'
+  },
   alertErrorText: {
     depends: ['text'],
     layer: 'alert',
@@ -358,7 +376,10 @@ export const SLOT_INHERITANCE = {
     textColor: true
   },
 
-  alertWarning: '--cOrange',
+  alertWarning: {
+    depends: ['cOrange'],
+    opacity: 'alert'
+  },
   alertWarningText: {
     depends: ['text'],
     layer: 'alert',
@@ -465,78 +486,144 @@ export const topoSort = (
   return output
 }
 
+export const getOpacitySlot = (
+  v,
+  inheritance = SLOT_INHERITANCE,
+  getDeps = getDependencies
+) => {
+  if (v.opacity === null) return
+  if (v.opacity) return v.opacity
+  const findInheritedOpacity = (val) => {
+    const depSlot = val.depends[0]
+    if (depSlot === undefined) return
+    const dependency = getDeps(depSlot, inheritance)[0]
+    if (dependency === undefined) return
+    if (dependency.opacity || dependency === null) {
+      return dependency.opacity
+    } else if (dependency.depends) {
+      return findInheritedOpacity(dependency)
+    } else {
+      return null
+    }
+  }
+  if (v.depends) {
+    return findInheritedOpacity(v)
+  }
+}
+
 export const SLOT_ORDERED = topoSort(
   Object.entries(SLOT_INHERITANCE)
     .sort(([aK, aV], [bK, bV]) => ((aV && aV.priority) || 0) - ((bV && bV.priority) || 0))
     .reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {})
 )
 
-console.log(SLOT_ORDERED)
+export const SLOTS_OPACITIES_DICT = Object.entries(SLOT_INHERITANCE).reduce((acc, [k, v]) => {
+  const opacity = getOpacitySlot(v, SLOT_INHERITANCE, getDependencies)
+  if (opacity) {
+    return { ...acc, [k]: opacity }
+  } else {
+    return acc
+  }
+}, {})
 
-export const getColors = (sourceColors, sourceOpacity, mod) => SLOT_ORDERED.reduce((acc, key) => {
+export const OPACITIES = Object.entries(SLOT_INHERITANCE).reduce((acc, [k, v]) => {
+  const opacity = getOpacitySlot(v, SLOT_INHERITANCE, getDependencies)
+  if (opacity) {
+    return {
+      ...acc,
+      [opacity]: {
+        defaultValue: DEFAULT_OPACITY[opacity] || 1,
+        affectedSlots: [...((acc[opacity] && acc[opacity].affectedSlots) || []), k]
+      }
+    }
+  } else {
+    return acc
+  }
+}, {})
+
+export const getColors = (sourceColors, sourceOpacity, mod) => SLOT_ORDERED.reduce(({ colors, opacity }, key) => {
   const value = SLOT_INHERITANCE[key]
+  const isObject = typeof value === 'object'
+  const isString = typeof value === 'string'
   const sourceColor = sourceColors[key]
+  let outputColor = null
   if (sourceColor) {
+    // Color is defined in source color
     let targetColor = sourceColor
-    if (typeof sourceColor === 'string' && sourceColor.startsWith('--')) {
+    if (targetColor === 'transparent') {
+      targetColor = {
+        // TODO: try to use alpha-blended background here
+        ...convert('#FF00FF').rgb,
+        a: 0
+      }
+    } else if (typeof sourceColor === 'string' && sourceColor.startsWith('--')) {
+      // Color references other color
       const [variable, modifier] = sourceColor.split(/,/g).map(str => str.trim())
       const variableSlot = variable.substring(2)
-      targetColor = acc[variableSlot] || sourceColors[variableSlot]
+      targetColor = colors[variableSlot] || sourceColors[variableSlot]
       if (modifier) {
-        console.log(targetColor, acc, variableSlot)
         targetColor = brightness(Number.parseFloat(modifier) * mod, targetColor).rgb
       }
-      console.log(targetColor, acc, variableSlot)
+    } else if (typeof sourceColor === 'string' && sourceColor.startsWith('#')) {
+      targetColor = convert(targetColor).rgb
     }
-    return { ...acc, [key]: { ...targetColor } }
-  } else if (typeof value === 'string' && value.startsWith('#')) {
-    return { ...acc, [key]: convert(value).rgb }
+    outputColor = { ...targetColor }
+  } else if (isString && value.startsWith('#')) {
+    // slot: '#000000' shorthand
+    outputColor = convert(value).rgb
+  } else if (isObject && value.default) {
+    // same as above except in object form
+    outputColor = convert(value.default).rgb
   } else {
-    const isObject = typeof value === 'object'
+    // calculate color
     const defaultColorFunc = (mod, dep) => ({ ...dep })
     const deps = getDependencies(key, SLOT_INHERITANCE)
     const colorFunc = (isObject && value.color) || defaultColorFunc
 
     if (value.textColor) {
+      // textColor case
       const bg = alphaBlendLayers(
-        { ...acc[deps[0]] },
+        { ...colors[deps[0]] },
         getLayers(
           value.layer,
           value.variant || value.layer,
-          acc,
-          sourceOpacity
+          colors,
+          opacity
         )
       )
       if (value.textColor === 'bw') {
-        return {
-          ...acc,
-          [key]: contrastRatio(bg).rgb
-        }
+        outputColor = contrastRatio(bg).rgb
       } else {
-        let color = { ...acc[deps[0]] }
+        let color = { ...colors[deps[0]] }
         if (value.color) {
           const isLightOnDark = convert(bg).hsl.l < convert(color).hsl.l
           const mod = isLightOnDark ? 1 : -1
-          color = value.color(mod, ...deps.map((dep) => ({ ...acc[dep] })))
+          color = value.color(mod, ...deps.map((dep) => ({ ...colors[dep] })))
         }
 
-        return {
-          ...acc,
-          [key]: getTextColor(
-            bg,
-            { ...color },
-            value.textColor === 'preserve'
-          )
-        }
-      }
-    } else {
-      return {
-        ...acc,
-        [key]: colorFunc(
-          mod,
-          ...deps.map((dep) => ({ ...acc[dep] }))
+        outputColor = getTextColor(
+          bg,
+          { ...color },
+          value.textColor === 'preserve'
         )
       }
+    } else {
+      // background color case
+      outputColor = colorFunc(
+        mod,
+        ...deps.map((dep) => ({ ...colors[dep] }))
+      )
     }
   }
-}, {})
+  if (!outputColor) {
+    throw new Error('Couldn\'t generate color for ' + key)
+  }
+  const opacitySlot = SLOTS_OPACITIES_DICT[key]
+  if (opacitySlot && outputColor.a === undefined) {
+    outputColor.a = sourceOpacity[opacitySlot] || OPACITIES[opacitySlot].defaultValue || 1
+  }
+  return {
+    colors: { ...colors, [key]: outputColor },
+    opacity: { ...opacity, [opacitySlot]: outputColor.a }
+  }
+}, { colors: {}, opacity: {} })
-- 
cgit v1.2.3-70-g09d2


From e070ec4b66e10c6f18acd0dbdb9dceb7eb0514b7 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 16 Jan 2020 21:34:33 +0200
Subject: more opacity handling

---
 src/components/style_switcher/style_switcher.js |  5 ++++-
 src/services/theme_data/theme_data.service.js   | 21 ++++++++++++++-------
 2 files changed, 18 insertions(+), 8 deletions(-)

(limited to 'src/components')

diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index 16be209a..b78d8236 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -16,7 +16,8 @@ import {
   CURRENT_VERSION,
   SLOT_INHERITANCE,
   OPACITIES,
-  getLayers
+  getLayers,
+  getOpacitySlot
 } from '../../services/theme_data/theme_data.service.js'
 import ColorInput from '../color_input/color_input.vue'
 import RangeInput from '../range_input/range_input.vue'
@@ -162,6 +163,7 @@ export default {
         )
         if (!slotIsText) return acc
         const { layer, variant } = slotIsBaseText ? { layer: 'bg' } : value
+        const opacitySlot = getOpacitySlot(SLOT_INHERITANCE[variant || layer])
         const background = variant || layer
         const textColors = [
           key,
@@ -171,6 +173,7 @@ export default {
         const layers = getLayers(
           layer,
           variant || layer,
+          opacitySlot,
           colorsConverted,
           opacity
         )
diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
index e76d70ed..5dbef554 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@@ -412,14 +412,13 @@ export const getLayersArray = (layer, data = LAYERS) => {
   return array
 }
 
-export const getLayers = (layer, variant = layer, colors, opacity) => {
+export const getLayers = (layer, variant = layer, opacitySlot, colors, opacity) => {
   return getLayersArray(layer).map((currentLayer) => ([
     currentLayer === layer
       ? colors[variant]
       : colors[currentLayer],
-    // TODO: Remove this hack when opacities/layers system is improved
-    currentLayer.startsWith('btn')
-      ? opacity.btn
+    currentLayer === layer
+      ? opacity[opacitySlot] || 1
       : opacity[currentLayer]
   ]))
 }
@@ -587,6 +586,7 @@ export const getColors = (sourceColors, sourceOpacity, mod) => SLOT_ORDERED.redu
         getLayers(
           value.layer,
           value.variant || value.layer,
+          getOpacitySlot(SLOT_INHERITANCE[value.variant || value.layer]),
           colors,
           opacity
         )
@@ -622,8 +622,15 @@ export const getColors = (sourceColors, sourceOpacity, mod) => SLOT_ORDERED.redu
   if (opacitySlot && outputColor.a === undefined) {
     outputColor.a = sourceOpacity[opacitySlot] || OPACITIES[opacitySlot].defaultValue || 1
   }
-  return {
-    colors: { ...colors, [key]: outputColor },
-    opacity: { ...opacity, [opacitySlot]: outputColor.a }
+  if (opacitySlot) {
+    return {
+      colors: { ...colors, [key]: outputColor },
+      opacity: { ...opacity, [opacitySlot]: outputColor.a }
+    }
+  } else {
+    return {
+      colors: { ...colors, [key]: outputColor },
+      opacity
+    }
   }
 }, { colors: {}, opacity: {} })
-- 
cgit v1.2.3-70-g09d2


From 8536f3cc320d550340a834c8357e1c8fd4318649 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 16 Jan 2020 21:59:06 +0200
Subject: small fix

---
 src/components/style_switcher/style_switcher.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components')

diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index b78d8236..03cbb2a1 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -163,8 +163,8 @@ export default {
         )
         if (!slotIsText) return acc
         const { layer, variant } = slotIsBaseText ? { layer: 'bg' } : value
-        const opacitySlot = getOpacitySlot(SLOT_INHERITANCE[variant || layer])
         const background = variant || layer
+        const opacitySlot = getOpacitySlot(SLOT_INHERITANCE[background])
         const textColors = [
           key,
           ...(background === 'bg' ? ['cRed', 'cGreen', 'cBlue', 'cOrange'] : [])
-- 
cgit v1.2.3-70-g09d2


From 24a7a9bfd8dbdaae8b5a2e5dde5cb754a122905b Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 16 Jan 2020 23:30:13 +0200
Subject: lint

---
 src/components/style_switcher/style_switcher.vue | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

(limited to 'src/components')

diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index 2fca5570..e3b899f0 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -215,7 +215,10 @@
               :label="$t('settings.text')"
               :fallback="previewTheme.colors.alertErrorText"
             />
-            <ContrastRatio :contrast="previewContrast.alertErrorText" large="1"/>
+            <ContrastRatio
+              :contrast="previewContrast.alertErrorText"
+              large="1"
+            />
             <ColorInput
               v-model="alertWarningColorLocal"
               name="alertWarning"
@@ -228,7 +231,10 @@
               :label="$t('settings.text')"
               :fallback="previewTheme.colors.alertWarningText"
             />
-            <ContrastRatio :contrast="previewContrast.alertWarningText" large="1"/>
+            <ContrastRatio
+              :contrast="previewContrast.alertWarningText"
+              large="1"
+            />
           </div>
           <div class="color-item">
             <h4>{{ $t('settings.style.advanced_colors.badge') }}</h4>
@@ -244,7 +250,10 @@
               :label="$t('settings.text')"
               :fallback="previewTheme.colors.badgeNotificationText"
             />
-            <ContrastRatio :contrast="previewContrast.badgeNotificationText" large="1" />
+            <ContrastRatio
+              :contrast="previewContrast.badgeNotificationText"
+              large="1"
+            />
           </div>
           <div class="color-item">
             <h4>{{ $t('settings.style.advanced_colors.panel_header') }}</h4>
-- 
cgit v1.2.3-70-g09d2


From f77d675434ad7238e36e712ed69d01bc3233b156 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 17 Jan 2020 00:27:46 +0200
Subject: optimized theme loading so that it wouldn't wait until ALL themes are
 loaded to select one by default

---
 src/components/style_switcher/style_switcher.js | 23 +++++++-
 src/services/style_setter/style_setter.js       | 75 ++++++++++++-------------
 2 files changed, 57 insertions(+), 41 deletions(-)

(limited to 'src/components')

diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index 03cbb2a1..52ece3a1 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -96,9 +96,26 @@ export default {
   created () {
     const self = this
 
-    getThemes().then((themesComplete) => {
-      self.availableStyles = themesComplete
-    })
+    getThemes()
+      .then((promises) => {
+        return Promise.all(
+          Object.entries(promises)
+            .map(([k, v]) => v.then(res => [k, res]))
+        )
+      })
+      .then(themes => themes.reduce((acc, [k, v]) => {
+        if (v) {
+          return {
+            ...acc,
+            [k]: v
+          }
+        } else {
+          return acc
+        }
+      }, {}))
+      .then((themesComplete) => {
+        self.availableStyles = themesComplete
+      })
   },
   mounted () {
     this.normalizeLocalState(this.$store.getters.mergedConfig.customTheme)
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 9237a8dc..872dd393 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -336,25 +336,23 @@ export const getThemes = () => {
   return window.fetch('/static/styles.json')
     .then((data) => data.json())
     .then((themes) => {
-      return Promise.all(Object.entries(themes).map(([k, v]) => {
+      return Object.entries(themes).map(([k, v]) => {
+        let promise = null
         if (typeof v === 'object') {
-          return Promise.resolve([k, v])
+          promise = Promise.resolve(v)
         } else if (typeof v === 'string') {
-          return window.fetch(v)
+          promise = window.fetch(v)
             .then((data) => data.json())
-            .then((theme) => {
-              return [k, theme]
-            })
             .catch((e) => {
               console.error(e)
-              return []
+              return null
             })
         }
-      }))
+        return [k, promise]
+      })
     })
     .then((promises) => {
       return promises
-        .filter(([k, v]) => v)
         .reduce((acc, [k, v]) => {
           acc[k] = v
           return acc
@@ -363,33 +361,34 @@ export const getThemes = () => {
 }
 
 export const setPreset = (val, commit) => {
-  return getThemes().then((themes) => {
-    const theme = themes[val] ? themes[val] : themes['pleroma-dark']
-    const isV1 = Array.isArray(theme)
-    const data = isV1 ? {} : theme.theme
-
-    if (isV1) {
-      const bg = hex2rgb(theme[1])
-      const fg = hex2rgb(theme[2])
-      const text = hex2rgb(theme[3])
-      const link = hex2rgb(theme[4])
-
-      const cRed = hex2rgb(theme[5] || '#FF0000')
-      const cGreen = hex2rgb(theme[6] || '#00FF00')
-      const cBlue = hex2rgb(theme[7] || '#0000FF')
-      const cOrange = hex2rgb(theme[8] || '#E3FF00')
-
-      data.colors = { bg, fg, text, link, cRed, cBlue, cGreen, cOrange }
-    }
-
-    // This is a hack, this function is only called during initial load.
-    // We want to cancel loading the theme from config.json if we're already
-    // loading a theme from the persisted state.
-    // Needed some way of dealing with the async way of things.
-    // load config -> set preset -> wait for styles.json to load ->
-    // load persisted state -> set colors -> styles.json loaded -> set colors
-    if (!window.themeLoaded) {
-      applyTheme(data, commit)
-    }
-  })
+  return getThemes()
+    .then((themes) => console.log(themes) || themes[val] ? themes[val] : themes['pleroma-dark'])
+    .then((theme) => {
+      const isV1 = Array.isArray(theme)
+      const data = isV1 ? {} : theme.theme
+
+      if (isV1) {
+        const bg = hex2rgb(theme[1])
+        const fg = hex2rgb(theme[2])
+        const text = hex2rgb(theme[3])
+        const link = hex2rgb(theme[4])
+
+        const cRed = hex2rgb(theme[5] || '#FF0000')
+        const cGreen = hex2rgb(theme[6] || '#00FF00')
+        const cBlue = hex2rgb(theme[7] || '#0000FF')
+        const cOrange = hex2rgb(theme[8] || '#E3FF00')
+
+        data.colors = { bg, fg, text, link, cRed, cBlue, cGreen, cOrange }
+      }
+
+      // This is a hack, this function is only called during initial load.
+      // We want to cancel loading the theme from config.json if we're already
+      // loading a theme from the persisted state.
+      // Needed some way of dealing with the async way of things.
+      // load config -> set preset -> wait for styles.json to load ->
+      // load persisted state -> set colors -> styles.json loaded -> set colors
+      if (!window.themeLoaded) {
+        applyTheme(data, commit)
+      }
+    })
 }
-- 
cgit v1.2.3-70-g09d2


From 7d7ccf729855283ad0f5b9d6943b8d86ed1f180d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 19 Jan 2020 22:44:35 +0200
Subject: fix some contrast ratios not displaying

---
 src/components/contrast_ratio/contrast_ratio.vue | 12 +++++++++---
 src/components/style_switcher/style_switcher.vue | 18 +++++++++---------
 2 files changed, 18 insertions(+), 12 deletions(-)

(limited to 'src/components')

diff --git a/src/components/contrast_ratio/contrast_ratio.vue b/src/components/contrast_ratio/contrast_ratio.vue
index 15a450a2..5e79ef41 100644
--- a/src/components/contrast_ratio/contrast_ratio.vue
+++ b/src/components/contrast_ratio/contrast_ratio.vue
@@ -37,9 +37,15 @@
 
 <script>
 export default {
-  props: [
-    'large', 'contrast'
-  ],
+  props: {
+    large: {
+      required: false
+    },
+    contrast: {
+      required: true,
+      type: Object
+    }
+  },
   computed: {
     hint () {
       const levelVal = this.contrast.aaa ? 'aaa' : (this.contrast.aa ? 'aa' : 'bad')
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index e3b899f0..c8c02b8d 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -157,13 +157,13 @@
               name="cRedColor"
               :label="$t('settings.cRed')"
             />
-            <ContrastRatio :contrast="previewContrast.bgRed" />
+            <ContrastRatio :contrast="previewContrast.bgCRed" />
             <ColorInput
               v-model="cBlueColorLocal"
               name="cBlueColor"
               :label="$t('settings.cBlue')"
             />
-            <ContrastRatio :contrast="previewContrast.bgBlue" />
+            <ContrastRatio :contrast="previewContrast.bgCBlue" />
           </div>
           <div class="color-item">
             <ColorInput
@@ -171,13 +171,13 @@
               name="cGreenColor"
               :label="$t('settings.cGreen')"
             />
-            <ContrastRatio :contrast="previewContrast.bgGreen" />
+            <ContrastRatio :contrast="previewContrast.bgCGreen" />
             <ColorInput
               v-model="cOrangeColorLocal"
               name="cOrangeColor"
               :label="$t('settings.cOrange')"
             />
-            <ContrastRatio :contrast="previewContrast.bgOrange" />
+            <ContrastRatio :contrast="previewContrast.bgCOrange" />
           </div>
           <p>{{ $t('settings.theme_help_v2_2') }}</p>
         </div>
@@ -217,7 +217,7 @@
             />
             <ContrastRatio
               :contrast="previewContrast.alertErrorText"
-              large="1"
+              large="true"
             />
             <ColorInput
               v-model="alertWarningColorLocal"
@@ -233,7 +233,7 @@
             />
             <ContrastRatio
               :contrast="previewContrast.alertWarningText"
-              large="1"
+              large="true"
             />
           </div>
           <div class="color-item">
@@ -252,7 +252,7 @@
             />
             <ContrastRatio
               :contrast="previewContrast.badgeNotificationText"
-              large="1"
+              large="true"
             />
           </div>
           <div class="color-item">
@@ -277,7 +277,7 @@
             />
             <ContrastRatio
               :contrast="previewContrast.panelText"
-              large="1"
+              large="true"
             />
             <ColorInput
               v-model="panelLinkColorLocal"
@@ -287,7 +287,7 @@
             />
             <ContrastRatio
               :contrast="previewContrast.panelLink"
-              large="1"
+              large="true"
             />
           </div>
           <div class="color-item">
-- 
cgit v1.2.3-70-g09d2


From e4033c85e2066d8a575a1cd8e5a59bb685a3adf0 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 20 Jan 2020 00:34:49 +0200
Subject: removed console logs

---
 src/components/shadow_control/shadow_control.js  |  15 ++
 src/components/shadow_control/shadow_control.vue |   2 +
 src/components/style_switcher/style_switcher.js  |  49 ++++---
 src/components/style_switcher/style_switcher.vue |   2 +-
 src/services/style_setter/style_setter.js        | 178 +++++++++++++----------
 src/services/theme_data/theme_data.service.js    |  28 +++-
 6 files changed, 166 insertions(+), 108 deletions(-)

(limited to 'src/components')

diff --git a/src/components/shadow_control/shadow_control.js b/src/components/shadow_control/shadow_control.js
index 44e4a22f..653d5a9b 100644
--- a/src/components/shadow_control/shadow_control.js
+++ b/src/components/shadow_control/shadow_control.js
@@ -61,6 +61,21 @@ export default {
         }
       }
     },
+    currentFallback () {
+      if (this.ready && this.fallback.length > 0) {
+        return this.fallback[this.selectedId]
+      } else {
+        return {
+          x: 0,
+          y: 0,
+          blur: 0,
+          spread: 0,
+          inset: false,
+          color: '#000000',
+          alpha: 1
+        }
+      }
+    },
     moveUpValid () {
       return this.ready && this.selectedId > 0
     },
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index de8a42d1..efbb980e 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -191,6 +191,8 @@
         v-model="selected.color"
         :disabled="!present"
         :label="$t('settings.style.common.color')"
+        :fallback="currentFallback.color"
+        :showOptionalTickbox="false"
         name="shadow"
       />
       <OpacityInput
diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index 52ece3a1..2984873f 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -5,6 +5,7 @@ import {
   getContrastRatioLayers
 } from '../../services/color_convert/color_convert.js'
 import {
+  DEFAULT_SHADOWS,
   generateColors,
   generateShadows,
   generateRadii,
@@ -76,7 +77,7 @@ export default {
         .reduce((acc, [key, val]) => ({ ...acc, [ key + 'ColorLocal' ]: val }), {}),
 
       ...Object.keys(OPACITIES)
-        .map(key => console.log(key) || [key, ''])
+        .map(key => [key, ''])
         .reduce((acc, [key, val]) => ({ ...acc, [ key + 'OpacityLocal' ]: val }), {}),
 
       shadowSelected: undefined,
@@ -134,7 +135,7 @@ export default {
     },
     currentOpacity () {
       return Object.keys(OPACITIES)
-        .map(key => console.log(key) || [key, this[key + 'OpacityLocal']])
+        .map(key => [key, this[key + 'OpacityLocal']])
         .reduce((acc, [key, val]) => ({ ...acc, [ key ]: val }), {})
     },
     currentRadii () {
@@ -224,7 +225,7 @@ export default {
       ].join(';')
     },
     shadowsAvailable () {
-      return Object.keys(this.previewTheme.shadows).sort()
+      return Object.keys(DEFAULT_SHADOWS).sort()
     },
     currentShadowOverriden: {
       get () {
@@ -239,7 +240,7 @@ export default {
       }
     },
     currentShadowFallback () {
-      return this.previewTheme.shadows[this.shadowSelected]
+      return (this.previewTheme.shadows || {})[this.shadowSelected]
     },
     currentShadow: {
       get () {
@@ -314,6 +315,17 @@ export default {
         }
       })
     },
+    updatePreviewColorsAndShadows () {
+      this.previewColors = generateColors({
+        opacity: this.currentOpacity,
+        colors: this.currentColors
+      })
+      this.previewShadows = generateShadows(
+        { shadows: this.shadowsLocal },
+        this.previewColors.theme.colors,
+        this.previewColors.mod
+      )
+    },
     onImport (parsed) {
       if (parsed._pleroma_theme_version === 1) {
         this.normalizeLocalState(parsed, 1)
@@ -435,6 +447,14 @@ export default {
         })
       }
 
+      if (opacity && !this.keepOpacity) {
+        this.clearOpacity()
+        Object.entries(opacity).forEach(([k, v]) => {
+          if (typeof v === 'undefined' || v === null || Number.isNaN(v)) return
+          this[k + 'OpacityLocal'] = v
+        })
+      }
+
       if (!this.keepRoundness) {
         this.clearRoundness()
         Object.entries(radii).forEach(([k, v]) => {
@@ -454,14 +474,6 @@ export default {
         this.clearFonts()
         this.fontsLocal = fonts
       }
-
-      if (opacity && !this.keepOpacity) {
-        this.clearOpacity()
-        Object.entries(opacity).forEach(([k, v]) => {
-          if (typeof v === 'undefined' || v === null || Number.isNaN(v)) return
-          this[k + 'OpacityLocal'] = v
-        })
-      }
     }
   },
   watch: {
@@ -476,8 +488,9 @@ export default {
     },
     shadowsLocal: {
       handler () {
+        if (Object.getOwnPropertyNames(this.previewColors).length === 1) return
         try {
-          this.previewShadows = generateShadows({ shadows: this.shadowsLocal })
+          this.updatePreviewColorsAndShadows()
           this.shadowsInvalid = false
         } catch (e) {
           this.shadowsInvalid = true
@@ -500,10 +513,7 @@ export default {
     },
     currentColors () {
       try {
-        this.previewColors = generateColors({
-          opacity: this.currentOpacity,
-          colors: this.currentColors
-        })
+        this.updatePreviewColorsAndShadows()
         this.colorsInvalid = false
       } catch (e) {
         this.colorsInvalid = true
@@ -512,10 +522,7 @@ export default {
     },
     currentOpacity () {
       try {
-        this.previewColors = generateColors({
-          opacity: this.currentOpacity,
-          colors: this.currentColors
-        })
+        this.updatePreviewColorsAndShadows()
       } catch (e) {
         console.warn(e)
       }
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index c8c02b8d..287d31b7 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -691,7 +691,7 @@
               {{ $t('settings.style.switcher.clear_all') }}
             </button>
           </div>
-          <shadow-control
+          <ShadowControl
             v-model="currentShadow"
             :ready="!!currentShadowFallback"
             :fallback="currentShadowFallback"
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 872dd393..74af190c 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -1,7 +1,7 @@
 import { times } from 'lodash'
 import { convert } from 'chromatism'
 import { rgb2hex, hex2rgb, rgba2css, getCssColor } from '../color_convert/color_convert.js'
-import { getColors } from '../theme_data/theme_data.service.js'
+import { getColors, computeDynamicColor } from '../theme_data/theme_data.service.js'
 
 // While this is not used anymore right now, I left it in if we want to do custom
 // styles that aren't just colors, so user can pick from a few different distinct
@@ -139,7 +139,8 @@ export const generateColors = (themeData) => {
     theme: {
       colors: htmlColors.solid,
       opacity
-    }
+    },
+    mod
   }
 }
 
@@ -211,83 +212,99 @@ export const generateFonts = (input) => {
   }
 }
 
-export const generateShadows = (input) => {
-  const border = (top, shadow) => ({
-    x: 0,
-    y: top ? 1 : -1,
-    blur: 0,
+const border = (top, shadow) => ({
+  x: 0,
+  y: top ? 1 : -1,
+  blur: 0,
+  spread: 0,
+  color: shadow ? '#000000' : '#FFFFFF',
+  alpha: 0.2,
+  inset: true
+})
+const buttonInsetFakeBorders = [border(true, false), border(false, true)]
+const inputInsetFakeBorders = [border(true, true), border(false, false)]
+const hoverGlow = {
+  x: 0,
+  y: 0,
+  blur: 4,
+  spread: 0,
+  color: '--faint',
+  alpha: 1
+}
+
+export const DEFAULT_SHADOWS = {
+  panel: [{
+    x: 1,
+    y: 1,
+    blur: 4,
     spread: 0,
-    color: shadow ? '#000000' : '#FFFFFF',
-    alpha: 0.2,
-    inset: true
-  })
-  const buttonInsetFakeBorders = [border(true, false), border(false, true)]
-  const inputInsetFakeBorders = [border(true, true), border(false, false)]
-  const hoverGlow = {
+    color: '#000000',
+    alpha: 0.6
+  }],
+  topBar: [{
     x: 0,
     y: 0,
     blur: 4,
     spread: 0,
-    color: '--faint',
+    color: '#000000',
+    alpha: 0.6
+  }],
+  popup: [{
+    x: 2,
+    y: 2,
+    blur: 3,
+    spread: 0,
+    color: '#000000',
+    alpha: 0.5
+  }],
+  avatar: [{
+    x: 0,
+    y: 1,
+    blur: 8,
+    spread: 0,
+    color: '#000000',
+    alpha: 0.7
+  }],
+  avatarStatus: [],
+  panelHeader: [],
+  button: [{
+    x: 0,
+    y: 0,
+    blur: 2,
+    spread: 0,
+    color: '#000000',
     alpha: 1
-  }
-
-  const shadows = {
-    panel: [{
-      x: 1,
-      y: 1,
-      blur: 4,
-      spread: 0,
-      color: '#000000',
-      alpha: 0.6
-    }],
-    topBar: [{
-      x: 0,
-      y: 0,
-      blur: 4,
-      spread: 0,
-      color: '#000000',
-      alpha: 0.6
-    }],
-    popup: [{
-      x: 2,
-      y: 2,
-      blur: 3,
-      spread: 0,
-      color: '#000000',
-      alpha: 0.5
-    }],
-    avatar: [{
-      x: 0,
-      y: 1,
-      blur: 8,
-      spread: 0,
-      color: '#000000',
-      alpha: 0.7
-    }],
-    avatarStatus: [],
-    panelHeader: [],
-    button: [{
-      x: 0,
-      y: 0,
-      blur: 2,
-      spread: 0,
-      color: '#000000',
-      alpha: 1
-    }, ...buttonInsetFakeBorders],
-    buttonHover: [hoverGlow, ...buttonInsetFakeBorders],
-    buttonPressed: [hoverGlow, ...inputInsetFakeBorders],
-    input: [...inputInsetFakeBorders, {
-      x: 0,
-      y: 0,
-      blur: 2,
-      inset: true,
-      spread: 0,
-      color: '#000000',
-      alpha: 1
-    }],
+  }, ...buttonInsetFakeBorders],
+  buttonHover: [hoverGlow, ...buttonInsetFakeBorders],
+  buttonPressed: [hoverGlow, ...inputInsetFakeBorders],
+  input: [...inputInsetFakeBorders, {
+    x: 0,
+    y: 0,
+    blur: 2,
+    inset: true,
+    spread: 0,
+    color: '#000000',
+    alpha: 1
+  }]
+}
+export const generateShadows = (input, colors, mod) => {
+  const shadows = Object.entries({
+    ...DEFAULT_SHADOWS,
     ...(input.shadows || {})
-  }
+  }).reduce((shadowsAcc, [slotName, shadowdefs]) => {
+    const newShadow = shadowdefs.reduce((shadowAcc, def) => [
+      ...shadowAcc,
+      {
+        ...def,
+        color: rgb2hex(computeDynamicColor(
+          def.color,
+          (variableSlot) => convert(colors[variableSlot]).rgb,
+          mod
+        ))
+      }
+    ], [])
+    return { ...shadowsAcc, [slotName]: newShadow }
+  }, {})
 
   return {
     rules: {
@@ -325,12 +342,15 @@ export const composePreset = (colors, radii, shadows, fonts) => {
   }
 }
 
-export const generatePreset = (input) => composePreset(
-  generateColors(input),
-  generateRadii(input),
-  generateShadows(input),
-  generateFonts(input)
-)
+export const generatePreset = (input) => {
+  const colors = generateColors(input)
+  return composePreset(
+    colors,
+    generateRadii(input),
+    generateShadows(input, colors.theme.colors, colors.mod),
+    generateFonts(input)
+  )
+}
 
 export const getThemes = () => {
   return window.fetch('/static/styles.json')
@@ -362,7 +382,7 @@ export const getThemes = () => {
 
 export const setPreset = (val, commit) => {
   return getThemes()
-    .then((themes) => console.log(themes) || themes[val] ? themes[val] : themes['pleroma-dark'])
+    .then((themes) => themes[val] ? themes[val] : themes['pleroma-dark'])
     .then((theme) => {
       const isV1 = Array.isArray(theme)
       const data = isV1 ? {} : theme.theme
diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
index 9f010fdf..e4456b29 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@@ -697,6 +697,22 @@ export const OPACITIES = Object.entries(SLOT_INHERITANCE).reduce((acc, [k, v]) =
   }
 }, {})
 
+/**
+ * Handle dynamic color
+ */
+export const computeDynamicColor = (sourceColor, getColor, mod) => {
+  if (typeof sourceColor !== 'string' || !sourceColor.startsWith('--')) return sourceColor
+  let targetColor = null
+  // Color references other color
+  const [variable, modifier] = sourceColor.split(/,/g).map(str => str.trim())
+  const variableSlot = variable.substring(2)
+  targetColor = getColor(variableSlot)
+  if (modifier) {
+    targetColor = brightness(Number.parseFloat(modifier) * mod, targetColor).rgb
+  }
+  return targetColor
+}
+
 /**
  * THE function you want to use. Takes provided colors and opacities, mod
  * value and uses inheritance data to figure out color needed for the slot.
@@ -728,13 +744,11 @@ export const getColors = (sourceColors, sourceOpacity, mod) => SLOT_ORDERED.redu
         a: 0
       }
     } else if (typeof sourceColor === 'string' && sourceColor.startsWith('--')) {
-      // Color references other color
-      const [variable, modifier] = sourceColor.split(/,/g).map(str => str.trim())
-      const variableSlot = variable.substring(2)
-      targetColor = colors[variableSlot] || sourceColors[variableSlot]
-      if (modifier) {
-        targetColor = brightness(Number.parseFloat(modifier) * mod, targetColor).rgb
-      }
+      targetColor = computeDynamicColor(
+        sourceColor,
+        variableSlot => colors[variableSlot] || sourceColors[variableSlot],
+        mod
+      )
     } else if (typeof sourceColor === 'string' && sourceColor.startsWith('#')) {
       targetColor = convert(targetColor).rgb
     }
-- 
cgit v1.2.3-70-g09d2


From 6a3714fcc64fe25e6fc38a700083427c2764caec Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 20 Jan 2020 00:37:45 +0200
Subject: Checked contrast rating errors

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

(limited to 'src/components')

diff --git a/src/components/contrast_ratio/contrast_ratio.vue b/src/components/contrast_ratio/contrast_ratio.vue
index 5e79ef41..ba92bc17 100644
--- a/src/components/contrast_ratio/contrast_ratio.vue
+++ b/src/components/contrast_ratio/contrast_ratio.vue
@@ -41,8 +41,10 @@ export default {
     large: {
       required: false
     },
+    // TODO: Make theme switcher compute theme initially so that contrast
+    // component won't be called without contrast data
     contrast: {
-      required: true,
+      required: false,
       type: Object
     }
   },
-- 
cgit v1.2.3-70-g09d2


From 6e1c538e4182263a75fb65b0f3c5d1ad9de94541 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 20 Jan 2020 01:31:54 +0200
Subject: multiple fixes to make style switcher not die. Made shadows work,
 incuding compatibility

---
 src/components/style_switcher/style_switcher.js | 121 +++++++++++++-----------
 src/services/style_setter/style_setter.js       |  23 ++++-
 src/services/theme_data/theme_data.service.js   |   9 +-
 static/themes/breezy-dark.json                  |   2 +-
 static/themes/breezy-light.json                 |   2 +-
 5 files changed, 96 insertions(+), 61 deletions(-)

(limited to 'src/components')

diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index 2984873f..2a1e439b 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -11,7 +11,8 @@ import {
   generateRadii,
   generateFonts,
   composePreset,
-  getThemes
+  getThemes,
+  shadows2to3
 } from '../../services/style_setter/style_setter.js'
 import {
   CURRENT_VERSION,
@@ -159,62 +160,66 @@ export default {
     },
     // This needs optimization maybe
     previewContrast () {
-      if (!this.previewTheme.colors.bg) return {}
-      const colors = this.previewTheme.colors
-      const opacity = this.previewTheme.opacity
-      if (!colors.bg) return {}
-      const hints = (ratio) => ({
-        text: ratio.toPrecision(3) + ':1',
-        // AA level, AAA level
-        aa: ratio >= 4.5,
-        aaa: ratio >= 7,
-        // same but for 18pt+ texts
-        laa: ratio >= 3,
-        laaa: ratio >= 4.5
-      })
-      const colorsConverted = Object.entries(colors).reduce((acc, [key, value]) => ({ ...acc, [key]: colorConvert(value) }), {})
-
-      const ratios = Object.entries(SLOT_INHERITANCE).reduce((acc, [key, value]) => {
-        const slotIsBaseText = key === 'text' || key === 'link'
-        const slotIsText = slotIsBaseText || (
-          typeof value === 'object' && value !== null && value.textColor
-        )
-        if (!slotIsText) return acc
-        const { layer, variant } = slotIsBaseText ? { layer: 'bg' } : value
-        const background = variant || layer
-        const opacitySlot = getOpacitySlot(SLOT_INHERITANCE[background])
-        const textColors = [
-          key,
-          ...(background === 'bg' ? ['cRed', 'cGreen', 'cBlue', 'cOrange'] : [])
-        ]
-
-        const layers = getLayers(
-          layer,
-          variant || layer,
-          opacitySlot,
-          colorsConverted,
-          opacity
-        )
+      try {
+        if (!this.previewTheme.colors.bg) return {}
+        const colors = this.previewTheme.colors
+        const opacity = this.previewTheme.opacity
+        if (!colors.bg) return {}
+        const hints = (ratio) => ({
+          text: ratio.toPrecision(3) + ':1',
+          // AA level, AAA level
+          aa: ratio >= 4.5,
+          aaa: ratio >= 7,
+          // same but for 18pt+ texts
+          laa: ratio >= 3,
+          laaa: ratio >= 4.5
+        })
+        const colorsConverted = Object.entries(colors).reduce((acc, [key, value]) => ({ ...acc, [key]: colorConvert(value) }), {})
+
+        const ratios = Object.entries(SLOT_INHERITANCE).reduce((acc, [key, value]) => {
+          const slotIsBaseText = key === 'text' || key === 'link'
+          const slotIsText = slotIsBaseText || (
+            typeof value === 'object' && value !== null && value.textColor
+          )
+          if (!slotIsText) return acc
+          const { layer, variant } = slotIsBaseText ? { layer: 'bg' } : value
+          const background = variant || layer
+          const opacitySlot = getOpacitySlot(SLOT_INHERITANCE[background])
+          const textColors = [
+            key,
+            ...(background === 'bg' ? ['cRed', 'cGreen', 'cBlue', 'cOrange'] : [])
+          ]
+
+          const layers = getLayers(
+            layer,
+            variant || layer,
+            opacitySlot,
+            colorsConverted,
+            opacity
+          )
 
-        return {
-          ...acc,
-          ...textColors.reduce((acc, textColorKey) => {
-            const newKey = slotIsBaseText
-              ? 'bg' + textColorKey[0].toUpperCase() + textColorKey.slice(1)
-              : textColorKey
-            return {
-              ...acc,
-              [newKey]: getContrastRatioLayers(
-                colorsConverted[textColorKey],
-                layers,
-                colorsConverted[textColorKey]
-              )
-            }
-          }, {})
-        }
-      }, {})
+          return {
+            ...acc,
+            ...textColors.reduce((acc, textColorKey) => {
+              const newKey = slotIsBaseText
+                    ? 'bg' + textColorKey[0].toUpperCase() + textColorKey.slice(1)
+                    : textColorKey
+              return {
+                ...acc,
+                [newKey]: getContrastRatioLayers(
+                  colorsConverted[textColorKey],
+                  layers,
+                  colorsConverted[textColorKey]
+                )
+              }
+            }, {})
+          }
+        }, {})
 
-      return Object.entries(ratios).reduce((acc, [k, v]) => { acc[k] = hints(v); return acc }, {})
+        return Object.entries(ratios).reduce((acc, [k, v]) => { acc[k] = hints(v); return acc }, {})
+      } catch (e) {
+        console.warn('Failure computing contrasts', e)
+      }
     },
     previewRules () {
       if (!this.preview.rules) return ''
@@ -466,7 +471,11 @@ export default {
 
       if (!this.keepShadows) {
         this.clearShadows()
-        this.shadowsLocal = shadows
+        if (version === 2) {
+          this.shadowsLocal = shadows2to3(shadows)
+        } else {
+          this.shadowsLocal = shadows
+        }
         this.shadowSelected = this.shadowsAvailable[0]
       }
 
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 74af190c..ee264c49 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -291,8 +291,8 @@ export const generateShadows = (input, colors, mod) => {
   const shadows = Object.entries({
     ...DEFAULT_SHADOWS,
     ...(input.shadows || {})
-  }).reduce((shadowsAcc, [slotName, shadowdefs]) => {
-    const newShadow = shadowdefs.reduce((shadowAcc, def) => [
+  }).reduce((shadowsAcc, [slotName, shadowDefs]) => {
+    const newShadow = shadowDefs.reduce((shadowAcc, def) => [
       ...shadowAcc,
       {
         ...def,
@@ -380,6 +380,25 @@ export const getThemes = () => {
     })
 }
 
+/**
+ * This handles compatibility issues when importing v2 theme's shadows to current format
+ *
+ * Back in v2 shadows allowed you to use dynamic colors however those used pure CSS3 variables
+ */
+export const shadows2to3 = (shadows) => {
+  return Object.entries(shadows).reduce((shadowsAcc, [slotName, shadowDefs]) => {
+    const isDynamic = ({ color }) => console.log(color) || color.startsWith('--')
+    const newShadow = shadowDefs.reduce((shadowAcc, def) => [
+      ...shadowAcc,
+      {
+        ...def,
+        alpha: isDynamic(def) ? 1 : def.alpha
+      }
+    ], [])
+    return { ...shadowsAcc, [slotName]: newShadow }
+  }, {})
+}
+
 export const setPreset = (val, commit) => {
   return getThemes()
     .then((themes) => themes[val] ? themes[val] : themes['pleroma-dark'])
diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
index e4456b29..36837b44 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@@ -663,7 +663,14 @@ export const SLOT_ORDERED = topoSort(
   Object.entries(SLOT_INHERITANCE)
     .sort(([aK, aV], [bK, bV]) => ((aV && aV.priority) || 0) - ((bV && bV.priority) || 0))
     .reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {})
-)
+).sort((a, b) => {
+  const depsA = getDependencies(a, SLOT_INHERITANCE).length
+  const depsB = getDependencies(b, SLOT_INHERITANCE).length
+
+  if (depsA === depsB || (depsB !== 0 && depsA !== 0)) return 0
+  if (depsA === 0 && depsB !== 0) return -1
+  if (depsB === 0 && depsA !== 0) return 1
+})
 
 /**
  * Dictionary where keys are color slots and values are opacity associated
diff --git a/static/themes/breezy-dark.json b/static/themes/breezy-dark.json
index 97e81f3d..3aafda52 100644
--- a/static/themes/breezy-dark.json
+++ b/static/themes/breezy-dark.json
@@ -53,7 +53,7 @@
           "blur": 0,
           "spread": "1",
           "color": "--accent",
-          "alpha": "0.3",
+          "alpha": "1",
           "inset": true
         },
         {
diff --git a/static/themes/breezy-light.json b/static/themes/breezy-light.json
index fd307b80..df6e1a66 100644
--- a/static/themes/breezy-light.json
+++ b/static/themes/breezy-light.json
@@ -53,7 +53,7 @@
           "blur": 0,
           "spread": "1",
           "color": "--accent",
-          "alpha": "0.3",
+          "alpha": "1",
           "inset": true
         },
         {
-- 
cgit v1.2.3-70-g09d2


From a7b6c79136012353397203f937d2baa667d08895 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 20 Jan 2020 01:45:48 +0200
Subject: eslint

---
 src/components/shadow_control/shadow_control.vue | 2 +-
 src/components/style_switcher/style_switcher.js  | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

(limited to 'src/components')

diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index efbb980e..c1db5b8f 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -192,7 +192,7 @@
         :disabled="!present"
         :label="$t('settings.style.common.color')"
         :fallback="currentFallback.color"
-        :showOptionalTickbox="false"
+        :show-optional-tickbox="false"
         name="shadow"
       />
       <OpacityInput
diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index 2a1e439b..799646b1 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -202,8 +202,8 @@ export default {
             ...acc,
             ...textColors.reduce((acc, textColorKey) => {
               const newKey = slotIsBaseText
-                    ? 'bg' + textColorKey[0].toUpperCase() + textColorKey.slice(1)
-                    : textColorKey
+                ? 'bg' + textColorKey[0].toUpperCase() + textColorKey.slice(1)
+                : textColorKey
               return {
                 ...acc,
                 [newKey]: getContrastRatioLayers(
-- 
cgit v1.2.3-70-g09d2


From 93dfb4d3524df14f730a3f0ad46ebb86ceb89984 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 20 Jan 2020 02:00:13 +0200
Subject: fix shadow picker preview, change hint

---
 src/components/shadow_control/shadow_control.js  | 2 +-
 src/components/shadow_control/shadow_control.vue | 9 ++++++---
 src/i18n/en.json                                 | 2 +-
 3 files changed, 8 insertions(+), 5 deletions(-)

(limited to 'src/components')

diff --git a/src/components/shadow_control/shadow_control.js b/src/components/shadow_control/shadow_control.js
index 653d5a9b..bdfb4429 100644
--- a/src/components/shadow_control/shadow_control.js
+++ b/src/components/shadow_control/shadow_control.js
@@ -95,7 +95,7 @@ export default {
     },
     style () {
       return this.ready ? {
-        boxShadow: getCssShadow(this.cValue)
+        boxShadow: getCssShadow(this.fallback)
       } : {}
     }
   }
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index c1db5b8f..815a9e59 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -199,9 +199,12 @@
         v-model="selected.alpha"
         :disabled="!present"
       />
-      <p>
-        {{ $t('settings.style.shadows.hint') }}
-      </p>
+      <i18n
+        path="settings.style.shadows.hintV3"
+        tag="p"
+      >
+        <code>--variable,mod</code>
+      </i18n>
     </div>
   </div>
 </template>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index f7a26262..f624a1c5 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -452,7 +452,7 @@
         "blur": "Blur",
         "spread": "Spread",
         "inset": "Inset",
-        "hint": "For shadows you can also use --variable as a color value to use CSS3 variables. Please note that setting opacity won't work in this case.",
+        "hintV3": "For shadows you can also use the {0} notation to use other color slot.",
         "filter_hint": {
           "always_drop_shadow": "Warning, this shadow always uses {0} when browser supports it.",
           "drop_shadow_syntax": "{0} does not support {1} parameter and {2} keyword.",
-- 
cgit v1.2.3-70-g09d2


From 8080981fcdaab4efd07c2c3f4ff3e2131f8aa802 Mon Sep 17 00:00:00 2001
From: lain <lain@soykaf.club>
Date: Tue, 21 Jan 2020 16:51:49 +0100
Subject: Fix follower request fetching

---
 src/components/nav_panel/nav_panel.js                                 | 2 +-
 src/components/side_drawer/side_drawer.js                             | 2 +-
 src/modules/api.js                                                    | 1 +
 src/services/backend_interactor_service/backend_interactor_service.js | 2 +-
 4 files changed, 4 insertions(+), 3 deletions(-)

(limited to 'src/components')

diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js
index d9268585..8f7edb7f 100644
--- a/src/components/nav_panel/nav_panel.js
+++ b/src/components/nav_panel/nav_panel.js
@@ -3,7 +3,7 @@ import { mapState } from 'vuex'
 const NavPanel = {
   created () {
     if (this.currentUser && this.currentUser.locked) {
-      this.$store.dispatch('startFetchingFollowRequest')
+      this.$store.dispatch('startFetchingFollowRequests')
     }
   },
   computed: mapState({
diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js
index 2534eb8f..2181ecc7 100644
--- a/src/components/side_drawer/side_drawer.js
+++ b/src/components/side_drawer/side_drawer.js
@@ -12,7 +12,7 @@ const SideDrawer = {
     this.closeGesture = GestureService.swipeGesture(GestureService.DIRECTION_LEFT, this.toggleDrawer)
 
     if (this.currentUser && this.currentUser.locked) {
-      this.$store.dispatch('startFetchingFollowRequest')
+      this.$store.dispatch('startFetchingFollowRequests')
     }
   },
   components: { UserCard },
diff --git a/src/modules/api.js b/src/modules/api.js
index 9c296275..748570e5 100644
--- a/src/modules/api.js
+++ b/src/modules/api.js
@@ -146,6 +146,7 @@ const api = {
     startFetchingFollowRequests (store) {
       if (store.state.fetchers['followRequests']) return
       const fetcher = store.state.backendInteractor.startFetchingFollowRequests({ store })
+
       store.commit('addFetcher', { fetcherName: 'followRequests', fetcher })
     },
     stopFetchingFollowRequests (store) {
diff --git a/src/services/backend_interactor_service/backend_interactor_service.js b/src/services/backend_interactor_service/backend_interactor_service.js
index b7372ed0..e1c32860 100644
--- a/src/services/backend_interactor_service/backend_interactor_service.js
+++ b/src/services/backend_interactor_service/backend_interactor_service.js
@@ -16,7 +16,7 @@ const backendInteractorService = credentials => ({
     return notificationsFetcher.fetchAndUpdate({ store, credentials })
   },
 
-  startFetchingFollowRequest ({ store }) {
+  startFetchingFollowRequests ({ store }) {
     return followRequestFetcher.startFetching({ store, credentials })
   },
 
-- 
cgit v1.2.3-70-g09d2


From 9336140486f50159b935001b7ebadf3d9bda89ec Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 22 Jan 2020 00:37:19 +0200
Subject: massively improved initial theme loading code, added checks and
 warnings when loading theme files (import/localStorage/defaults)

---
 src/boot/after_store.js                           |  32 +++--
 src/components/style_switcher/style_switcher.js   | 153 ++++++++++++++++++++--
 src/components/style_switcher/style_switcher.scss |   4 +
 src/components/style_switcher/style_switcher.vue  |  79 +++++++----
 src/i18n/en.json                                  |  12 +-
 src/modules/config.js                             |   7 +-
 src/modules/instance.js                           |  17 ++-
 src/services/style_setter/style_setter.js         |  27 ++--
 8 files changed, 259 insertions(+), 72 deletions(-)

(limited to 'src/components')

diff --git a/src/boot/after_store.js b/src/boot/after_store.js
index 228a0497..6c4f0e1b 100644
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@@ -5,6 +5,8 @@ import App from '../App.vue'
 import { windowWidth } from '../services/window_utils/window_utils'
 import { getOrCreateApp, getClientToken } from '../services/new_api/oauth.js'
 import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
+import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js'
+import { applyTheme } from '../services/style_setter/style_setter.js'
 
 const getStatusnetConfig = async ({ store }) => {
   try {
@@ -261,7 +263,7 @@ const checkOAuthToken = async ({ store }) => {
       try {
         await store.dispatch('loginUser', store.getters.getUserToken())
       } catch (e) {
-        console.log(e)
+        console.error(e)
       }
     }
     resolve()
@@ -269,23 +271,29 @@ const checkOAuthToken = async ({ store }) => {
 }
 
 const afterStoreSetup = async ({ store, i18n }) => {
-  if (store.state.config.customTheme) {
-    // This is a hack to deal with async loading of config.json and themes
-    // See: style_setter.js, setPreset()
-    window.themeLoaded = true
-    store.dispatch('setOption', {
-      name: 'customTheme',
-      value: store.state.config.customTheme
-    })
-  }
-
   const width = windowWidth()
   store.dispatch('setMobileLayout', width <= 800)
+  await setConfig({ store })
+
+  const { customTheme, customThemeSource } = store.state.config
+  const { theme } = store.state.instance
+  const customThemePresent = customThemeSource || customTheme
+
+  if (customThemePresent) {
+    if (customThemeSource && customThemeSource.version === CURRENT_VERSION) {
+      applyTheme(customThemeSource)
+    } else {
+      applyTheme(customTheme)
+    }
+  } else if (theme) {
+    // do nothing, it will load asynchronously
+  } else {
+    console.error('Failed to load any theme!')
+  }
 
   // Now we can try getting the server settings and logging in
   await Promise.all([
     checkOAuthToken({ store }),
-    setConfig({ store }),
     getTOS({ store }),
     getInstancePanel({ store }),
     getStickers({ store }),
diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index 799646b1..0ef02f39 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -57,6 +57,8 @@ export default {
     return {
       availableStyles: [],
       selected: this.$store.getters.mergedConfig.theme,
+      themeWarning: undefined,
+      tempImportFile: undefined,
 
       previewShadows: {},
       previewColors: {},
@@ -120,12 +122,62 @@ export default {
       })
   },
   mounted () {
-    this.normalizeLocalState(this.$store.getters.mergedConfig.customTheme)
+    this.loadThemeFromLocalStorage()
     if (typeof this.shadowSelected === 'undefined') {
       this.shadowSelected = this.shadowsAvailable[0]
     }
   },
   computed: {
+    themeWarningHelp () {
+      if (!this.themeWarning) return
+      const t = this.$t
+      const pre = 'settings.style.switcher.help.'
+      const {
+        origin,
+        themeEngineVersion,
+        type,
+        noActionsPossible
+      } = this.themeWarning
+      if (origin === 'file') {
+        // Loaded v2 theme from file
+        if (themeEngineVersion === 2 && type === 'wrong_version') {
+          return t(pre + 'v2_imported')
+        }
+        if (themeEngineVersion > CURRENT_VERSION) {
+          return t(pre + 'future_version_imported') + ' ' +
+            (
+              noActionsPossible
+                ? t(pre + 'snapshot_missing')
+                : t(pre + 'snapshot_present')
+            )
+        }
+        if (themeEngineVersion < CURRENT_VERSION) {
+          return t(pre + 'future_version_imported') + ' ' +
+            (
+              noActionsPossible
+                ? t(pre + 'snapshot_missing')
+                : t(pre + 'snapshot_present')
+            )
+        }
+      } else if (origin === 'localStorage') {
+        // FE upgraded from v2
+        if (themeEngineVersion === 2) {
+          return 'upgraded_from_v2'
+        }
+        // Admin downgraded FE
+        if (themeEngineVersion > CURRENT_VERSION) {
+          return noActionsPossible
+            ? 'downgraded_theme'
+            : 'downgraded_theme_missing_snapshot'
+        }
+        // Admin upgraded FE
+        if (themeEngineVersion < CURRENT_VERSION) {
+          return noActionsPossible
+            ? 'upgraded_theme'
+            : 'upgraded_theme_missing_snapshot'
+        }
+      }
+    },
     selectedVersion () {
       return Array.isArray(this.selected) ? 1 : 2
     },
@@ -308,10 +360,96 @@ export default {
     Checkbox
   },
   methods: {
+    loadTheme (
+      {
+        theme,
+        source,
+        _pleroma_theme_version: fileVersion
+      },
+      origin,
+      forceUseSource = false
+    ) {
+      if (!source && !theme) {
+        throw new Error('Can\'t load theme: empty')
+      }
+      const version = (origin === 'localstorage' && !theme.colors)
+        ? 'l1'
+        : fileVersion
+      const themeEngineVersion = (source || {}).themeEngineVersion || 2
+      const versionsMatch = themeEngineVersion === CURRENT_VERSION
+      // Force loading of source if user requested it or if snapshot
+      // is unavailable
+      const forcedSourceLoad = (source && forceUseSource) || !theme
+      if (!versionsMatch &&
+          !forcedSourceLoad &&
+          version !== 'l1' &&
+          origin !== 'defaults'
+      ) {
+        if (!theme) {
+          this.themeWarning = {
+            origin,
+            noActionsPossible: true,
+            themeEngineVersion,
+            type: 'no_snapshot_old_version'
+          }
+        } else if (!versionsMatch) {
+          this.themeWarning = {
+            origin,
+            noActionsPossible: !source,
+            themeEngineVersion,
+            type: 'wrong_version'
+          }
+        }
+      }
+      this.normalizeLocalState(theme, version, source, forcedSourceLoad)
+    },
+    forceLoadLocalStorage () {
+      this.loadThemeFromLocalStorage(true)
+    },
+    dismissWarning () {
+      this.themeWarning = undefined
+      this.tempImportFile = undefined
+    },
+    forceLoad () {
+      const { origin } = this.themeWarning
+      switch (origin) {
+        case 'localstorage':
+          this.loadThemeFromLocalStorage(true)
+          break
+        case 'file':
+          this.onImport(this.tempImportFile, true)
+          break
+      }
+    },
+    loadThemeFromLocalStorage (confirmLoadSource = false) {
+      const {
+        customTheme: theme,
+        customThemeSource: source
+      } = this.$store.getters.mergedConfig
+      if (!theme && !source) {
+        // Anon user or never touched themes
+        this.loadTheme(
+          this.$store.state.instance.themeData,
+          'defaults',
+          confirmLoadSource
+        )
+      } else {
+        this.loadTheme(
+          { theme, source },
+          'localStorage',
+          confirmLoadSource
+        )
+      }
+    },
     setCustomTheme () {
       this.$store.dispatch('setOption', {
         name: 'customTheme',
+        value: this.previewTheme
+      })
+      this.$store.dispatch('setOption', {
+        name: 'customThemeSource',
         value: {
+          themeEngineVersion: CURRENT_VERSION,
           shadows: this.shadowsLocal,
           fonts: this.fontsLocal,
           opacity: this.currentOpacity,
@@ -331,21 +469,16 @@ export default {
         this.previewColors.mod
       )
     },
-    onImport (parsed) {
-      if (parsed._pleroma_theme_version === 1) {
-        this.normalizeLocalState(parsed, 1)
-      } else if (parsed._pleroma_theme_version >= 2) {
-        this.normalizeLocalState(parsed.theme, 2, parsed.source)
-      }
+    onImport (parsed, forceSource = false) {
+      this.tempImportFile = parsed
+      this.loadTheme(parsed, 'file', forceSource)
     },
     importValidator (parsed) {
       const version = parsed._pleroma_theme_version
       return version >= 1 || version <= 2
     },
     clearAll () {
-      const state = this.$store.getters.mergedConfig.customTheme
-      const version = state.colors ? 2 : 'l1'
-      this.normalizeLocalState(this.$store.getters.mergedConfig.customTheme, version, this.$store.getters.mergedConfig.customThemeSource)
+      this.loadThemeFromLocalStorage()
     },
 
     // Clears all the extra stuff when loading V1 theme
diff --git a/src/components/style_switcher/style_switcher.scss b/src/components/style_switcher/style_switcher.scss
index 987245a2..71d0f05e 100644
--- a/src/components/style_switcher/style_switcher.scss
+++ b/src/components/style_switcher/style_switcher.scss
@@ -1,5 +1,9 @@
 @import '../../_variables.scss';
 .style-switcher {
+  .theme-warning {
+    display: flex;
+    align-items: baseline;
+  }
   .preset-switcher {
     margin-right: 1em;
   }
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index 287d31b7..61f8800a 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -1,31 +1,60 @@
 <template>
-  <div class="style-switcher">
-    <div class="presets-container">
-      <div class="save-load">
-        <ExportImport
-          :export-object="exportedTheme"
-          :export-label="$t(&quot;settings.export_theme&quot;)"
-          :import-label="$t(&quot;settings.import_theme&quot;)"
-          :import-failed-text="$t(&quot;settings.invalid_theme_imported&quot;)"
-          :on-import="onImport"
-          :validator="importValidator"
-        >
-          <template slot="before">
-            <div class="presets">
-              {{ $t('settings.presets') }}
-              <label
-                for="preset-switcher"
-                class="select"
+<div class="style-switcher">
+  <div class="presets-container">
+    <div class="save-load">
+      <div class="theme-warning" v-if="themeWarning">
+        <div class="alert warning">
+        {{ themeWarningHelp }}
+        </div>
+        <div class="buttons">
+          <template v-if="themeWarning.noActionsPossible">
+            <button
+              class="btn"
+              @click="dismissWarning"
+            >
+              {{ $t('general.dismiss') }}
+            </button>
+          </template>
+          <template v-else>
+            <button
+              class="btn"
+              @click="forceLoad"
+            >
+              {{ $t('settings.style.switcher.load_theme') }}
+            </button>
+            <button
+              class="btn"
+              @click="dismissWarning"
+            >
+              {{ $t('settings.style.switcher.use_snapshot') }}
+            </button>
+          </template>
+        </div>
+      </div>
+      <ExportImport
+        :export-object="exportedTheme"
+        :export-label="$t(&quot;settings.export_theme&quot;)"
+        :import-label="$t(&quot;settings.import_theme&quot;)"
+        :import-failed-text="$t(&quot;settings.invalid_theme_imported&quot;)"
+        :on-import="onImport"
+        :validator="importValidator"
+      >
+        <template slot="before">
+          <div class="presets">
+            {{ $t('settings.presets') }}
+            <label
+              for="preset-switcher"
+              class="select"
               >
-                <select
-                  id="preset-switcher"
-                  v-model="selected"
-                  class="preset-switcher"
+              <select
+                id="preset-switcher"
+                v-model="selected"
+                class="preset-switcher"
                 >
-                  <option
-                    v-for="style in availableStyles"
-                    :key="style.name"
-                    :value="style"
+                <option
+                  v-for="style in availableStyles"
+                  :key="style.name"
+                  :value="style"
                     :style="{
                       backgroundColor: style[1] || (style.theme || style.source).colors.bg,
                       color: style[3] || (style.theme || style.source).colors.text
diff --git a/src/i18n/en.json b/src/i18n/en.json
index f624a1c5..6994d62f 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -46,6 +46,7 @@
     "optional": "optional",
     "show_more": "Show more",
     "show_less": "Show less",
+    "dismiss": "Dismiss",
     "cancel": "Cancel",
     "disable": "Disable",
     "enable": "Enable",
@@ -394,7 +395,16 @@
         "save_load_hint": "\"Keep\" options preserve currently set options when selecting or loading themes, it also stores said options when exporting a theme. When all checkboxes unset, exporting theme will save everything.",
         "reset": "Reset",
         "clear_all": "Clear all",
-        "clear_opacity": "Clear opacity"
+        "clear_opacity": "Clear opacity",
+        "load_theme": "Load theme",
+        "use_snapshot": "Keep as is",
+        "help": {
+          "v2_imported": "File you imported was made for older FE. We try to maximize compatibility but there still could be inconsitencies.",
+          "snapshot_present": "Theme snapshot is loaded, so all values are overriden. You can load theme's actual data instead.",
+          "snapshot_missing": "No theme snapshot was in the file so it could look different than originally envisioned.",
+          "future_version_imported": "File you imported was made in newer version of FE.",
+          "older_version_imported": "File you imported was made in older version of FE."
+        }
       },
       "common": {
         "color": "Color",
diff --git a/src/modules/config.js b/src/modules/config.js
index 74025db1..ee474b16 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -5,6 +5,9 @@ const browserLocale = (window.navigator.language || 'en').split('-')[0]
 
 export const defaultState = {
   colors: {},
+  theme: undefined,
+  customTheme: undefined,
+  customThemeSource: undefined,
   hideISP: false,
   // bad name: actually hides posts of muted USERS
   hideMutedPosts: undefined, // instance default
@@ -93,10 +96,10 @@ const config = {
       commit('setOption', { name, value })
       switch (name) {
         case 'theme':
-          setPreset(value, commit)
+          setPreset(value)
           break
         case 'customTheme':
-          applyTheme(value, commit)
+          applyTheme(value)
       }
     }
   }
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 625323b9..8781646d 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -1,5 +1,5 @@
 import { set } from 'vue'
-import { setPreset } from '../services/style_setter/style_setter.js'
+import { getPreset, applyTheme } from '../services/style_setter/style_setter.js'
 import { instanceDefaultProperties } from './config.js'
 
 const defaultState = {
@@ -10,6 +10,7 @@ const defaultState = {
   textlimit: 5000,
   server: 'http://localhost:4040/',
   theme: 'pleroma-dark',
+  themeData: undefined,
   background: '/static/aurora_borealis.jpg',
   logo: '/static/logo.png',
   logoMask: true,
@@ -96,6 +97,9 @@ const instance = {
             dispatch('initializeSocket')
           }
           break
+        case 'theme':
+          dispatch('setTheme', value)
+          break
       }
     },
     async getStaticEmoji ({ commit }) {
@@ -147,9 +151,16 @@ const instance = {
       }
     },
 
-    setTheme ({ commit }, themeName) {
+    setTheme ({ commit, rootState }, themeName) {
       commit('setInstanceOption', { name: 'theme', value: themeName })
-      return setPreset(themeName, commit)
+      getPreset(themeName)
+        .then(themeData => {
+          commit('setInstanceOption', { name: 'themeData', value: themeData })
+          // No need to apply theme if there's user theme already
+          const { customTheme } = rootState.config
+          if (customTheme) return
+          applyTheme(themeData.theme)
+        })
     },
     fetchEmoji ({ dispatch, state }) {
       if (!state.customEmojiFetched) {
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index ee264c49..9610d799 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -7,7 +7,7 @@ import { getColors, computeDynamicColor } from '../theme_data/theme_data.service
 // styles that aren't just colors, so user can pick from a few different distinct
 // styles as well as set their own colors in the future.
 
-export const setStyle = (href, commit) => {
+export const setStyle = (href) => {
   /***
       What's going on here?
       I want to make it easy for admins to style this application. To have
@@ -53,8 +53,8 @@ export const setStyle = (href, commit) => {
   cssEl.addEventListener('load', setDynamic)
 }
 
-export const applyTheme = (input, commit) => {
-  const { rules, theme } = generatePreset(input)
+export const applyTheme = (input) => {
+  const { rules } = generatePreset(input)
   const head = document.head
   const body = document.body
   body.classList.add('hidden')
@@ -69,11 +69,6 @@ export const applyTheme = (input, commit) => {
   styleSheet.insertRule(`body { ${rules.shadows} }`, 'index-max')
   styleSheet.insertRule(`body { ${rules.fonts} }`, 'index-max')
   body.classList.remove('hidden')
-
-  // commit('setOption', { name: 'colors', value: htmlColors })
-  // commit('setOption', { name: 'radii', value: radii })
-  commit('setOption', { name: 'customTheme', value: input })
-  commit('setOption', { name: 'colors', value: theme.colors })
 }
 
 export const getCssShadow = (input, usesDropShadow) => {
@@ -387,7 +382,7 @@ export const getThemes = () => {
  */
 export const shadows2to3 = (shadows) => {
   return Object.entries(shadows).reduce((shadowsAcc, [slotName, shadowDefs]) => {
-    const isDynamic = ({ color }) => console.log(color) || color.startsWith('--')
+    const isDynamic = ({ color }) => color.startsWith('--')
     const newShadow = shadowDefs.reduce((shadowAcc, def) => [
       ...shadowAcc,
       {
@@ -399,7 +394,7 @@ export const shadows2to3 = (shadows) => {
   }, {})
 }
 
-export const setPreset = (val, commit) => {
+export const getPreset = (val) => {
   return getThemes()
     .then((themes) => themes[val] ? themes[val] : themes['pleroma-dark'])
     .then((theme) => {
@@ -420,14 +415,8 @@ export const setPreset = (val, commit) => {
         data.colors = { bg, fg, text, link, cRed, cBlue, cGreen, cOrange }
       }
 
-      // This is a hack, this function is only called during initial load.
-      // We want to cancel loading the theme from config.json if we're already
-      // loading a theme from the persisted state.
-      // Needed some way of dealing with the async way of things.
-      // load config -> set preset -> wait for styles.json to load ->
-      // load persisted state -> set colors -> styles.json loaded -> set colors
-      if (!window.themeLoaded) {
-        applyTheme(data, commit)
-      }
+      return { theme: data, source: theme.source }
     })
 }
+
+export const setPreset = (val) => getPreset(val).then(data => applyTheme(data.theme))
-- 
cgit v1.2.3-70-g09d2


From 1191207aa5a32627e54f7febcd279d50d03c66b3 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 22 Jan 2020 00:53:51 +0200
Subject: more help strings

---
 src/components/style_switcher/style_switcher.js | 18 ++++++++++++------
 src/i18n/en.json                                |  8 ++++++--
 2 files changed, 18 insertions(+), 8 deletions(-)

(limited to 'src/components')

diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index 0ef02f39..8f0de067 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -166,15 +166,21 @@ export default {
         }
         // Admin downgraded FE
         if (themeEngineVersion > CURRENT_VERSION) {
-          return noActionsPossible
-            ? 'downgraded_theme'
-            : 'downgraded_theme_missing_snapshot'
+          return t(pre + 'fe_downgraded') + ' ' +
+            (
+              noActionsPossible
+                ? t(pre + 'migration_snapshot_ok')
+                : t(pre + 'migration_snapshot_gone')
+            )
         }
         // Admin upgraded FE
         if (themeEngineVersion < CURRENT_VERSION) {
-          return noActionsPossible
-            ? 'upgraded_theme'
-            : 'upgraded_theme_missing_snapshot'
+          return t(pre + 'fe_upgraded') + ' ' +
+            (
+              noActionsPossible
+                ? t(pre + 'migration_snapshot_ok')
+                : t(pre + 'migration_snapshot_gone')
+            )
         }
       }
     },
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 6994d62f..d53fa697 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -400,10 +400,14 @@
         "use_snapshot": "Keep as is",
         "help": {
           "v2_imported": "File you imported was made for older FE. We try to maximize compatibility but there still could be inconsitencies.",
+          "future_version_imported": "File you imported was made in newer version of FE.",
+          "older_version_imported": "File you imported was made in older version of FE.",
           "snapshot_present": "Theme snapshot is loaded, so all values are overriden. You can load theme's actual data instead.",
           "snapshot_missing": "No theme snapshot was in the file so it could look different than originally envisioned.",
-          "future_version_imported": "File you imported was made in newer version of FE.",
-          "older_version_imported": "File you imported was made in older version of FE."
+          "fe_upgraded": "PleromaFE's theme engine upgraded after version update.",
+          "fe_downgraded": "PleromaFE's version rolled back.",
+          "migration_snapshot_ok": "Just to be safe, theme snapshot loaded. You can try loading theme data.",
+          "migration_napshot_gone": "For whatever reason snapshot was missing, some stuff could look different than you remember."
         }
       },
       "common": {
-- 
cgit v1.2.3-70-g09d2


From 803edcb53a664382f9db9a00ccebe8efee1873ef Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 22 Jan 2020 01:28:05 +0200
Subject: dismiss warning when loading theme

---
 src/components/style_switcher/style_switcher.js | 3 ++-
 src/i18n/en.json                                | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

(limited to 'src/components')

diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index 8f0de067..44e7595d 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -162,7 +162,7 @@ export default {
       } else if (origin === 'localStorage') {
         // FE upgraded from v2
         if (themeEngineVersion === 2) {
-          return 'upgraded_from_v2'
+          return t(pre + 'upgraded_from_v2')
         }
         // Admin downgraded FE
         if (themeEngineVersion > CURRENT_VERSION) {
@@ -426,6 +426,7 @@ export default {
           this.onImport(this.tempImportFile, true)
           break
       }
+      this.dismissWarning()
     },
     loadThemeFromLocalStorage (confirmLoadSource = false) {
       const {
diff --git a/src/i18n/en.json b/src/i18n/en.json
index d53fa697..815c11b1 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -399,6 +399,7 @@
         "load_theme": "Load theme",
         "use_snapshot": "Keep as is",
         "help": {
+          "upgraded_from_v2": "PleromaFE has been upgraded, theme could look a little bit different than you remember.",
           "v2_imported": "File you imported was made for older FE. We try to maximize compatibility but there still could be inconsitencies.",
           "future_version_imported": "File you imported was made in newer version of FE.",
           "older_version_imported": "File you imported was made in older version of FE.",
-- 
cgit v1.2.3-70-g09d2


From 644ce497a0f118b2e5050a2e45b67450915c53f0 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 22 Jan 2020 01:28:46 +0200
Subject: lightBg -> highlight because it causes issues with v2

---
 src/components/style_switcher/style_switcher.vue | 24 +++++-----
 src/i18n/en.json                                 |  2 +-
 src/services/theme_data/theme_data.service.js    | 60 ++++++++++++------------
 static/themes/breezy-dark.json                   |  2 +-
 static/themes/breezy-light.json                  |  2 +-
 static/themes/redmond-xx-se.json                 |  2 +-
 static/themes/redmond-xx.json                    |  2 +-
 static/themes/redmond-xxi.json                   |  2 +-
 8 files changed, 48 insertions(+), 48 deletions(-)

(limited to 'src/components')

diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index 61f8800a..79c2fcd3 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -518,27 +518,27 @@
             />
           </div>
           <div class="color-item">
-            <h4>{{ $t('settings.style.advanced_colors.lightBg') }}</h4>
+            <h4>{{ $t('settings.style.advanced_colors.highlight') }}</h4>
             <ColorInput
-              v-model="lightBgColorLocal"
-              name="lightBg"
+              v-model="highlightColorLocal"
+              name="highlight"
               :label="$t('settings.background')"
-              :fallback="previewTheme.colors.lightBg"
+              :fallback="previewTheme.colors.highlight"
             />
             <ColorInput
-              v-model="lightBgTextColorLocal"
-              name="lightBgText"
+              v-model="highlightTextColorLocal"
+              name="highlightText"
               :label="$t('settings.text')"
-              :fallback="previewTheme.colors.lightBgText"
+              :fallback="previewTheme.colors.highlightText"
             />
-            <ContrastRatio :contrast="previewContrast.lightBgText" />
+            <ContrastRatio :contrast="previewContrast.highlightText" />
             <ColorInput
-              v-model="lightBgLinkColorLocal"
-              name="lightBgLink"
+              v-model="highlightLinkColorLocal"
+              name="highlightLink"
               :label="$t('settings.links')"
-              :fallback="previewTheme.colors.lightBgLink"
+              :fallback="previewTheme.colors.highlightLink"
             />
-            <ContrastRatio :contrast="previewContrast.lightBgLink" />
+            <ContrastRatio :contrast="previewContrast.highlightLink" />
           </div>
           <div class="color-item">
             <h4>{{ $t('settings.style.advanced_colors.selectedPost') }}</h4>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 815c11b1..2622157a 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -449,7 +449,7 @@
         "underlay": "Underlay",
         "poll": "Poll graph",
         "icons": "Icons",
-        "lightBg": "Highlighted elements",
+        "highlight": "Highlighted elements",
         "pressed": "Pressed",
         "selectedPost": "Selected post",
         "selectedMenu": "Selected menu item",
diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
index 63bfb5af..8c114004 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@@ -47,7 +47,7 @@ export const LAYERS = {
   badge: null, //  no transparency support
   fg: null,
   bg: 'underlay',
-  lightBg: 'bg',
+  highlight: 'bg',
   panel: 'bg',
   btn: 'bg',
   btnPanel: 'panel',
@@ -148,57 +148,57 @@ export const SLOT_INHERITANCE = {
   cGreen: '#00FF00',
   cOrange: '#E3FF00',
 
-  lightBg: {
+  highlight: {
     depends: ['bg'],
     color: (mod, bg) => brightness(5 * mod, bg).rgb
   },
-  lightBgFaintText: {
+  highlightFaintText: {
     depends: ['faint'],
-    layer: 'lightBg',
+    layer: 'highlight',
     textColor: true
   },
-  lightBgFaintLink: {
+  highlightFaintLink: {
     depends: ['faintLink'],
-    layer: 'lightBg',
+    layer: 'highlight',
     textColor: 'preserve'
   },
-  lightBgText: {
+  highlightText: {
     depends: ['text'],
-    layer: 'lightBg',
+    layer: 'highlight',
     textColor: true
   },
-  lightBgLink: {
+  highlightLink: {
     depends: ['link'],
-    layer: 'lightBg',
+    layer: 'highlight',
     textColor: 'preserve'
   },
-  lightBgIcon: {
-    depends: ['lightBg', 'lightBgText'],
+  highlightIcon: {
+    depends: ['highlight', 'highlightText'],
     color: (mod, bg, text) => mixrgb(bg, text)
   },
 
-  selectedPost: '--lightBg',
+  selectedPost: '--highlight',
   selectedPostFaintText: {
-    depends: ['lightBgFaintText'],
-    layer: 'lightBg',
+    depends: ['highlightFaintText'],
+    layer: 'highlight',
     variant: 'selectedPost',
     textColor: true
   },
   selectedPostFaintLink: {
-    depends: ['lightBgFaintLink'],
-    layer: 'lightBg',
+    depends: ['highlightFaintLink'],
+    layer: 'highlight',
     variant: 'selectedPost',
     textColor: 'preserve'
   },
   selectedPostText: {
-    depends: ['lightBgText'],
-    layer: 'lightBg',
+    depends: ['highlightText'],
+    layer: 'highlight',
     variant: 'selectedPost',
     textColor: true
   },
   selectedPostLink: {
-    depends: ['lightBgLink'],
-    layer: 'lightBg',
+    depends: ['highlightLink'],
+    layer: 'highlight',
     variant: 'selectedPost',
     textColor: 'preserve'
   },
@@ -207,28 +207,28 @@ export const SLOT_INHERITANCE = {
     color: (mod, bg, text) => mixrgb(bg, text)
   },
 
-  selectedMenu: '--lightBg',
+  selectedMenu: '--highlight',
   selectedMenuFaintText: {
-    depends: ['lightBgFaintText'],
-    layer: 'lightBg',
+    depends: ['highlightFaintText'],
+    layer: 'highlight',
     variant: 'selectedMenu',
     textColor: true
   },
   selectedMenuFaintLink: {
-    depends: ['lightBgFaintLink'],
-    layer: 'lightBg',
+    depends: ['highlightFaintLink'],
+    layer: 'highlight',
     variant: 'selectedMenu',
     textColor: 'preserve'
   },
   selectedMenuText: {
-    depends: ['lightBgText'],
-    layer: 'lightBg',
+    depends: ['highlightText'],
+    layer: 'highlight',
     variant: 'selectedMenu',
     textColor: true
   },
   selectedMenuLink: {
-    depends: ['lightBgLink'],
-    layer: 'lightBg',
+    depends: ['highlightLink'],
+    layer: 'highlight',
     variant: 'selectedMenu',
     textColor: 'preserve'
   },
diff --git a/static/themes/breezy-dark.json b/static/themes/breezy-dark.json
index 3aafda52..c3bdcf65 100644
--- a/static/themes/breezy-dark.json
+++ b/static/themes/breezy-dark.json
@@ -114,7 +114,7 @@
       "cGreen": "#27ae60",
       "cOrange": "#f67400",
       "btnPressed": "--accent",
-      "lightBg": "--accent",
+      "highlight": "--accent",
       "selectedPost": "--bg,10"
     },
     "radii": {
diff --git a/static/themes/breezy-light.json b/static/themes/breezy-light.json
index df6e1a66..478407c9 100644
--- a/static/themes/breezy-light.json
+++ b/static/themes/breezy-light.json
@@ -117,7 +117,7 @@
       "cGreen": "#27ae60",
       "cOrange": "#f67400",
       "btnPressed": "--accent",
-      "lightBg": "--accent",
+      "highlight": "--accent",
       "selectedPost": "--bg,10"
     },
     "radii": {
diff --git a/static/themes/redmond-xx-se.json b/static/themes/redmond-xx-se.json
index 13ed3b0e..1a867fcc 100644
--- a/static/themes/redmond-xx-se.json
+++ b/static/themes/redmond-xx-se.json
@@ -283,7 +283,7 @@
       "cBlue": "#008080",
       "cGreen": "#008000",
       "cOrange": "#808000",
-      "lightBg": "--accent",
+      "highlight": "--accent",
       "selectedPost": "--bg,-10"
     },
     "radii": {
diff --git a/static/themes/redmond-xx.json b/static/themes/redmond-xx.json
index 7c687ae0..78c92f10 100644
--- a/static/themes/redmond-xx.json
+++ b/static/themes/redmond-xx.json
@@ -274,7 +274,7 @@
       "cBlue": "#008080",
       "cGreen": "#008000",
       "cOrange": "#808000",
-      "lightBg": "--accent",
+      "highlight": "--accent",
       "selectedPost": "--bg,-10"
     },
     "radii": {
diff --git a/static/themes/redmond-xxi.json b/static/themes/redmond-xxi.json
index 5371ee64..28f68351 100644
--- a/static/themes/redmond-xxi.json
+++ b/static/themes/redmond-xxi.json
@@ -256,7 +256,7 @@
       "cBlue": "#6699cc",
       "cGreen": "#669966",
       "cOrange": "#cc6633",
-      "lightBg": "--accent",
+      "highlight": "--accent",
       "selectedPost": "--bg,-10"
     },
     "radii": {
-- 
cgit v1.2.3-70-g09d2


From c1e3632f4245800df45c1585ff39c97f5377200b Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 22 Jan 2020 02:15:47 +0200
Subject: fix shadows not being valid from the get-go

---
 src/components/style_switcher/style_switcher.js | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'src/components')

diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index 44e7595d..195c6b35 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -664,8 +664,10 @@ export default {
       try {
         this.updatePreviewColorsAndShadows()
         this.colorsInvalid = false
+        this.shadowsInvalid = false
       } catch (e) {
         this.colorsInvalid = true
+        this.shadowsInvalid = true
         console.warn(e)
       }
     },
-- 
cgit v1.2.3-70-g09d2


From d98e31af458ed42e678072879265267e8148c627 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 22 Jan 2020 02:44:39 +0200
Subject: snapshot/source mismatch case

---
 src/components/style_switcher/style_switcher.js  | 53 +++++++++++++++++++++---
 src/components/style_switcher/style_switcher.vue | 18 +++++++-
 src/i18n/en.json                                 |  7 +++-
 3 files changed, 68 insertions(+), 10 deletions(-)

(limited to 'src/components')

diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index 195c6b35..3b538ac7 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -160,6 +160,9 @@ export default {
             )
         }
       } else if (origin === 'localStorage') {
+        if (type === 'snapshot_source_mismatch') {
+          return t(pre + 'snapshot_source_mismatch')
+        }
         // FE upgraded from v2
         if (themeEngineVersion === 2) {
           return t(pre + 'upgraded_from_v2')
@@ -345,7 +348,10 @@ export default {
         source.radii = this.currentRadii
       }
 
-      const theme = this.previewTheme
+      const theme = {
+        themeEngineVersion: CURRENT_VERSION,
+        ...this.previewTheme
+      }
 
       return {
         // To separate from other random JSON files and possible future source formats
@@ -381,17 +387,34 @@ export default {
       const version = (origin === 'localstorage' && !theme.colors)
         ? 'l1'
         : fileVersion
+      const snapshotEngineVersion = (theme || {}).themeEngineVersion
       const themeEngineVersion = (source || {}).themeEngineVersion || 2
       const versionsMatch = themeEngineVersion === CURRENT_VERSION
+      console.log(
+        theme !== undefined,
+        source !== undefined,
+        themeEngineVersion !== snapshotEngineVersion
+      )
+      const sourceSnapshotMismatch = (
+        theme !== undefined &&
+          source !== undefined &&
+          themeEngineVersion !== snapshotEngineVersion
+      )
       // Force loading of source if user requested it or if snapshot
       // is unavailable
       const forcedSourceLoad = (source && forceUseSource) || !theme
-      if (!versionsMatch &&
+      if (!(versionsMatch && !sourceSnapshotMismatch) &&
           !forcedSourceLoad &&
           version !== 'l1' &&
           origin !== 'defaults'
       ) {
-        if (!theme) {
+        if (sourceSnapshotMismatch) {
+          this.themeWarning = {
+            origin,
+            themeEngineVersion,
+            type: 'snapshot_source_mismatch'
+          }
+        } else if (!theme) {
           this.themeWarning = {
             origin,
             noActionsPossible: true,
@@ -428,7 +451,19 @@ export default {
       }
       this.dismissWarning()
     },
-    loadThemeFromLocalStorage (confirmLoadSource = false) {
+    forceSnapshot() {
+      const { origin } = this.themeWarning
+      switch (origin) {
+        case 'localstorage':
+          this.loadThemeFromLocalStorage(false, true)
+          break
+        case 'file':
+          console.err('Forcing snapshout from file is not supported yet')
+          break
+      }
+      this.dismissWarning()
+    },
+    loadThemeFromLocalStorage (confirmLoadSource = false, forceSnapshot = false) {
       const {
         customTheme: theme,
         customThemeSource: source
@@ -442,7 +477,10 @@ export default {
         )
       } else {
         this.loadTheme(
-          { theme, source },
+          {
+            theme,
+            source: forceSnapshot ? theme : source
+          },
           'localStorage',
           confirmLoadSource
         )
@@ -451,7 +489,10 @@ export default {
     setCustomTheme () {
       this.$store.dispatch('setOption', {
         name: 'customTheme',
-        value: this.previewTheme
+        value: {
+          themeEngineVersion: CURRENT_VERSION,
+          ...this.previewTheme
+        }
       })
       this.$store.dispatch('setOption', {
         name: 'customThemeSource',
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index 79c2fcd3..793d68f1 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -7,7 +7,21 @@
         {{ themeWarningHelp }}
         </div>
         <div class="buttons">
-          <template v-if="themeWarning.noActionsPossible">
+          <template v-if="themeWarning.type === 'snapshot_source_mismatch'">
+            <button
+              class="btn"
+              @click="forceLoad"
+            >
+              {{ $t('settings.style.switcher.use_source') }}
+            </button>
+            <button
+              class="btn"
+              @click="dismissWarning"
+            >
+              {{ $t('settings.style.switcher.use_snapshot') }}
+            </button>
+          </template>
+          <template v-else-if="themeWarning.noActionsPossible">
             <button
               class="btn"
               @click="dismissWarning"
@@ -26,7 +40,7 @@
               class="btn"
               @click="dismissWarning"
             >
-              {{ $t('settings.style.switcher.use_snapshot') }}
+              {{ $t('settings.style.switcher.keep_as_is') }}
             </button>
           </template>
         </div>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 2622157a..81dde663 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -397,7 +397,9 @@
         "clear_all": "Clear all",
         "clear_opacity": "Clear opacity",
         "load_theme": "Load theme",
-        "use_snapshot": "Keep as is",
+        "keep_as_is": "Keep as is",
+        "use_snapshot": "Old version",
+        "use_source": "New version",
         "help": {
           "upgraded_from_v2": "PleromaFE has been upgraded, theme could look a little bit different than you remember.",
           "v2_imported": "File you imported was made for older FE. We try to maximize compatibility but there still could be inconsitencies.",
@@ -408,7 +410,8 @@
           "fe_upgraded": "PleromaFE's theme engine upgraded after version update.",
           "fe_downgraded": "PleromaFE's version rolled back.",
           "migration_snapshot_ok": "Just to be safe, theme snapshot loaded. You can try loading theme data.",
-          "migration_napshot_gone": "For whatever reason snapshot was missing, some stuff could look different than you remember."
+          "migration_napshot_gone": "For whatever reason snapshot was missing, some stuff could look different than you remember.",
+          "snapshot_source_mismatch": "Versions conflict: most likely FE was rolled back and updated again, if you changed theme using older version of FE you most likely want to use old version, otherwise use new version."
         }
       },
       "common": {
-- 
cgit v1.2.3-70-g09d2


From c7f42b7799d4a0484f7d40ac0a7377021caf9cb6 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 22 Jan 2020 02:53:40 +0200
Subject: made it actually work, the forceSnapshot

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

(limited to 'src/components')

diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index 3b538ac7..27df0d10 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -390,11 +390,6 @@ export default {
       const snapshotEngineVersion = (theme || {}).themeEngineVersion
       const themeEngineVersion = (source || {}).themeEngineVersion || 2
       const versionsMatch = themeEngineVersion === CURRENT_VERSION
-      console.log(
-        theme !== undefined,
-        source !== undefined,
-        themeEngineVersion !== snapshotEngineVersion
-      )
       const sourceSnapshotMismatch = (
         theme !== undefined &&
           source !== undefined &&
@@ -442,7 +437,7 @@ export default {
     forceLoad () {
       const { origin } = this.themeWarning
       switch (origin) {
-        case 'localstorage':
+        case 'localStorage':
           this.loadThemeFromLocalStorage(true)
           break
         case 'file':
@@ -451,10 +446,10 @@ export default {
       }
       this.dismissWarning()
     },
-    forceSnapshot() {
+    forceSnapshot () {
       const { origin } = this.themeWarning
       switch (origin) {
-        case 'localstorage':
+        case 'localStorage':
           this.loadThemeFromLocalStorage(false, true)
           break
         case 'file':
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index 793d68f1..ff7f4710 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -16,7 +16,7 @@
             </button>
             <button
               class="btn"
-              @click="dismissWarning"
+              @click="forceSnapshot"
             >
               {{ $t('settings.style.switcher.use_snapshot') }}
             </button>
-- 
cgit v1.2.3-70-g09d2


From 8de7eabd8fdfc9f97fb262552f0cca9fd6da95eb Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 22 Jan 2020 23:26:24 +0200
Subject: v2 compatibility fixes

---
 src/boot/after_store.js                         |  2 +-
 src/components/style_switcher/style_switcher.js |  7 +++-
 src/services/color_convert/color_convert.js     |  5 +--
 src/services/style_setter/style_setter.js       | 49 ++++++++++++++++++++++++-
 src/services/theme_data/theme_data.service.js   | 12 +++---
 5 files changed, 62 insertions(+), 13 deletions(-)

(limited to 'src/components')

diff --git a/src/boot/after_store.js b/src/boot/after_store.js
index 6c4f0e1b..f61e9252 100644
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@@ -280,7 +280,7 @@ const afterStoreSetup = async ({ store, i18n }) => {
   const customThemePresent = customThemeSource || customTheme
 
   if (customThemePresent) {
-    if (customThemeSource && customThemeSource.version === CURRENT_VERSION) {
+    if (customThemeSource && customThemeSource.themeEngineVersion === CURRENT_VERSION) {
       applyTheme(customThemeSource)
     } else {
       applyTheme(customTheme)
diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index 27df0d10..76e6cdb7 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -12,7 +12,8 @@ import {
   generateFonts,
   composePreset,
   getThemes,
-  shadows2to3
+  shadows2to3,
+  colors2to3
 } from '../../services/style_setter/style_setter.js'
 import {
   CURRENT_VERSION,
@@ -588,7 +589,9 @@ export default {
       const opacity = input.opacity
       const shadows = input.shadows || {}
       const fonts = input.fonts || {}
-      const colors = input.colors || input
+      const colors = !input.themeEngineVersion
+        ? colors2to3(input.colors)
+        : input.colors || input
 
       if (version === 0) {
         if (input.version) version = input.version
diff --git a/src/services/color_convert/color_convert.js b/src/services/color_convert/color_convert.js
index 6b228a58..93cb1ba6 100644
--- a/src/services/color_convert/color_convert.js
+++ b/src/services/color_convert/color_convert.js
@@ -185,10 +185,9 @@ export const rgba2css = function (rgba) {
  * @param {Boolean} preserve - try to preserve intended text color's hue/saturation (i.e. no BW)
  */
 export const getTextColor = function (bg, text, preserve) {
-  const bgIsLight = relativeLuminance(bg) > 0.5
-  const textIsLight = relativeLuminance(text) > 0.5
+  const contrast = getContrastRatio(bg, text)
 
-  if ((bgIsLight && textIsLight) || (!bgIsLight && !textIsLight)) {
+  if (contrast < 4.5) {
     const base = typeof text.a !== 'undefined' ? { a: text.a } : {}
     const result = Object.assign(base, invertLightness(text).rgb)
     if (!preserve && getContrastRatio(bg, result) < 4.5) {
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 9610d799..b43eb0dd 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -110,7 +110,9 @@ const getCssShadowFilter = (input) => {
 }
 
 export const generateColors = (themeData) => {
-  const sourceColors = themeData.colors || themeData
+  const sourceColors = !themeData.themeEngineVersion
+    ? colors2to3(themeData.colors)
+    : themeData.colors || themeData
 
   const isLightOnDark = convert(sourceColors.bg).hsl.l < convert(sourceColors.text).hsl.l
   const mod = isLightOnDark ? 1 : -1
@@ -283,9 +285,12 @@ export const DEFAULT_SHADOWS = {
   }]
 }
 export const generateShadows = (input, colors, mod) => {
+  const inputShadows = !input.themeEngineVersion
+    ? shadows2to3(input.shadows)
+    : input.shadows || {}
   const shadows = Object.entries({
     ...DEFAULT_SHADOWS,
-    ...(input.shadows || {})
+    ...inputShadows
   }).reduce((shadowsAcc, [slotName, shadowDefs]) => {
     const newShadow = shadowDefs.reduce((shadowAcc, def) => [
       ...shadowAcc,
@@ -374,6 +379,46 @@ export const getThemes = () => {
         }, {})
     })
 }
+export const colors2to3 = (colors) => {
+  return Object.entries(colors).reduce((acc, [slotName, color]) => {
+    const btnStates = ['', 'Pressed', 'Disabled', 'Toggled']
+    const btnPositions = ['', 'Panel', 'TopBar']
+    switch (slotName) {
+      case 'lightBg':
+        return { ...acc, highlight: color }
+      case 'btn':
+        return {
+          ...acc,
+          ...btnStates.reduce((stateAcc, state) => ({ ...stateAcc, ['btn' + state]: color }), {})
+        }
+      case 'btnText':
+        console.log(
+          btnPositions
+            .map(position => btnStates.map(state => state + position))
+            .flat()
+            .reduce(
+              (statePositionAcc, statePosition) =>
+                ({ ...statePositionAcc, ['btn' + statePosition + 'Text']: color })
+              , {}
+            )
+        )
+        return {
+          ...acc,
+          ...btnPositions
+            .map(position => btnStates.map(state => state + position))
+            .flat()
+            .reduce(
+              (statePositionAcc, statePosition) =>
+                ({ ...statePositionAcc, ['btn' + statePosition + 'Text']: color })
+              , {}
+            )
+        }
+      default:
+        console.log('aaa', slotName, color, acc)
+        return { ...acc, [slotName]: color }
+    }
+  }, {})
+}
 
 /**
  * This handles compatibility issues when importing v2 theme's shadows to current format
diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
index 8c114004..2cae85de 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@@ -283,12 +283,12 @@ export const SLOT_INHERITANCE = {
     opacity: 'panel'
   },
   panelText: {
-    depends: ['fgText'],
+    depends: ['text'],
     layer: 'panel',
     textColor: true
   },
   panelFaint: {
-    depends: ['fgText'],
+    depends: ['text'],
     layer: 'panel',
     opacity: 'faint',
     textColor: true
@@ -302,7 +302,7 @@ export const SLOT_INHERITANCE = {
   // Top bar
   topBar: '--fg',
   topBarText: {
-    depends: ['fgText'],
+    depends: ['text'],
     layer: 'topBar',
     textColor: true
   },
@@ -313,7 +313,9 @@ export const SLOT_INHERITANCE = {
   },
 
   // Tabs
-  tab: '--btn',
+  tab: {
+    depends: ['btn']
+  },
   tabText: {
     depends: ['btnText'],
     layer: 'btn',
@@ -331,7 +333,7 @@ export const SLOT_INHERITANCE = {
     opacity: 'btn'
   },
   btnText: {
-    depends: ['fgText'],
+    depends: ['text'],
     layer: 'btn',
     textColor: true
   },
-- 
cgit v1.2.3-70-g09d2


From 7354b6f7062def8bd1ac0a0e457cd05256eba0d5 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 23 Jan 2020 00:35:56 +0200
Subject: fixed get(Layer|Opacity)Slot not working properly which broke Mojave
 theme

---
 src/components/style_switcher/style_switcher.js |  2 +-
 src/services/style_setter/style_setter.js       | 11 -----
 src/services/theme_data/theme_data.service.js   | 60 ++++++++++++-------------
 3 files changed, 30 insertions(+), 43 deletions(-)

(limited to 'src/components')

diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index 76e6cdb7..06ef71a7 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -246,7 +246,7 @@ export default {
           if (!slotIsText) return acc
           const { layer, variant } = slotIsBaseText ? { layer: 'bg' } : value
           const background = variant || layer
-          const opacitySlot = getOpacitySlot(SLOT_INHERITANCE[background])
+          const opacitySlot = getOpacitySlot(background)
           const textColors = [
             key,
             ...(background === 'bg' ? ['cRed', 'cGreen', 'cBlue', 'cOrange'] : [])
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index b43eb0dd..7f9f17be 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -392,16 +392,6 @@ export const colors2to3 = (colors) => {
           ...btnStates.reduce((stateAcc, state) => ({ ...stateAcc, ['btn' + state]: color }), {})
         }
       case 'btnText':
-        console.log(
-          btnPositions
-            .map(position => btnStates.map(state => state + position))
-            .flat()
-            .reduce(
-              (statePositionAcc, statePosition) =>
-                ({ ...statePositionAcc, ['btn' + statePosition + 'Text']: color })
-              , {}
-            )
-        )
         return {
           ...acc,
           ...btnPositions
@@ -414,7 +404,6 @@ export const colors2to3 = (colors) => {
             )
         }
       default:
-        console.log('aaa', slotName, color, acc)
         return { ...acc, [slotName]: color }
     }
   }, {})
diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
index 2cae85de..5e49fa17 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@@ -591,38 +591,41 @@ export const topoSort = (
   })
 }
 
+const expandSlotValue = (value) => {
+  if (typeof value === 'object') return value
+  return {
+    depends: value.startsWith('--') ? [value.substring(2)] : [],
+    default: value.startsWith('#') ? value : undefined
+  }
+}
 /**
  * retrieves opacity slot for given slot. This goes up the depenency graph
  * to find which parent has opacity slot defined for it.
  * TODO refactor this
  */
 export const getOpacitySlot = (
-  v,
+  k,
   inheritance = SLOT_INHERITANCE,
   getDeps = getDependencies
 ) => {
-  const value = typeof v === 'string'
-    ? {
-      depends: v.startsWith('--') ? [v.substring(2)] : []
-    }
-    : v
+  const value = expandSlotValue(inheritance[k])
   if (value.opacity === null) return
-  if (value.opacity) return v.opacity
-  const findInheritedOpacity = (val) => {
-    const depSlot = val.depends[0]
+  if (value.opacity) return value.opacity
+  const findInheritedOpacity = (key, visited = [k]) => {
+    const depSlot = getDeps(key, inheritance)[0]
     if (depSlot === undefined) return
-    const dependency = getDeps(depSlot, inheritance)[0]
+    const dependency = inheritance[depSlot]
     if (dependency === undefined) return
     if (dependency.opacity || dependency === null) {
       return dependency.opacity
-    } else if (dependency.depends) {
-      return findInheritedOpacity(dependency)
+    } else if (dependency.depends && visited.includes(depSlot)) {
+      return findInheritedOpacity(depSlot, [...visited, depSlot])
     } else {
       return null
     }
   }
   if (value.depends) {
-    return findInheritedOpacity(value)
+    return findInheritedOpacity(k)
   }
 }
 
@@ -635,33 +638,28 @@ export const getOpacitySlot = (
  */
 export const getLayerSlot = (
   k,
-  v,
   inheritance = SLOT_INHERITANCE,
   getDeps = getDependencies
 ) => {
-  const value = typeof v === 'string'
-    ? {
-      depends: v.startsWith('--') ? [v.substring(2)] : []
-    }
-    : v
+  const value = expandSlotValue(inheritance[k])
   if (LAYERS[k]) return k
   if (value.layer === null) return
-  if (value.layer) return v.layer
-  const findInheritedLayer = (val) => {
-    const depSlot = val.depends[0]
+  if (value.layer) return value.layer
+  const findInheritedLayer = (key, visited = [k]) => {
+    const depSlot = getDeps(key, inheritance)[0]
     if (depSlot === undefined) return
-    const dependency = getDeps(depSlot, inheritance)[0]
+    const dependency = inheritance[depSlot]
     if (dependency === undefined) return
     if (dependency.layer || dependency === null) {
       return dependency.layer
     } else if (dependency.depends) {
-      return findInheritedLayer(dependency)
+      return findInheritedLayer(dependency, [...visited, depSlot])
     } else {
       return null
     }
   }
   if (value.depends) {
-    return findInheritedLayer(value)
+    return findInheritedLayer(k)
   }
 }
 
@@ -679,7 +677,7 @@ export const SLOT_ORDERED = topoSort(
  * with them
  */
 export const SLOTS_OPACITIES_DICT = Object.entries(SLOT_INHERITANCE).reduce((acc, [k, v]) => {
-  const opacity = getOpacitySlot(v, SLOT_INHERITANCE, getDependencies)
+  const opacity = getOpacitySlot(k, SLOT_INHERITANCE, getDependencies)
   if (opacity) {
     return { ...acc, [k]: opacity }
   } else {
@@ -692,7 +690,7 @@ export const SLOTS_OPACITIES_DICT = Object.entries(SLOT_INHERITANCE).reduce((acc
  * color slots.
  */
 export const OPACITIES = Object.entries(SLOT_INHERITANCE).reduce((acc, [k, v]) => {
-  const opacity = getOpacitySlot(v, SLOT_INHERITANCE, getDependencies)
+  const opacity = getOpacitySlot(k, SLOT_INHERITANCE, getDependencies)
   if (opacity) {
     return {
       ...acc,
@@ -738,9 +736,9 @@ export const getColors = (sourceColors, sourceOpacity, mod) => SLOT_ORDERED.redu
     if (targetColor === 'transparent') {
       // We take only layers below current one
       const layers = getLayers(
-        getLayerSlot(key, value),
+        getLayerSlot(key),
         key,
-        value.opacity || key,
+        getOpacitySlot(key) || key,
         colors,
         opacity
       ).slice(0, -1)
@@ -781,7 +779,7 @@ export const getColors = (sourceColors, sourceOpacity, mod) => SLOT_ORDERED.redu
         getLayers(
           value.layer,
           value.variant || value.layer,
-          getOpacitySlot(SLOT_INHERITANCE[value.variant || value.layer]),
+          getOpacitySlot(value.variant || value.layer),
           colors,
           opacity
         )
@@ -813,7 +811,7 @@ export const getColors = (sourceColors, sourceOpacity, mod) => SLOT_ORDERED.redu
   if (!outputColor) {
     throw new Error('Couldn\'t generate color for ' + key)
   }
-  const opacitySlot = SLOTS_OPACITIES_DICT[key]
+  const opacitySlot = getOpacitySlot(key)
   if (opacitySlot && outputColor.a === undefined) {
     outputColor.a = sourceOpacity[opacitySlot] || OPACITIES[opacitySlot].defaultValue || 1
   }
-- 
cgit v1.2.3-70-g09d2


From 9d8dbd83400bd48006873ff2dae220c0a46c5f2e Mon Sep 17 00:00:00 2001
From: Mark Felder <feld@FreeBSD.org>
Date: Thu, 23 Jan 2020 12:00:50 -0600
Subject: Fix missing TWKN when logged in, but server is set to private mode.

---
 src/components/nav_panel/nav_panel.vue     | 2 +-
 src/components/side_drawer/side_drawer.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/components')

diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 034259d9..0f3296eb 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -33,7 +33,7 @@
             <i class="button-icon icon-users" /> {{ $t("nav.public_tl") }}
           </router-link>
         </li>
-        <li v-if="federating && !privateMode">
+        <li v-if="federating && (currentUser || !privateMode)">
           <router-link :to="{ name: 'public-external-timeline' }">
             <i class="button-icon icon-globe" /> {{ $t("nav.twkn") }}
           </router-link>
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 3fba9058..28637afc 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -88,7 +88,7 @@
           </router-link>
         </li>
         <li
-          v-if="federating && !privateMode"
+          v-if="federating && (currentUser || !privateMode)"
           @click="toggleDrawer"
         >
           <router-link to="/main/all">
-- 
cgit v1.2.3-70-g09d2


From a69723badf45a62cb9f6e0adc09b49ff10c9eaac Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 23 Jan 2020 22:04:05 +0200
Subject: fix snapshot mismatch message for file

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

(limited to 'src/components')

diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index 06ef71a7..59ec1bf5 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -385,7 +385,7 @@ export default {
       if (!source && !theme) {
         throw new Error('Can\'t load theme: empty')
       }
-      const version = (origin === 'localstorage' && !theme.colors)
+      const version = (origin === 'localStorage' && !theme.colors)
         ? 'l1'
         : fileVersion
       const snapshotEngineVersion = (theme || {}).themeEngineVersion
@@ -404,7 +404,7 @@ export default {
           version !== 'l1' &&
           origin !== 'defaults'
       ) {
-        if (sourceSnapshotMismatch) {
+        if (sourceSnapshotMismatch && origin === 'localStorage') {
           this.themeWarning = {
             origin,
             themeEngineVersion,
-- 
cgit v1.2.3-70-g09d2


From c752f56d0b7711e9a815468a19e440363a6dcf02 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 23 Jan 2020 22:26:49 +0200
Subject: v l1 compatibility

---
 src/components/style_switcher/style_switcher.js | 2 +-
 src/services/style_setter/style_setter.js       | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

(limited to 'src/components')

diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index 59ec1bf5..14da4f80 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -590,7 +590,7 @@ export default {
       const shadows = input.shadows || {}
       const fonts = input.fonts || {}
       const colors = !input.themeEngineVersion
-        ? colors2to3(input.colors)
+        ? colors2to3(input.colors || input)
         : input.colors || input
 
       if (version === 0) {
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 7f9f17be..533145d4 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -111,7 +111,7 @@ const getCssShadowFilter = (input) => {
 
 export const generateColors = (themeData) => {
   const sourceColors = !themeData.themeEngineVersion
-    ? colors2to3(themeData.colors)
+    ? colors2to3(themeData.colors || themeData)
     : themeData.colors || themeData
 
   const isLightOnDark = convert(sourceColors.bg).hsl.l < convert(sourceColors.text).hsl.l
@@ -285,7 +285,7 @@ export const DEFAULT_SHADOWS = {
   }]
 }
 export const generateShadows = (input, colors, mod) => {
-  const inputShadows = !input.themeEngineVersion
+  const inputShadows = input.shadows && !input.themeEngineVersion
     ? shadows2to3(input.shadows)
     : input.shadows || {}
   const shadows = Object.entries({
-- 
cgit v1.2.3-70-g09d2


From f85a3e3f6dfb7961a94eb5a9570e0d3dcb8f55e9 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 23 Jan 2020 22:42:59 +0200
Subject: style the dropdown menus better

---
 src/components/popper/popper.scss | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

(limited to 'src/components')

diff --git a/src/components/popper/popper.scss b/src/components/popper/popper.scss
index 06daa871..9c2ce25f 100644
--- a/src/components/popper/popper.scss
+++ b/src/components/popper/popper.scss
@@ -137,11 +137,14 @@
       }
     }
 
-    &:hover {
-      // TODO: improve the look on breeze themes
-      background-color: $fallback--fg;
-      background-color: var(--btn, $fallback--fg);
-      box-shadow: none;
+    &:active, &:hover {
+      background-color: $fallback--lightBg;
+      background-color: var(--selectedMenu, $fallback--lightBg);
+      color: $fallback--link;
+      color: var(--selectedMenuText, $fallback--link);
+      --faint: var(--selectedMenuFaintText, $fallback--faint);
+      --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
+      --icon: var(--selectedMenuIcon, $fallback--icon);
     }
   }
 }
-- 
cgit v1.2.3-70-g09d2


From f7ea12c905d0cf0a9f5e0d1284a7803ef4d7abad Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 23 Jan 2020 23:19:48 +0200
Subject: separate actual theme data from theme framework

---
 src/components/style_switcher/style_switcher.js |   4 +-
 src/services/theme_data/pleromafe.js            | 455 +++++++++++++++++++++++
 src/services/theme_data/theme_data.service.js   | 457 +-----------------------
 3 files changed, 460 insertions(+), 456 deletions(-)
 create mode 100644 src/services/theme_data/pleromafe.js

(limited to 'src/components')

diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index 14da4f80..17ae9f30 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -15,9 +15,11 @@ import {
   shadows2to3,
   colors2to3
 } from '../../services/style_setter/style_setter.js'
+import {
+  SLOT_INHERITANCE
+} from '../../services/theme_data/pleromafe.js'
 import {
   CURRENT_VERSION,
-  SLOT_INHERITANCE,
   OPACITIES,
   getLayers,
   getOpacitySlot
diff --git a/src/services/theme_data/pleromafe.js b/src/services/theme_data/pleromafe.js
new file mode 100644
index 00000000..0deb829f
--- /dev/null
+++ b/src/services/theme_data/pleromafe.js
@@ -0,0 +1,455 @@
+import { brightness } from 'chromatism'
+import { alphaBlend, mixrgb } from '../color_convert/color_convert.js'
+/* This is a definition of all layer combinations
+ * each key is a topmost layer, each value represents layer underneath
+ * this is essentially a simplified tree
+ */
+export const LAYERS = {
+  undelay: null, // root
+  topBar: null, // no transparency support
+  badge: null, //  no transparency support
+  fg: null,
+  bg: 'underlay',
+  highlight: 'bg',
+  panel: 'bg',
+  btn: 'bg',
+  btnPanel: 'panel',
+  btnTopBar: 'topBar',
+  input: 'bg',
+  inputPanel: 'panel',
+  inputTopBar: 'topBar',
+  alert: 'bg',
+  alertPanel: 'panel',
+  poll: 'bg'
+}
+
+/* By default opacity slots have 1 as default opacity
+ * this allows redefining it to something else
+ */
+export const DEFAULT_OPACITY = {
+  alert: 0.5,
+  input: 0.5,
+  faint: 0.5,
+  underlay: 0.15
+}
+
+/**  SUBJECT TO CHANGE IN THE FUTURE, this is all beta
+ * Color and opacity slots definitions. Each key represents a slot.
+ *
+ * Short-hands:
+ * String beginning with `--` - value after dashes treated as sole
+ *     dependency - i.e. `--value` equivalent to { depends: ['value']}
+ * String beginning with `#` - value would be treated as solid color
+ *     defined in hexadecimal representation (i.e. #FFFFFF) and will be
+ *     used as default. `#FFFFFF` is equivalent to { default: '#FFFFFF'}
+ *
+ * Full definition:
+ * @property {String[]} depends - color slot names this color depends ones.
+ *   cyclic dependencies are supported to some extent but not recommended.
+ * @property {String} [opacity] - opacity slot used by this color slot.
+ *   opacity is inherited from parents. To break inheritance graph use null
+ * @property {Number} [priority] - EXPERIMENTAL. used to pre-sort slots so
+ *   that slots with higher priority come earlier
+ * @property {Function(mod, ...colors)} [color] - function that will be
+ *   used to determine the color. By default it just copies first color in
+ *   dependency list.
+ * @argument {Number} mod - `1` (light-on-dark) or `-1` (dark-on-light)
+ *   depending on background color (for textColor)/given color.
+ * @argument {...Object} deps - each argument after mod represents each
+ *   color from `depends` array. All colors take user customizations into
+ *   account and represented by { r, g, b } objects.
+ * @returns {Object} resulting color, should be in { r, g, b } form
+ *
+ * @property {Boolean|String} [textColor] - true to mark color slot as text
+ *   color. This enables automatic text color generation for the slot. Use
+ *   'preserve' string if you don't want text color to fall back to
+ *   black/white. Use 'bw' to only ever use black or white. This also makes
+ *   following properties required:
+ * @property {String} [layer] - which layer the text sit on top on - used
+ *   to account for transparency in text color calculation
+ *   layer is inherited from parents. To break inheritance graph use null
+ * @property {String} [variant] - which color slot is background (same as
+ *   above, used to account for transparency)
+ */
+export const SLOT_INHERITANCE = {
+  bg: {
+    depends: [],
+    opacity: 'bg',
+    priority: 1
+  },
+  fg: {
+    depends: [],
+    priority: 1
+  },
+  text: {
+    depends: [],
+    priority: 1
+  },
+  underlay: {
+    default: '#000000',
+    opacity: 'underlay'
+  },
+  link: {
+    depends: ['accent'],
+    priority: 1
+  },
+  accent: {
+    depends: ['link'],
+    priority: 1
+  },
+  faint: {
+    depends: ['text'],
+    opacity: 'faint'
+  },
+  faintLink: {
+    depends: ['link'],
+    opacity: 'faint'
+  },
+
+  cBlue: '#0000ff',
+  cRed: '#FF0000',
+  cGreen: '#00FF00',
+  cOrange: '#E3FF00',
+
+  highlight: {
+    depends: ['bg'],
+    color: (mod, bg) => brightness(5 * mod, bg).rgb
+  },
+  highlightFaintText: {
+    depends: ['faint'],
+    layer: 'highlight',
+    textColor: true
+  },
+  highlightFaintLink: {
+    depends: ['faintLink'],
+    layer: 'highlight',
+    textColor: 'preserve'
+  },
+  highlightText: {
+    depends: ['text'],
+    layer: 'highlight',
+    textColor: true
+  },
+  highlightLink: {
+    depends: ['link'],
+    layer: 'highlight',
+    textColor: 'preserve'
+  },
+  highlightIcon: {
+    depends: ['highlight', 'highlightText'],
+    color: (mod, bg, text) => mixrgb(bg, text)
+  },
+
+  selectedPost: '--highlight',
+  selectedPostFaintText: {
+    depends: ['highlightFaintText'],
+    layer: 'highlight',
+    variant: 'selectedPost',
+    textColor: true
+  },
+  selectedPostFaintLink: {
+    depends: ['highlightFaintLink'],
+    layer: 'highlight',
+    variant: 'selectedPost',
+    textColor: 'preserve'
+  },
+  selectedPostText: {
+    depends: ['highlightText'],
+    layer: 'highlight',
+    variant: 'selectedPost',
+    textColor: true
+  },
+  selectedPostLink: {
+    depends: ['highlightLink'],
+    layer: 'highlight',
+    variant: 'selectedPost',
+    textColor: 'preserve'
+  },
+  selectedPostIcon: {
+    depends: ['selectedPost', 'selectedPostText'],
+    color: (mod, bg, text) => mixrgb(bg, text)
+  },
+
+  selectedMenu: '--highlight',
+  selectedMenuFaintText: {
+    depends: ['highlightFaintText'],
+    layer: 'highlight',
+    variant: 'selectedMenu',
+    textColor: true
+  },
+  selectedMenuFaintLink: {
+    depends: ['highlightFaintLink'],
+    layer: 'highlight',
+    variant: 'selectedMenu',
+    textColor: 'preserve'
+  },
+  selectedMenuText: {
+    depends: ['highlightText'],
+    layer: 'highlight',
+    variant: 'selectedMenu',
+    textColor: true
+  },
+  selectedMenuLink: {
+    depends: ['highlightLink'],
+    layer: 'highlight',
+    variant: 'selectedMenu',
+    textColor: 'preserve'
+  },
+  selectedMenuIcon: {
+    depends: ['selectedMenu', 'selectedMenuText'],
+    color: (mod, bg, text) => mixrgb(bg, text)
+  },
+
+  lightText: {
+    depends: ['text'],
+    color: (mod, text) => brightness(20 * mod, text).rgb
+  },
+
+  border: {
+    depends: ['fg'],
+    opacity: 'border',
+    color: (mod, fg) => brightness(2 * mod, fg).rgb
+  },
+
+  poll: {
+    depends: ['accent', 'bg'],
+    copacity: 'poll',
+    color: (mod, accent, bg) => alphaBlend(accent, 0.4, bg)
+  },
+  pollText: {
+    depends: ['text'],
+    layer: 'poll',
+    textColor: true
+  },
+
+  icon: {
+    depends: ['bg', 'text'],
+    inheritsOpacity: false,
+    color: (mod, bg, text) => mixrgb(bg, text)
+  },
+
+  // Foreground
+  fgText: {
+    depends: ['text'],
+    layer: 'fg',
+    textColor: true
+  },
+  fgLink: {
+    depends: ['link'],
+    layer: 'fg',
+    textColor: 'preserve'
+  },
+
+  // Panel header
+  panel: {
+    depends: ['fg'],
+    opacity: 'panel'
+  },
+  panelText: {
+    depends: ['text'],
+    layer: 'panel',
+    textColor: true
+  },
+  panelFaint: {
+    depends: ['fgText'],
+    layer: 'panel',
+    opacity: 'faint',
+    textColor: true
+  },
+  panelLink: {
+    depends: ['fgLink'],
+    layer: 'panel',
+    textColor: 'preserve'
+  },
+
+  // Top bar
+  topBar: '--fg',
+  topBarText: {
+    depends: ['fgText'],
+    layer: 'topBar',
+    textColor: true
+  },
+  topBarLink: {
+    depends: ['fgLink'],
+    layer: 'topBar',
+    textColor: 'preserve'
+  },
+
+  // Tabs
+  tab: {
+    depends: ['btn']
+  },
+  tabText: {
+    depends: ['btnText'],
+    layer: 'btn',
+    textColor: true
+  },
+  tabActiveText: {
+    depends: ['text'],
+    layer: 'bg',
+    textColor: true
+  },
+
+  // Buttons
+  btn: {
+    depends: ['fg'],
+    opacity: 'btn'
+  },
+  btnText: {
+    depends: ['fgText'],
+    layer: 'btn',
+    textColor: true
+  },
+  btnPanelText: {
+    depends: ['panelText'],
+    layer: 'btnPanel',
+    variant: 'btn',
+    textColor: true
+  },
+  btnTopBarText: {
+    depends: ['topBarText'],
+    layer: 'btnTopBar',
+    variant: 'btn',
+    textColor: true
+  },
+
+  // Buttons: pressed
+  btnPressed: '--btn',
+  btnPressedText: {
+    depends: ['btnText'],
+    layer: 'btn',
+    variant: 'btnPressed',
+    textColor: true
+  },
+  btnPressedPanel: {
+    depends: ['btnPressed']
+  },
+  btnPressedPanelText: {
+    depends: ['btnPanelText'],
+    layer: 'btnPanel',
+    variant: 'btnPressed',
+    textColor: true
+  },
+  btnPressedTopBarText: {
+    depends: ['btnTopBarText'],
+    layer: 'btnTopBar',
+    variant: 'btnPressed',
+    textColor: true
+  },
+
+  // Buttons: toggled
+  btnToggled: {
+    depends: ['btn'],
+    color: (mod, btn) => brightness(mod * 20, btn).rgb
+  },
+  btnToggledText: {
+    depends: ['btnText'],
+    layer: 'btn',
+    variant: 'btnToggled',
+    textColor: true
+  },
+  btnToggledPanelText: {
+    depends: ['btnPanelText'],
+    layer: 'btnPanel',
+    variant: 'btnToggled',
+    textColor: true
+  },
+  btnToggledTopBarText: {
+    depends: ['btnTopBarText'],
+    layer: 'btnTopBar',
+    variant: 'btnToggled',
+    textColor: true
+  },
+
+  // Buttons: disabled
+  btnDisabled: {
+    depends: ['btn', 'bg'],
+    color: (mod, btn, bg) => alphaBlend(btn, 0.5, bg)
+  },
+  btnDisabledText: {
+    depends: ['btnText'],
+    layer: 'btn',
+    variant: 'btnDisabled',
+    textColor: true,
+    color: (mod, text) => brightness(mod * -60, text).rgb
+  },
+  btnDisabledPanelText: {
+    depends: ['btnPanelText'],
+    layer: 'btnPanel',
+    variant: 'btnDisabled',
+    textColor: true,
+    color: (mod, text) => brightness(mod * -60, text).rgb
+  },
+  btnDisabledTopBarText: {
+    depends: ['btnTopBarText'],
+    layer: 'btnTopBar',
+    variant: 'btnDisabled',
+    textColor: true,
+    color: (mod, text) => brightness(mod * -60, text).rgb
+  },
+
+  // Input fields
+  input: {
+    depends: ['fg'],
+    opacity: 'input'
+  },
+  inputText: {
+    depends: ['text'],
+    layer: 'input',
+    textColor: true
+  },
+  inputPanelText: {
+    depends: ['panelText'],
+    layer: 'inputPanel',
+    variant: 'input',
+    textColor: true
+  },
+  inputTopbarText: {
+    depends: ['topBarText'],
+    layer: 'inputTopBar',
+    variant: 'input',
+    textColor: true
+  },
+
+  alertError: {
+    depends: ['cRed'],
+    opacity: 'alert'
+  },
+  alertErrorText: {
+    depends: ['text'],
+    layer: 'alert',
+    variant: 'alertError',
+    textColor: true
+  },
+  alertErrorPanelText: {
+    depends: ['panelText'],
+    layer: 'alertPanel',
+    variant: 'alertError',
+    textColor: true
+  },
+
+  alertWarning: {
+    depends: ['cOrange'],
+    opacity: 'alert'
+  },
+  alertWarningText: {
+    depends: ['text'],
+    layer: 'alert',
+    variant: 'alertWarning',
+    textColor: true
+  },
+  alertWarningPanelText: {
+    depends: ['panelText'],
+    layer: 'alertPanel',
+    variant: 'alertWarning',
+    textColor: true
+  },
+
+  badgeNotification: '--cRed',
+  badgeNotificationText: {
+    depends: ['text', 'badgeNotification'],
+    layer: 'badge',
+    variant: 'badgeNotification',
+    textColor: 'bw'
+  }
+}
diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
index d88bb9ea..ea28481b 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@@ -1,5 +1,6 @@
 import { convert, brightness, contrastRatio } from 'chromatism'
-import { alphaBlend, alphaBlendLayers, getTextColor, mixrgb } from '../color_convert/color_convert.js'
+import { alphaBlendLayers, getTextColor } from '../color_convert/color_convert.js'
+import { LAYERS, DEFAULT_OPACITY, SLOT_INHERITANCE } from './pleromafe.js'
 
 /*
  * # What's all this?
@@ -37,460 +38,6 @@ import { alphaBlend, alphaBlendLayers, getTextColor, mixrgb } from '../color_con
  */
 export const CURRENT_VERSION = 3
 
-/* This is a definition of all layer combinations
- * each key is a topmost layer, each value represents layer underneath
- * this is essentially a simplified tree
- */
-export const LAYERS = {
-  undelay: null, // root
-  topBar: null, // no transparency support
-  badge: null, //  no transparency support
-  fg: null,
-  bg: 'underlay',
-  highlight: 'bg',
-  panel: 'bg',
-  btn: 'bg',
-  btnPanel: 'panel',
-  btnTopBar: 'topBar',
-  input: 'bg',
-  inputPanel: 'panel',
-  inputTopBar: 'topBar',
-  alert: 'bg',
-  alertPanel: 'panel',
-  poll: 'bg'
-}
-
-/* By default opacity slots have 1 as default opacity
- * this allows redefining it to something else
- */
-export const DEFAULT_OPACITY = {
-  alert: 0.5,
-  input: 0.5,
-  faint: 0.5,
-  underlay: 0.15
-}
-
-/**  SUBJECT TO CHANGE IN THE FUTURE, this is all beta
- * Color and opacity slots definitions. Each key represents a slot.
- *
- * Short-hands:
- * String beginning with `--` - value after dashes treated as sole
- *     dependency - i.e. `--value` equivalent to { depends: ['value']}
- * String beginning with `#` - value would be treated as solid color
- *     defined in hexadecimal representation (i.e. #FFFFFF) and will be
- *     used as default. `#FFFFFF` is equivalent to { default: '#FFFFFF'}
- *
- * Full definition:
- * @property {String[]} depends - color slot names this color depends ones.
- *   cyclic dependencies are supported to some extent but not recommended.
- * @property {String} [opacity] - opacity slot used by this color slot.
- *   opacity is inherited from parents. To break inheritance graph use null
- * @property {Number} [priority] - EXPERIMENTAL. used to pre-sort slots so
- *   that slots with higher priority come earlier
- * @property {Function(mod, ...colors)} [color] - function that will be
- *   used to determine the color. By default it just copies first color in
- *   dependency list.
- * @argument {Number} mod - `1` (light-on-dark) or `-1` (dark-on-light)
- *   depending on background color (for textColor)/given color.
- * @argument {...Object} deps - each argument after mod represents each
- *   color from `depends` array. All colors take user customizations into
- *   account and represented by { r, g, b } objects.
- * @returns {Object} resulting color, should be in { r, g, b } form
- *
- * @property {Boolean|String} [textColor] - true to mark color slot as text
- *   color. This enables automatic text color generation for the slot. Use
- *   'preserve' string if you don't want text color to fall back to
- *   black/white. Use 'bw' to only ever use black or white. This also makes
- *   following properties required:
- * @property {String} [layer] - which layer the text sit on top on - used
- *   to account for transparency in text color calculation
- *   layer is inherited from parents. To break inheritance graph use null
- * @property {String} [variant] - which color slot is background (same as
- *   above, used to account for transparency)
- */
-export const SLOT_INHERITANCE = {
-  bg: {
-    depends: [],
-    opacity: 'bg',
-    priority: 1
-  },
-  fg: {
-    depends: [],
-    priority: 1
-  },
-  text: {
-    depends: [],
-    priority: 1
-  },
-  underlay: {
-    default: '#000000',
-    opacity: 'underlay'
-  },
-  link: {
-    depends: ['accent'],
-    priority: 1
-  },
-  accent: {
-    depends: ['link'],
-    priority: 1
-  },
-  faint: {
-    depends: ['text'],
-    opacity: 'faint'
-  },
-  faintLink: {
-    depends: ['link'],
-    opacity: 'faint'
-  },
-
-  cBlue: '#0000ff',
-  cRed: '#FF0000',
-  cGreen: '#00FF00',
-  cOrange: '#E3FF00',
-
-  highlight: {
-    depends: ['bg'],
-    color: (mod, bg) => brightness(5 * mod, bg).rgb
-  },
-  highlightFaintText: {
-    depends: ['faint'],
-    layer: 'highlight',
-    textColor: true
-  },
-  highlightFaintLink: {
-    depends: ['faintLink'],
-    layer: 'highlight',
-    textColor: 'preserve'
-  },
-  highlightText: {
-    depends: ['text'],
-    layer: 'highlight',
-    textColor: true
-  },
-  highlightLink: {
-    depends: ['link'],
-    layer: 'highlight',
-    textColor: 'preserve'
-  },
-  highlightIcon: {
-    depends: ['highlight', 'highlightText'],
-    color: (mod, bg, text) => mixrgb(bg, text)
-  },
-
-  selectedPost: '--highlight',
-  selectedPostFaintText: {
-    depends: ['highlightFaintText'],
-    layer: 'highlight',
-    variant: 'selectedPost',
-    textColor: true
-  },
-  selectedPostFaintLink: {
-    depends: ['highlightFaintLink'],
-    layer: 'highlight',
-    variant: 'selectedPost',
-    textColor: 'preserve'
-  },
-  selectedPostText: {
-    depends: ['highlightText'],
-    layer: 'highlight',
-    variant: 'selectedPost',
-    textColor: true
-  },
-  selectedPostLink: {
-    depends: ['highlightLink'],
-    layer: 'highlight',
-    variant: 'selectedPost',
-    textColor: 'preserve'
-  },
-  selectedPostIcon: {
-    depends: ['selectedPost', 'selectedPostText'],
-    color: (mod, bg, text) => mixrgb(bg, text)
-  },
-
-  selectedMenu: '--highlight',
-  selectedMenuFaintText: {
-    depends: ['highlightFaintText'],
-    layer: 'highlight',
-    variant: 'selectedMenu',
-    textColor: true
-  },
-  selectedMenuFaintLink: {
-    depends: ['highlightFaintLink'],
-    layer: 'highlight',
-    variant: 'selectedMenu',
-    textColor: 'preserve'
-  },
-  selectedMenuText: {
-    depends: ['highlightText'],
-    layer: 'highlight',
-    variant: 'selectedMenu',
-    textColor: true
-  },
-  selectedMenuLink: {
-    depends: ['highlightLink'],
-    layer: 'highlight',
-    variant: 'selectedMenu',
-    textColor: 'preserve'
-  },
-  selectedMenuIcon: {
-    depends: ['selectedMenu', 'selectedMenuText'],
-    color: (mod, bg, text) => mixrgb(bg, text)
-  },
-
-  lightText: {
-    depends: ['text'],
-    color: (mod, text) => brightness(20 * mod, text).rgb
-  },
-
-  border: {
-    depends: ['fg'],
-    opacity: 'border',
-    color: (mod, fg) => brightness(2 * mod, fg).rgb
-  },
-
-  poll: {
-    depends: ['accent', 'bg'],
-    copacity: 'poll',
-    color: (mod, accent, bg) => alphaBlend(accent, 0.4, bg)
-  },
-  pollText: {
-    depends: ['text'],
-    layer: 'poll',
-    textColor: true
-  },
-
-  icon: {
-    depends: ['bg', 'text'],
-    inheritsOpacity: false,
-    color: (mod, bg, text) => mixrgb(bg, text)
-  },
-
-  // Foreground
-  fgText: {
-    depends: ['text'],
-    layer: 'fg',
-    textColor: true
-  },
-  fgLink: {
-    depends: ['link'],
-    layer: 'fg',
-    textColor: 'preserve'
-  },
-
-  // Panel header
-  panel: {
-    depends: ['fg'],
-    opacity: 'panel'
-  },
-  panelText: {
-    depends: ['text'],
-    layer: 'panel',
-    textColor: true
-  },
-  panelFaint: {
-    depends: ['fgText'],
-    layer: 'panel',
-    opacity: 'faint',
-    textColor: true
-  },
-  panelLink: {
-    depends: ['fgLink'],
-    layer: 'panel',
-    textColor: 'preserve'
-  },
-
-  // Top bar
-  topBar: '--fg',
-  topBarText: {
-    depends: ['fgText'],
-    layer: 'topBar',
-    textColor: true
-  },
-  topBarLink: {
-    depends: ['fgLink'],
-    layer: 'topBar',
-    textColor: 'preserve'
-  },
-
-  // Tabs
-  tab: {
-    depends: ['btn']
-  },
-  tabText: {
-    depends: ['btnText'],
-    layer: 'btn',
-    textColor: true
-  },
-  tabActiveText: {
-    depends: ['text'],
-    layer: 'bg',
-    textColor: true
-  },
-
-  // Buttons
-  btn: {
-    depends: ['fg'],
-    opacity: 'btn'
-  },
-  btnText: {
-    depends: ['fgText'],
-    layer: 'btn',
-    textColor: true
-  },
-  btnPanelText: {
-    depends: ['panelText'],
-    layer: 'btnPanel',
-    variant: 'btn',
-    textColor: true
-  },
-  btnTopBarText: {
-    depends: ['topBarText'],
-    layer: 'btnTopBar',
-    variant: 'btn',
-    textColor: true
-  },
-
-  // Buttons: pressed
-  btnPressed: '--btn',
-  btnPressedText: {
-    depends: ['btnText'],
-    layer: 'btn',
-    variant: 'btnPressed',
-    textColor: true
-  },
-  btnPressedPanel: {
-    depends: ['btnPressed']
-  },
-  btnPressedPanelText: {
-    depends: ['btnPanelText'],
-    layer: 'btnPanel',
-    variant: 'btnPressed',
-    textColor: true
-  },
-  btnPressedTopBarText: {
-    depends: ['btnTopBarText'],
-    layer: 'btnTopBar',
-    variant: 'btnPressed',
-    textColor: true
-  },
-
-  // Buttons: toggled
-  btnToggled: {
-    depends: ['btn'],
-    color: (mod, btn) => brightness(mod * 20, btn).rgb
-  },
-  btnToggledText: {
-    depends: ['btnText'],
-    layer: 'btn',
-    variant: 'btnToggled',
-    textColor: true
-  },
-  btnToggledPanelText: {
-    depends: ['btnPanelText'],
-    layer: 'btnPanel',
-    variant: 'btnToggled',
-    textColor: true
-  },
-  btnToggledTopBarText: {
-    depends: ['btnTopBarText'],
-    layer: 'btnTopBar',
-    variant: 'btnToggled',
-    textColor: true
-  },
-
-  // Buttons: disabled
-  btnDisabled: {
-    depends: ['btn', 'bg'],
-    color: (mod, btn, bg) => alphaBlend(btn, 0.5, bg)
-  },
-  btnDisabledText: {
-    depends: ['btnText'],
-    layer: 'btn',
-    variant: 'btnDisabled',
-    textColor: true,
-    color: (mod, text) => brightness(mod * -60, text).rgb
-  },
-  btnDisabledPanelText: {
-    depends: ['btnPanelText'],
-    layer: 'btnPanel',
-    variant: 'btnDisabled',
-    textColor: true,
-    color: (mod, text) => brightness(mod * -60, text).rgb
-  },
-  btnDisabledTopBarText: {
-    depends: ['btnTopBarText'],
-    layer: 'btnTopBar',
-    variant: 'btnDisabled',
-    textColor: true,
-    color: (mod, text) => brightness(mod * -60, text).rgb
-  },
-
-  // Input fields
-  input: {
-    depends: ['fg'],
-    opacity: 'input'
-  },
-  inputText: {
-    depends: ['text'],
-    layer: 'input',
-    textColor: true
-  },
-  inputPanelText: {
-    depends: ['panelText'],
-    layer: 'inputPanel',
-    variant: 'input',
-    textColor: true
-  },
-  inputTopbarText: {
-    depends: ['topBarText'],
-    layer: 'inputTopBar',
-    variant: 'input',
-    textColor: true
-  },
-
-  alertError: {
-    depends: ['cRed'],
-    opacity: 'alert'
-  },
-  alertErrorText: {
-    depends: ['text'],
-    layer: 'alert',
-    variant: 'alertError',
-    textColor: true
-  },
-  alertErrorPanelText: {
-    depends: ['panelText'],
-    layer: 'alertPanel',
-    variant: 'alertError',
-    textColor: true
-  },
-
-  alertWarning: {
-    depends: ['cOrange'],
-    opacity: 'alert'
-  },
-  alertWarningText: {
-    depends: ['text'],
-    layer: 'alert',
-    variant: 'alertWarning',
-    textColor: true
-  },
-  alertWarningPanelText: {
-    depends: ['panelText'],
-    layer: 'alertPanel',
-    variant: 'alertWarning',
-    textColor: true
-  },
-
-  badgeNotification: '--cRed',
-  badgeNotificationText: {
-    depends: ['text', 'badgeNotification'],
-    layer: 'badge',
-    variant: 'badgeNotification',
-    textColor: 'bw'
-  }
-}
-
 export const getLayersArray = (layer, data = LAYERS) => {
   let array = [layer]
   let parent = data[layer]
-- 
cgit v1.2.3-70-g09d2


From 53576df72aff5405ab30764e5cfcf2162bde37bc Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 24 Jan 2020 00:02:16 +0200
Subject: popover/selected menu improvements

---
 src/components/emoji_input/emoji_input.vue       | 11 +++---
 src/components/popper/popper.scss                |  7 +++-
 src/components/side_drawer/side_drawer.vue       |  7 +++-
 src/components/style_switcher/style_switcher.vue | 29 ++++++++++++++++
 src/services/theme_data/pleromafe.js             | 44 +++++++++++++++++++++---
 5 files changed, 87 insertions(+), 11 deletions(-)

(limited to 'src/components')

diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index 46ed6f25..9c2501a9 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -109,10 +109,13 @@
         box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
         box-shadow: var(--popupShadow);
         min-width: 75%;
-        background: $fallback--bg;
-        background: var(--bg, $fallback--bg);
-        color: $fallback--lightText;
-        color: var(--lightText, $fallback--lightText);
+        background-color: $fallback--bg;
+        background-color: var(--popover, $fallback--bg);
+        color: $fallback--link;
+        color: var(--popoverText, $fallback--link);
+        --faint: var(--popoverFaintText, $fallback--faint);
+        --faintLink: var(--popoverFaintLink, $fallback--faint);
+        --icon: var(--popoverIcon, $fallback--icon);
       }
     }
 
diff --git a/src/components/popper/popper.scss b/src/components/popper/popper.scss
index 9c2ce25f..e70b277d 100644
--- a/src/components/popper/popper.scss
+++ b/src/components/popper/popper.scss
@@ -9,7 +9,12 @@
     border-radius: $fallback--btnRadius;
     border-radius: var(--btnRadius, $fallback--btnRadius);
     background-color: $fallback--bg;
-    background-color: var(--bg, $fallback--bg);
+    background-color: var(--popover, $fallback--bg);
+    color: $fallback--text;
+    color: var(--popoverText, $fallback--text);
+    --faint: var(--popoverFaintText, $fallback--faint);
+    --faintLink: var(--popoverFaintLink, $fallback--faint);
+    --icon: var(--popoverIcon, $fallback--icon);
   }
 
   .popover-arrow {
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 3188fd59..a5b754d7 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -223,7 +223,12 @@
   box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
   box-shadow: var(--panelShadow);
   background-color: $fallback--bg;
-  background-color: var(--bg, $fallback--bg);
+  background-color: var(--popover, $fallback--bg);
+  color: $fallback--link;
+  color: var(--popoverText, $fallback--link);
+  --faint: var(--popoverFaintText, $fallback--faint);
+  --faintLink: var(--popoverFaintLink, $fallback--faint);
+  --icon: var(--popoverIcon, $fallback--icon);
 
   .button-icon:before {
     width: 1.1em;
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index ff7f4710..1c39a806 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -554,6 +554,35 @@
             />
             <ContrastRatio :contrast="previewContrast.highlightLink" />
           </div>
+          <div class="color-item">
+            <h4>{{ $t('settings.style.advanced_colors.popover') }}</h4>
+            <ColorInput
+              v-model="popoverColorLocal"
+              name="popover"
+              :label="$t('settings.background')"
+              :fallback="previewTheme.colors.popover"
+            />
+            <OpacityInput
+              v-model="popoverOpacityLocal"
+              name="popoverOpacity"
+              :fallback="previewTheme.opacity.popover"
+              :disabled="popoverOpacityLocal === 'transparent'"
+            />
+            <ColorInput
+              v-model="popoverTextColorLocal"
+              name="popoverText"
+              :label="$t('settings.text')"
+              :fallback="previewTheme.colors.popoverText"
+            />
+            <ContrastRatio :contrast="previewContrast.popoverText" />
+            <ColorInput
+              v-model="popoverLinkColorLocal"
+              name="popoverLink"
+              :label="$t('settings.links')"
+              :fallback="previewTheme.colors.popoverLink"
+            />
+            <ContrastRatio :contrast="previewContrast.popoverLink" />
+          </div>
           <div class="color-item">
             <h4>{{ $t('settings.style.advanced_colors.selectedPost') }}</h4>
             <ColorInput
diff --git a/src/services/theme_data/pleromafe.js b/src/services/theme_data/pleromafe.js
index 0deb829f..484874d7 100644
--- a/src/services/theme_data/pleromafe.js
+++ b/src/services/theme_data/pleromafe.js
@@ -12,6 +12,8 @@ export const LAYERS = {
   bg: 'underlay',
   highlight: 'bg',
   panel: 'bg',
+  popover: 'bg',
+  selectedMenu: 'popover',
   btn: 'bg',
   btnPanel: 'panel',
   btnTopBar: 'topBar',
@@ -140,6 +142,35 @@ export const SLOT_INHERITANCE = {
     color: (mod, bg, text) => mixrgb(bg, text)
   },
 
+  popover: {
+    depends: ['bg'],
+    opacity: 'popover'
+  },
+  popoverFaintText: {
+    depends: ['faint'],
+    layer: 'popover',
+    textColor: true
+  },
+  popoverFaintLink: {
+    depends: ['faintLink'],
+    layer: 'popover',
+    textColor: 'preserve'
+  },
+  popoverText: {
+    depends: ['text'],
+    layer: 'popover',
+    textColor: true
+  },
+  popoverLink: {
+    depends: ['link'],
+    layer: 'popover',
+    textColor: 'preserve'
+  },
+  popoverIcon: {
+    depends: ['popover', 'popoverText'],
+    color: (mod, bg, text) => mixrgb(bg, text)
+  },
+
   selectedPost: '--highlight',
   selectedPostFaintText: {
     depends: ['highlightFaintText'],
@@ -170,28 +201,31 @@ export const SLOT_INHERITANCE = {
     color: (mod, bg, text) => mixrgb(bg, text)
   },
 
-  selectedMenu: '--highlight',
+  selectedMenu: {
+    depends: ['popover'],
+    color: (mod, bg) => brightness(5 * mod, bg).rgb
+  },
   selectedMenuFaintText: {
     depends: ['highlightFaintText'],
-    layer: 'highlight',
+    layer: 'selectedMenu',
     variant: 'selectedMenu',
     textColor: true
   },
   selectedMenuFaintLink: {
     depends: ['highlightFaintLink'],
-    layer: 'highlight',
+    layer: 'selectedMenu',
     variant: 'selectedMenu',
     textColor: 'preserve'
   },
   selectedMenuText: {
     depends: ['highlightText'],
-    layer: 'highlight',
+    layer: 'selectedMenu',
     variant: 'selectedMenu',
     textColor: true
   },
   selectedMenuLink: {
     depends: ['highlightLink'],
-    layer: 'highlight',
+    layer: 'selectedMenu',
     variant: 'selectedMenu',
     textColor: 'preserve'
   },
-- 
cgit v1.2.3-70-g09d2


From b96993e4dd6b2d9197b430af404e8fa652888b51 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 24 Jan 2020 00:36:32 +0200
Subject: improved selectedMenu again

---
 src/components/emoji_input/emoji_input.vue         | 12 +++--
 src/components/emoji_picker/emoji_picker.scss      |  9 ++++
 src/components/nav_panel/nav_panel.vue             |  2 +
 src/components/popper/popper.scss                  | 12 +++--
 src/components/selectable_list/selectable_list.vue |  1 +
 src/components/side_drawer/side_drawer.vue         | 12 +++--
 src/components/status/status.vue                   |  1 +
 src/services/color_convert/color_convert.js        |  2 +-
 src/services/theme_data/pleromafe.js               | 63 +++++++++++++++++++++-
 src/services/theme_data/theme_data.service.js      |  7 +--
 static/themes/breezy-dark.json                     |  4 +-
 static/themes/breezy-light.json                    |  4 +-
 12 files changed, 105 insertions(+), 24 deletions(-)

(limited to 'src/components')

diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index 9c2501a9..94eae560 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -115,6 +115,7 @@
         color: var(--popoverText, $fallback--link);
         --faint: var(--popoverFaintText, $fallback--faint);
         --faintLink: var(--popoverFaintLink, $fallback--faint);
+        --lightText: var(--popoverLightText, $fallback--lightText);
         --icon: var(--popoverIcon, $fallback--icon);
       }
     }
@@ -160,11 +161,12 @@
 
       &.highlighted {
         background-color: $fallback--fg;
-        background-color: var(--selectedMenu, $fallback--fg);
-        color: var(--selectedMenuText, $fallback--text);
-        --faint: var(--selectedMenuFaintText, $fallback--faint);
-        --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
-        --icon: var(--selectedMenuIcon, $fallback--icon);
+        background-color: var(--selectedMenuPopover, $fallback--fg);
+        color: var(--selectedMenuPopoverText, $fallback--text);
+        --faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
+        --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
+        --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
+        --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
       }
     }
   }
diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index 6608f393..8bd07e45 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -8,6 +8,15 @@
   left: 0;
   margin: 0 !important;
   z-index: 1;
+  background-color: $fallback--bg;
+  background-color: var(--popover, $fallback--bg);
+  color: $fallback--link;
+  color: var(--popoverText, $fallback--link);
+  --lightText: var(--popoverLightText, $fallback--faint);
+  --faint: var(--popoverFaintText, $fallback--faint);
+  --faintLink: var(--popoverFaintLink, $fallback--faint);
+  --lightText: var(--popoverLightText, $fallback--lightText);
+  --icon: var(--popoverIcon, $fallback--icon);
 
   .keep-open,
   .too-many-emoji {
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index afc611ea..a934a411 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -105,6 +105,7 @@
     color: var(--selectedMenuText, $fallback--link);
     --faint: var(--selectedMenuFaintText, $fallback--faint);
     --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
+    --lightText: var(--selectedMenuLightText, $fallback--lightText);
     --icon: var(--selectedMenuIcon, $fallback--icon);
   }
 
@@ -116,6 +117,7 @@
     color: var(--selectedMenuText, $fallback--text);
     --faint: var(--selectedMenuFaintText, $fallback--faint);
     --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
+    --lightText: var(--selectedMenuLightText, $fallback--lightText);
     --icon: var(--selectedMenuIcon, $fallback--icon);
 
     &:hover {
diff --git a/src/components/popper/popper.scss b/src/components/popper/popper.scss
index e70b277d..591be37e 100644
--- a/src/components/popper/popper.scss
+++ b/src/components/popper/popper.scss
@@ -14,6 +14,7 @@
     color: var(--popoverText, $fallback--text);
     --faint: var(--popoverFaintText, $fallback--faint);
     --faintLink: var(--popoverFaintLink, $fallback--faint);
+    --lightText: var(--popoverLightText, $fallback--lightText);
     --icon: var(--popoverIcon, $fallback--icon);
   }
 
@@ -144,12 +145,13 @@
 
     &:active, &:hover {
       background-color: $fallback--lightBg;
-      background-color: var(--selectedMenu, $fallback--lightBg);
+      background-color: var(--selectedMenuPopover, $fallback--lightBg);
       color: $fallback--link;
-      color: var(--selectedMenuText, $fallback--link);
-      --faint: var(--selectedMenuFaintText, $fallback--faint);
-      --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
-      --icon: var(--selectedMenuIcon, $fallback--icon);
+      color: var(--selectedMenuPopoverText, $fallback--link);
+      --faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
+      --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
+      --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
+      --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
     }
   }
 }
diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index 2d1e44a3..a9bb12a1 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -72,6 +72,7 @@
     color: var(--selectedMenuText, $fallback--text);
     --faint: var(--selectedMenuFaintText, $fallback--faint);
     --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
+    --lightText: var(--selectedMenuLightText, $fallback--lightText);
     --icon: var(--selectedMenuIcon, $fallback--icon);
   }
 
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index a5b754d7..25e4de01 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -228,6 +228,7 @@
   color: var(--popoverText, $fallback--link);
   --faint: var(--popoverFaintText, $fallback--faint);
   --faintLink: var(--popoverFaintLink, $fallback--faint);
+  --lightText: var(--popoverLightText, $fallback--lightText);
   --icon: var(--popoverIcon, $fallback--icon);
 
   .button-icon:before {
@@ -294,12 +295,13 @@
 
     &:hover {
       background-color: $fallback--lightBg;
-      background-color: var(--selectedMenu, $fallback--lightBg);
+      background-color: var(--selectedMenuPopover, $fallback--lightBg);
       color: $fallback--text;
-      color: var(--selectedMenuText, $fallback--text);
-      --faint: var(--selectedMenuFaintText, $fallback--faint);
-      --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
-      --icon: var(--selectedMenuIcon, $fallback--icon);
+      color: var(--selectedMenuPopoverText, $fallback--text);
+      --faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
+      --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
+      --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
+      --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
     }
   }
 }
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 38d091ed..1997e187 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -448,6 +448,7 @@ $status-margin: 0.75em;
     background-color: var(--selectedPost, $fallback--lightBg);
     color: $fallback--text;
     color: var(--selectedPostText, $fallback--text);
+    --lightText: var(--selectedPostLightText, $fallback--light);
     --faint: var(--selectedPostFaintText, $fallback--faint);
     --faintLink: var(--selectedPostFaintLink, $fallback--faint);
     --icon: var(--selectedPostIcon, $fallback--icon);
diff --git a/src/services/color_convert/color_convert.js b/src/services/color_convert/color_convert.js
index 93cb1ba6..0bf8f646 100644
--- a/src/services/color_convert/color_convert.js
+++ b/src/services/color_convert/color_convert.js
@@ -69,7 +69,7 @@ const srgbToLinear = (srgb) => {
  * @param {Object} srgb - sRGB color
  * @returns {Number} relative luminance
  */
-const relativeLuminance = (srgb) => {
+export const relativeLuminance = (srgb) => {
   const { r, g, b } = srgbToLinear(srgb)
   return 0.2126 * r + 0.7152 * g + 0.0722 * b
 }
diff --git a/src/services/theme_data/pleromafe.js b/src/services/theme_data/pleromafe.js
index 484874d7..a40d08a6 100644
--- a/src/services/theme_data/pleromafe.js
+++ b/src/services/theme_data/pleromafe.js
@@ -117,6 +117,11 @@ export const SLOT_INHERITANCE = {
     depends: ['bg'],
     color: (mod, bg) => brightness(5 * mod, bg).rgb
   },
+  highlightLightText: {
+    depends: ['lightText'],
+    layer: 'highlight',
+    textColor: true
+  },
   highlightFaintText: {
     depends: ['faint'],
     layer: 'highlight',
@@ -146,6 +151,11 @@ export const SLOT_INHERITANCE = {
     depends: ['bg'],
     opacity: 'popover'
   },
+  popoverLightText: {
+    depends: ['lightText'],
+    layer: 'popover',
+    textColor: true
+  },
   popoverFaintText: {
     depends: ['faint'],
     layer: 'popover',
@@ -178,6 +188,12 @@ export const SLOT_INHERITANCE = {
     variant: 'selectedPost',
     textColor: true
   },
+  selectedPostLightText: {
+    depends: ['highlightLightText'],
+    layer: 'highlight',
+    variant: 'selectedPost',
+    textColor: true
+  },
   selectedPostFaintLink: {
     depends: ['highlightFaintLink'],
     layer: 'highlight',
@@ -202,9 +218,15 @@ export const SLOT_INHERITANCE = {
   },
 
   selectedMenu: {
-    depends: ['popover'],
+    depends: ['bg'],
     color: (mod, bg) => brightness(5 * mod, bg).rgb
   },
+  selectedMenuLightText: {
+    depends: ['highlightLightText'],
+    layer: 'selectedMenu',
+    variant: 'selectedMenu',
+    textColor: true
+  },
   selectedMenuFaintText: {
     depends: ['highlightFaintText'],
     layer: 'selectedMenu',
@@ -234,6 +256,45 @@ export const SLOT_INHERITANCE = {
     color: (mod, bg, text) => mixrgb(bg, text)
   },
 
+  selectedMenuPopover: {
+    depends: ['popover'],
+    color: (mod, bg) => brightness(5 * mod, bg).rgb
+  },
+  selectedMenuPopoverLightText: {
+    depends: ['selectedMenuLightText'],
+    layer: 'selectedMenuPopover',
+    variant: 'selectedMenuPopover',
+    textColor: true
+  },
+  selectedMenuPopoverFaintText: {
+    depends: ['selectedMenuFaintText'],
+    layer: 'selectedMenuPopover',
+    variant: 'selectedMenuPopover',
+    textColor: true
+  },
+  selectedMenuPopoverFaintLink: {
+    depends: ['selectedMenuFaintLink'],
+    layer: 'selectedMenuPopover',
+    variant: 'selectedMenuPopover',
+    textColor: 'preserve'
+  },
+  selectedMenuPopoverText: {
+    depends: ['selectedMenuText'],
+    layer: 'selectedMenuPopover',
+    variant: 'selectedMenuPopover',
+    textColor: true
+  },
+  selectedMenuPopoverLink: {
+    depends: ['selectedMenuLink'],
+    layer: 'selectedMenuPopover',
+    variant: 'selectedMenuPopover',
+    textColor: 'preserve'
+  },
+  selectedMenuPopoverIcon: {
+    depends: ['selectedMenuPopover', 'selectedMenuText'],
+    color: (mod, bg, text) => mixrgb(bg, text)
+  },
+
   lightText: {
     depends: ['text'],
     color: (mod, text) => brightness(20 * mod, text).rgb
diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
index ea28481b..c0861a4a 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@@ -1,5 +1,5 @@
 import { convert, brightness, contrastRatio } from 'chromatism'
-import { alphaBlendLayers, getTextColor } from '../color_convert/color_convert.js'
+import { alphaBlendLayers, getTextColor, relativeLuminance } from '../color_convert/color_convert.js'
 import { LAYERS, DEFAULT_OPACITY, SLOT_INHERITANCE } from './pleromafe.js'
 
 /*
@@ -318,13 +318,14 @@ export const getColors = (sourceColors, sourceOpacity, mod) => SLOT_ORDERED.redu
           opacity
         )
       )
+      const isLightOnDark = relativeLuminance(bg) > 127
+      const mod = isLightOnDark ? 1 : -1
+
       if (value.textColor === 'bw') {
         outputColor = contrastRatio(bg).rgb
       } else {
         let color = { ...colors[deps[0]] }
         if (value.color) {
-          const isLightOnDark = convert(bg).hsl.l < convert(color).hsl.l
-          const mod = isLightOnDark ? 1 : -1
           color = value.color(mod, ...deps.map((dep) => ({ ...colors[dep] })))
         }
 
diff --git a/static/themes/breezy-dark.json b/static/themes/breezy-dark.json
index c3bdcf65..236b94ad 100644
--- a/static/themes/breezy-dark.json
+++ b/static/themes/breezy-dark.json
@@ -114,8 +114,8 @@
       "cGreen": "#27ae60",
       "cOrange": "#f67400",
       "btnPressed": "--accent",
-      "highlight": "--accent",
-      "selectedPost": "--bg,10"
+      "selectedMenu": "--accent",
+      "selectedMenuPopover": "--accent"
     },
     "radii": {
       "btn": "2",
diff --git a/static/themes/breezy-light.json b/static/themes/breezy-light.json
index 478407c9..d3f74cec 100644
--- a/static/themes/breezy-light.json
+++ b/static/themes/breezy-light.json
@@ -117,8 +117,8 @@
       "cGreen": "#27ae60",
       "cOrange": "#f67400",
       "btnPressed": "--accent",
-      "highlight": "--accent",
-      "selectedPost": "--bg,10"
+      "selectedMenu": "--accent",
+      "selectedMenuPopover": "--accent"
     },
     "radii": {
       "btn": "2",
-- 
cgit v1.2.3-70-g09d2


From 75fa07626d4543c0fcca80007c717367f4f85d90 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 24 Jan 2020 00:39:21 +0200
Subject: fix icons in menus

---
 src/components/popper/popper.scss | 3 +++
 1 file changed, 3 insertions(+)

(limited to 'src/components')

diff --git a/src/components/popper/popper.scss b/src/components/popper/popper.scss
index 591be37e..341416c1 100644
--- a/src/components/popper/popper.scss
+++ b/src/components/popper/popper.scss
@@ -152,6 +152,9 @@
       --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
       --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
       --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
+      i {
+        color: var(--selectedMenuPopoverIcon, $fallback--icon);
+      }
     }
   }
 }
-- 
cgit v1.2.3-70-g09d2


From a018ea622c4ae34fd204e840b20aba53f84cd051 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shpuld@shpposter.club>
Date: Sun, 26 Jan 2020 15:45:12 +0200
Subject: change emoji reactions to use new format

---
 src/components/conversation/conversation.js        |  2 +-
 src/components/emoji_reactions/emoji_reactions.js  |  9 ++-
 src/components/emoji_reactions/emoji_reactions.vue | 12 ++--
 src/components/status/status.vue                   |  1 -
 src/modules/statuses.js                            | 66 +++++++++++++---------
 .../entity_normalizer/entity_normalizer.service.js |  1 +
 test/unit/specs/modules/statuses.spec.js           | 45 +++++++++++++++
 7 files changed, 99 insertions(+), 37 deletions(-)

(limited to 'src/components')

diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index 7ff0ac08..45fb2bf6 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -150,7 +150,7 @@ const conversation = {
       if (!id) return
       this.highlight = id
       this.$store.dispatch('fetchFavsAndRepeats', id)
-      this.$store.dispatch('fetchEmojiReactions', id)
+      this.$store.dispatch('fetchEmojiReactionsBy', id)
     },
     getHighlight () {
       return this.isExpanded ? this.highlight : null
diff --git a/src/components/emoji_reactions/emoji_reactions.js b/src/components/emoji_reactions/emoji_reactions.js
index e81e6e25..b37cce3d 100644
--- a/src/components/emoji_reactions/emoji_reactions.js
+++ b/src/components/emoji_reactions/emoji_reactions.js
@@ -4,12 +4,17 @@ const EmojiReactions = {
   props: ['status'],
   computed: {
     emojiReactions () {
-      return this.status.emojiReactions
+      console.log(this.status.emoji_reactions)
+      return this.status.emoji_reactions
     }
   },
   methods: {
     reactedWith (emoji) {
-      return this.status.reactedWithEmoji.includes(emoji)
+      // return []
+      const user = this.$store.state.users.currentUser
+      const reaction = this.status.emoji_reactions.find(r => r.emoji === emoji)
+      console.log(reaction)
+      return reaction.accounts && reaction.accounts.find(u => u.id === user.id)
     },
     reactWith (emoji) {
       this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })
diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
index d83f60b6..8a229240 100644
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/src/components/emoji_reactions/emoji_reactions.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="emoji-reactions">
     <button
-      v-for="(users, emoji) in emojiReactions"
-      :key="emoji"
+      v-for="(reaction) in emojiReactions"
+      :key="reaction.emoji"
       class="emoji-reaction btn btn-default"
-      :class="{ 'picked-reaction': reactedWith(emoji) }"
-      @click="emojiOnClick(emoji, $event)"
+      :class="{ 'picked-reaction': reactedWith(reaction.emoji) }"
+      @click="emojiOnClick(reaction.emoji, $event)"
     >
-      <span v-if="users">{{ users.length }}</span>
-      <span>{{ emoji }}</span>
+      <span>{{ reaction.count }}</span>
+      <span>{{ reaction.emoji }}</span>
     </button>
   </div>
 </template>
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 87e8b5da..d5739304 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -355,7 +355,6 @@
           </transition>
 
           <EmojiReactions
-            v-if="isFocused"
             :status="status"
           />
 
diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index dbae9d38..ea0c1749 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -10,10 +10,7 @@ import {
   first,
   last,
   isArray,
-  omitBy,
-  flow,
-  filter,
-  keys
+  omitBy
 } from 'lodash'
 import { set } from 'vue'
 import apiService from '../services/api/api.service.js'
@@ -534,33 +531,48 @@ export const mutations = {
     newStatus.fave_num = newStatus.favoritedBy.length
     newStatus.favorited = !!newStatus.favoritedBy.find(({ id }) => currentUser.id === id)
   },
-  addEmojiReactions (state, { id, emojiReactions, currentUser }) {
+  addEmojiReactionsBy (state, { id, emojiReactions, currentUser }) {
     const status = state.allStatusesObject[id]
-    set(status, 'emojiReactions', emojiReactions)
-    const reactedWithEmoji = flow(
-      keys,
-      filter(reaction => find(reaction, { id: currentUser.id }))
-    )(emojiReactions)
-    set(status, 'reactedWithEmoji', reactedWithEmoji)
+    set(status, 'emoji_reactions', emojiReactions)
   },
   addOwnReaction (state, { id, emoji, currentUser }) {
     const status = state.allStatusesObject[id]
-    status.emojiReactions = status.emojiReactions || {}
-    const listOfUsers = (status.emojiReactions && status.emojiReactions[emoji]) || []
-    const hasSelfAlready = !!find(listOfUsers, { id: currentUser.id })
-    if (!hasSelfAlready) {
-      set(status.emojiReactions, emoji, listOfUsers.concat([{ id: currentUser.id }]))
-      set(status, 'reactedWithEmoji', [...status.reactedWithEmoji, emoji])
+    const reactionIndex = findIndex(status.emoji_reactions, { emoji })
+    const reaction = status.emoji_reactions[reactionIndex] || { emoji, count: 0, accounts: [] }
+
+    const newReaction = {
+      ...reaction,
+      count: reaction.count + 1,
+      accounts: [
+        ...reaction.accounts,
+        currentUser
+      ]
+    }
+
+    // Update count of existing reaction if it exists, otherwise append at the end
+    if (reactionIndex >= 0) {
+      set(status.emoji_reactions, reactionIndex, newReaction)
+    } else {
+      set(status, 'emoji_reactions', [...status.emoji_reactions, newReaction])
     }
   },
   removeOwnReaction (state, { id, emoji, currentUser }) {
     const status = state.allStatusesObject[id]
-    const listOfUsers = status.emojiReactions[emoji] || []
-    const hasSelfAlready = !!find(listOfUsers, { id: currentUser.id })
-    if (hasSelfAlready) {
-      const newUsers = filter(listOfUsers, user => user.id !== currentUser.id)
-      set(status.emojiReactions, emoji, newUsers)
-      set(status, 'reactedWithEmoji', status.reactedWithEmoji.filter(e => e !== emoji))
+    const reactionIndex = findIndex(status.emoji_reactions, { emoji })
+    if (reactionIndex < 0) return
+
+    const reaction = status.emoji_reactions[reactionIndex]
+
+    const newReaction = {
+      ...reaction,
+      count: reaction.count - 1,
+      accounts: reaction.accounts.filter(acc => acc.id === currentUser.id)
+    }
+
+    if (newReaction.count > 0) {
+      set(status.emoji_reactions, reactionIndex, newReaction)
+    } else {
+      set(status, 'emoji_reactions', status.emoji_reactions.filter(r => r.emoji !== emoji))
     }
   },
   updateStatusWithPoll (state, { id, poll }) {
@@ -672,7 +684,7 @@ const statuses = {
       commit('addOwnReaction', { id, emoji, currentUser })
       rootState.api.backendInteractor.reactWithEmoji({ id, emoji }).then(
         status => {
-          dispatch('fetchEmojiReactions', id)
+          dispatch('fetchEmojiReactionsBy', id)
         }
       )
     },
@@ -681,14 +693,14 @@ const statuses = {
       commit('removeOwnReaction', { id, emoji, currentUser })
       rootState.api.backendInteractor.unreactWithEmoji({ id, emoji }).then(
         status => {
-          dispatch('fetchEmojiReactions', id)
+          dispatch('fetchEmojiReactionsBy', id)
         }
       )
     },
-    fetchEmojiReactions ({ rootState, commit }, id) {
+    fetchEmojiReactionsBy ({ rootState, commit }, id) {
       rootState.api.backendInteractor.fetchEmojiReactions({ id }).then(
         emojiReactions => {
-          commit('addEmojiReactions', { id, emojiReactions, currentUser: rootState.users.currentUser })
+          commit('addEmojiReactionsBy', { id, emojiReactions, currentUser: rootState.users.currentUser })
         }
       )
     },
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index ee007bee..03eaa5d7 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -233,6 +233,7 @@ export const parseStatus = (data) => {
     output.statusnet_html = addEmojis(data.content, data.emojis)
 
     output.tags = data.tags
+    output.emoji_reactions = [{ emoji: 'A', count: 5 }] // data.pleroma.emoji_reactions
 
     if (data.pleroma) {
       const { pleroma } = data
diff --git a/test/unit/specs/modules/statuses.spec.js b/test/unit/specs/modules/statuses.spec.js
index f794997b..e53aa388 100644
--- a/test/unit/specs/modules/statuses.spec.js
+++ b/test/unit/specs/modules/statuses.spec.js
@@ -241,6 +241,51 @@ describe('Statuses module', () => {
     })
   })
 
+  describe('emojiReactions', () => {
+    it('increments count in existing reaction', () => {
+      const state = defaultState()
+      const status = makeMockStatus({ id: '1' })
+      status.emoji_reactions = [ { emoji: '😂', count: 1, accounts: [] } ]
+
+      mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public' })
+      mutations.addOwnReaction(state, { id: '1', emoji: '😂', currentUser: { id: 'me' } })
+      expect(state.allStatusesObject['1'].emoji_reactions[0].count).to.eql(2)
+      expect(state.allStatusesObject['1'].emoji_reactions[0].accounts[0].id).to.eql('me')
+    })
+
+    it('adds a new reaction', () => {
+      const state = defaultState()
+      const status = makeMockStatus({ id: '1' })
+      status.emoji_reactions = []
+
+      mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public' })
+      mutations.addOwnReaction(state, { id: '1', emoji: '😂', currentUser: { id: 'me' } })
+      expect(state.allStatusesObject['1'].emoji_reactions[0].count).to.eql(1)
+      expect(state.allStatusesObject['1'].emoji_reactions[0].accounts[0].id).to.eql('me')
+    })
+
+    it('decreases count in existing reaction', () => {
+      const state = defaultState()
+      const status = makeMockStatus({ id: '1' })
+      status.emoji_reactions = [ { emoji: '😂', count: 2, accounts: [{ id: 'me' }] } ]
+
+      mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public' })
+      mutations.removeOwnReaction(state, { id: '1', emoji: '😂', currentUser: {} })
+      expect(state.allStatusesObject['1'].emoji_reactions[0].count).to.eql(1)
+      expect(state.allStatusesObject['1'].emoji_reactions[0].accounts).to.eql([])
+    })
+
+    it('removes a reaction', () => {
+      const state = defaultState()
+      const status = makeMockStatus({ id: '1' })
+      status.emoji_reactions = [{ emoji: '😂', count: 1, accounts: [{ id: 'me' }] }]
+
+      mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public' })
+      mutations.removeOwnReaction(state, { id: '1', emoji: '😂', currentUser: {} })
+      expect(state.allStatusesObject['1'].emoji_reactions.length).to.eql(0)
+    })
+  })
+
   describe('showNewStatuses', () => {
     it('resets the minId to the min of the visible statuses when adding new to visible statuses', () => {
       const state = defaultState()
-- 
cgit v1.2.3-70-g09d2


From 0de627baae53d4d284920c1f6d7daf64769be4a6 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shpuld@shpposter.club>
Date: Sun, 26 Jan 2020 16:18:57 +0200
Subject: remove favs count from react button

---
 src/components/react_button/react_button.vue | 1 -
 1 file changed, 1 deletion(-)

(limited to 'src/components')

diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index ae975dee..7f1bc492 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -44,7 +44,6 @@
         class="button-icon add-reaction-button"
         :title="$t('tool_tip.add_reaction')"
       />
-      <span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span>
     </div>
   </v-popover>
 </template>
-- 
cgit v1.2.3-70-g09d2


From 5313833d80221bbad667aeda39ca9e7321489e30 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 27 Jan 2020 04:24:00 +0200
Subject: lint

---
 src/components/style_switcher/style_switcher.vue   | 137 +++++++++++----------
 .../specs/services/theme_data/theme_data.spec.js   |   1 -
 2 files changed, 70 insertions(+), 68 deletions(-)

(limited to 'src/components')

diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index 1c39a806..6e38bd8e 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -1,74 +1,77 @@
 <template>
-<div class="style-switcher">
-  <div class="presets-container">
-    <div class="save-load">
-      <div class="theme-warning" v-if="themeWarning">
-        <div class="alert warning">
-        {{ themeWarningHelp }}
-        </div>
-        <div class="buttons">
-          <template v-if="themeWarning.type === 'snapshot_source_mismatch'">
-            <button
-              class="btn"
-              @click="forceLoad"
-            >
-              {{ $t('settings.style.switcher.use_source') }}
-            </button>
-            <button
-              class="btn"
-              @click="forceSnapshot"
-            >
-              {{ $t('settings.style.switcher.use_snapshot') }}
-            </button>
-          </template>
-          <template v-else-if="themeWarning.noActionsPossible">
-            <button
-              class="btn"
-              @click="dismissWarning"
-            >
-              {{ $t('general.dismiss') }}
-            </button>
-          </template>
-          <template v-else>
-            <button
-              class="btn"
-              @click="forceLoad"
-            >
-              {{ $t('settings.style.switcher.load_theme') }}
-            </button>
-            <button
-              class="btn"
-              @click="dismissWarning"
-            >
-              {{ $t('settings.style.switcher.keep_as_is') }}
-            </button>
-          </template>
+  <div class="style-switcher">
+    <div class="presets-container">
+      <div class="save-load">
+        <div
+          v-if="themeWarning"
+          class="theme-warning"
+        >
+          <div class="alert warning">
+            {{ themeWarningHelp }}
+          </div>
+          <div class="buttons">
+            <template v-if="themeWarning.type === 'snapshot_source_mismatch'">
+              <button
+                class="btn"
+                @click="forceLoad"
+              >
+                {{ $t('settings.style.switcher.use_source') }}
+              </button>
+              <button
+                class="btn"
+                @click="forceSnapshot"
+              >
+                {{ $t('settings.style.switcher.use_snapshot') }}
+              </button>
+            </template>
+            <template v-else-if="themeWarning.noActionsPossible">
+              <button
+                class="btn"
+                @click="dismissWarning"
+              >
+                {{ $t('general.dismiss') }}
+              </button>
+            </template>
+            <template v-else>
+              <button
+                class="btn"
+                @click="forceLoad"
+              >
+                {{ $t('settings.style.switcher.load_theme') }}
+              </button>
+              <button
+                class="btn"
+                @click="dismissWarning"
+              >
+                {{ $t('settings.style.switcher.keep_as_is') }}
+              </button>
+            </template>
+          </div>
         </div>
-      </div>
-      <ExportImport
-        :export-object="exportedTheme"
-        :export-label="$t(&quot;settings.export_theme&quot;)"
-        :import-label="$t(&quot;settings.import_theme&quot;)"
-        :import-failed-text="$t(&quot;settings.invalid_theme_imported&quot;)"
-        :on-import="onImport"
-        :validator="importValidator"
-      >
-        <template slot="before">
-          <div class="presets">
-            {{ $t('settings.presets') }}
-            <label
-              for="preset-switcher"
-              class="select"
+        <ExportImport
+          :export-object="exportedTheme"
+          :export-label="$t(&quot;settings.export_theme&quot;)"
+          :import-label="$t(&quot;settings.import_theme&quot;)"
+          :import-failed-text="$t(&quot;settings.invalid_theme_imported&quot;)"
+          :on-import="onImport"
+          :validator="importValidator"
+        >
+          <template slot="before">
+            <div class="presets">
+              {{ $t('settings.presets') }}
+              <label
+                for="preset-switcher"
+                class="select"
               >
-              <select
-                id="preset-switcher"
-                v-model="selected"
-                class="preset-switcher"
+                <select
+                  id="preset-switcher"
+                  v-model="selected"
+                  class="preset-switcher"
                 >
-                <option
-                  v-for="style in availableStyles"
-                  :key="style.name"
-                  :value="style"
+                  <option
+                    v-for="style in availableStyles"
+                    :key="style.name"
+                    :value="style"
                     :style="{
                       backgroundColor: style[1] || (style.theme || style.source).colors.bg,
                       color: style[3] || (style.theme || style.source).colors.text
diff --git a/test/unit/specs/services/theme_data/theme_data.spec.js b/test/unit/specs/services/theme_data/theme_data.spec.js
index 67f4fd5a..c634cade 100644
--- a/test/unit/specs/services/theme_data/theme_data.spec.js
+++ b/test/unit/specs/services/theme_data/theme_data.spec.js
@@ -86,5 +86,4 @@ describe('Theme Data utility functions', () => {
       expect(out.indexOf('a')).to.be.below(out.indexOf('c'))
     })
   })
-
 })
-- 
cgit v1.2.3-70-g09d2


From e4e3a28838f431872ab5fd6b10bb8db4a03af389 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shpuld@shpposter.club>
Date: Mon, 27 Jan 2020 15:49:05 +0200
Subject: remove logs/commented code

---
 src/components/emoji_reactions/emoji_reactions.js | 3 ---
 1 file changed, 3 deletions(-)

(limited to 'src/components')

diff --git a/src/components/emoji_reactions/emoji_reactions.js b/src/components/emoji_reactions/emoji_reactions.js
index b37cce3d..95d52cb6 100644
--- a/src/components/emoji_reactions/emoji_reactions.js
+++ b/src/components/emoji_reactions/emoji_reactions.js
@@ -4,16 +4,13 @@ const EmojiReactions = {
   props: ['status'],
   computed: {
     emojiReactions () {
-      console.log(this.status.emoji_reactions)
       return this.status.emoji_reactions
     }
   },
   methods: {
     reactedWith (emoji) {
-      // return []
       const user = this.$store.state.users.currentUser
       const reaction = this.status.emoji_reactions.find(r => r.emoji === emoji)
-      console.log(reaction)
       return reaction.accounts && reaction.accounts.find(u => u.id === user.id)
     },
     reactWith (emoji) {
-- 
cgit v1.2.3-70-g09d2


From 526b43eba66c597c78857da6ded3c7f672f96e49 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 28 Jan 2020 01:29:20 +0200
Subject: Kenomo (see: #624) theme. Ability to define link color for post
 contents. Fixes

---
 src/components/emoji_input/emoji_input.vue       |  2 +
 src/components/notifications/notifications.scss  |  3 +
 src/components/popper/popper.scss                |  2 +
 src/components/status/status.vue                 |  7 +++
 src/components/style_switcher/style_switcher.vue | 17 ++++++
 src/components/user_card/user_card.vue           |  5 ++
 src/services/theme_data/pleromafe.js             | 34 ++++++++++++
 static/themes/kenomo.json                        | 71 ++++++++++++++++++++++++
 8 files changed, 141 insertions(+)
 create mode 100644 static/themes/kenomo.json

(limited to 'src/components')

diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index 94eae560..e9ac09c3 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -116,6 +116,8 @@
         --faint: var(--popoverFaintText, $fallback--faint);
         --faintLink: var(--popoverFaintLink, $fallback--faint);
         --lightText: var(--popoverLightText, $fallback--lightText);
+        --postLink: var(--popoverPostLink, $fallback--link);
+        --postFaintLink: var(--popoverPostFaintLink, $fallback--link);
         --icon: var(--popoverIcon, $fallback--icon);
       }
     }
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 71876b14..ca762432 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -68,6 +68,9 @@
         a {
           color: var(--faintLink);
         }
+        .status-content a {
+          color: var(--postFaintLink);
+        }
       }
       padding: 0;
       .media-body {
diff --git a/src/components/popper/popper.scss b/src/components/popper/popper.scss
index 341416c1..8e2dcd55 100644
--- a/src/components/popper/popper.scss
+++ b/src/components/popper/popper.scss
@@ -15,6 +15,8 @@
     --faint: var(--popoverFaintText, $fallback--faint);
     --faintLink: var(--popoverFaintLink, $fallback--faint);
     --lightText: var(--popoverLightText, $fallback--lightText);
+    --postLink: var(--popoverPostLink, $fallback--link);
+    --postFaintLink: var(--popoverPostFaintLink, $fallback--link);
     --icon: var(--popoverIcon, $fallback--icon);
   }
 
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 1997e187..b1048832 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -451,6 +451,8 @@ $status-margin: 0.75em;
     --lightText: var(--selectedPostLightText, $fallback--light);
     --faint: var(--selectedPostFaintText, $fallback--faint);
     --faintLink: var(--selectedPostFaintLink, $fallback--faint);
+    --postLink: var(--selectedPostPostLink, $fallback--faint);
+    --postFaintLink: var(--selectedPostFaintPostLink, $fallback--faint);
     --icon: var(--selectedPostIcon, $fallback--icon);
   }
 
@@ -640,6 +642,11 @@ $status-margin: 0.75em;
     line-height: 1.4em;
     white-space: pre-wrap;
 
+    a {
+      color: $fallback--link;
+      color: var(--postLink, $fallback--link);
+    }
+
     img, video {
       max-width: 100%;
       max-height: 400px;
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index 6e38bd8e..0b3b0fbf 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -248,6 +248,23 @@
             </button>
           </div>
           <div class="color-item">
+            <h4>{{ $t('settings.style.advanced_colors.post') }}</h4>
+            <ColorInput
+              v-model="postLinkColorLocal"
+              name="postLinkColor"
+              :fallback="previewTheme.colors.accent"
+              :label="$t('settings.links')"
+              :show-optional-tickbox="typeof accentColorLocal !== 'undefined'"
+            />
+            <ContrastRatio :contrast="previewContrast.bgPostLink" />
+            <ColorInput
+              v-model="iconColorLocal"
+              name="iconColor"
+              :fallback="previewTheme.colors.accent"
+              :label="$t('settings.links')"
+              :show-optional-tickbox="typeof accentColorLocal !== 'undefined'"
+            />
+            <ContrastRatio :contrast="previewContrast.bgIcon" />
             <h4>{{ $t('settings.style.advanced_colors.alert') }}</h4>
             <ColorInput
               v-model="alertErrorColorLocal"
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index e286ceea..72656435 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -299,6 +299,11 @@
   &-bio {
     text-align: center;
 
+    a {
+      color: $fallback--link;
+      color: var(--postLink, $fallback--link);
+    }
+
     img {
       object-fit: contain;
       vertical-align: middle;
diff --git a/src/services/theme_data/pleromafe.js b/src/services/theme_data/pleromafe.js
index a40d08a6..74e6fc1c 100644
--- a/src/services/theme_data/pleromafe.js
+++ b/src/services/theme_data/pleromafe.js
@@ -107,6 +107,10 @@ export const SLOT_INHERITANCE = {
     depends: ['link'],
     opacity: 'faint'
   },
+  postFaintLink: {
+    depends: ['postLink'],
+    opacity: 'faint'
+  },
 
   cBlue: '#0000ff',
   cRed: '#FF0000',
@@ -122,6 +126,11 @@ export const SLOT_INHERITANCE = {
     layer: 'highlight',
     textColor: true
   },
+  highlightPostLink: {
+    depends: ['postLink'],
+    layer: 'highlight',
+    textColor: 'preserve'
+  },
   highlightFaintText: {
     depends: ['faint'],
     layer: 'highlight',
@@ -132,6 +141,11 @@ export const SLOT_INHERITANCE = {
     layer: 'highlight',
     textColor: 'preserve'
   },
+  highlightPostFaintLink: {
+    depends: ['postFaintLink'],
+    layer: 'highlight',
+    textColor: 'preserve'
+  },
   highlightText: {
     depends: ['text'],
     layer: 'highlight',
@@ -156,6 +170,11 @@ export const SLOT_INHERITANCE = {
     layer: 'popover',
     textColor: true
   },
+  popoverPostLink: {
+    depends: ['postLink'],
+    layer: 'popover',
+    textColor: 'preserve'
+  },
   popoverFaintText: {
     depends: ['faint'],
     layer: 'popover',
@@ -166,6 +185,11 @@ export const SLOT_INHERITANCE = {
     layer: 'popover',
     textColor: 'preserve'
   },
+  popoverPostFaintLink: {
+    depends: ['postFaintLink'],
+    layer: 'popover',
+    textColor: 'preserve'
+  },
   popoverText: {
     depends: ['text'],
     layer: 'popover',
@@ -194,6 +218,12 @@ export const SLOT_INHERITANCE = {
     variant: 'selectedPost',
     textColor: true
   },
+  selectedPostPostLink: {
+    depends: ['highlightPostLink'],
+    layer: 'highlight',
+    variant: 'selectedPost',
+    textColor: 'preserve'
+  },
   selectedPostFaintLink: {
     depends: ['highlightFaintLink'],
     layer: 'highlight',
@@ -300,6 +330,10 @@ export const SLOT_INHERITANCE = {
     color: (mod, text) => brightness(20 * mod, text).rgb
   },
 
+  postLink: {
+    depends: ['link']
+  },
+
   border: {
     depends: ['fg'],
     opacity: 'border',
diff --git a/static/themes/kenomo.json b/static/themes/kenomo.json
new file mode 100644
index 00000000..98ddf974
--- /dev/null
+++ b/static/themes/kenomo.json
@@ -0,0 +1,71 @@
+{
+  "_pleroma_theme_version": 2,
+  "name": "Kenomo",
+  "source": {
+    "themeEngineVersion": 3,
+    "fonts": {},
+    "shadows": {
+      "panel": [],
+      "topBar": [],
+      "button": [
+        {
+          "x": 0,
+          "y": 1,
+          "blur": 0,
+          "spread": 0,
+          "color": "#FFFFFF",
+          "alpha": 0.2,
+          "inset": true
+        },
+        {
+          "x": 0,
+          "y": -1,
+          "blur": 0,
+          "spread": 0,
+          "color": "#000000",
+          "alpha": 0.2,
+          "inset": true
+        }
+      ],
+      "input": [
+        {
+          "x": 0,
+          "y": "0",
+          "blur": 0,
+          "spread": "1",
+          "color": "#576574",
+          "alpha": "1",
+          "inset": true
+        }
+      ]
+    },
+    "opacity": {
+      "underlay": "1",
+      "border": "0"
+    },
+    "colors": {
+      "bg": "#ffffff",
+      "fg": "#f6f6f6",
+      "text": "#494949",
+      "underlay": "#ffffff",
+      "link": "#818181",
+      "accent": "#818181",
+      "cBlue": "#2e86de",
+      "cRed": "#c96248",
+      "cGreen": "#0fa00f",
+      "cOrange": "#aa7623",
+      "postLink": "#2e86de",
+      "border": "#ffffff",
+      "icon": "#8a8a8a",
+      "panel": "transparent",
+      "topBarText": "#4b4b4b",
+      "tab": "--btn,-30",
+      "btn": "#576574"
+    },
+    "radii": {
+      "panel": "0",
+      "avatar": "6",
+      "avatarAlt": "6"
+    }
+  }
+}
-- 
cgit v1.2.3-70-g09d2


From b63e679a31a573c30868477f17322d6ed040af58 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 28 Jan 2020 02:03:21 +0200
Subject: removed one color TODO

---
 src/components/popper/popper.scss                |  2 ++
 src/components/style_switcher/style_switcher.vue | 29 +++++++++++++++++-------
 src/components/user_card/user_card.vue           |  5 ++--
 src/i18n/en.json                                 |  3 +++
 src/services/theme_data/pleromafe.js             | 20 +++++++++++++++-
 5 files changed, 47 insertions(+), 12 deletions(-)

(limited to 'src/components')

diff --git a/src/components/popper/popper.scss b/src/components/popper/popper.scss
index 8e2dcd55..99b7e6fc 100644
--- a/src/components/popper/popper.scss
+++ b/src/components/popper/popper.scss
@@ -137,6 +137,8 @@
     width: 100%;
     height: 100%;
 
+    --btnText: var(--popoverText, $fallback--text);
+
     &-icon {
       padding-left: 0.5rem;
 
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index 0b3b0fbf..9de3a96c 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -257,14 +257,6 @@
               :show-optional-tickbox="typeof accentColorLocal !== 'undefined'"
             />
             <ContrastRatio :contrast="previewContrast.bgPostLink" />
-            <ColorInput
-              v-model="iconColorLocal"
-              name="iconColor"
-              :fallback="previewTheme.colors.accent"
-              :label="$t('settings.links')"
-              :show-optional-tickbox="typeof accentColorLocal !== 'undefined'"
-            />
-            <ContrastRatio :contrast="previewContrast.bgIcon" />
             <h4>{{ $t('settings.style.advanced_colors.alert') }}</h4>
             <ColorInput
               v-model="alertErrorColorLocal"
@@ -298,6 +290,27 @@
               :contrast="previewContrast.alertWarningText"
               large="true"
             />
+            <ColorInput
+              v-model="alertNeutralColorLocal"
+              name="alertNeutral"
+              :label="$t('settings.style.advanced_colors.alert_neutral')"
+              :fallback="previewTheme.colors.alertNeutral"
+            />
+            <ColorInput
+              v-model="alertNeutralTextColorLocal"
+              name="alertNeutralText"
+              :label="$t('settings.text')"
+              :fallback="previewTheme.colors.alertNeutralText"
+            />
+            <ContrastRatio
+              :contrast="previewContrast.alertNeutralText"
+              large="true"
+            />
+            <OpacityInput
+              v-model="alertOpacityLocal"
+              name="alertOpacity"
+              :fallback="previewTheme.opacity.alert"
+            />
           </div>
           <div class="color-item">
             <h4>{{ $t('settings.style.advanced_colors.badge') }}</h4>
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 72656435..3988ff1c 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -465,14 +465,13 @@
       color: var(--text, $fallback--text);
     }
 
-    // TODO use proper colors
     .staff {
       flex: none;
       text-transform: capitalize;
       color: $fallback--text;
-      color: var(--btnText, $fallback--text);
+      color: var(--alertNeutralText, $fallback--text);
       background-color: $fallback--fg;
-      background-color: var(--btn, $fallback--fg);
+      background-color: var(--alertNeutral, $fallback--fg);
     }
   }
 
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 81dde663..06cc12f0 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -441,7 +441,10 @@
         "alert": "Alert background",
         "alert_error": "Error",
         "alert_warning": "Warning",
+        "alert_neutral": "Neutral",
+        "post": "Posts/User bios",
         "badge": "Badge background",
+        "popover": "Tooltips, menus, popovers",
         "badge_notification": "Notification",
         "panel_header": "Panel header",
         "top_bar": "Top bar",
diff --git a/src/services/theme_data/pleromafe.js b/src/services/theme_data/pleromafe.js
index 74e6fc1c..354009ee 100644
--- a/src/services/theme_data/pleromafe.js
+++ b/src/services/theme_data/pleromafe.js
@@ -1,4 +1,4 @@
-import { brightness } from 'chromatism'
+import { invertLightness, brightness } from 'chromatism'
 import { alphaBlend, mixrgb } from '../color_convert/color_convert.js'
 /* This is a definition of all layer combinations
  * each key is a topmost layer, each value represents layer underneath
@@ -574,6 +574,24 @@ export const SLOT_INHERITANCE = {
     textColor: true
   },
 
+  alertNeutral: {
+    depends: ['text'],
+    opacity: 'alert'
+  },
+  alertNeutralText: {
+    depends: ['text'],
+    layer: 'alert',
+    variant: 'alertNeutral',
+    color: (mod, text) => invertLightness(text).rgb,
+    textColor: true
+  },
+  alertNeutralPanelText: {
+    depends: ['panelText'],
+    layer: 'alertPanel',
+    variant: 'alertNeutral',
+    textColor: true
+  },
+
   badgeNotification: '--cRed',
   badgeNotificationText: {
     depends: ['text', 'badgeNotification'],
-- 
cgit v1.2.3-70-g09d2


From 566f013ac49139cb3411b24920b8b235c8c3c424 Mon Sep 17 00:00:00 2001
From: eugenijm <eugenijm@protonmail.com>
Date: Tue, 28 Jan 2020 06:12:32 +0300
Subject: Fix password and email update

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

(limited to 'src/components')

diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index 1709b48f..38373056 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -307,7 +307,7 @@ const UserSettings = {
         newPassword: this.changePasswordInputs[1],
         newPasswordConfirmation: this.changePasswordInputs[2]
       }
-      this.$store.state.api.backendInteractor.changePassword({ params })
+      this.$store.state.api.backendInteractor.changePassword(params)
         .then((res) => {
           if (res.status === 'success') {
             this.changedPassword = true
@@ -324,7 +324,7 @@ const UserSettings = {
         email: this.newEmail,
         password: this.changeEmailPassword
       }
-      this.$store.state.api.backendInteractor.changeEmail({ params })
+      this.$store.state.api.backendInteractor.changeEmail(params)
         .then((res) => {
           if (res.status === 'success') {
             this.changedEmail = true
-- 
cgit v1.2.3-70-g09d2


From 6afff4f8c205ec70d3694564c706f6a46a61db9e Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shpuld@shpposter.club>
Date: Tue, 28 Jan 2020 17:09:25 +0200
Subject: review changes

---
 src/components/emoji_reactions/emoji_reactions.vue          | 6 +++---
 src/components/react_button/react_button.js                 | 9 +--------
 src/components/react_button/react_button.vue                | 3 +--
 src/services/entity_normalizer/entity_normalizer.service.js | 2 +-
 4 files changed, 6 insertions(+), 14 deletions(-)

(limited to 'src/components')

diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
index 8a229240..741fc11e 100644
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/src/components/emoji_reactions/emoji_reactions.vue
@@ -7,8 +7,8 @@
       :class="{ 'picked-reaction': reactedWith(reaction.emoji) }"
       @click="emojiOnClick(reaction.emoji, $event)"
     >
-      <span>{{ reaction.count }}</span>
       <span>{{ reaction.emoji }}</span>
+      <span>{{ reaction.count }}</span>
     </button>
   </div>
 </template>
@@ -31,10 +31,10 @@
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  :first-child {
+  &:first-child {
     margin-right: 0.25em;
   }
-  :last-child {
+  &:last-child {
     width: 1.5em;
   }
   &:focus {
diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js
index d1a179bc..6fb2a780 100644
--- a/src/components/react_button/react_button.js
+++ b/src/components/react_button/react_button.js
@@ -4,7 +4,6 @@ const ReactButton = {
   props: ['status', 'loggedIn'],
   data () {
     return {
-      animated: false,
       showTooltip: false,
       filterWord: '',
       popperOptions: {
@@ -29,7 +28,7 @@ const ReactButton = {
   },
   computed: {
     commonEmojis () {
-      return ['💖', '😠', '👀', '😂', '🔥']
+      return ['❤️', '😠', '👀', '😂', '🔥']
     },
     emojis () {
       if (this.filterWord !== '') {
@@ -37,12 +36,6 @@ const ReactButton = {
       }
       return this.$store.state.instance.emoji || []
     },
-    classes () {
-      return {
-        'icon-smile': true,
-        'animate-spin': this.animated
-      }
-    },
     ...mapGetters(['mergedConfig'])
   }
 }
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index 7f1bc492..c925dd71 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -40,8 +40,7 @@
       @click.prevent="openReactionSelect"
     >
       <i
-        :class="classes"
-        class="button-icon add-reaction-button"
+        class="icon-smile button-icon add-reaction-button"
         :title="$t('tool_tip.add_reaction')"
       />
     </div>
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index f66d09ac..a3d0b782 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -233,7 +233,6 @@ export const parseStatus = (data) => {
     output.statusnet_html = addEmojis(data.content, data.emojis)
 
     output.tags = data.tags
-    output.emoji_reactions = data.pleroma.emoji_reactions
 
     if (data.pleroma) {
       const { pleroma } = data
@@ -243,6 +242,7 @@ export const parseStatus = (data) => {
       output.is_local = pleroma.local
       output.in_reply_to_screen_name = data.pleroma.in_reply_to_account_acct
       output.thread_muted = pleroma.thread_muted
+      output.emoji_reactions = pleroma.emoji_reactions
     } else {
       output.text = data.content
       output.summary = data.spoiler_text
-- 
cgit v1.2.3-70-g09d2


From 29806c962972091cda2c7d55380b3326b5a07ba4 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shpuld@shpposter.club>
Date: Tue, 28 Jan 2020 17:53:47 +0200
Subject: fix emoji reaction classes broken in develop

---
 src/components/emoji_reactions/emoji_reactions.vue | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

(limited to 'src/components')

diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
index 741fc11e..00d6d2b7 100644
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/src/components/emoji_reactions/emoji_reactions.vue
@@ -7,7 +7,7 @@
       :class="{ 'picked-reaction': reactedWith(reaction.emoji) }"
       @click="emojiOnClick(reaction.emoji, $event)"
     >
-      <span>{{ reaction.emoji }}</span>
+      <span class="reaction-emoji">{{ reaction.emoji }}</span>
       <span>{{ reaction.count }}</span>
     </button>
   </div>
@@ -31,12 +31,10 @@
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  &:first-child {
+  .reaction-emoji {
+    width: 1.25em;
     margin-right: 0.25em;
   }
-  &:last-child {
-    width: 1.5em;
-  }
   &:focus {
     outline: none;
   }
-- 
cgit v1.2.3-70-g09d2


From 846285326900a497c68dc994ce06dcb1d5d1ca9c Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 28 Jan 2020 22:40:15 +0200
Subject: update button toggled state, apply it to emoji reactions

---
 src/App.scss                                       |  4 +++-
 src/components/emoji_reactions/emoji_reactions.vue |  8 +-------
 src/components/style_switcher/style_switcher.vue   | 13 +++++++++++++
 static/themes/redmond-xx-se.json                   |  2 ++
 static/themes/redmond-xx.json                      |  2 ++
 static/themes/redmond-xxi.json                     |  2 ++
 6 files changed, 23 insertions(+), 8 deletions(-)

(limited to 'src/components')

diff --git a/src/App.scss b/src/App.scss
index dd994a38..1fabaaa9 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -117,7 +117,9 @@ button {
     color: $fallback--text;
     color: var(--btnToggledText, $fallback--text);
     background-color: $fallback--fg;
-    background-color: var(--btnToggled, $fallback--fg)
+    background-color: var(--btnToggled, $fallback--fg);
+    box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.3), 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset;
+    box-shadow: var(--buttonPressedShadow);
   }
 
   &.danger {
diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
index 00d6d2b7..f5d2e79a 100644
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/src/components/emoji_reactions/emoji_reactions.vue
@@ -4,7 +4,7 @@
       v-for="(reaction) in emojiReactions"
       :key="reaction.emoji"
       class="emoji-reaction btn btn-default"
-      :class="{ 'picked-reaction': reactedWith(reaction.emoji) }"
+      :class="{ 'toggled': reactedWith(reaction.emoji) }"
       @click="emojiOnClick(reaction.emoji, $event)"
     >
       <span class="reaction-emoji">{{ reaction.emoji }}</span>
@@ -40,10 +40,4 @@
   }
 }
 
-.picked-reaction {
-  border: 1px solid var(--link, $fallback--link);
-  margin-left: -1px; // offset the border, can't use inset shadows either
-  margin-right: calc(0.5em - 1px);
-}
-
 </style>
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index 9de3a96c..5a42bba7 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -460,6 +460,19 @@
               :label="$t('settings.text')"
             />
             <ContrastRatio :contrast="previewContrast.btnDisabledText" />
+            <h4>{{ $t('settings.style.advanced_colors.toggled') }}</h4>
+            <ColorInput
+              v-model="btnToggledColorLocal"
+              name="btnToggledColor"
+              :fallback="previewTheme.colors.btnToggled"
+              :label="$t('settings.background')"
+            />
+            <ColorInput
+              v-model="btnToggledTextColorLocal"
+              name="btnToggledTextColor"
+              :fallback="previewTheme.colors.btnToggledText"
+              :label="$t('settings.text')"
+            />
           </div>
           <div class="color-item">
             <h4>{{ $t('settings.style.advanced_colors.tabs') }}</h4>
diff --git a/static/themes/redmond-xx-se.json b/static/themes/redmond-xx-se.json
index 8deab7b7..7a4a29da 100644
--- a/static/themes/redmond-xx-se.json
+++ b/static/themes/redmond-xx-se.json
@@ -2,6 +2,7 @@
   "_pleroma_theme_version": 2,
   "name": "Redmond XX SE",
   "source": {
+    "themeEngineVersion": 3,
     "shadows": {
       "panel": [
         {
@@ -276,6 +277,7 @@
       "topBar": "#000080",
       "topBarLink": "#ffffff",
       "btn": "#c0c0c0",
+      "btnToggled": "--btn",
       "faint": "#3f3f3f",
       "faintLink": "#404080",
       "border": "#808080",
diff --git a/static/themes/redmond-xx.json b/static/themes/redmond-xx.json
index cdb89fe3..ff95b1e0 100644
--- a/static/themes/redmond-xx.json
+++ b/static/themes/redmond-xx.json
@@ -2,6 +2,7 @@
   "_pleroma_theme_version": 2,
   "name": "Redmond XX",
   "source": {
+    "themeEngineVersion": 3,
     "shadows": {
       "panel": [
         {
@@ -267,6 +268,7 @@
       "topBar": "#000080",
       "topBarLink": "#ffffff",
       "btn": "#c0c0c0",
+      "btnToggled": "--btn",
       "faint": "#3f3f3f",
       "faintLink": "#404080",
       "border": "#808080",
diff --git a/static/themes/redmond-xxi.json b/static/themes/redmond-xxi.json
index 79a2cb26..f788bdb8 100644
--- a/static/themes/redmond-xxi.json
+++ b/static/themes/redmond-xxi.json
@@ -2,6 +2,7 @@
   "_pleroma_theme_version": 2,
   "name": "Redmond XXI",
   "source": {
+    "themeEngineVersion": 3,
     "shadows": {
       "panel": [
         {
@@ -249,6 +250,7 @@
       "topBar": "#042967",
       "topBarLink": "#ffffff",
       "btn": "#d6d6ce",
+      "btnToggled": "--btn",
       "faint": "#3f3f3f",
       "faintLink": "#404080",
       "border": "#808080",
-- 
cgit v1.2.3-70-g09d2


From e46bb942260d192beb601727519ed90df5c62494 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 28 Jan 2020 23:45:14 +0200
Subject: updated preview to account for underlay

---
 src/App.scss                                     |   4 +-
 src/App.vue                                      |   2 +-
 src/components/style_switcher/preview.vue        | 188 ++++++++++++-----------
 src/components/style_switcher/style_switcher.vue |   4 +-
 4 files changed, 107 insertions(+), 91 deletions(-)

(limited to 'src/components')

diff --git a/src/App.scss b/src/App.scss
index 1fabaaa9..85fd0b47 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -31,9 +31,11 @@ h4 {
   margin: auto;
   min-height: 100vh;
   max-width: 980px;
+  align-content: flex-start;
+}
+.underlay {
   background-color: rgba(0,0,0,0.15);
   background-color: var(--underlay, rgba(0,0,0,0.15));
-  align-content: flex-start;
 }
 
 .text-center {
diff --git a/src/App.vue b/src/App.vue
index 1b1c2648..ff62fc51 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -78,7 +78,7 @@
     </nav>
     <div
       id="content"
-      class="container"
+      class="container underlay"
     >
       <div class="sidebar-flexer mobile-hidden">
         <div class="sidebar-bounds">
diff --git a/src/components/style_switcher/preview.vue b/src/components/style_switcher/preview.vue
index 101a32bd..5b8c3839 100644
--- a/src/components/style_switcher/preview.vue
+++ b/src/components/style_switcher/preview.vue
@@ -1,101 +1,117 @@
 <template>
-  <div class="panel dummy">
-    <div class="panel-heading">
-      <div class="title">
-        {{ $t('settings.style.preview.header') }}
-        <span class="badge badge-notification">
-          99
+  <div class="preview-container">
+    <div class="underlay underlay-preview"/>
+    <div class="panel dummy">
+      <div class="panel-heading">
+        <div class="title">
+          {{ $t('settings.style.preview.header') }}
+          <span class="badge badge-notification">
+            99
+          </span>
+        </div>
+        <span class="faint">
+          {{ $t('settings.style.preview.header_faint') }}
+        </span>
+        <span class="alert error">
+          {{ $t('settings.style.preview.error') }}
         </span>
+        <button class="btn">
+          {{ $t('settings.style.preview.button') }}
+        </button>
       </div>
-      <span class="faint">
-        {{ $t('settings.style.preview.header_faint') }}
-      </span>
-      <span class="alert error">
-        {{ $t('settings.style.preview.error') }}
-      </span>
-      <button class="btn">
-        {{ $t('settings.style.preview.button') }}
-      </button>
-    </div>
-    <div class="panel-body theme-preview-content">
-      <div class="post">
-        <div class="avatar">
-          ( ͡° ͜ʖ ͡°)
-        </div>
-        <div class="content">
-          <h4>
-            {{ $t('settings.style.preview.content') }}
-          </h4>
+      <div class="panel-body theme-preview-content">
+        <div class="post">
+          <div class="avatar">
+            ( ͡° ͜ʖ ͡°)
+          </div>
+          <div class="content">
+            <h4>
+              {{ $t('settings.style.preview.content') }}
+            </h4>
 
-          <i18n path="settings.style.preview.text">
-            <code style="font-family: var(--postCodeFont)">
-              {{ $t('settings.style.preview.mono') }}
-            </code>
-            <a style="color: var(--link)">
-              {{ $t('settings.style.preview.link') }}
-            </a>
-          </i18n>
+            <i18n path="settings.style.preview.text">
+              <code style="font-family: var(--postCodeFont)">
+                {{ $t('settings.style.preview.mono') }}
+              </code>
+              <a style="color: var(--link)">
+                {{ $t('settings.style.preview.link') }}
+              </a>
+            </i18n>
 
-          <div class="icons">
-            <i
-              style="color: var(--cBlue)"
-              class="button-icon icon-reply"
-            />
-            <i
-              style="color: var(--cGreen)"
-              class="button-icon icon-retweet"
-            />
-            <i
-              style="color: var(--cOrange)"
-              class="button-icon icon-star"
-            />
-            <i
-              style="color: var(--cRed)"
-              class="button-icon icon-cancel"
-            />
+            <div class="icons">
+              <i
+                style="color: var(--cBlue)"
+                class="button-icon icon-reply"
+              />
+              <i
+                style="color: var(--cGreen)"
+                class="button-icon icon-retweet"
+              />
+              <i
+                style="color: var(--cOrange)"
+                class="button-icon icon-star"
+              />
+              <i
+                style="color: var(--cRed)"
+                class="button-icon icon-cancel"
+              />
+            </div>
           </div>
         </div>
-      </div>
 
-      <div class="after-post">
-        <div class="avatar-alt">
-          :^)
-        </div>
-        <div class="content">
-          <i18n
-            path="settings.style.preview.fine_print"
-            tag="span"
-            class="faint"
-          >
-            <a style="color: var(--faintLink)">
-              {{ $t('settings.style.preview.faint_link') }}
-            </a>
-          </i18n>
+        <div class="after-post">
+          <div class="avatar-alt">
+            :^)
+          </div>
+          <div class="content">
+            <i18n
+              path="settings.style.preview.fine_print"
+              tag="span"
+              class="faint"
+            >
+              <a style="color: var(--faintLink)">
+                {{ $t('settings.style.preview.faint_link') }}
+              </a>
+            </i18n>
+          </div>
         </div>
-      </div>
-      <div class="separator" />
+        <div class="separator" />
 
-      <span class="alert error">
-        {{ $t('settings.style.preview.error') }}
-      </span>
-      <input
-        :value="$t('settings.style.preview.input')"
-        type="text"
-      >
-
-      <div class="actions">
-        <span class="checkbox">
-          <input
-            id="preview_checkbox"
-            checked="very yes"
-            type="checkbox"
-          >
-          <label for="preview_checkbox">{{ $t('settings.style.preview.checkbox') }}</label>
+        <span class="alert error">
+          {{ $t('settings.style.preview.error') }}
         </span>
-        <button class="btn">
-          {{ $t('settings.style.preview.button') }}
-        </button>
+        <input
+          :value="$t('settings.style.preview.input')"
+          type="text"
+        >
+
+        <div class="actions">
+          <span class="checkbox">
+            <input
+              id="preview_checkbox"
+              checked="very yes"
+              type="checkbox"
+            >
+            <label for="preview_checkbox">{{ $t('settings.style.preview.checkbox') }}</label>
+          </span>
+          <button class="btn">
+            {{ $t('settings.style.preview.button') }}
+          </button>
+        </div>
       </div>
     </div>
   </div>
 </template>
+
+<style lang="scss">
+.preview-container {
+  position: relative;
+}
+.underlay-preview {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 10px;
+  right: 10px;
+}
+</style>
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index 5a42bba7..a3f9b488 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -116,9 +116,7 @@
       </div>
     </div>
 
-    <div class="preview-container">
-      <preview :style="previewRules" />
-    </div>
+    <preview :style="previewRules" />
 
     <keep-alive>
       <tab-switcher key="style-tweak">
-- 
cgit v1.2.3-70-g09d2


From 4a266a4d0547c0f68628001e8948dd171ef4554b Mon Sep 17 00:00:00 2001
From: Shpuld Shpludson <shp@cock.li>
Date: Fri, 31 Jan 2020 00:24:54 +0000
Subject: Fix one click nsfw unhide on videos

---
 CHANGELOG.md                            |  1 +
 src/components/attachment/attachment.js | 11 ++++++++---
 2 files changed, 9 insertions(+), 3 deletions(-)

(limited to 'src/components')

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 65973dbb..abefd958 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -19,6 +19,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Single notifications left unread when hitting read on another device/tab
 - Registration fixed
 - Deactivation of remote accounts from frontend
+- Fixed NSFW unhiding not working with videos when using one-click unhiding/displaying
 
 ## [1.1.7 and earlier] - 2019-12-14
 ### Added
diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index 06b496b0..b832e10f 100644
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@@ -2,6 +2,7 @@ import StillImage from '../still-image/still-image.vue'
 import VideoAttachment from '../video_attachment/video_attachment.vue'
 import nsfwImage from '../../assets/nsfw.png'
 import fileTypeService from '../../services/file_type/file_type.service.js'
+import { mapGetters } from 'vuex'
 
 const Attachment = {
   props: [
@@ -49,7 +50,8 @@ const Attachment = {
     },
     fullwidth () {
       return this.type === 'html' || this.type === 'audio'
-    }
+    },
+    ...mapGetters(['mergedConfig'])
   },
   methods: {
     linkClicked ({ target }) {
@@ -58,7 +60,7 @@ const Attachment = {
       }
     },
     openModal (event) {
-      const modalTypes = this.$store.getters.mergedConfig.playVideosInModal
+      const modalTypes = this.mergedConfig.playVideosInModal
         ? ['image', 'video']
         : ['image']
       if (fileTypeService.fileMatchesSomeType(modalTypes, this.attachment) ||
@@ -71,7 +73,10 @@ const Attachment = {
       }
     },
     toggleHidden (event) {
-      if (this.$store.getters.mergedConfig.useOneClickNsfw && !this.showHidden) {
+      if (
+        (this.mergedConfig.useOneClickNsfw && !this.showHidden) &&
+        (this.type !== 'video' || this.mergedConfig.playVideosInModal)
+      ) {
         this.openModal(event)
         return
       }
-- 
cgit v1.2.3-70-g09d2


From 9bbf10b55d97f6dbe3197ebbd1bb29d294ff6b55 Mon Sep 17 00:00:00 2001
From: kPherox <admin@mail.kr-kp.com>
Date: Tue, 4 Feb 2020 04:26:32 +0900
Subject: Add setting for allow_following_move

---
 src/components/user_settings/user_settings.js               | 2 ++
 src/components/user_settings/user_settings.vue              | 9 ++++++---
 src/services/entity_normalizer/entity_normalizer.service.js | 2 ++
 3 files changed, 10 insertions(+), 3 deletions(-)

(limited to 'src/components')

diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index 38373056..eca6f9b1 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -55,6 +55,7 @@ const UserSettings = {
       showRole: this.$store.state.users.currentUser.show_role,
       role: this.$store.state.users.currentUser.role,
       discoverable: this.$store.state.users.currentUser.discoverable,
+      allowFollowingMove: this.$store.state.users.currentUser.allow_following_move,
       pickAvatarBtnVisible: true,
       bannerUploading: false,
       backgroundUploading: false,
@@ -162,6 +163,7 @@ const UserSettings = {
             hide_follows: this.hideFollows,
             hide_followers: this.hideFollowers,
             discoverable: this.discoverable,
+            allow_following_move: this.allowFollowingMove,
             hide_follows_count: this.hideFollowsCount,
             hide_followers_count: this.hideFollowersCount,
             show_role: this.showRole
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index 2222c293..8b2336b4 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -90,9 +90,7 @@
               </Checkbox>
             </p>
             <p>
-              <Checkbox
-                v-model="hideFollowers"
-              >
+              <Checkbox v-model="hideFollowers">
                 {{ $t('settings.hide_followers_description') }}
               </Checkbox>
             </p>
@@ -104,6 +102,11 @@
                 {{ $t('settings.hide_followers_count_description') }}
               </Checkbox>
             </p>
+            <p>
+              <Checkbox v-model="allowFollowingMove">
+                {{ $t('settings.allow_following_move') }}
+              </Checkbox>
+            </p>
             <p v-if="role === 'admin' || role === 'moderator'">
               <Checkbox v-model="showRole">
                 <template v-if="role === 'admin'">
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index a3d0b782..3bc46886 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -81,6 +81,8 @@ export const parseUser = (data) => {
         output.subscribed = relationship.subscribing
       }
 
+      output.allow_following_move = data.pleroma.allow_following_move
+
       output.hide_follows = data.pleroma.hide_follows
       output.hide_followers = data.pleroma.hide_followers
       output.hide_follows_count = data.pleroma.hide_follows_count
-- 
cgit v1.2.3-70-g09d2


From 9b7497a65957b3f1d3b9f920266fae9bdae11dd5 Mon Sep 17 00:00:00 2001
From: kPherox <admin@mail.kr-kp.com>
Date: Tue, 4 Feb 2020 04:30:31 +0900
Subject: Change to hide User migrates tab when allow following move

---
 src/components/interactions/interactions.js  | 1 +
 src/components/interactions/interactions.vue | 1 +
 2 files changed, 2 insertions(+)

(limited to 'src/components')

diff --git a/src/components/interactions/interactions.js b/src/components/interactions/interactions.js
index cc31ff20..7fe5e76d 100644
--- a/src/components/interactions/interactions.js
+++ b/src/components/interactions/interactions.js
@@ -10,6 +10,7 @@ const tabModeDict = {
 const Interactions = {
   data () {
     return {
+      allowFollowingMove: this.$store.state.users.currentUser.allow_following_move,
       filterMode: tabModeDict['mentions']
     }
   },
diff --git a/src/components/interactions/interactions.vue b/src/components/interactions/interactions.vue
index a2e252ab..57d5d87c 100644
--- a/src/components/interactions/interactions.vue
+++ b/src/components/interactions/interactions.vue
@@ -22,6 +22,7 @@
         :label="$t('interactions.follows')"
       />
       <span
+        v-if="!allowFollowingMove"
         key="moves"
         :label="$t('interactions.moves')"
       />
-- 
cgit v1.2.3-70-g09d2


From 611da13a4b252c10f1613d70d877e2d039ba64b7 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 7 Feb 2020 01:25:26 +0200
Subject: Better Disabled buttons support. Mammal theme fixes. Implemented
 proper context-aware `mod` argument - now checks lightness of "variant"
 color. needs retesting tho

---
 src/App.scss                                     |  4 +-
 src/components/checkbox/checkbox.vue             |  4 +-
 src/components/style_switcher/style_switcher.vue | 57 ++++++++++++++++++++++++
 src/i18n/en.json                                 |  1 +
 src/services/style_setter/style_setter.js        | 17 ++-----
 src/services/theme_data/pleromafe.js             | 31 +++++++------
 src/services/theme_data/theme_data.service.js    |  9 ++--
 7 files changed, 89 insertions(+), 34 deletions(-)

(limited to 'src/components')

diff --git a/src/App.scss b/src/App.scss
index 85fd0b47..9f37ff12 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -179,7 +179,7 @@ input, textarea, .select, .input {
     right: 5px;
     height: 100%;
     color: $fallback--text;
-    color: var(--text, $fallback--text);
+    color: var(--inputText, $fallback--text);
     line-height: 28px;
     z-index: 0;
     pointer-events: none;
@@ -254,7 +254,7 @@ input, textarea, .select, .input {
     display: none;
     &:checked + label::before {
       color: $fallback--text;
-      color: var(--text, $fallback--text);
+      color: var(--inputText, $fallback--text);
     }
     &:disabled {
       &,
diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue
index 1113f81d..03375b2f 100644
--- a/src/components/checkbox/checkbox.vue
+++ b/src/components/checkbox/checkbox.vue
@@ -87,13 +87,13 @@ export default {
 
     &:checked + .checkbox-indicator::before {
       color: $fallback--text;
-      color: var(--text, $fallback--text);
+      color: var(--inputText, $fallback--text);
     }
 
     &:indeterminate + .checkbox-indicator::before {
       content: '–';
       color: $fallback--text;
-      color: var(--text, $fallback--text);
+      color: var(--inputText, $fallback--text);
     }
 
   }
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index a3f9b488..705a60a2 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -430,6 +430,20 @@
               :label="$t('settings.text')"
             />
             <ContrastRatio :contrast="previewContrast.btnText" />
+            <ColorInput
+              v-model="btnPanelTextColorLocal"
+              name="btnPanelTextColor"
+              :fallback="previewTheme.colors.btnPanelText"
+              :label="$t('settings.style.advanced_colors.panel_header')"
+            />
+            <ContrastRatio :contrast="previewContrast.btnPanelText" />
+            <ColorInput
+              v-model="btnTopBarTextColorLocal"
+              name="btnTopBarTextColor"
+              :fallback="previewTheme.colors.btnTopBarText"
+              :label="$t('settings.style.advanced_colors.top_bar')"
+            />
+            <ContrastRatio :contrast="previewContrast.btnTopBarText" />
             <h4>{{ $t('settings.style.advanced_colors.pressed') }}</h4>
             <ColorInput
               v-model="btnPressedColorLocal"
@@ -444,6 +458,20 @@
               :label="$t('settings.text')"
             />
             <ContrastRatio :contrast="previewContrast.btnPressedText" />
+            <ColorInput
+              v-model="btnPressedPanelTextColorLocal"
+              name="btnPressedPanelTextColor"
+              :fallback="previewTheme.colors.btnPressedPanelText"
+              :label="$t('settings.style.advanced_colors.panel_header')"
+            />
+            <ContrastRatio :contrast="previewContrast.btnPressedPanelText" />
+            <ColorInput
+              v-model="btnPressedTopBarTextColorLocal"
+              name="btnPressedTopBarTextColor"
+              :fallback="previewTheme.colors.btnPressedTopBarText"
+              :label="$t('settings.style.advanced_colors.top_bar')"
+            />
+            <ContrastRatio :contrast="previewContrast.btnPressedTopBarText" />
             <h4>{{ $t('settings.style.advanced_colors.disabled') }}</h4>
             <ColorInput
               v-model="btnDisabledColorLocal"
@@ -458,6 +486,20 @@
               :label="$t('settings.text')"
             />
             <ContrastRatio :contrast="previewContrast.btnDisabledText" />
+            <ColorInput
+              v-model="btnDisabledPanelTextColorLocal"
+              name="btnDisabledPanelTextColor"
+              :fallback="previewTheme.colors.btnDisabledPanelText"
+              :label="$t('settings.style.advanced_colors.panel_header')"
+            />
+            <ContrastRatio :contrast="previewContrast.btnDisabledPanelText" />
+            <ColorInput
+              v-model="btnDisabledTopBarTextColorLocal"
+              name="btnDisabledTopBarTextColor"
+              :fallback="previewTheme.colors.btnDisabledTopBarText"
+              :label="$t('settings.style.advanced_colors.top_bar')"
+            />
+            <ContrastRatio :contrast="previewContrast.btnDisabledTopBarText" />
             <h4>{{ $t('settings.style.advanced_colors.toggled') }}</h4>
             <ColorInput
               v-model="btnToggledColorLocal"
@@ -471,6 +513,21 @@
               :fallback="previewTheme.colors.btnToggledText"
               :label="$t('settings.text')"
             />
+            <ContrastRatio :contrast="previewContrast.btnToggledText" />
+            <ColorInput
+              v-model="btnToggledPanelTextColorLocal"
+              name="btnToggledPanelTextColor"
+              :fallback="previewTheme.colors.btnToggledPanelText"
+              :label="$t('settings.style.advanced_colors.panel_header')"
+            />
+            <ContrastRatio :contrast="previewContrast.btnToggledPanelText" />
+            <ColorInput
+              v-model="btnToggledTopBarTextColorLocal"
+              name="btnToggledTopBarTextColor"
+              :fallback="previewTheme.colors.btnToggledTopBarText"
+              :label="$t('settings.style.advanced_colors.top_bar')"
+            />
+            <ContrastRatio :contrast="previewContrast.btnToggledTopBarText" />
           </div>
           <div class="color-item">
             <h4>{{ $t('settings.style.advanced_colors.tabs') }}</h4>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 4efa41c3..771805e9 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -472,6 +472,7 @@
         "selectedPost": "Selected post",
         "selectedMenu": "Selected menu item",
         "disabled": "Disabled",
+        "toggled": "Toggled",
         "tabs": "Tabs"
       },
       "radii": {
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 533145d4..b9a23ad7 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -114,10 +114,7 @@ export const generateColors = (themeData) => {
     ? colors2to3(themeData.colors || themeData)
     : themeData.colors || themeData
 
-  const isLightOnDark = convert(sourceColors.bg).hsl.l < convert(sourceColors.text).hsl.l
-  const mod = isLightOnDark ? 1 : -1
-
-  const { colors, opacity } = getColors(sourceColors, themeData.opacity || {}, mod)
+  const { colors, opacity } = getColors(sourceColors, themeData.opacity || {})
 
   const htmlColors = Object.entries(colors)
     .reduce((acc, [k, v]) => {
@@ -381,25 +378,17 @@ export const getThemes = () => {
 }
 export const colors2to3 = (colors) => {
   return Object.entries(colors).reduce((acc, [slotName, color]) => {
-    const btnStates = ['', 'Pressed', 'Disabled', 'Toggled']
     const btnPositions = ['', 'Panel', 'TopBar']
     switch (slotName) {
       case 'lightBg':
         return { ...acc, highlight: color }
-      case 'btn':
-        return {
-          ...acc,
-          ...btnStates.reduce((stateAcc, state) => ({ ...stateAcc, ['btn' + state]: color }), {})
-        }
       case 'btnText':
         return {
           ...acc,
           ...btnPositions
-            .map(position => btnStates.map(state => state + position))
-            .flat()
             .reduce(
-              (statePositionAcc, statePosition) =>
-                ({ ...statePositionAcc, ['btn' + statePosition + 'Text']: color })
+              (statePositionAcc, position) =>
+                ({ ...statePositionAcc, ['btn' + position + 'Text']: color })
               , {}
             )
         }
diff --git a/src/services/theme_data/pleromafe.js b/src/services/theme_data/pleromafe.js
index 354009ee..98fba5ef 100644
--- a/src/services/theme_data/pleromafe.js
+++ b/src/services/theme_data/pleromafe.js
@@ -85,6 +85,8 @@ export const SLOT_INHERITANCE = {
   },
   text: {
     depends: [],
+    layer: 'bg',
+    opacity: null,
     priority: 1
   },
   underlay: {
@@ -422,6 +424,7 @@ export const SLOT_INHERITANCE = {
   // Buttons
   btn: {
     depends: ['fg'],
+    variant: 'btn',
     opacity: 'btn'
   },
   btnText: {
@@ -430,20 +433,23 @@ export const SLOT_INHERITANCE = {
     textColor: true
   },
   btnPanelText: {
-    depends: ['panelText'],
+    depends: ['btnText'],
     layer: 'btnPanel',
     variant: 'btn',
     textColor: true
   },
   btnTopBarText: {
-    depends: ['topBarText'],
+    depends: ['btnText'],
     layer: 'btnTopBar',
     variant: 'btn',
     textColor: true
   },
 
   // Buttons: pressed
-  btnPressed: '--btn',
+  btnPressed: {
+    depends: ['btn'],
+    layer: 'btn'
+  },
   btnPressedText: {
     depends: ['btnText'],
     layer: 'btn',
@@ -451,7 +457,8 @@ export const SLOT_INHERITANCE = {
     textColor: true
   },
   btnPressedPanel: {
-    depends: ['btnPressed']
+    depends: ['btnPressed'],
+    layer: 'btn'
   },
   btnPressedPanelText: {
     depends: ['btnPanelText'],
@@ -469,6 +476,7 @@ export const SLOT_INHERITANCE = {
   // Buttons: toggled
   btnToggled: {
     depends: ['btn'],
+    layer: 'btn',
     color: (mod, btn) => brightness(mod * 20, btn).rgb
   },
   btnToggledText: {
@@ -496,25 +504,22 @@ export const SLOT_INHERITANCE = {
     color: (mod, btn, bg) => alphaBlend(btn, 0.5, bg)
   },
   btnDisabledText: {
-    depends: ['btnText'],
+    depends: ['btnText', 'btnDisabled'],
     layer: 'btn',
     variant: 'btnDisabled',
-    textColor: true,
-    color: (mod, text) => brightness(mod * -60, text).rgb
+    color: (mod, text, btn) => alphaBlend(text, 0.5, btn)
   },
   btnDisabledPanelText: {
-    depends: ['btnPanelText'],
+    depends: ['btnPanelText', 'btnDisabled'],
     layer: 'btnPanel',
     variant: 'btnDisabled',
-    textColor: true,
-    color: (mod, text) => brightness(mod * -60, text).rgb
+    color: (mod, text, btn) => alphaBlend(text, 0.5, btn)
   },
   btnDisabledTopBarText: {
-    depends: ['btnTopBarText'],
+    depends: ['btnTopBarText', 'btnDisabled'],
     layer: 'btnTopBar',
     variant: 'btnDisabled',
-    textColor: true,
-    color: (mod, text) => brightness(mod * -60, text).rgb
+    color: (mod, text, btn) => alphaBlend(text, 0.5, btn)
   },
 
   // Input fields
diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
index 49b99148..e9ed3781 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@@ -255,14 +255,17 @@ export const computeDynamicColor = (sourceColor, getColor, mod) => {
 }
 
 /**
- * THE function you want to use. Takes provided colors and opacities, mod
+ * THE function you want to use. Takes provided colors and opacities
  * value and uses inheritance data to figure out color needed for the slot.
  */
-export const getColors = (sourceColors, sourceOpacity, mod) => SLOT_ORDERED.reduce(({ colors, opacity }, key) => {
+export const getColors = (sourceColors, sourceOpacity) => SLOT_ORDERED.reduce(({ colors, opacity }, key) => {
   const value = SLOT_INHERITANCE[key]
   const isObject = typeof value === 'object'
   const isString = typeof value === 'string'
   const sourceColor = sourceColors[key]
+  const variant = value.variant || value.layer || 'bg'
+  const isLightOnDark = relativeLuminance(colors[variant] || sourceColors[variant]) < 0.5
+  const mod = isLightOnDark ? 1 : -1
   let outputColor = null
   if (sourceColor) {
     // Color is defined in source color
@@ -318,7 +321,7 @@ export const getColors = (sourceColors, sourceOpacity, mod) => SLOT_ORDERED.redu
           opacity
         )
       )
-      const isLightOnDark = relativeLuminance(bg) > 127
+      const isLightOnDark = relativeLuminance(bg) > 0.5
       const mod = isLightOnDark ? 1 : -1
 
       if (value.textColor === 'bw') {
-- 
cgit v1.2.3-70-g09d2


From 36e19128bf958559437144b26a3e71f30c9b3377 Mon Sep 17 00:00:00 2001
From: xenofem <xenofem@xeno.science>
Date: Sat, 8 Feb 2020 13:15:09 -0500
Subject: Indicate whether collapsed statuses contain gallery media or link
 preview cards

---
 src/components/status/status.vue | 12 +++++++++++-
 static/fontello.json             |  8 +++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

(limited to 'src/components')

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index d5739304..b9e3fa1d 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -277,7 +277,17 @@
               href="#"
               class="cw-status-hider"
               @click.prevent="toggleShowMore"
-            >{{ $t("general.show_more") }}</a>
+            >
+              {{ $t("general.show_more") }}
+              <span
+                v-if="galleryAttachments.length > 0"
+                class="icon-picture"
+              />
+              <span
+                v-if="status.card"
+                class="icon-link"
+              />
+            </a>
             <a
               v-if="showingMore"
               href="#"
diff --git a/static/fontello.json b/static/fontello.json
index 829241b5..5a7086a2 100755
--- a/static/fontello.json
+++ b/static/fontello.json
@@ -339,6 +339,12 @@
       "css": "arrow-curved",
       "code": 59426,
       "src": "iconic"
+    },
+    {
+      "uid": "0ddd3e8201ccc7d41f7b7c9d27eca6c1",
+      "css": "link",
+      "code": 59427,
+      "src": "fontawesome"
     }
   ]
-}
\ No newline at end of file
+}
-- 
cgit v1.2.3-70-g09d2


From e36c39be192ce98fe20e11ea8e2d4fec1b3d50fd Mon Sep 17 00:00:00 2001
From: xenofem <xenofem@xeno.science>
Date: Sat, 8 Feb 2020 16:01:01 -0500
Subject: Include non-gallery attachments and distinguish between images and
 videos

---
 src/components/status/status.js  | 10 ++++++++++
 src/components/status/status.vue |  6 +++++-
 2 files changed, 15 insertions(+), 1 deletion(-)

(limited to 'src/components')

diff --git a/src/components/status/status.js b/src/components/status/status.js
index 81b57667..fc5956ec 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -256,6 +256,16 @@ const Status = {
         file => !fileType.fileMatchesSomeType(this.galleryTypes, file)
       )
     },
+    hasImageAttachments () {
+      return this.status.attachments.some(
+        file => fileType.fileType(file.mimetype) === 'image'
+      )
+    },
+    hasVideoAttachments () {
+      return this.status.attachments.some(
+        file => fileType.fileType(file.mimetype) === 'video'
+      )
+    },
     maxThumbnails () {
       return this.mergedConfig.maxThumbnails
     },
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index b9e3fa1d..0a82dcbe 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -280,9 +280,13 @@
             >
               {{ $t("general.show_more") }}
               <span
-                v-if="galleryAttachments.length > 0"
+                v-if="hasImageAttachments"
                 class="icon-picture"
               />
+              <span
+                v-if="hasVideoAttachments"
+                class="icon-video"
+              />
               <span
                 v-if="status.card"
                 class="icon-link"
-- 
cgit v1.2.3-70-g09d2


From 44dea9f3646a5c27083dfe6cd6b1522e11c7dc69 Mon Sep 17 00:00:00 2001
From: xenofem <xenofem@xeno.science>
Date: Sun, 9 Feb 2020 17:25:24 -0500
Subject: Allow emoji suggestions based on a match anywhere in the emoji name,
 but improve sorting

---
 src/components/emoji_input/suggestor.js | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

(limited to 'src/components')

diff --git a/src/components/emoji_input/suggestor.js b/src/components/emoji_input/suggestor.js
index aec5c39d..9e437ccc 100644
--- a/src/components/emoji_input/suggestor.js
+++ b/src/components/emoji_input/suggestor.js
@@ -29,17 +29,21 @@ export default data => input => {
 export const suggestEmoji = emojis => input => {
   const noPrefix = input.toLowerCase().substr(1)
   return emojis
-    .filter(({ displayText }) => displayText.toLowerCase().startsWith(noPrefix))
+    .filter(({ displayText }) => displayText.toLowerCase().match(noPrefix))
     .sort((a, b) => {
       let aScore = 0
       let bScore = 0
 
-      // Make custom emojis a priority
-      aScore += a.imageUrl ? 10 : 0
-      bScore += b.imageUrl ? 10 : 0
+      // Prioritize emoji that start with the input string
+      aScore += a.displayText.toLowerCase().startsWith(noPrefix) ? 10 : 0
+      bScore += b.displayText.toLowerCase().startsWith(noPrefix) ? 10 : 0
 
-      // Sort alphabetically
-      const alphabetically = a.displayText > b.displayText ? 1 : -1
+      // Sort by length
+      aScore -= a.displayText.length
+      bScore -= b.displayText.length
+
+      // Break ties alphabetically
+      const alphabetically = a.displayText > b.displayText ? 0.5 : -0.5
 
       return bScore - aScore + alphabetically
     })
-- 
cgit v1.2.3-70-g09d2


From dafced3a864c80f69316417082aaa08e10adee49 Mon Sep 17 00:00:00 2001
From: Hakaba Hitoyo <hakabahitoyo@yahoo.co.jp>
Date: Mon, 10 Feb 2020 08:04:58 +0000
Subject: MRF Keyword Policy Disclosure

---
 CHANGELOG.md                                       |  1 +
 .../mrf_transparency_panel.js                      | 10 ++++-
 .../mrf_transparency_panel.vue                     | 43 ++++++++++++++++++++++
 src/i18n/en.json                                   | 11 +++++-
 4 files changed, 63 insertions(+), 2 deletions(-)

(limited to 'src/components')

diff --git a/CHANGELOG.md b/CHANGELOG.md
index abefd958..c011835c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Pleroma AMOLED dark theme
 - User level domain mutes, under User Settings -> Mutes
 - Emoji reactions for statuses
+- MRF keyword policy disclosure
 ### Changed
 - Captcha now resets on failed registrations
 - Notifications column now cleans itself up to optimize performance when tab is left open for a long time
diff --git a/src/components/mrf_transparency_panel/mrf_transparency_panel.js b/src/components/mrf_transparency_panel/mrf_transparency_panel.js
index 6a1baec8..a0b600d2 100644
--- a/src/components/mrf_transparency_panel/mrf_transparency_panel.js
+++ b/src/components/mrf_transparency_panel/mrf_transparency_panel.js
@@ -11,7 +11,10 @@ const MRFTransparencyPanel = {
       rejectInstances: state => get(state, 'instance.federationPolicy.mrf_simple.reject', []),
       ftlRemovalInstances: state => get(state, 'instance.federationPolicy.mrf_simple.federated_timeline_removal', []),
       mediaNsfwInstances: state => get(state, 'instance.federationPolicy.mrf_simple.media_nsfw', []),
-      mediaRemovalInstances: state => get(state, 'instance.federationPolicy.mrf_simple.media_removal', [])
+      mediaRemovalInstances: state => get(state, 'instance.federationPolicy.mrf_simple.media_removal', []),
+      keywordsFtlRemoval: state => get(state, 'instance.federationPolicy.mrf_keyword.federated_timeline_removal', []),
+      keywordsReject: state => get(state, 'instance.federationPolicy.mrf_keyword.reject', []),
+      keywordsReplace: state => get(state, 'instance.federationPolicy.mrf_keyword.replace', [])
     }),
     hasInstanceSpecificPolicies () {
       return this.quarantineInstances.length ||
@@ -20,6 +23,11 @@ const MRFTransparencyPanel = {
         this.ftlRemovalInstances.length ||
         this.mediaNsfwInstances.length ||
         this.mediaRemovalInstances.length
+    },
+    hasKeywordPolicies () {
+      return this.keywordsFtlRemoval.length ||
+        this.keywordsReject.length ||
+        this.keywordsReplace.length
     }
   }
 }
diff --git a/src/components/mrf_transparency_panel/mrf_transparency_panel.vue b/src/components/mrf_transparency_panel/mrf_transparency_panel.vue
index d6495dc6..8038e587 100644
--- a/src/components/mrf_transparency_panel/mrf_transparency_panel.vue
+++ b/src/components/mrf_transparency_panel/mrf_transparency_panel.vue
@@ -109,6 +109,49 @@
               />
             </ul>
           </div>
+
+          <h2 v-if="hasKeywordPolicies">
+            {{ $t("about.mrf.keyword.keyword_policies") }}
+          </h2>
+
+          <div v-if="keywordsFtlRemoval.length">
+            <h4>{{ $t("about.mrf.keyword.ftl_removal") }}</h4>
+
+            <ul>
+              <li
+                v-for="keyword in keywordsFtlRemoval"
+                :key="keyword"
+                v-text="keyword"
+              />
+            </ul>
+          </div>
+
+          <div v-if="keywordsReject.length">
+            <h4>{{ $t("about.mrf.keyword.reject") }}</h4>
+
+            <ul>
+              <li
+                v-for="keyword in keywordsReject"
+                :key="keyword"
+                v-text="keyword"
+              />
+            </ul>
+          </div>
+
+          <div v-if="keywordsReplace.length">
+            <h4>{{ $t("about.mrf.keyword.replace") }}</h4>
+
+            <ul>
+              <li
+                v-for="keyword in keywordsReplace"
+                :key="keyword"
+              >
+                {{ keyword.pattern }}
+                {{ $t("about.mrf.keyword.is_replaced_by") }}
+                {{ keyword.replacement }}
+              </li>
+            </ul>
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index db2ce54d..ef841bbb 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -16,7 +16,16 @@
     "mrf_policy_simple_media_removal": "Media Removal",
     "mrf_policy_simple_media_removal_desc": "This instance removes media from posts on the following instances:",
     "mrf_policy_simple_media_nsfw": "Media Force-set As Sensitive",
-    "mrf_policy_simple_media_nsfw_desc": "This instance forces media to be set sensitive in posts on the following instances:"
+    "mrf_policy_simple_media_nsfw_desc": "This instance forces media to be set sensitive in posts on the following instances:",
+    "mrf": {
+      "keyword": {
+        "keyword_policies": "Keyword Policies",
+        "ftl_removal": "Removal from \"The Whole Known Network\" Timeline",
+        "reject": "Reject",
+        "replace": "Replace",
+        "is_replaced_by": "→"
+      }
+    }
   },
   "chat": {
     "title": "Chat"
-- 
cgit v1.2.3-70-g09d2


From 02864bc07b2ab2f08232ba1c4c27079454dc87ef Mon Sep 17 00:00:00 2001
From: xenofem <xenofem@xeno.science>
Date: Mon, 10 Feb 2020 09:32:07 -0500
Subject: Prioritize custom emoji a lot and boost exact matches to the top

---
 src/components/emoji_input/suggestor.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

(limited to 'src/components')

diff --git a/src/components/emoji_input/suggestor.js b/src/components/emoji_input/suggestor.js
index 9e437ccc..15a71eff 100644
--- a/src/components/emoji_input/suggestor.js
+++ b/src/components/emoji_input/suggestor.js
@@ -34,7 +34,15 @@ export const suggestEmoji = emojis => input => {
       let aScore = 0
       let bScore = 0
 
-      // Prioritize emoji that start with the input string
+      // An exact match always wins
+      aScore += a.displayText.toLowerCase() === noPrefix ? 200 : 0
+      bScore += b.displayText.toLowerCase() === noPrefix ? 200 : 0
+
+      // Prioritize custom emoji a lot
+      aScore += a.imageUrl ? 100 : 0
+      bScore += b.imageUrl ? 100 : 0
+
+      // Prioritize prefix matches somewhat
       aScore += a.displayText.toLowerCase().startsWith(noPrefix) ? 10 : 0
       bScore += b.displayText.toLowerCase().startsWith(noPrefix) ? 10 : 0
 
-- 
cgit v1.2.3-70-g09d2


From 38c34b8b51136e3d73506cf5347aa57541b36653 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 11 Feb 2020 00:34:30 +0200
Subject: fixed eslint, made `mod` work properly depending on context including
 in shadows

---
 src/components/style_switcher/preview.vue     |  2 +-
 src/services/style_setter/style_setter.js     | 22 ++++++++--
 src/services/theme_data/theme_data.service.js | 59 ++++++++++++++-------------
 3 files changed, 49 insertions(+), 34 deletions(-)

(limited to 'src/components')

diff --git a/src/components/style_switcher/preview.vue b/src/components/style_switcher/preview.vue
index 5b8c3839..8afbb123 100644
--- a/src/components/style_switcher/preview.vue
+++ b/src/components/style_switcher/preview.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="preview-container">
-    <div class="underlay underlay-preview"/>
+    <div class="underlay underlay-preview" />
     <div class="panel dummy">
       <div class="panel-heading">
         <div class="title">
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index b9a23ad7..32102152 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -1,6 +1,6 @@
 import { times } from 'lodash'
 import { convert } from 'chromatism'
-import { rgb2hex, hex2rgb, rgba2css, getCssColor } from '../color_convert/color_convert.js'
+import { rgb2hex, hex2rgb, rgba2css, getCssColor, relativeLuminance } from '../color_convert/color_convert.js'
 import { getColors, computeDynamicColor } from '../theme_data/theme_data.service.js'
 
 // While this is not used anymore right now, I left it in if we want to do custom
@@ -133,8 +133,7 @@ export const generateColors = (themeData) => {
     theme: {
       colors: htmlColors.solid,
       opacity
-    },
-    mod
+    }
   }
 }
 
@@ -281,7 +280,18 @@ export const DEFAULT_SHADOWS = {
     alpha: 1
   }]
 }
-export const generateShadows = (input, colors, mod) => {
+export const generateShadows = (input, colors) => {
+  // TODO this is a small hack for `mod` to work with shadows
+  // this is used to get the "context" of shadow, i.e. for `mod` properly depend on background color of element
+  const hackContextDict = {
+    button: 'btn',
+    panel: 'bg',
+    top: 'topBar',
+    popup: 'popover',
+    avatar: 'bg',
+    panelHeader: 'panel',
+    input: 'input'
+  }
   const inputShadows = input.shadows && !input.themeEngineVersion
     ? shadows2to3(input.shadows)
     : input.shadows || {}
@@ -289,6 +299,10 @@ export const generateShadows = (input, colors, mod) => {
     ...DEFAULT_SHADOWS,
     ...inputShadows
   }).reduce((shadowsAcc, [slotName, shadowDefs]) => {
+    const slotFirstWord = slotName.replace(/[A-Z].*$/, '')
+    const colorSlotName = hackContextDict[slotFirstWord]
+    const isLightOnDark = relativeLuminance(convert(colors[colorSlotName]).rgb) < 0.5
+    const mod = isLightOnDark ? 1 : -1
     const newShadow = shadowDefs.reduce((shadowAcc, def) => [
       ...shadowAcc,
       {
diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
index e9ed3781..7479a55e 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@@ -259,13 +259,34 @@ export const computeDynamicColor = (sourceColor, getColor, mod) => {
  * value and uses inheritance data to figure out color needed for the slot.
  */
 export const getColors = (sourceColors, sourceOpacity) => SLOT_ORDERED.reduce(({ colors, opacity }, key) => {
-  const value = SLOT_INHERITANCE[key]
-  const isObject = typeof value === 'object'
-  const isString = typeof value === 'string'
   const sourceColor = sourceColors[key]
-  const variant = value.variant || value.layer || 'bg'
-  const isLightOnDark = relativeLuminance(colors[variant] || sourceColors[variant]) < 0.5
+  const value = expandSlotValue(SLOT_INHERITANCE[key])
+  const deps = getDependencies(key, SLOT_INHERITANCE)
+  const isTextColor = !!value.textColor
+  const variant = value.variant || value.layer
+
+  let backgroundColor = null
+
+  if (isTextColor) {
+    backgroundColor = alphaBlendLayers(
+      { ...(colors[deps[0]] || convert(sourceColors[key] || '#FF00FF').rgb) },
+      getLayers(
+        getLayerSlot(key) || 'bg',
+        variant || 'bg',
+        getOpacitySlot(variant),
+        colors,
+        opacity
+      )
+    )
+  } else if (variant && variant !== key) {
+    backgroundColor = colors[variant] || convert(sourceColors[variant]).rgb
+  } else {
+    backgroundColor = colors.bg || convert(sourceColors.bg)
+  }
+
+  const isLightOnDark = relativeLuminance(backgroundColor) < 0.5
   const mod = isLightOnDark ? 1 : -1
+
   let outputColor = null
   if (sourceColor) {
     // Color is defined in source color
@@ -280,7 +301,6 @@ export const getColors = (sourceColors, sourceOpacity) => SLOT_ORDERED.reduce(({
         opacity
       ).slice(0, -1)
       targetColor = {
-        // TODO: try to use alpha-blended background here
         ...alphaBlendLayers(
           convert('#FF00FF').rgb,
           layers
@@ -297,43 +317,24 @@ export const getColors = (sourceColors, sourceOpacity) => SLOT_ORDERED.reduce(({
       targetColor = convert(targetColor).rgb
     }
     outputColor = { ...targetColor }
-  } else if (isString && value.startsWith('#')) {
-    // slot: '#000000' shorthand
-    outputColor = convert(value).rgb
-  } else if (isObject && value.default) {
+  } else if (value.default) {
     // same as above except in object form
     outputColor = convert(value.default).rgb
   } else {
     // calculate color
     const defaultColorFunc = (mod, dep) => ({ ...dep })
-    const deps = getDependencies(key, SLOT_INHERITANCE)
-    const colorFunc = (isObject && value.color) || defaultColorFunc
+    const colorFunc = value.color || defaultColorFunc
 
     if (value.textColor) {
-      // textColor case
-      const bg = alphaBlendLayers(
-        { ...colors[deps[0]] },
-        getLayers(
-          value.layer,
-          value.variant || value.layer,
-          getOpacitySlot(value.variant || value.layer),
-          colors,
-          opacity
-        )
-      )
-      const isLightOnDark = relativeLuminance(bg) > 0.5
-      const mod = isLightOnDark ? 1 : -1
-
       if (value.textColor === 'bw') {
-        outputColor = contrastRatio(bg).rgb
+        outputColor = contrastRatio(backgroundColor).rgb
       } else {
         let color = { ...colors[deps[0]] }
         if (value.color) {
           color = colorFunc(mod, ...deps.map((dep) => ({ ...colors[dep] })))
         }
-
         outputColor = getTextColor(
-          bg,
+          backgroundColor,
           { ...color },
           value.textColor === 'preserve'
         )
-- 
cgit v1.2.3-70-g09d2


From b4278ee517522f559751ab005a9521aa17ee07b6 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 11 Feb 2020 00:52:25 +0200
Subject: fix warning stylings

---
 src/components/style_switcher/style_switcher.scss | 6 ++++++
 1 file changed, 6 insertions(+)

(limited to 'src/components')

diff --git a/src/components/style_switcher/style_switcher.scss b/src/components/style_switcher/style_switcher.scss
index 71d0f05e..d2a40d13 100644
--- a/src/components/style_switcher/style_switcher.scss
+++ b/src/components/style_switcher/style_switcher.scss
@@ -3,6 +3,12 @@
   .theme-warning {
     display: flex;
     align-items: baseline;
+    margin-bottom: .5em;
+    .buttons {
+      .btn {
+        margin-bottom: .5em;
+      }
+    }
   }
   .preset-switcher {
     margin-right: 1em;
-- 
cgit v1.2.3-70-g09d2


From 43bddc79e0abc35fd310d9a92051bb2d5b529984 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 11 Feb 2020 01:13:59 +0200
Subject: fix/remove contrast ratios

---
 src/components/style_switcher/style_switcher.vue | 6 +-----
 src/services/theme_data/pleromafe.js             | 6 +++++-
 2 files changed, 6 insertions(+), 6 deletions(-)

(limited to 'src/components')

diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index 705a60a2..205f325c 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -252,9 +252,8 @@
               name="postLinkColor"
               :fallback="previewTheme.colors.accent"
               :label="$t('settings.links')"
-              :show-optional-tickbox="typeof accentColorLocal !== 'undefined'"
             />
-            <ContrastRatio :contrast="previewContrast.bgPostLink" />
+            <ContrastRatio :contrast="previewContrast.postLink" />
             <h4>{{ $t('settings.style.advanced_colors.alert') }}</h4>
             <ColorInput
               v-model="alertErrorColorLocal"
@@ -485,21 +484,18 @@
               :fallback="previewTheme.colors.btnDisabledText"
               :label="$t('settings.text')"
             />
-            <ContrastRatio :contrast="previewContrast.btnDisabledText" />
             <ColorInput
               v-model="btnDisabledPanelTextColorLocal"
               name="btnDisabledPanelTextColor"
               :fallback="previewTheme.colors.btnDisabledPanelText"
               :label="$t('settings.style.advanced_colors.panel_header')"
             />
-            <ContrastRatio :contrast="previewContrast.btnDisabledPanelText" />
             <ColorInput
               v-model="btnDisabledTopBarTextColorLocal"
               name="btnDisabledTopBarTextColor"
               :fallback="previewTheme.colors.btnDisabledTopBarText"
               :label="$t('settings.style.advanced_colors.top_bar')"
             />
-            <ContrastRatio :contrast="previewContrast.btnDisabledTopBarText" />
             <h4>{{ $t('settings.style.advanced_colors.toggled') }}</h4>
             <ColorInput
               v-model="btnToggledColorLocal"
diff --git a/src/services/theme_data/pleromafe.js b/src/services/theme_data/pleromafe.js
index 98fba5ef..9b33e4a9 100644
--- a/src/services/theme_data/pleromafe.js
+++ b/src/services/theme_data/pleromafe.js
@@ -329,11 +329,15 @@ export const SLOT_INHERITANCE = {
 
   lightText: {
     depends: ['text'],
+    layer: 'bg',
+    textColor: 'preserve',
     color: (mod, text) => brightness(20 * mod, text).rgb
   },
 
   postLink: {
-    depends: ['link']
+    depends: ['link'],
+    layer: 'bg',
+    textColor: 'preserve'
   },
 
   border: {
-- 
cgit v1.2.3-70-g09d2


From f6b482be515ea4f0281050f71296ffe0ec2ab305 Mon Sep 17 00:00:00 2001
From: Shpuld Shpludson <shp@cock.li>
Date: Tue, 11 Feb 2020 12:24:51 +0000
Subject: Emoji Reactions - fixes and improvements

---
 src/App.scss                                       |   2 +-
 src/_variables.scss                                |   2 +
 src/components/emoji_reactions/emoji_reactions.js  |  48 +++++++++-
 src/components/emoji_reactions/emoji_reactions.vue | 103 +++++++++++++++++++--
 src/components/notification/notification.vue       |   7 ++
 src/components/notifications/notifications.scss    |   4 +
 src/components/react_button/react_button.js        |   7 +-
 src/components/react_button/react_button.vue       |   4 +
 src/components/settings/settings.vue               |  10 ++
 src/components/status/status.vue                   |   1 +
 src/i18n/en.json                                   |   5 +-
 src/i18n/fi.json                                   |   5 +-
 src/modules/config.js                              |   4 +-
 src/modules/statuses.js                            |  36 ++++---
 src/services/api/api.service.js                    |  28 +++---
 .../entity_normalizer/entity_normalizer.service.js |   1 +
 .../notification_utils/notification_utils.js       |   3 +-
 test/unit/specs/modules/statuses.spec.js           |  13 ++-
 18 files changed, 236 insertions(+), 47 deletions(-)

(limited to 'src/components')

diff --git a/src/App.scss b/src/App.scss
index 754ca62e..922e39b6 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -75,7 +75,7 @@ button {
   border-radius: $fallback--btnRadius;
   border-radius: var(--btnRadius, $fallback--btnRadius);
   cursor: pointer;
-  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 1), 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
+  box-shadow: $fallback--buttonShadow;
   box-shadow: var(--buttonShadow);
   font-size: 14px;
   font-family: sans-serif;
diff --git a/src/_variables.scss b/src/_variables.scss
index e18101f0..30dc3e42 100644
--- a/src/_variables.scss
+++ b/src/_variables.scss
@@ -27,3 +27,5 @@ $fallback--tooltipRadius: 5px;
 $fallback--avatarRadius: 4px;
 $fallback--avatarAltRadius: 10px;
 $fallback--attachmentRadius: 10px;
+
+$fallback--buttonShadow: 0px 0px 2px 0px rgba(0, 0, 0, 1), 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
diff --git a/src/components/emoji_reactions/emoji_reactions.js b/src/components/emoji_reactions/emoji_reactions.js
index 95d52cb6..b799ac9a 100644
--- a/src/components/emoji_reactions/emoji_reactions.js
+++ b/src/components/emoji_reactions/emoji_reactions.js
@@ -1,17 +1,55 @@
+import UserAvatar from '../user_avatar/user_avatar.vue'
+
+const EMOJI_REACTION_COUNT_CUTOFF = 12
 
 const EmojiReactions = {
   name: 'EmojiReactions',
+  components: {
+    UserAvatar
+  },
   props: ['status'],
+  data: () => ({
+    showAll: false,
+    popperOptions: {
+      modifiers: {
+        preventOverflow: { padding: { top: 50 }, boundariesElement: 'viewport' }
+      }
+    }
+  }),
   computed: {
+    tooManyReactions () {
+      return this.status.emoji_reactions.length > EMOJI_REACTION_COUNT_CUTOFF
+    },
     emojiReactions () {
-      return this.status.emoji_reactions
+      return this.showAll
+        ? this.status.emoji_reactions
+        : this.status.emoji_reactions.slice(0, EMOJI_REACTION_COUNT_CUTOFF)
+    },
+    showMoreString () {
+      return `+${this.status.emoji_reactions.length - EMOJI_REACTION_COUNT_CUTOFF}`
+    },
+    accountsForEmoji () {
+      return this.status.emoji_reactions.reduce((acc, reaction) => {
+        acc[reaction.name] = reaction.accounts || []
+        return acc
+      }, {})
+    },
+    loggedIn () {
+      return !!this.$store.state.users.currentUser
     }
   },
   methods: {
+    toggleShowAll () {
+      this.showAll = !this.showAll
+    },
     reactedWith (emoji) {
-      const user = this.$store.state.users.currentUser
-      const reaction = this.status.emoji_reactions.find(r => r.emoji === emoji)
-      return reaction.accounts && reaction.accounts.find(u => u.id === user.id)
+      return this.status.emoji_reactions.find(r => r.name === emoji).me
+    },
+    fetchEmojiReactionsByIfMissing () {
+      const hasNoAccounts = this.status.emoji_reactions.find(r => !r.accounts)
+      if (hasNoAccounts) {
+        this.$store.dispatch('fetchEmojiReactionsBy', this.status.id)
+      }
     },
     reactWith (emoji) {
       this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })
@@ -20,6 +58,8 @@ const EmojiReactions = {
       this.$store.dispatch('unreactWithEmoji', { id: this.status.id, emoji })
     },
     emojiOnClick (emoji, event) {
+      if (!this.loggedIn) return
+
       if (this.reactedWith(emoji)) {
         this.unreact(emoji)
       } else {
diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
index 00d6d2b7..e5b6d9f5 100644
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/src/components/emoji_reactions/emoji_reactions.vue
@@ -1,16 +1,58 @@
 <template>
   <div class="emoji-reactions">
-    <button
+    <v-popover
       v-for="(reaction) in emojiReactions"
-      :key="reaction.emoji"
-      class="emoji-reaction btn btn-default"
-      :class="{ 'picked-reaction': reactedWith(reaction.emoji) }"
-      @click="emojiOnClick(reaction.emoji, $event)"
+      :key="reaction.name"
+      :popper-options="popperOptions"
+      trigger="hover"
+      placement="top"
     >
-      <span class="reaction-emoji">{{ reaction.emoji }}</span>
-      <span>{{ reaction.count }}</span>
-    </button>
+
+      <div
+        slot="popover"
+        class="reacted-users"
+      >
+        <div v-if="accountsForEmoji[reaction.name].length">
+          <div
+            v-for="(account) in accountsForEmoji[reaction.name]"
+            :key="account.id"
+            class="reacted-user"
+          >
+            <UserAvatar
+              :user="account"
+              class="avatar-small"
+              :compact="true"
+            />
+            <div class="reacted-user-names">
+              <span class="reacted-user-name" v-html="account.name_html" />
+              <span class="reacted-user-screen-name">{{ account.screen_name }}</span>
+            </div>
+          </div>
+        </div>
+        <div v-else>
+          <i class="icon-spin4 animate-spin" />
+        </div>
+      </div>
+      <button
+        class="emoji-reaction btn btn-default"
+        :class="{ 'picked-reaction': reactedWith(reaction.name), 'not-clickable': !loggedIn }"
+        @click="emojiOnClick(reaction.name, $event)"
+        @mouseenter="fetchEmojiReactionsByIfMissing()"
+      >
+        <span class="reaction-emoji">{{ reaction.name }}</span>
+        <span>{{ reaction.count }}</span>
+      </button>
+    </v-popover>
+    <a
+        v-if="tooManyReactions"
+        @click="toggleShowAll"
+        class="emoji-reaction-expand faint"
+        href='javascript:void(0)'
+      >
+        {{ showAll ? $t('general.show_less') : showMoreString }}
+      </a>
   </div>
+
 </template>
 
 <script src="./emoji_reactions.js" ></script>
@@ -23,6 +65,31 @@
   flex-wrap: wrap;
 }
 
+.reacted-users {
+  padding: 0.5em;
+}
+
+.reacted-user {
+  padding: 0.25em;
+  display: flex;
+  flex-direction: row;
+
+  .reacted-user-names {
+    display: flex;
+    flex-direction: column;
+    margin-left: 0.5em;
+
+    img {
+      width: 1em;
+      height: 1em;
+    }
+  }
+
+  .reacted-user-screen-name {
+    font-size: 9px;
+  }
+}
+
 .emoji-reaction {
   padding: 0 0.5em;
   margin-right: 0.5em;
@@ -38,6 +105,26 @@
   &:focus {
     outline: none;
   }
+
+  &.not-clickable {
+    cursor: default;
+    &:hover {
+      box-shadow: $fallback--buttonShadow;
+      box-shadow: var(--buttonShadow);
+    }
+  }
+}
+
+.emoji-reaction-expand {
+  padding: 0 0.5em;
+  margin-right: 0.5em;
+  margin-top: 0.5em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  &:hover {
+    text-decoration: underline;
+  }
 }
 
 .picked-reaction {
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 16124e50..411c0271 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -78,6 +78,13 @@
               <i class="fa icon-arrow-curved lit" />
               <small>{{ $t('notifications.migrated_to') }}</small>
             </span>
+            <span v-if="notification.type === 'pleroma:emoji_reaction'">
+              <small>
+                <i18n path="notifications.reacted_with">
+                  <span class="emoji-reaction-emoji">{{ notification.emoji }}</span>
+                </i18n>
+              </small>
+            </span>
           </div>
           <div
             v-if="notification.type === 'follow' || notification.type === 'move'"
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 148ac7f2..8d819a56 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -94,6 +94,10 @@
     min-width: 0;
   }
 
+  .emoji-reaction-emoji {
+    font-size: 16px;
+  }
+
   .notification-details {
     min-width: 0px;
     word-wrap: break-word;
diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js
index 6fb2a780..a6cf5b94 100644
--- a/src/components/react_button/react_button.js
+++ b/src/components/react_button/react_button.js
@@ -22,7 +22,12 @@ const ReactButton = {
       this.showTooltip = false
     },
     addReaction (event, emoji) {
-      this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })
+      const existingReaction = this.status.emoji_reactions.find(r => r.name === emoji)
+      if (existingReaction && existingReaction.me) {
+        this.$store.dispatch('unreactWithEmoji', { id: this.status.id, emoji })
+      } else {
+        this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })
+      }
       this.closeReactionSelect()
     }
   },
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index c925dd71..fb43ebaf 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -54,6 +54,10 @@
 
 .reaction-picker-filter {
   padding: 0.5em;
+  display: flex;
+  input {
+    flex: 1;
+  }
 }
 
 .reaction-picker-divider {
diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
index cef492f3..60cb8a87 100644
--- a/src/components/settings/settings.vue
+++ b/src/components/settings/settings.vue
@@ -92,6 +92,11 @@
                     {{ $t('settings.reply_link_preview') }}
                   </Checkbox>
                 </li>
+                <li>
+                  <Checkbox v-model="emojiReactionsOnTimeline">
+                    {{ $t('settings.emoji_reactions_on_timeline') }}
+                  </Checkbox>
+                </li>
               </ul>
             </div>
 
@@ -328,6 +333,11 @@
                       {{ $t('settings.notification_visibility_moves') }}
                     </Checkbox>
                   </li>
+                  <li>
+                    <Checkbox v-model="notificationVisibility.emojiReactions">
+                      {{ $t('settings.notification_visibility_emoji_reactions') }}
+                    </Checkbox>
+                  </li>
                 </ul>
               </div>
               <div>
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 0a82dcbe..83f07dac 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -369,6 +369,7 @@
           </transition>
 
           <EmojiReactions
+            v-if="(mergedConfig.emojiReactionsOnTimeline || isFocused) && (!noHeading && !isPreview)"
             :status="status"
           />
 
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 74e71fc8..d0d654d3 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -126,7 +126,8 @@
     "read": "Read!",
     "repeated_you": "repeated your status",
     "no_more_notifications": "No more notifications",
-    "migrated_to": "migrated to"
+    "migrated_to": "migrated to",
+    "reacted_with": "reacted with {0}"
   },
   "polls": {
     "add_poll": "Add Poll",
@@ -283,6 +284,7 @@
     "domain_mutes": "Domains",
     "avatar_size_instruction": "The recommended minimum size for avatar images is 150x150 pixels.",
     "pad_emoji": "Pad emoji with spaces when adding from picker",
+    "emoji_reactions_on_timeline": "Show emoji reactions on timeline",
     "export_theme": "Save preset",
     "filtering": "Filtering",
     "filtering_explanation": "All statuses containing these words will be muted, one per line",
@@ -331,6 +333,7 @@
     "notification_visibility_mentions": "Mentions",
     "notification_visibility_repeats": "Repeats",
     "notification_visibility_moves": "User Migrates",
+    "notification_visibility_emoji_reactions": "Reactions",
     "no_rich_text_description": "Strip rich text formatting from all posts",
     "no_blocks": "No blocks",
     "no_mutes": "No mutes",
diff --git a/src/i18n/fi.json b/src/i18n/fi.json
index e7ed5408..ac8b2ac9 100644
--- a/src/i18n/fi.json
+++ b/src/i18n/fi.json
@@ -53,7 +53,8 @@
     "notifications": "Ilmoitukset",
     "read": "Lue!",
     "repeated_you": "toisti viestisi",
-    "no_more_notifications": "Ei enempää ilmoituksia"
+    "no_more_notifications": "Ei enempää ilmoituksia",
+    "reacted_with": "lisäsi reaktion {0}"
   },
   "polls": {
     "add_poll": "Lisää äänestys",
@@ -140,6 +141,7 @@
     "delete_account_description": "Poista tilisi ja viestisi pysyvästi.",
     "delete_account_error": "Virhe poistaessa tiliäsi. Jos virhe jatkuu, ota yhteyttä palvelimesi ylläpitoon.",
     "delete_account_instructions": "Syötä salasanasi vahvistaaksesi tilin poiston.",
+    "emoji_reactions_on_timeline": "Näytä emojireaktiot aikajanalla",
     "export_theme": "Tallenna teema",
     "filtering": "Suodatus",
     "filtering_explanation": "Kaikki viestit, jotka sisältävät näitä sanoja, suodatetaan. Yksi sana per rivi.",
@@ -183,6 +185,7 @@
     "notification_visibility_likes": "Tykkäykset",
     "notification_visibility_mentions": "Maininnat",
     "notification_visibility_repeats": "Toistot",
+    "notification_visibility_emoji_reactions": "Reaktiot",
     "no_rich_text_description": "Älä näytä tekstin muotoilua.",
     "hide_network_description": "Älä näytä seurauksiani tai seuraajiani",
     "nsfw_clickthrough": "Piilota NSFW liitteet klikkauksen taakse",
diff --git a/src/modules/config.js b/src/modules/config.js
index de9f041b..8381fa53 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -20,6 +20,7 @@ export const defaultState = {
   autoLoad: true,
   streaming: false,
   hoverPreview: true,
+  emojiReactionsOnTimeline: true,
   autohideFloatingPostButton: false,
   pauseOnUnfocused: true,
   stopGifs: false,
@@ -29,7 +30,8 @@ export const defaultState = {
     mentions: true,
     likes: true,
     repeats: true,
-    moves: true
+    moves: true,
+    emojiReactions: false
   },
   webPushNotifications: false,
   muteWords: [],
diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index ea0c1749..25b62ac7 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -81,7 +81,8 @@ const visibleNotificationTypes = (rootState) => {
     rootState.config.notificationVisibility.mentions && 'mention',
     rootState.config.notificationVisibility.repeats && 'repeat',
     rootState.config.notificationVisibility.follows && 'follow',
-    rootState.config.notificationVisibility.moves && 'move'
+    rootState.config.notificationVisibility.moves && 'move',
+    rootState.config.notificationVisibility.emojiReactions && 'pleroma:emoji_reactions'
   ].filter(_ => _)
 }
 
@@ -325,6 +326,10 @@ const addNewNotifications = (state, { dispatch, notifications, older, visibleNot
       notification.status = notification.status && addStatusToGlobalStorage(state, notification.status).item
     }
 
+    if (notification.type === 'pleroma:emoji_reaction') {
+      dispatch('fetchEmojiReactionsBy', notification.status.id)
+    }
+
     // Only add a new notification if we don't have one for the same action
     if (!state.notifications.idStore.hasOwnProperty(notification.id)) {
       state.notifications.maxId = notification.id > state.notifications.maxId
@@ -358,7 +363,9 @@ const addNewNotifications = (state, { dispatch, notifications, older, visibleNot
             break
         }
 
-        if (i18nString) {
+        if (notification.type === 'pleroma:emoji_reaction') {
+          notifObj.body = rootGetters.i18n.t('notifications.reacted_with', [notification.emoji])
+        } else if (i18nString) {
           notifObj.body = rootGetters.i18n.t('notifications.' + i18nString)
         } else {
           notifObj.body = notification.status.text
@@ -371,10 +378,10 @@ const addNewNotifications = (state, { dispatch, notifications, older, visibleNot
         }
 
         if (!notification.seen && !state.notifications.desktopNotificationSilence && visibleNotificationTypes.includes(notification.type)) {
-          let notification = new window.Notification(title, notifObj)
+          let desktopNotification = new window.Notification(title, notifObj)
           // Chrome is known for not closing notifications automatically
           // according to MDN, anyway.
-          setTimeout(notification.close.bind(notification), 5000)
+          setTimeout(desktopNotification.close.bind(desktopNotification), 5000)
         }
       }
     } else if (notification.seen) {
@@ -537,12 +544,13 @@ export const mutations = {
   },
   addOwnReaction (state, { id, emoji, currentUser }) {
     const status = state.allStatusesObject[id]
-    const reactionIndex = findIndex(status.emoji_reactions, { emoji })
-    const reaction = status.emoji_reactions[reactionIndex] || { emoji, count: 0, accounts: [] }
+    const reactionIndex = findIndex(status.emoji_reactions, { name: emoji })
+    const reaction = status.emoji_reactions[reactionIndex] || { name: emoji, count: 0, accounts: [] }
 
     const newReaction = {
       ...reaction,
       count: reaction.count + 1,
+      me: true,
       accounts: [
         ...reaction.accounts,
         currentUser
@@ -558,21 +566,23 @@ export const mutations = {
   },
   removeOwnReaction (state, { id, emoji, currentUser }) {
     const status = state.allStatusesObject[id]
-    const reactionIndex = findIndex(status.emoji_reactions, { emoji })
+    const reactionIndex = findIndex(status.emoji_reactions, { name: emoji })
     if (reactionIndex < 0) return
 
     const reaction = status.emoji_reactions[reactionIndex]
+    const accounts = reaction.accounts || []
 
     const newReaction = {
       ...reaction,
       count: reaction.count - 1,
-      accounts: reaction.accounts.filter(acc => acc.id === currentUser.id)
+      me: false,
+      accounts: accounts.filter(acc => acc.id !== currentUser.id)
     }
 
     if (newReaction.count > 0) {
       set(status.emoji_reactions, reactionIndex, newReaction)
     } else {
-      set(status, 'emoji_reactions', status.emoji_reactions.filter(r => r.emoji !== emoji))
+      set(status, 'emoji_reactions', status.emoji_reactions.filter(r => r.name !== emoji))
     }
   },
   updateStatusWithPoll (state, { id, poll }) {
@@ -681,18 +691,22 @@ const statuses = {
     },
     reactWithEmoji ({ rootState, dispatch, commit }, { id, emoji }) {
       const currentUser = rootState.users.currentUser
+      if (!currentUser) return
+
       commit('addOwnReaction', { id, emoji, currentUser })
       rootState.api.backendInteractor.reactWithEmoji({ id, emoji }).then(
-        status => {
+        ok => {
           dispatch('fetchEmojiReactionsBy', id)
         }
       )
     },
     unreactWithEmoji ({ rootState, dispatch, commit }, { id, emoji }) {
       const currentUser = rootState.users.currentUser
+      if (!currentUser) return
+
       commit('removeOwnReaction', { id, emoji, currentUser })
       rootState.api.backendInteractor.unreactWithEmoji({ id, emoji }).then(
-        status => {
+        ok => {
           dispatch('fetchEmojiReactionsBy', id)
         }
       )
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index b794fd58..20eaa9a0 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -74,9 +74,9 @@ const MASTODON_SEARCH_2 = `/api/v2/search`
 const MASTODON_USER_SEARCH_URL = '/api/v1/accounts/search'
 const MASTODON_DOMAIN_BLOCKS_URL = '/api/v1/domain_blocks'
 const MASTODON_STREAMING = '/api/v1/streaming'
-const PLEROMA_EMOJI_REACTIONS_URL = id => `/api/v1/pleroma/statuses/${id}/emoji_reactions_by`
-const PLEROMA_EMOJI_REACT_URL = id => `/api/v1/pleroma/statuses/${id}/react_with_emoji`
-const PLEROMA_EMOJI_UNREACT_URL = id => `/api/v1/pleroma/statuses/${id}/unreact_with_emoji`
+const PLEROMA_EMOJI_REACTIONS_URL = id => `/api/v1/pleroma/statuses/${id}/reactions`
+const PLEROMA_EMOJI_REACT_URL = (id, emoji) => `/api/v1/pleroma/statuses/${id}/reactions/${emoji}`
+const PLEROMA_EMOJI_UNREACT_URL = (id, emoji) => `/api/v1/pleroma/statuses/${id}/reactions/${emoji}`
 
 const oldfetch = window.fetch
 
@@ -888,25 +888,27 @@ const fetchRebloggedByUsers = ({ id }) => {
   return promisedRequest({ url: MASTODON_STATUS_REBLOGGEDBY_URL(id) }).then((users) => users.map(parseUser))
 }
 
-const fetchEmojiReactions = ({ id }) => {
-  return promisedRequest({ url: PLEROMA_EMOJI_REACTIONS_URL(id) })
+const fetchEmojiReactions = ({ id, credentials }) => {
+  return promisedRequest({ url: PLEROMA_EMOJI_REACTIONS_URL(id), credentials })
+    .then((reactions) => reactions.map(r => {
+      r.accounts = r.accounts.map(parseUser)
+      return r
+    }))
 }
 
 const reactWithEmoji = ({ id, emoji, credentials }) => {
   return promisedRequest({
-    url: PLEROMA_EMOJI_REACT_URL(id),
-    method: 'POST',
-    credentials,
-    payload: { emoji }
+    url: PLEROMA_EMOJI_REACT_URL(id, emoji),
+    method: 'PUT',
+    credentials
   }).then(parseStatus)
 }
 
 const unreactWithEmoji = ({ id, emoji, credentials }) => {
   return promisedRequest({
-    url: PLEROMA_EMOJI_UNREACT_URL(id),
-    method: 'POST',
-    credentials,
-    payload: { emoji }
+    url: PLEROMA_EMOJI_UNREACT_URL(id, emoji),
+    method: 'DELETE',
+    credentials
   }).then(parseStatus)
 }
 
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index 0a8abbbd..84169a7b 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -354,6 +354,7 @@ export const parseNotification = (data) => {
       ? null
       : parseUser(data.target)
     output.from_profile = parseUser(data.account)
+    output.emoji = data.emoji
   } else {
     const parsedNotice = parseStatus(data.notice)
     output.type = data.ntype
diff --git a/src/services/notification_utils/notification_utils.js b/src/services/notification_utils/notification_utils.js
index 860620fc..b17bd7bf 100644
--- a/src/services/notification_utils/notification_utils.js
+++ b/src/services/notification_utils/notification_utils.js
@@ -7,7 +7,8 @@ export const visibleTypes = store => ([
   store.state.config.notificationVisibility.mentions && 'mention',
   store.state.config.notificationVisibility.repeats && 'repeat',
   store.state.config.notificationVisibility.follows && 'follow',
-  store.state.config.notificationVisibility.moves && 'move'
+  store.state.config.notificationVisibility.moves && 'move',
+  store.state.config.notificationVisibility.emojiReactions && 'pleroma:emoji_reaction'
 ].filter(_ => _))
 
 const sortById = (a, b) => {
diff --git a/test/unit/specs/modules/statuses.spec.js b/test/unit/specs/modules/statuses.spec.js
index e53aa388..fe42e85b 100644
--- a/test/unit/specs/modules/statuses.spec.js
+++ b/test/unit/specs/modules/statuses.spec.js
@@ -245,11 +245,12 @@ describe('Statuses module', () => {
     it('increments count in existing reaction', () => {
       const state = defaultState()
       const status = makeMockStatus({ id: '1' })
-      status.emoji_reactions = [ { emoji: '😂', count: 1, accounts: [] } ]
+      status.emoji_reactions = [ { name: '😂', count: 1, accounts: [] } ]
 
       mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public' })
       mutations.addOwnReaction(state, { id: '1', emoji: '😂', currentUser: { id: 'me' } })
       expect(state.allStatusesObject['1'].emoji_reactions[0].count).to.eql(2)
+      expect(state.allStatusesObject['1'].emoji_reactions[0].me).to.eql(true)
       expect(state.allStatusesObject['1'].emoji_reactions[0].accounts[0].id).to.eql('me')
     })
 
@@ -261,27 +262,29 @@ describe('Statuses module', () => {
       mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public' })
       mutations.addOwnReaction(state, { id: '1', emoji: '😂', currentUser: { id: 'me' } })
       expect(state.allStatusesObject['1'].emoji_reactions[0].count).to.eql(1)
+      expect(state.allStatusesObject['1'].emoji_reactions[0].me).to.eql(true)
       expect(state.allStatusesObject['1'].emoji_reactions[0].accounts[0].id).to.eql('me')
     })
 
     it('decreases count in existing reaction', () => {
       const state = defaultState()
       const status = makeMockStatus({ id: '1' })
-      status.emoji_reactions = [ { emoji: '😂', count: 2, accounts: [{ id: 'me' }] } ]
+      status.emoji_reactions = [ { name: '😂', count: 2, accounts: [{ id: 'me' }] } ]
 
       mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public' })
-      mutations.removeOwnReaction(state, { id: '1', emoji: '😂', currentUser: {} })
+      mutations.removeOwnReaction(state, { id: '1', emoji: '😂', currentUser: { id: 'me' } })
       expect(state.allStatusesObject['1'].emoji_reactions[0].count).to.eql(1)
+      expect(state.allStatusesObject['1'].emoji_reactions[0].me).to.eql(false)
       expect(state.allStatusesObject['1'].emoji_reactions[0].accounts).to.eql([])
     })
 
     it('removes a reaction', () => {
       const state = defaultState()
       const status = makeMockStatus({ id: '1' })
-      status.emoji_reactions = [{ emoji: '😂', count: 1, accounts: [{ id: 'me' }] }]
+      status.emoji_reactions = [{ name: '😂', count: 1, accounts: [{ id: 'me' }] }]
 
       mutations.addNewStatuses(state, { statuses: [status], showImmediately: true, timeline: 'public' })
-      mutations.removeOwnReaction(state, { id: '1', emoji: '😂', currentUser: {} })
+      mutations.removeOwnReaction(state, { id: '1', emoji: '😂', currentUser: { id: 'me' } })
       expect(state.allStatusesObject['1'].emoji_reactions.length).to.eql(0)
     })
   })
-- 
cgit v1.2.3-70-g09d2


From 60446c56a5c8d4b4d669fbd4803e77ce686daac9 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 12 Feb 2020 00:45:37 +0200
Subject: fix v2 breezy themes having messed up pressed buttons. updated v2.1
 breezy themes to have derived colors instead of fixed ones.

---
 src/components/style_switcher/style_switcher.js |  7 +++++--
 src/services/color_convert/color_convert.js     |  2 --
 src/services/style_setter/style_setter.js       |  9 +++++----
 static/themes/breezy-dark.json                  | 14 +++++++-------
 static/themes/breezy-light.json                 | 19 ++++++++-----------
 5 files changed, 25 insertions(+), 26 deletions(-)

(limited to 'src/components')

diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index 17ae9f30..807f9efc 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -62,6 +62,7 @@ export default {
       selected: this.$store.getters.mergedConfig.theme,
       themeWarning: undefined,
       tempImportFile: undefined,
+      engineVersion: 0,
 
       previewShadows: {},
       previewColors: {},
@@ -510,7 +511,7 @@ export default {
         colors: this.currentColors
       })
       this.previewShadows = generateShadows(
-        { shadows: this.shadowsLocal },
+        { shadows: this.shadowsLocal, opacity: this.previewTheme.opacity, themeEngineVersion: this.engineVersion },
         this.previewColors.theme.colors,
         this.previewColors.mod
       )
@@ -607,6 +608,8 @@ export default {
         }
       }
 
+      this.engineVersion = version
+
       // Stuff that differs between V1 and V2
       if (version === 1) {
         this.fgColorLocal = rgb2hex(colors.btn)
@@ -653,7 +656,7 @@ export default {
       if (!this.keepShadows) {
         this.clearShadows()
         if (version === 2) {
-          this.shadowsLocal = shadows2to3(shadows)
+          this.shadowsLocal = shadows2to3(shadows, this.previewTheme.opacity)
         } else {
           this.shadowsLocal = shadows
         }
diff --git a/src/services/color_convert/color_convert.js b/src/services/color_convert/color_convert.js
index 3b6fdcc7..ec104269 100644
--- a/src/services/color_convert/color_convert.js
+++ b/src/services/color_convert/color_convert.js
@@ -214,8 +214,6 @@ export const getCssColor = (input, a) => {
   } else if (typeof input === 'string') {
     if (input.startsWith('#')) {
       rgb = hex2rgb(input)
-    } else if (input.startsWith('--')) {
-      return `var(${input})`
     } else {
       return input
     }
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 48f51c59..c8610507 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -1,6 +1,6 @@
 import { convert } from 'chromatism'
 import { rgb2hex, hex2rgb, rgba2css, getCssColor, relativeLuminance } from '../color_convert/color_convert.js'
-import { getColors, computeDynamicColor } from '../theme_data/theme_data.service.js'
+import { getColors, computeDynamicColor, getOpacitySlot } from '../theme_data/theme_data.service.js'
 
 export const applyTheme = (input) => {
   const { rules } = generatePreset(input)
@@ -242,7 +242,7 @@ export const generateShadows = (input, colors) => {
     input: 'input'
   }
   const inputShadows = input.shadows && !input.themeEngineVersion
-    ? shadows2to3(input.shadows)
+    ? shadows2to3(input.shadows, input.opacity)
     : input.shadows || {}
   const shadows = Object.entries({
     ...DEFAULT_SHADOWS,
@@ -368,14 +368,15 @@ export const colors2to3 = (colors) => {
  *
  * Back in v2 shadows allowed you to use dynamic colors however those used pure CSS3 variables
  */
-export const shadows2to3 = (shadows) => {
+export const shadows2to3 = (shadows, opacity) => {
   return Object.entries(shadows).reduce((shadowsAcc, [slotName, shadowDefs]) => {
     const isDynamic = ({ color }) => color.startsWith('--')
+    const getOpacity = ({ color }) => opacity[getOpacitySlot(color.substring(2).split(',')[0])]
     const newShadow = shadowDefs.reduce((shadowAcc, def) => [
       ...shadowAcc,
       {
         ...def,
-        alpha: isDynamic(def) ? 1 : def.alpha
+        alpha: isDynamic(def) ? getOpacity(def) || 1 : def.alpha
       }
     ], [])
     return { ...shadowsAcc, [slotName]: newShadow }
diff --git a/static/themes/breezy-dark.json b/static/themes/breezy-dark.json
index 236b94ad..76b962c5 100644
--- a/static/themes/breezy-dark.json
+++ b/static/themes/breezy-dark.json
@@ -21,7 +21,7 @@
           "y": "0",
           "blur": "0",
           "spread": "1",
-          "color": "#ffffff",
+          "color": "--btn,900",
           "alpha": "0.15",
           "inset": true
         },
@@ -42,7 +42,7 @@
           "blur": "40",
           "spread": "-40",
           "inset": true,
-          "color": "#ffffff",
+          "color": "--panel,900",
           "alpha": "0.1"
         }
       ],
@@ -72,7 +72,7 @@
           "y": "0",
           "blur": 0,
           "spread": "1",
-          "color": "#ffffff",
+          "color": "--btn,900",
           "alpha": 0.2,
           "inset": true
         },
@@ -92,7 +92,7 @@
           "y": "0",
           "blur": 0,
           "spread": "1",
-          "color": "#FFFFFF",
+          "color": "--input,900",
           "alpha": "0.2",
           "inset": true
         }
@@ -105,9 +105,9 @@
       "link": "#3daee9",
       "fg": "#31363b",
       "panel": "transparent",
-      "input": "#232629",
-      "topBarLink": "#eff0f1",
-      "btn": "#31363b",
+      "input": "--bg,-6.47",
+      "topBarLink": "--topBarText",
+      "btn": "--bg",
       "border": "#4c545b",
       "cRed": "#da4453",
       "cBlue": "#3daee9",
diff --git a/static/themes/breezy-light.json b/static/themes/breezy-light.json
index d3f74cec..0968fff0 100644
--- a/static/themes/breezy-light.json
+++ b/static/themes/breezy-light.json
@@ -21,7 +21,7 @@
           "y": "0",
           "blur": "0",
           "spread": "1",
-          "color": "#000000",
+          "color": "--btn,900",
           "alpha": "0.3",
           "inset": true
         },
@@ -42,7 +42,7 @@
           "blur": "40",
           "spread": "-40",
           "inset": true,
-          "color": "#ffffff",
+          "color": "--panel,900",
           "alpha": "0.1"
         }
       ],
@@ -72,7 +72,7 @@
           "y": "0",
           "blur": 0,
           "spread": "1",
-          "color": "#ffffff",
+          "color": "--btn,900",
           "alpha": 0.2,
           "inset": true
         },
@@ -92,7 +92,7 @@
           "y": "0",
           "blur": 0,
           "spread": "1",
-          "color": "#000000",
+          "color": "--input,900",
           "alpha": "0.2",
           "inset": true
         }
@@ -104,14 +104,11 @@
     "colors": {
       "bg": "#eff0f1",
       "text": "#232627",
-      "fg": "#bcc2c7",
+      "fg": "#475057",
       "accent": "#2980b9",
-      "panel": "#475057",
-      "panelText": "#fcfcfc",
-      "input": "#fcfcfc",
-      "topBar": "#475057",
-      "topBarLink": "#eff0f1",
-      "btn": "#eff0f1",
+      "input": "--bg,-6.47",
+      "topBarLink": "--topBarText",
+      "btn": "--bg",
       "cRed": "#da4453",
       "cBlue": "#2980b9",
       "cGreen": "#27ae60",
-- 
cgit v1.2.3-70-g09d2


From 2274976c09449838f3f6496c4d908a604d8d91d9 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 12 Feb 2020 01:10:00 +0200
Subject: post-merge fix

---
 src/components/emoji_reactions/emoji_reactions.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components')

diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
index 290b25b3..77e08297 100644
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/src/components/emoji_reactions/emoji_reactions.vue
@@ -35,7 +35,7 @@
       </div>
       <button
         class="emoji-reaction btn btn-default"
-        :class="{ 'picked-reaction': reactedWith(reaction.name), 'not-clickable': !loggedIn }"
+        :class="{ 'toggled': reactedWith(reaction.name), 'not-clickable': !loggedIn }"
         @click="emojiOnClick(reaction.name, $event)"
         @mouseenter="fetchEmojiReactionsByIfMissing()"
       >
-- 
cgit v1.2.3-70-g09d2


From 0fd78e99f55416a765f7e55e132e59c85ff04ad1 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 12 Feb 2020 01:19:48 +0200
Subject: properly clear theme

---
 src/components/style_switcher/style_switcher.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components')

diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index 807f9efc..0c8a9c3b 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -618,7 +618,7 @@ export default {
 
       if (!this.keepColor) {
         this.clearV1()
-        const keys = new Set(version !== 1 ? Object.keys(colors) : [])
+        const keys = new Set(version !== 1 ? Object.keys(SLOT_INHERITANCE) : [])
         if (version === 1 || version === 'l1') {
           keys
             .add('bg')
-- 
cgit v1.2.3-70-g09d2


From ba3c2780023e237f95fd05b04cca5a2e7bf696ca Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 12 Feb 2020 01:26:01 +0200
Subject: dismiss warning when selecting other themes, fix collapsed
 attachments link color

---
 src/components/attachment/attachment.vue        | 2 ++
 src/components/style_switcher/style_switcher.js | 2 ++
 2 files changed, 4 insertions(+)

(limited to 'src/components')

diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index 0748b2f0..a7e217c1 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -130,6 +130,8 @@
   .placeholder {
     margin-right: 8px;
     margin-bottom: 4px;
+    color: $fallback--link;
+    color: var(--postLink, $fallback--link);
   }
 
   .nsfw-placeholder {
diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index 0c8a9c3b..a7f586f4 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -385,6 +385,7 @@ export default {
       origin,
       forceUseSource = false
     ) {
+      this.dismissWarning()
       if (!source && !theme) {
         throw new Error('Can\'t load theme: empty')
       }
@@ -723,6 +724,7 @@ export default {
       }
     },
     selected () {
+      this.dismissWarning()
       if (this.selectedVersion === 1) {
         if (!this.keepRoundness) {
           this.clearRoundness()
-- 
cgit v1.2.3-70-g09d2


From 4aeba026e6166f7e8f44e8e33e4e84f687e9a642 Mon Sep 17 00:00:00 2001
From: Hakaba Hitoyo <hakabahitoyo@yahoo.co.jp>
Date: Thu, 13 Feb 2020 09:43:56 +0000
Subject: Refactor i18n messages for MRF policy disclosure

---
 .../mrf_transparency_panel.vue                     | 32 +++++++++---------
 src/i18n/en.json                                   | 38 ++++++++++++----------
 src/i18n/ja_easy.json                              | 38 ++++++++++++----------
 3 files changed, 57 insertions(+), 51 deletions(-)

(limited to 'src/components')

diff --git a/src/components/mrf_transparency_panel/mrf_transparency_panel.vue b/src/components/mrf_transparency_panel/mrf_transparency_panel.vue
index 8038e587..acdf822e 100644
--- a/src/components/mrf_transparency_panel/mrf_transparency_panel.vue
+++ b/src/components/mrf_transparency_panel/mrf_transparency_panel.vue
@@ -6,13 +6,13 @@
     <div class="panel panel-default base01-background">
       <div class="panel-heading timeline-heading base02-background">
         <div class="title">
-          {{ $t("about.federation") }}
+          {{ $t("about.mrf.federation") }}
         </div>
       </div>
       <div class="panel-body">
         <div class="mrf-section">
-          <h2>{{ $t("about.mrf_policies") }}</h2>
-          <p>{{ $t("about.mrf_policies_desc") }}</p>
+          <h2>{{ $t("about.mrf.mrf_policies") }}</h2>
+          <p>{{ $t("about.mrf.mrf_policies_desc") }}</p>
 
           <ul>
             <li
@@ -23,13 +23,13 @@
           </ul>
 
           <h2 v-if="hasInstanceSpecificPolicies">
-            {{ $t("about.mrf_policy_simple") }}
+            {{ $t("about.mrf.simple.simple_policies") }}
           </h2>
 
           <div v-if="acceptInstances.length">
-            <h4>{{ $t("about.mrf_policy_simple_accept") }}</h4>
+            <h4>{{ $t("about.mrf.simple.accept") }}</h4>
 
-            <p>{{ $t("about.mrf_policy_simple_accept_desc") }}</p>
+            <p>{{ $t("about.mrf.simple.accept_desc") }}</p>
 
             <ul>
               <li
@@ -41,9 +41,9 @@
           </div>
 
           <div v-if="rejectInstances.length">
-            <h4>{{ $t("about.mrf_policy_simple_reject") }}</h4>
+            <h4>{{ $t("about.mrf.simple.reject") }}</h4>
 
-            <p>{{ $t("about.mrf_policy_simple_reject_desc") }}</p>
+            <p>{{ $t("about.mrf.simple.reject_desc") }}</p>
 
             <ul>
               <li
@@ -55,9 +55,9 @@
           </div>
 
           <div v-if="quarantineInstances.length">
-            <h4>{{ $t("about.mrf_policy_simple_quarantine") }}</h4>
+            <h4>{{ $t("about.mrf.simple.quarantine") }}</h4>
 
-            <p>{{ $t("about.mrf_policy_simple_quarantine_desc") }}</p>
+            <p>{{ $t("about.mrf.simple.quarantine_desc") }}</p>
 
             <ul>
               <li
@@ -69,9 +69,9 @@
           </div>
 
           <div v-if="ftlRemovalInstances.length">
-            <h4>{{ $t("about.mrf_policy_simple_ftl_removal") }}</h4>
+            <h4>{{ $t("about.mrf.simple.ftl_removal") }}</h4>
 
-            <p>{{ $t("about.mrf_policy_simple_ftl_removal_desc") }}</p>
+            <p>{{ $t("about.mrf.simple.ftl_removal_desc") }}</p>
 
             <ul>
               <li
@@ -83,9 +83,9 @@
           </div>
 
           <div v-if="mediaNsfwInstances.length">
-            <h4>{{ $t("about.mrf_policy_simple_media_nsfw") }}</h4>
+            <h4>{{ $t("about.mrf.simple.media_nsfw") }}</h4>
 
-            <p>{{ $t("about.mrf_policy_simple_media_nsfw_desc") }}</p>
+            <p>{{ $t("about.mrf.simple.media_nsfw_desc") }}</p>
 
             <ul>
               <li
@@ -97,9 +97,9 @@
           </div>
 
           <div v-if="mediaRemovalInstances.length">
-            <h4>{{ $t("about.mrf_policy_simple_media_removal") }}</h4>
+            <h4>{{ $t("about.mrf.simple.media_removal") }}</h4>
 
-            <p>{{ $t("about.mrf_policy_simple_media_removal_desc") }}</p>
+            <p>{{ $t("about.mrf.simple.media_removal_desc") }}</p>
 
             <ul>
               <li
diff --git a/src/i18n/en.json b/src/i18n/en.json
index d0d654d3..b4d86052 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -1,31 +1,33 @@
 {
   "about": {
-    "staff": "Staff",
-    "federation": "Federation",
-    "mrf_policies": "Enabled MRF Policies",
-    "mrf_policies_desc": "MRF policies manipulate the federation behaviour of the instance.  The following policies are enabled:",
-    "mrf_policy_simple": "Instance-specific Policies",
-    "mrf_policy_simple_accept": "Accept",
-    "mrf_policy_simple_accept_desc": "This instance only accepts messages from the following instances:",
-    "mrf_policy_simple_reject": "Reject",
-    "mrf_policy_simple_reject_desc": "This instance will not accept messages from the following instances:",
-    "mrf_policy_simple_quarantine": "Quarantine",
-    "mrf_policy_simple_quarantine_desc": "This instance will send only public posts to the following instances:",
-    "mrf_policy_simple_ftl_removal": "Removal from \"The Whole Known Network\" Timeline",
-    "mrf_policy_simple_ftl_removal_desc": "This instance removes these instances from \"The Whole Known Network\" timeline:",
-    "mrf_policy_simple_media_removal": "Media Removal",
-    "mrf_policy_simple_media_removal_desc": "This instance removes media from posts on the following instances:",
-    "mrf_policy_simple_media_nsfw": "Media Force-set As Sensitive",
-    "mrf_policy_simple_media_nsfw_desc": "This instance forces media to be set sensitive in posts on the following instances:",
     "mrf": {
+      "federation": "Federation",
       "keyword": {
         "keyword_policies": "Keyword Policies",
         "ftl_removal": "Removal from \"The Whole Known Network\" Timeline",
         "reject": "Reject",
         "replace": "Replace",
         "is_replaced_by": "→"
+      },
+      "mrf_policies": "Enabled MRF Policies",
+      "mrf_policies_desc": "MRF policies manipulate the federation behaviour of the instance.  The following policies are enabled:",
+      "simple": {
+        "simple_policies": "Instance-specific Policies",
+        "accept": "Accept",
+        "accept_desc": "This instance only accepts messages from the following instances:",
+        "reject": "Reject",
+        "reject_desc": "This instance will not accept messages from the following instances:",
+        "quarantine": "Quarantine",
+        "quarantine_desc": "This instance will send only public posts to the following instances:",
+        "ftl_removal": "Removal from \"The Whole Known Network\" Timeline",
+        "ftl_removal_desc": "This instance removes these instances from \"The Whole Known Network\" timeline:",
+        "media_removal": "Media Removal",
+        "media_removal_desc": "This instance removes media from posts on the following instances:",
+        "media_nsfw": "Media Force-set As Sensitive",
+        "media_nsfw_desc": "This instance forces media to be set sensitive in posts on the following instances:"
       }
-    }
+    },
+    "staff": "Staff"
   },
   "chat": {
     "title": "Chat"
diff --git a/src/i18n/ja_easy.json b/src/i18n/ja_easy.json
index be447f1c..978e43b3 100644
--- a/src/i18n/ja_easy.json
+++ b/src/i18n/ja_easy.json
@@ -1,22 +1,26 @@
 {
   "about": {
-    "staff": "スタッフ",
-    "federation": "フェデレーション",
-    "mrf_policies": "ゆうこうなMRFポリシー",
-    "mrf_policies_desc": "MRFポリシーは、このインスタンスのフェデレーションのふるまいを、いじります。これらのMRFポリシーがゆうこうになっています:",
-    "mrf_policy_simple": "インスタンスのポリシー",
-    "mrf_policy_simple_accept": "うけいれ",
-    "mrf_policy_simple_accept_desc": "このインスンスは、これらのインスタンスからのメッセージのみをうけいれます:",
-    "mrf_policy_simple_reject": "おことわり",
-    "mrf_policy_simple_reject_desc": "このインスタンスは、これらのインスタンスからのメッセージをうけいれません:",
-    "mrf_policy_simple_quarantine": "けんえき",
-    "mrf_policy_simple_quarantine_desc": "このインスタンスは、これらのインスタンスに、パブリックなとうこうのみを、おくります:",
-    "mrf_policy_simple_ftl_removal": "「つながっているすべてのネットワーク」タイムラインからのぞく",
-    "mrf_policy_simple_ftl_removal_desc": "このインスタンスは、つながっているすべてのネットワーク」タイムラインから、これらのインスタンスを、とりのぞきます:",
-    "mrf_policy_simple_media_removal": "メディアをのぞく",
-    "mrf_policy_simple_media_removal_desc": "このインスタンスは、これらのインスタンスからおくられてきたメディアを、とりのぞきます:",
-    "mrf_policy_simple_media_nsfw": "メディアをすべてセンシティブにする",
-    "mrf_policy_simple_media_nsfw_desc": "このインスタンスは、これらのインスタンスからおくられてきたメディアを、すべて、センシティブにマークします:"
+    "mrf": {
+      "federation": "フェデレーション",
+      "mrf_policies": "ゆうこうなMRFポリシー",
+      "mrf_policies_desc": "MRFポリシーは、このインスタンスのフェデレーションのふるまいを、いじります。これらのMRFポリシーがゆうこうになっています:",
+      "simple": {
+        "simple_policies": "インスタンスのポリシー",
+        "accept": "うけいれ",
+        "accept_desc": "このインスンスは、これらのインスタンスからのメッセージのみをうけいれます:",
+        "reject": "おことわり",
+        "reject_desc": "このインスタンスは、これらのインスタンスからのメッセージをうけいれません:",
+        "quarantine": "けんえき",
+        "quarantine_desc": "このインスタンスは、これらのインスタンスに、パブリックなとうこうのみを、おくります:",
+        "ftl_removal": "「つながっているすべてのネットワーク」タイムラインからのぞく",
+        "ftl_removal_desc": "このインスタンスは、つながっているすべてのネットワーク」タイムラインから、これらのインスタンスを、とりのぞきます:",
+        "media_removal": "メディアをのぞく",
+        "media_removal_desc": "このインスタンスは、これらのインスタンスからおくられてきたメディアを、とりのぞきます:",
+        "media_nsfw": "メディアをすべてセンシティブにする",
+        "media_nsfw_desc": "このインスタンスは、これらのインスタンスからおくられてきたメディアを、すべて、センシティブにマークします:"
+      }
+    },
+    "staff": "スタッフ"
   },
   "chat": {
     "title": "チャット"
-- 
cgit v1.2.3-70-g09d2


From 59dd7f13202d3cfc20418e21d85cf96e18e65081 Mon Sep 17 00:00:00 2001
From: xenofem <xenofem@xeno.science>
Date: Sun, 16 Feb 2020 14:58:43 -0500
Subject: Add onInput() function as listener for input events, remove
 unnecessary compositionupdate listener

---
 src/components/emoji_input/emoji_input.js | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

(limited to 'src/components')

diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
index 001a22e9..f4c3479c 100644
--- a/src/components/emoji_input/emoji_input.js
+++ b/src/components/emoji_input/emoji_input.js
@@ -147,7 +147,7 @@ const EmojiInput = {
     input.elm.addEventListener('keydown', this.onKeyDown)
     input.elm.addEventListener('click', this.onClickInput)
     input.elm.addEventListener('transitionend', this.onTransition)
-    input.elm.addEventListener('compositionupdate', this.onCompositionUpdate)
+    input.elm.addEventListener('input', this.onInput)
   },
   unmounted () {
     const { input } = this
@@ -159,7 +159,7 @@ const EmojiInput = {
       input.elm.removeEventListener('keydown', this.onKeyDown)
       input.elm.removeEventListener('click', this.onClickInput)
       input.elm.removeEventListener('transitionend', this.onTransition)
-      input.elm.removeEventListener('compositionupdate', this.onCompositionUpdate)
+      input.elm.removeEventListener('input', this.onInput)
     }
   },
   methods: {
@@ -406,12 +406,6 @@ const EmojiInput = {
       this.resize()
       this.$emit('input', e.target.value)
     },
-    onCompositionUpdate (e) {
-      this.showPicker = false
-      this.setCaret(e)
-      this.resize()
-      this.$emit('input', e.target.value)
-    },
     onClickInput (e) {
       this.showPicker = false
     },
-- 
cgit v1.2.3-70-g09d2


From e36647e95e78711398abdba224c945fd6570d1b6 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 17 Feb 2020 22:28:14 +0200
Subject: revert emoji reaction style

---
 src/components/emoji_reactions/emoji_reactions.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

(limited to 'src/components')

diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
index 77e08297..b25c9716 100644
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/src/components/emoji_reactions/emoji_reactions.vue
@@ -35,7 +35,7 @@
       </div>
       <button
         class="emoji-reaction btn btn-default"
-        :class="{ 'toggled': reactedWith(reaction.name), 'not-clickable': !loggedIn }"
+        :class="{ 'picked-reaction': reactedWith(reaction.name), 'not-clickable': !loggedIn }"
         @click="emojiOnClick(reaction.name, $event)"
         @mouseenter="fetchEmojiReactionsByIfMissing()"
       >
@@ -127,4 +127,10 @@
   }
 }
 
+.picked-reaction {
+  border: 1px solid var(--accent, $fallback--link);
+  margin-left: -1px; // offset the border, can't use inset shadows either
+  margin-right: calc(0.5em - 1px);
+}
+
 </style>
-- 
cgit v1.2.3-70-g09d2


From 76323d6d9a6065f413ba1b918c75f6819a37a6a8 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 17 Feb 2020 22:38:24 +0200
Subject: fix #774

---
 src/components/style_switcher/preview.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components')

diff --git a/src/components/style_switcher/preview.vue b/src/components/style_switcher/preview.vue
index 8afbb123..9d984659 100644
--- a/src/components/style_switcher/preview.vue
+++ b/src/components/style_switcher/preview.vue
@@ -21,7 +21,7 @@
       </div>
       <div class="panel-body theme-preview-content">
         <div class="post">
-          <div class="avatar">
+          <div class="avatar still-image">
             ( ͡° ͜ʖ ͡°)
           </div>
           <div class="content">
-- 
cgit v1.2.3-70-g09d2


From 5c6046ea0aaa13c492ff1f5b7b05ab497b614570 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 17 Feb 2020 23:43:35 +0200
Subject: attempt to fix some bugs with shadows control

---
 src/components/shadow_control/shadow_control.js | 47 +++++++++++++------------
 1 file changed, 24 insertions(+), 23 deletions(-)

(limited to 'src/components')

diff --git a/src/components/shadow_control/shadow_control.js b/src/components/shadow_control/shadow_control.js
index bdfb4429..f9e7b985 100644
--- a/src/components/shadow_control/shadow_control.js
+++ b/src/components/shadow_control/shadow_control.js
@@ -3,6 +3,17 @@ import OpacityInput from '../opacity_input/opacity_input.vue'
 import { getCssShadow } from '../../services/style_setter/style_setter.js'
 import { hex2rgb } from '../../services/color_convert/color_convert.js'
 
+const toModel = (object = {}) => ({
+  x: 0,
+  y: 0,
+  blur: 0,
+  spread: 0,
+  inset: false,
+  color: '#000000',
+  alpha: 1,
+  ...object
+})
+
 export default {
   // 'Value' and 'Fallback' can be undefined, but if they are
   // initially vue won't detect it when they become something else
@@ -15,7 +26,7 @@ export default {
     return {
       selectedId: 0,
       // TODO there are some bugs regarding display of array (it's not getting updated when deleting for some reason)
-      cValue: this.value || this.fallback || []
+      cValue: (this.value || this.fallback || []).map(toModel)
     }
   },
   components: {
@@ -24,12 +35,12 @@ export default {
   },
   methods: {
     add () {
-      this.cValue.push(Object.assign({}, this.selected))
+      this.cValue.push(toModel(this.selected))
       this.selectedId = this.cValue.length - 1
     },
     del () {
       this.cValue.splice(this.selectedId, 1)
-      this.selectedId = this.cValue.length === 0 ? undefined : this.selectedId - 1
+      this.selectedId = this.cValue.length === 0 ? undefined : Math.max(this.selectedId - 1, 0)
     },
     moveUp () {
       const movable = this.cValue.splice(this.selectedId, 1)[0]
@@ -46,34 +57,24 @@ export default {
     this.cValue = this.value || this.fallback
   },
   computed: {
+    anyShadows () {
+      return this.cValue.length > 0
+    },
+    anyShadowsFallback () {
+      return this.fallback.length > 0
+    },
     selected () {
-      if (this.ready && this.cValue.length > 0) {
+      if (this.ready && this.anyShadows) {
         return this.cValue[this.selectedId]
       } else {
-        return {
-          x: 0,
-          y: 0,
-          blur: 0,
-          spread: 0,
-          inset: false,
-          color: '#000000',
-          alpha: 1
-        }
+        return toModel({})
       }
     },
     currentFallback () {
-      if (this.ready && this.fallback.length > 0) {
+      if (this.ready && this.anyShadowsFallback) {
         return this.fallback[this.selectedId]
       } else {
-        return {
-          x: 0,
-          y: 0,
-          blur: 0,
-          spread: 0,
-          inset: false,
-          color: '#000000',
-          alpha: 1
-        }
+        return toModel({})
       }
     },
     moveUpValid () {
-- 
cgit v1.2.3-70-g09d2


From 171f4c7ddbc2f55136ff57742470ea9752e4da05 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 18 Feb 2020 00:01:48 +0200
Subject: update headers in switcher to better separate the subsections

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

(limited to 'src/components')

diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index 205f325c..62c8e634 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -443,7 +443,7 @@
               :label="$t('settings.style.advanced_colors.top_bar')"
             />
             <ContrastRatio :contrast="previewContrast.btnTopBarText" />
-            <h4>{{ $t('settings.style.advanced_colors.pressed') }}</h4>
+            <h5>{{ $t('settings.style.advanced_colors.pressed') }}</h5>
             <ColorInput
               v-model="btnPressedColorLocal"
               name="btnPressedColor"
@@ -471,7 +471,7 @@
               :label="$t('settings.style.advanced_colors.top_bar')"
             />
             <ContrastRatio :contrast="previewContrast.btnPressedTopBarText" />
-            <h4>{{ $t('settings.style.advanced_colors.disabled') }}</h4>
+            <h5>{{ $t('settings.style.advanced_colors.disabled') }}</h5>
             <ColorInput
               v-model="btnDisabledColorLocal"
               name="btnDisabledColor"
@@ -496,7 +496,7 @@
               :fallback="previewTheme.colors.btnDisabledTopBarText"
               :label="$t('settings.style.advanced_colors.top_bar')"
             />
-            <h4>{{ $t('settings.style.advanced_colors.toggled') }}</h4>
+            <h5>{{ $t('settings.style.advanced_colors.toggled') }}</h5>
             <ColorInput
               v-model="btnToggledColorLocal"
               name="btnToggledColor"
-- 
cgit v1.2.3-70-g09d2


From d19c64314ff08391a2649681e6b64d052e600059 Mon Sep 17 00:00:00 2001
From: Henry Jameson <spam@hjkos.com>
Date: Thu, 20 Feb 2020 18:13:40 +0200
Subject: stop using customTheme in user card, instead use color slots. fix for
 opacity inheritance polluting inheritors

---
 src/components/user_card/user_card.js         | 21 +++++----------------
 src/components/user_card/user_card.vue        |  1 +
 src/services/theme_data/pleromafe.js          | 16 ++++++++++++++++
 src/services/theme_data/theme_data.service.js |  3 ++-
 4 files changed, 24 insertions(+), 17 deletions(-)

(limited to 'src/components')

diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index 2f649910..1cdbd3fa 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -4,7 +4,6 @@ import ProgressButton from '../progress_button/progress_button.vue'
 import FollowButton from '../follow_button/follow_button.vue'
 import ModerationTools from '../moderation_tools/moderation_tools.vue'
 import AccountActions from '../account_actions/account_actions.vue'
-import { hex2rgb } from '../../services/color_convert/color_convert.js'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import { mapGetters } from 'vuex'
 
@@ -30,21 +29,11 @@ export default {
       }]
     },
     style () {
-      const color = this.$store.getters.mergedConfig.customTheme.colors
-        ? this.$store.getters.mergedConfig.customTheme.colors.bg // v2
-        : this.$store.getters.mergedConfig.colors.bg // v1
-
-      if (color) {
-        const rgb = (typeof color === 'string') ? hex2rgb(color) : color
-        const tintColor = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .5)`
-
-        return {
-          backgroundColor: `rgb(${Math.floor(rgb.r * 0.53)}, ${Math.floor(rgb.g * 0.56)}, ${Math.floor(rgb.b * 0.59)})`,
-          backgroundImage: [
-            `linear-gradient(to bottom, ${tintColor}, ${tintColor})`,
-            `url(${this.user.cover_photo})`
-          ].join(', ')
-        }
+      return {
+        backgroundImage: [
+          `linear-gradient(to bottom, var(--profileTint), var(--profileTint))`,
+          `url(${this.user.cover_photo})`
+        ].join(', ')
       }
     },
     isOtherUser () {
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 3988ff1c..4ee040e8 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -286,6 +286,7 @@
     mask-size: 100% 60%;
     border-top-left-radius: calc(var(--panelRadius) - 1px);
     border-top-right-radius: calc(var(--panelRadius) - 1px);
+    background-color: var(--profileBg);
 
     &.hide-bio {
       mask-size: 100% 40px;
diff --git a/src/services/theme_data/pleromafe.js b/src/services/theme_data/pleromafe.js
index 33a2ed57..0c1fe543 100644
--- a/src/services/theme_data/pleromafe.js
+++ b/src/services/theme_data/pleromafe.js
@@ -8,6 +8,7 @@ export const LAYERS = {
   undelay: null, // root
   topBar: null, // no transparency support
   badge: null, //  no transparency support
+  profileTint: null, // doesn't matter
   fg: null,
   bg: 'underlay',
   highlight: 'bg',
@@ -29,6 +30,7 @@ export const LAYERS = {
  * this allows redefining it to something else
  */
 export const DEFAULT_OPACITY = {
+  profileTint: 0.5,
   alert: 0.5,
   input: 0.5,
   faint: 0.5,
@@ -119,6 +121,20 @@ export const SLOT_INHERITANCE = {
   cGreen: '#00FF00',
   cOrange: '#E3FF00',
 
+  profileBg: {
+    depends: ['bg'],
+    color: (mod, bg) => ({
+      r: Math.floor(bg.r * 0.53),
+      g: Math.floor(bg.g * 0.56),
+      b: Math.floor(bg.b * 0.59)
+    })
+  },
+  profileTint: {
+    depends: ['bg'],
+    layer: 'profileTint',
+    opacity: 'profileTint'
+  },
+
   highlight: {
     depends: ['bg'],
     color: (mod, bg) => brightness(5 * mod, bg).rgb
diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
index 75768795..e6ff82e6 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@@ -351,7 +351,8 @@ export const getColors = (sourceColors, sourceOpacity) => SLOT_ORDERED.reduce(({
     throw new Error('Couldn\'t generate color for ' + key)
   }
   const opacitySlot = getOpacitySlot(key)
-  if (opacitySlot && outputColor.a === undefined) {
+  const ownOpacitySlot = value.opacity
+  if (opacitySlot && (outputColor.a === undefined || ownOpacitySlot)) {
     const dependencySlot = deps[0]
     if (dependencySlot && colors[dependencySlot] === 'transparent') {
       outputColor.a = 0
-- 
cgit v1.2.3-70-g09d2


From 23e0ce59e610a1f3f49f3f53e0a1015530110120 Mon Sep 17 00:00:00 2001
From: Mark Felder <feld@FreeBSD.org>
Date: Sat, 22 Feb 2020 09:42:22 -0600
Subject: Fix captcha input and disable ALL the helpers

---
 src/components/registration/registration.vue | 3 +++
 1 file changed, 3 insertions(+)

(limited to 'src/components')

diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
index fdbda007..a83ca1e5 100644
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@@ -187,6 +187,9 @@
                   class="form-control"
                   type="text"
                   autocomplete="off"
+                  autocorrect="off"
+                  autocapitalize="off"
+                  spellcheck="false"
                 >
               </template>
             </div>
-- 
cgit v1.2.3-70-g09d2


From 86561592d002b08d6b2cd9549e8057a4ffd091cb Mon Sep 17 00:00:00 2001
From: Mark Felder <feld@FreeBSD.org>
Date: Mon, 24 Feb 2020 11:19:00 -0600
Subject: First attempt at not requiring email address for registration

---
 src/boot/after_store.js                     | 3 +++
 src/components/registration/registration.js | 9 +++++++--
 2 files changed, 10 insertions(+), 2 deletions(-)

(limited to 'src/components')

diff --git a/src/boot/after_store.js b/src/boot/after_store.js
index d70e1058..9fb9a853 100644
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@@ -241,6 +241,9 @@ const getNodeInfo = async ({ store }) => {
           : federation.enabled
       })
 
+      const accountActivationRequired = metadata.accountActivationRequired
+      store.dispatch('setInstanceOption', { name: 'accountActivationRequired', value: accountActivationRequired })
+
       const accounts = metadata.staffAccounts
       resolveStaffAccounts({ store, accounts })
     } else {
diff --git a/src/components/registration/registration.js b/src/components/registration/registration.js
index ace8cc7c..fd2942a5 100644
--- a/src/components/registration/registration.js
+++ b/src/components/registration/registration.js
@@ -1,5 +1,5 @@
 import { validationMixin } from 'vuelidate'
-import { required, sameAs } from 'vuelidate/lib/validators'
+import { required, requiredIf, sameAs } from 'vuelidate/lib/validators'
 import { mapActions, mapState } from 'vuex'
 
 const registration = {
@@ -16,7 +16,7 @@ const registration = {
   }),
   validations: {
     user: {
-      email: { required },
+      email: requiredIf('accountActivationRequired'),
       username: { required },
       fullname: { required },
       password: { required },
@@ -24,6 +24,11 @@ const registration = {
         required,
         sameAsPassword: sameAs('password')
       }
+    },
+    nested: {
+      required: requiredIf(function (nestedModel) {
+        return this.accountActivationRequired
+      })
     }
   },
   created () {
-- 
cgit v1.2.3-70-g09d2


From 39e3917118293912b2af09f509457d718f0207c9 Mon Sep 17 00:00:00 2001
From: Mark Felder <feld@FreeBSD.org>
Date: Mon, 24 Feb 2020 11:23:16 -0600
Subject: Remove unneccessary nested

---
 src/components/registration/registration.js | 5 -----
 1 file changed, 5 deletions(-)

(limited to 'src/components')

diff --git a/src/components/registration/registration.js b/src/components/registration/registration.js
index fd2942a5..1d8109e4 100644
--- a/src/components/registration/registration.js
+++ b/src/components/registration/registration.js
@@ -24,11 +24,6 @@ const registration = {
         required,
         sameAsPassword: sameAs('password')
       }
-    },
-    nested: {
-      required: requiredIf(function (nestedModel) {
-        return this.accountActivationRequired
-      })
     }
   },
   created () {
-- 
cgit v1.2.3-70-g09d2


From 7fa5eb07ddeb6d8c2b572e869d82a27bdd7a7fbf Mon Sep 17 00:00:00 2001
From: xenofem <xenofem@xeno.science>
Date: Mon, 24 Feb 2020 18:10:15 -0500
Subject: Refactor status showing/hiding code for better handling of edge cases
 and easier comprehension

---
 src/components/status/status.js | 35 +++++++++++++++--------------------
 1 file changed, 15 insertions(+), 20 deletions(-)

(limited to 'src/components')

diff --git a/src/components/status/status.js b/src/components/status/status.js
index fc5956ec..61d66301 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -188,23 +188,22 @@ const Status = {
       }
       return this.status.attentions.length > 0
     },
+
+    // When a status has a subject and is also tall, we should only have one show more/less button. If the default is to collapse statuses with subjects, we just treat it like a status with a subject; otherwise, we just treat it like a tall status.
+    mightHideBecauseSubject () {
+      return this.status.summary && (!this.tallStatus || this.localCollapseSubjectDefault)
+    },
+    mightHideBecauseTall () {
+      return this.tallStatus && (!this.status.summary || !this.localCollapseSubjectDefault)
+    },
     hideSubjectStatus () {
-      if (this.tallStatus && !this.localCollapseSubjectDefault) {
-        return false
-      }
-      return !this.expandingSubject && this.status.summary
+      return this.mightHideBecauseSubject && !this.expandingSubject
     },
     hideTallStatus () {
-      if (this.status.summary && this.localCollapseSubjectDefault) {
-        return false
-      }
-      if (this.showingTall) {
-        return false
-      }
-      return this.tallStatus
+      return this.mightHideBecauseTall && !this.showingTall
     },
     showingMore () {
-      return (this.tallStatus && this.showingTall) || (this.status.summary && this.expandingSubject)
+      return (this.mightHideBecauseTall && this.showingTall) || (this.mightHideBecauseSubject && this.expandingSubject)
     },
     nsfwClickthrough () {
       if (!this.status.nsfw) {
@@ -408,14 +407,10 @@ const Status = {
       this.userExpanded = !this.userExpanded
     },
     toggleShowMore () {
-      if (this.showingTall) {
-        this.showingTall = false
-      } else if (this.expandingSubject && this.status.summary) {
-        this.expandingSubject = false
-      } else if (this.hideTallStatus) {
-        this.showingTall = true
-      } else if (this.hideSubjectStatus && this.status.summary) {
-        this.expandingSubject = true
+      if (this.mightHideBecauseTall) {
+        this.showingTall = !this.showingTall
+      } else if (this.mightHideBecauseSubject) {
+        this.expandingSubject = !this.expandingSubject
       }
     },
     generateUserProfileLink (id, name) {
-- 
cgit v1.2.3-70-g09d2


From 31225f5d142b51d52bed305f25a37288c9188062 Mon Sep 17 00:00:00 2001
From: Shpuld Shpludson <shp@cock.li>
Date: Fri, 28 Feb 2020 16:39:47 +0000
Subject: Fix/popover performance

---
 CHANGELOG.md                                       |   1 +
 package.json                                       |   1 -
 src/components/account_actions/account_actions.js  |   4 +-
 src/components/account_actions/account_actions.vue |  21 +--
 src/components/emoji_reactions/emoji_reactions.js  |  11 +-
 src/components/emoji_reactions/emoji_reactions.vue |  33 +++--
 src/components/extra_buttons/extra_buttons.js      |   3 +
 src/components/extra_buttons/extra_buttons.vue     |  14 +-
 .../moderation_tools/moderation_tools.js           |  11 +-
 .../moderation_tools/moderation_tools.vue          |  17 ++-
 src/components/popover/popover.js                  | 156 ++++++++++++++++++++
 src/components/popover/popover.vue                 | 118 +++++++++++++++
 src/components/popper/popper.scss                  | 164 ---------------------
 src/components/react_button/react_button.js        |  23 +--
 src/components/react_button/react_button.vue       |  32 ++--
 src/components/status/status.vue                   |  11 +-
 src/components/status_popover/status_popover.js    |  12 +-
 src/components/status_popover/status_popover.vue   |  64 +++-----
 src/main.js                                        |   8 -
 yarn.lock                                          |  19 ---
 20 files changed, 393 insertions(+), 330 deletions(-)
 create mode 100644 src/components/popover/popover.js
 create mode 100644 src/components/popover/popover.vue
 delete mode 100644 src/components/popper/popper.scss

(limited to 'src/components')

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1cdd604b..e77334b0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -30,6 +30,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Registration fixed
 - Deactivation of remote accounts from frontend
 - Fixed NSFW unhiding not working with videos when using one-click unhiding/displaying
+- Improved performance of anything that uses popovers (most notably statuses)
 
 ## [1.1.7 and earlier] - 2019-12-14
 ### Added
diff --git a/package.json b/package.json
index 5c7fa31e..542086b4 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,6 @@
     "portal-vue": "^2.1.4",
     "sanitize-html": "^1.13.0",
     "v-click-outside": "^2.1.1",
-    "v-tooltip": "^2.0.2",
     "vue": "^2.5.13",
     "vue-chat-scroll": "^1.2.1",
     "vue-i18n": "^7.3.2",
diff --git a/src/components/account_actions/account_actions.js b/src/components/account_actions/account_actions.js
index d2153680..5d7ecf7e 100644
--- a/src/components/account_actions/account_actions.js
+++ b/src/components/account_actions/account_actions.js
@@ -1,4 +1,5 @@
 import ProgressButton from '../progress_button/progress_button.vue'
+import Popover from '../popover/popover.vue'
 
 const AccountActions = {
   props: [
@@ -8,7 +9,8 @@ const AccountActions = {
     return { }
   },
   components: {
-    ProgressButton
+    ProgressButton,
+    Popover
   },
   methods: {
     showRepeats () {
diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index d3235be1..483783cf 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="account-actions">
-    <v-popover
+    <Popover
       trigger="click"
-      class="account-tools-popover"
-      :container="false"
-      placement="bottom-end"
-      :offset="5"
+      placement="bottom"
     >
-      <div slot="popover">
+      <div
+        slot="content"
+        class="account-tools-popover"
+      >
         <div class="dropdown-menu">
           <template v-if="user.following">
             <button
@@ -51,10 +51,13 @@
           </button>
         </div>
       </div>
-      <div class="btn btn-default ellipsis-button">
+      <div
+        slot="trigger"
+        class="btn btn-default ellipsis-button"
+      >
         <i class="icon-ellipsis trigger-button" />
       </div>
-    </v-popover>
+    </Popover>
   </div>
 </template>
 
@@ -62,7 +65,6 @@
 
 <style lang="scss">
 @import '../../_variables.scss';
-@import '../popper/popper.scss';
 .account-actions {
   margin: 0 .8em;
 }
@@ -70,6 +72,7 @@
 .account-actions button.dropdown-item {
   margin-left: 0;
 }
+
 .account-actions .trigger-button {
   color: $fallback--lightText;
   color: var(--lightText, $fallback--lightText);
diff --git a/src/components/emoji_reactions/emoji_reactions.js b/src/components/emoji_reactions/emoji_reactions.js
index b799ac9a..ae7f53be 100644
--- a/src/components/emoji_reactions/emoji_reactions.js
+++ b/src/components/emoji_reactions/emoji_reactions.js
@@ -1,20 +1,17 @@
 import UserAvatar from '../user_avatar/user_avatar.vue'
+import Popover from '../popover/popover.vue'
 
 const EMOJI_REACTION_COUNT_CUTOFF = 12
 
 const EmojiReactions = {
   name: 'EmojiReactions',
   components: {
-    UserAvatar
+    UserAvatar,
+    Popover
   },
   props: ['status'],
   data: () => ({
-    showAll: false,
-    popperOptions: {
-      modifiers: {
-        preventOverflow: { padding: { top: 50 }, boundariesElement: 'viewport' }
-      }
-    }
+    showAll: false
   }),
   computed: {
     tooManyReactions () {
diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
index b25c9716..bac4c605 100644
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/src/components/emoji_reactions/emoji_reactions.vue
@@ -1,15 +1,14 @@
 <template>
   <div class="emoji-reactions">
-    <v-popover
+    <Popover
       v-for="(reaction) in emojiReactions"
       :key="reaction.name"
-      :popper-options="popperOptions"
       trigger="hover"
       placement="top"
+      :offset="{ y: 5 }"
     >
-
       <div
-        slot="popover"
+        slot="content"
         class="reacted-users"
       >
         <div v-if="accountsForEmoji[reaction.name].length">
@@ -24,7 +23,12 @@
               :compact="true"
             />
             <div class="reacted-user-names">
-              <span class="reacted-user-name" v-html="account.name_html" />
+              <!-- eslint-disable vue/no-v-html -->
+              <span
+                class="reacted-user-name"
+                v-html="account.name_html"
+              />
+              <!-- eslint-enable vue/no-v-html -->
               <span class="reacted-user-screen-name">{{ account.screen_name }}</span>
             </div>
           </div>
@@ -34,6 +38,7 @@
         </div>
       </div>
       <button
+        slot="trigger"
         class="emoji-reaction btn btn-default"
         :class="{ 'picked-reaction': reactedWith(reaction.name), 'not-clickable': !loggedIn }"
         @click="emojiOnClick(reaction.name, $event)"
@@ -42,17 +47,16 @@
         <span class="reaction-emoji">{{ reaction.name }}</span>
         <span>{{ reaction.count }}</span>
       </button>
-    </v-popover>
+    </Popover>
     <a
-        v-if="tooManyReactions"
-        @click="toggleShowAll"
-        class="emoji-reaction-expand faint"
-        href='javascript:void(0)'
-      >
-        {{ showAll ? $t('general.show_less') : showMoreString }}
-      </a>
+      v-if="tooManyReactions"
+      class="emoji-reaction-expand faint"
+      href="javascript:void(0)"
+      @click="toggleShowAll"
+    >
+      {{ showAll ? $t('general.show_less') : showMoreString }}
+    </a>
   </div>
-
 </template>
 
 <script src="./emoji_reactions.js" ></script>
@@ -78,6 +82,7 @@
     display: flex;
     flex-direction: column;
     margin-left: 0.5em;
+    min-width: 5em;
 
     img {
       width: 1em;
diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js
index 5ac73e97..37485383 100644
--- a/src/components/extra_buttons/extra_buttons.js
+++ b/src/components/extra_buttons/extra_buttons.js
@@ -1,5 +1,8 @@
+import Popover from '../popover/popover.vue'
+
 const ExtraButtons = {
   props: [ 'status' ],
+  components: { Popover },
   methods: {
     deleteStatus () {
       const confirmed = window.confirm(this.$t('status.delete_confirm'))
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index 746f1c91..3a7f1283 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -1,11 +1,11 @@
 <template>
-  <v-popover
+  <Popover
     v-if="canDelete || canMute || canPin"
     trigger="click"
     placement="top"
     class="extra-button-popover"
   >
-    <div slot="popover">
+    <div slot="content">
       <div class="dropdown-menu">
         <button
           v-if="canMute && !status.thread_muted"
@@ -47,17 +47,17 @@
         </button>
       </div>
     </div>
-    <div class="button-icon">
-      <i class="icon-ellipsis" />
-    </div>
-  </v-popover>
+    <i
+      slot="trigger"
+      class="icon-ellipsis button-icon"
+    />
+  </Popover>
 </template>
 
 <script src="./extra_buttons.js" ></script>
 
 <style lang="scss">
 @import '../../_variables.scss';
-@import '../popper/popper.scss';
 
 .icon-ellipsis {
   cursor: pointer;
diff --git a/src/components/moderation_tools/moderation_tools.js b/src/components/moderation_tools/moderation_tools.js
index 757166ed..d4fdc53e 100644
--- a/src/components/moderation_tools/moderation_tools.js
+++ b/src/components/moderation_tools/moderation_tools.js
@@ -1,4 +1,5 @@
 import DialogModal from '../dialog_modal/dialog_modal.vue'
+import Popover from '../popover/popover.vue'
 
 const FORCE_NSFW = 'mrf_tag:media-force-nsfw'
 const STRIP_MEDIA = 'mrf_tag:media-strip'
@@ -14,7 +15,6 @@ const ModerationTools = {
   ],
   data () {
     return {
-      showDropDown: false,
       tags: {
         FORCE_NSFW,
         STRIP_MEDIA,
@@ -24,11 +24,13 @@ const ModerationTools = {
         SANDBOX,
         QUARANTINE
       },
-      showDeleteUserDialog: false
+      showDeleteUserDialog: false,
+      toggled: false
     }
   },
   components: {
-    DialogModal
+    DialogModal,
+    Popover
   },
   computed: {
     tagsSet () {
@@ -89,6 +91,9 @@ const ModerationTools = {
             window.history.back()
           }
         })
+    },
+    setToggled (value) {
+      this.toggled = value
     }
   }
 }
diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue
index e78e05f1..b2d5acc5 100644
--- a/src/components/moderation_tools/moderation_tools.vue
+++ b/src/components/moderation_tools/moderation_tools.vue
@@ -1,13 +1,14 @@
 <template>
   <div>
-    <v-popover
+    <Popover
       trigger="click"
       class="moderation-tools-popover"
-      placement="bottom-end"
-      @show="showDropDown = true"
-      @hide="showDropDown = false"
+      placement="bottom"
+      :offset="{ y: 5 }"
+      @show="setToggled(true)"
+      @close="setToggled(false)"
     >
-      <div slot="popover">
+      <div slot="content">
         <div class="dropdown-menu">
           <span v-if="user.is_local">
             <button
@@ -122,12 +123,13 @@
         </div>
       </div>
       <button
+        slot="trigger"
         class="btn btn-default btn-block"
-        :class="{ toggled: showDropDown }"
+        :class="{ toggled }"
       >
         {{ $t('user_card.admin_menu.moderation') }}
       </button>
-    </v-popover>
+    </Popover>
     <portal to="modal">
       <DialogModal
         v-if="showDeleteUserDialog"
@@ -160,7 +162,6 @@
 
 <style lang="scss">
 @import '../../_variables.scss';
-@import '../popper/popper.scss';
 
 .menu-checkbox {
   float: right;
diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
new file mode 100644
index 00000000..5881d266
--- /dev/null
+++ b/src/components/popover/popover.js
@@ -0,0 +1,156 @@
+
+const Popover = {
+  name: 'Popover',
+  props: {
+    // Action to trigger popover: either 'hover' or 'click'
+    trigger: String,
+    // Either 'top' or 'bottom'
+    placement: String,
+    // Takes object with properties 'x' and 'y', values of these can be
+    // 'container' for using offsetParent as boundaries for either axis
+    // or 'viewport'
+    boundTo: Object,
+    // Takes a top/bottom/left/right object, how much space to leave
+    // between boundary and popover element
+    margin: Object,
+    // Takes a x/y object and tells how many pixels to offset from
+    // anchor point on either axis
+    offset: Object,
+    // Additional styles you may want for the popover container
+    popoverClass: String
+  },
+  data () {
+    return {
+      hidden: true,
+      styles: { opacity: 0 },
+      oldSize: { width: 0, height: 0 }
+    }
+  },
+  methods: {
+    updateStyles () {
+      if (this.hidden) {
+        this.styles = {
+          opacity: 0
+        }
+        return
+      }
+
+      // Popover will be anchored around this element, trigger ref is the container, so
+      // its children are what are inside the slot. Expect only one slot="trigger".
+      const anchorEl = (this.$refs.trigger && this.$refs.trigger.children[0]) || this.$el
+      const screenBox = anchorEl.getBoundingClientRect()
+      // Screen position of the origin point for popover
+      const origin = { x: screenBox.left + screenBox.width * 0.5, y: screenBox.top }
+      const content = this.$refs.content
+      // Minor optimization, don't call a slow reflow call if we don't have to
+      const parentBounds = this.boundTo &&
+        (this.boundTo.x === 'container' || this.boundTo.y === 'container') &&
+        this.$el.offsetParent.getBoundingClientRect()
+      const margin = this.margin || {}
+
+      // What are the screen bounds for the popover? Viewport vs container
+      // when using viewport, using default margin values to dodge the navbar
+      const xBounds = this.boundTo && this.boundTo.x === 'container' ? {
+        min: parentBounds.left + (margin.left || 0),
+        max: parentBounds.right - (margin.right || 0)
+      } : {
+        min: 0 + (margin.left || 10),
+        max: window.innerWidth - (margin.right || 10)
+      }
+
+      const yBounds = this.boundTo && this.boundTo.y === 'container' ? {
+        min: parentBounds.top + (margin.top || 0),
+        max: parentBounds.bottom - (margin.bottom || 0)
+      } : {
+        min: 0 + (margin.top || 50),
+        max: window.innerHeight - (margin.bottom || 5)
+      }
+
+      let horizOffset = 0
+
+      // If overflowing from left, move it so that it doesn't
+      if ((origin.x - content.offsetWidth * 0.5) < xBounds.min) {
+        horizOffset += -(origin.x - content.offsetWidth * 0.5) + xBounds.min
+      }
+
+      // If overflowing from right, move it so that it doesn't
+      if ((origin.x + horizOffset + content.offsetWidth * 0.5) > xBounds.max) {
+        horizOffset -= (origin.x + horizOffset + content.offsetWidth * 0.5) - xBounds.max
+      }
+
+      // Default to whatever user wished with placement prop
+      let usingTop = this.placement !== 'bottom'
+
+      // Handle special cases, first force to displaying on top if there's not space on bottom,
+      // regardless of what placement value was. Then check if there's not space on top, and
+      // force to bottom, again regardless of what placement value was.
+      if (origin.y + content.offsetHeight > yBounds.max) usingTop = true
+      if (origin.y - content.offsetHeight < yBounds.min) usingTop = false
+
+      const yOffset = (this.offset && this.offset.y) || 0
+      const translateY = usingTop
+        ? -anchorEl.offsetHeight - yOffset - content.offsetHeight
+        : yOffset
+
+      const xOffset = (this.offset && this.offset.x) || 0
+      const translateX = (anchorEl.offsetWidth * 0.5) - content.offsetWidth * 0.5 + horizOffset + xOffset
+
+      // Note, separate translateX and translateY avoids blurry text on chromium,
+      // single translate or translate3d resulted in blurry text.
+      this.styles = {
+        opacity: 1,
+        transform: `translateX(${Math.floor(translateX)}px) translateY(${Math.floor(translateY)}px)`
+      }
+    },
+    showPopover () {
+      if (this.hidden) this.$emit('show')
+      this.hidden = false
+      this.$nextTick(this.updateStyles)
+    },
+    hidePopover () {
+      if (!this.hidden) this.$emit('close')
+      this.hidden = true
+      this.styles = { opacity: 0 }
+    },
+    onMouseenter (e) {
+      if (this.trigger === 'hover') this.showPopover()
+    },
+    onMouseleave (e) {
+      if (this.trigger === 'hover') this.hidePopover()
+    },
+    onClick (e) {
+      if (this.trigger === 'click') {
+        if (this.hidden) {
+          this.showPopover()
+        } else {
+          this.hidePopover()
+        }
+      }
+    },
+    onClickOutside (e) {
+      if (this.hidden) return
+      if (this.$el.contains(e.target)) return
+      this.hidePopover()
+    }
+  },
+  updated () {
+    // Monitor changes to content size, update styles only when content sizes have changed,
+    // that should be the only time we need to move the popover box if we don't care about scroll
+    // or resize
+    const content = this.$refs.content
+    if (!content) return
+    if (this.oldSize.width !== content.offsetWidth || this.oldSize.height !== content.offsetHeight) {
+      this.updateStyles()
+      this.oldSize = { width: content.offsetWidth, height: content.offsetHeight }
+    }
+  },
+  created () {
+    document.addEventListener('click', this.onClickOutside)
+  },
+  destroyed () {
+    document.removeEventListener('click', this.onClickOutside)
+    this.hidePopover()
+  }
+}
+
+export default Popover
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
new file mode 100644
index 00000000..a271cb1b
--- /dev/null
+++ b/src/components/popover/popover.vue
@@ -0,0 +1,118 @@
+<template>
+  <div
+    @mouseenter="onMouseenter"
+    @mouseleave="onMouseleave"
+  >
+    <div
+      ref="trigger"
+      @click="onClick"
+    >
+      <slot name="trigger" />
+    </div>
+    <div
+      v-if="!hidden"
+      ref="content"
+      :style="styles"
+      class="popover"
+      :class="popoverClass"
+    >
+      <slot
+        name="content"
+        class="popover-inner"
+        :close="hidePopover"
+      />
+    </div>
+  </div>
+</template>
+
+<script src="./popover.js" />
+
+<style lang=scss>
+@import '../../_variables.scss';
+
+.popover {
+  z-index: 8;
+  position: absolute;
+  min-width: 0;
+  transition: opacity 0.3s;
+
+  box-shadow: 1px 1px 4px rgba(0,0,0,.6);
+  box-shadow: var(--panelShadow);
+  border-radius: $fallback--btnRadius;
+  border-radius: var(--btnRadius, $fallback--btnRadius);
+
+  background-color: $fallback--bg;
+  background-color: var(--popover, $fallback--bg);
+  color: $fallback--text;
+  color: var(--popoverText, $fallback--text);
+  --faint: var(--popoverFaintText, $fallback--faint);
+  --faintLink: var(--popoverFaintLink, $fallback--faint);
+  --lightText: var(--popoverLightText, $fallback--lightText);
+  --postLink: var(--popoverPostLink, $fallback--link);
+  --postFaintLink: var(--popoverPostFaintLink, $fallback--link);
+  --icon: var(--popoverIcon, $fallback--icon);
+}
+
+.dropdown-menu {
+  display: block;
+  padding: .5rem 0;
+  font-size: 1rem;
+  text-align: left;
+  list-style: none;
+  max-width: 100vw;
+  z-index: 10;
+  white-space: nowrap;
+
+  .dropdown-divider {
+    height: 0;
+    margin: .5rem 0;
+    overflow: hidden;
+    border-top: 1px solid $fallback--border;
+    border-top: 1px solid var(--border, $fallback--border);
+  }
+
+  .dropdown-item {
+    line-height: 21px;
+    margin-right: 5px;
+    overflow: auto;
+    display: block;
+    padding: .25rem 1.0rem .25rem 1.5rem;
+    clear: both;
+    font-weight: 400;
+    text-align: inherit;
+    white-space: nowrap;
+    border: none;
+    border-radius: 0px;
+    background-color: transparent;
+    box-shadow: none;
+    width: 100%;
+    height: 100%;
+
+    --btnText: var(--popoverText, $fallback--text);
+
+    &-icon {
+      padding-left: 0.5rem;
+
+      i {
+        margin-right: 0.25rem;
+        color: var(--menuPopoverIcon, $fallback--icon)
+      }
+    }
+
+    &:active, &:hover {
+      background-color: $fallback--lightBg;
+      background-color: var(--selectedMenuPopover, $fallback--lightBg);
+      color: $fallback--link;
+      color: var(--selectedMenuPopoverText, $fallback--link);
+      --faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
+      --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
+      --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
+      --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
+      i {
+        color: var(--selectedMenuPopoverIcon, $fallback--icon);
+      }
+    }
+
+  }
+}
+</style>
diff --git a/src/components/popper/popper.scss b/src/components/popper/popper.scss
deleted file mode 100644
index 99b7e6fc..00000000
--- a/src/components/popper/popper.scss
+++ /dev/null
@@ -1,164 +0,0 @@
-@import '../../_variables.scss';
-
-.tooltip.popover {
-  z-index: 8;
-
-  .popover-inner {
-    box-shadow: 1px 1px 4px rgba(0,0,0,.6);
-    box-shadow: var(--panelShadow);
-    border-radius: $fallback--btnRadius;
-    border-radius: var(--btnRadius, $fallback--btnRadius);
-    background-color: $fallback--bg;
-    background-color: var(--popover, $fallback--bg);
-    color: $fallback--text;
-    color: var(--popoverText, $fallback--text);
-    --faint: var(--popoverFaintText, $fallback--faint);
-    --faintLink: var(--popoverFaintLink, $fallback--faint);
-    --lightText: var(--popoverLightText, $fallback--lightText);
-    --postLink: var(--popoverPostLink, $fallback--link);
-    --postFaintLink: var(--popoverPostFaintLink, $fallback--link);
-    --icon: var(--popoverIcon, $fallback--icon);
-  }
-
-  .popover-arrow {
-    width: 0;
-    height: 0;
-    border-style: solid;
-    position: absolute;
-    margin: 5px;
-    border-color: $fallback--bg;
-    border-color: var(--bg, $fallback--bg);
-  }
-
-  &[x-placement^="top"] {
-    margin-bottom: 5px;
-
-    .popover-arrow {
-      border-width: 5px 5px 0 5px;
-      border-left-color: transparent !important;
-      border-right-color: transparent !important;
-      border-bottom-color: transparent !important;
-      bottom: -4px;
-      left: calc(50% - 5px);
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-  }
-
-  &[x-placement^="bottom"] {
-    margin-top: 5px;
-
-    .popover-arrow {
-      border-width: 0 5px 5px 5px;
-      border-left-color: transparent !important;
-      border-right-color: transparent !important;
-      border-top-color: transparent !important;
-      top: -4px;
-      left: calc(50% - 5px);
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-  }
-
-  &[x-placement^="right"] {
-    margin-left: 5px;
-
-    .popover-arrow {
-      border-width: 5px 5px 5px 0;
-      border-left-color: transparent !important;
-      border-top-color: transparent !important;
-      border-bottom-color: transparent !important;
-      left: -4px;
-      top: calc(50% - 5px);
-      margin-left: 0;
-      margin-right: 0;
-    }
-  }
-
-  &[x-placement^="left"] {
-    margin-right: 5px;
-
-    .popover-arrow {
-      border-width: 5px 0 5px 5px;
-      border-top-color: transparent !important;
-      border-right-color: transparent !important;
-      border-bottom-color: transparent !important;
-      right: -4px;
-      top: calc(50% - 5px);
-      margin-left: 0;
-      margin-right: 0;
-    }
-  }
-
-  &[aria-hidden='true'] {
-    visibility: hidden;
-    opacity: 0;
-    transition: opacity .15s, visibility .15s;
-  }
-
-  &[aria-hidden='false'] {
-    visibility: visible;
-    opacity: 1;
-    transition: opacity .15s;
-  }
-}
-
-.dropdown-menu {
-  display: block;
-  padding: .5rem 0;
-  font-size: 1rem;
-  text-align: left;
-  list-style: none;
-  max-width: 100vw;
-  z-index: 10;
-
-  .dropdown-divider {
-    height: 0;
-    margin: .5rem 0;
-    overflow: hidden;
-    border-top: 1px solid $fallback--border;
-    border-top: 1px solid var(--border, $fallback--border);
-  }
-
-  .dropdown-item {
-    line-height: 21px;
-    margin-right: 5px;
-    overflow: auto;
-    display: block;
-    padding: .25rem 1.0rem .25rem 1.5rem;
-    clear: both;
-    font-weight: 400;
-    text-align: inherit;
-    white-space: normal;
-    border: none;
-    border-radius: 0px;
-    background-color: transparent;
-    box-shadow: none;
-    width: 100%;
-    height: 100%;
-
-    --btnText: var(--popoverText, $fallback--text);
-
-    &-icon {
-      padding-left: 0.5rem;
-
-      i {
-        margin-right: 0.25rem;
-      }
-    }
-
-    &:active, &:hover {
-      background-color: $fallback--lightBg;
-      background-color: var(--selectedMenuPopover, $fallback--lightBg);
-      color: $fallback--link;
-      color: var(--selectedMenuPopoverText, $fallback--link);
-      --faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
-      --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
-      --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
-      --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
-      i {
-        color: var(--selectedMenuPopoverIcon, $fallback--icon);
-      }
-    }
-  }
-}
diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js
index a6cf5b94..19949563 100644
--- a/src/components/react_button/react_button.js
+++ b/src/components/react_button/react_button.js
@@ -1,34 +1,25 @@
+import Popover from '../popover/popover.vue'
 import { mapGetters } from 'vuex'
 
 const ReactButton = {
   props: ['status', 'loggedIn'],
   data () {
     return {
-      showTooltip: false,
-      filterWord: '',
-      popperOptions: {
-        modifiers: {
-          preventOverflow: { padding: { top: 50 }, boundariesElement: 'viewport' }
-        }
-      }
+      filterWord: ''
     }
   },
+  components: {
+    Popover
+  },
   methods: {
-    openReactionSelect () {
-      this.showTooltip = true
-      this.filterWord = ''
-    },
-    closeReactionSelect () {
-      this.showTooltip = false
-    },
-    addReaction (event, emoji) {
+    addReaction (event, emoji, close) {
       const existingReaction = this.status.emoji_reactions.find(r => r.name === emoji)
       if (existingReaction && existingReaction.me) {
         this.$store.dispatch('unreactWithEmoji', { id: this.status.id, emoji })
       } else {
         this.$store.dispatch('reactWithEmoji', { id: this.status.id, emoji })
       }
-      this.closeReactionSelect()
+      close()
     }
   },
   computed: {
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index fb43ebaf..ab4b4fcd 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -1,13 +1,14 @@
 <template>
-  <v-popover
-    :popper-options="popperOptions"
-    :open="showTooltip"
-    trigger="manual"
+  <Popover
+    trigger="click"
     placement="top"
+    :offset="{ y: 5 }"
     class="react-button-popover"
-    @hide="closeReactionSelect"
   >
-    <div slot="popover">
+    <div
+      slot="content"
+      slot-scope="{close}"
+    >
       <div class="reaction-picker-filter">
         <input
           v-model="filterWord"
@@ -19,7 +20,7 @@
           v-for="emoji in commonEmojis"
           :key="emoji"
           class="emoji-button"
-          @click="addReaction($event, emoji)"
+          @click="addReaction($event, emoji, close)"
         >
           {{ emoji }}
         </span>
@@ -28,23 +29,20 @@
           v-for="(emoji, key) in emojis"
           :key="key"
           class="emoji-button"
-          @click="addReaction($event, emoji.replacement)"
+          @click="addReaction($event, emoji.replacement, close)"
         >
           {{ emoji.replacement }}
         </span>
         <div class="reaction-bottom-fader" />
       </div>
     </div>
-    <div
+    <i
       v-if="loggedIn"
-      @click.prevent="openReactionSelect"
-    >
-      <i
-        class="icon-smile button-icon add-reaction-button"
-        :title="$t('tool_tip.add_reaction')"
-      />
-    </div>
-  </v-popover>
+      slot="trigger"
+      class="icon-smile button-icon add-reaction-button"
+      :title="$t('tool_tip.add_reaction')"
+    />
+  </Popover>
 </template>
 
 <script src="./react_button.js" ></script>
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 76b038d9..ca295640 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -177,6 +177,8 @@
                 <StatusPopover
                   v-if="!isPreview"
                   :status-id="status.in_reply_to_status_id"
+                  class="reply-to-popover"
+                  style="min-width: 0"
                 >
                   <a
                     class="reply-to"
@@ -572,11 +574,10 @@ $status-margin: 0.75em;
       align-items: stretch;
 
       > .reply-to-and-accountname > a {
+        overflow: hidden;
         max-width: 100%;
         text-overflow: ellipsis;
-        overflow: hidden;
         white-space: nowrap;
-        display: inline-block;
         word-break: break-all;
       }
     }
@@ -585,7 +586,6 @@ $status-margin: 0.75em;
       display: flex;
       height: 18px;
       margin-right: 0.5em;
-      overflow: hidden;
       max-width: 100%;
       .icon-reply {
         transform: scaleX(-1);
@@ -596,6 +596,10 @@ $status-margin: 0.75em;
       display: flex;
     }
 
+    .reply-to-popover {
+      min-width: 0;
+    }
+
     .reply-to {
       display: flex;
     }
@@ -603,6 +607,7 @@ $status-margin: 0.75em;
     .reply-to-text {
       overflow: hidden;
       text-overflow: ellipsis;
+      white-space: nowrap;
       margin: 0 0.4em 0 0.2em;
     }
 
diff --git a/src/components/status_popover/status_popover.js b/src/components/status_popover/status_popover.js
index 19f16bd9..cb55f67e 100644
--- a/src/components/status_popover/status_popover.js
+++ b/src/components/status_popover/status_popover.js
@@ -5,22 +5,14 @@ const StatusPopover = {
   props: [
     'statusId'
   ],
-  data () {
-    return {
-      popperOptions: {
-        modifiers: {
-          preventOverflow: { padding: { top: 50 }, boundariesElement: 'viewport' }
-        }
-      }
-    }
-  },
   computed: {
     status () {
       return find(this.$store.state.statuses.allStatuses, { id: this.statusId })
     }
   },
   components: {
-    Status: () => import('../status/status.vue')
+    Status: () => import('../status/status.vue'),
+    Popover: () => import('../popover/popover.vue')
   },
   methods: {
     enter () {
diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue
index eacf4c06..11f6cb5a 100644
--- a/src/components/status_popover/status_popover.vue
+++ b/src/components/status_popover/status_popover.vue
@@ -1,11 +1,16 @@
 <template>
-  <v-popover
+  <Popover
+    trigger="hover"
     popover-class="status-popover"
-    placement="top-start"
-    :popper-options="popperOptions"
-    @show="enter()"
+    :bound-to="{ x: 'container' }"
+    @show="enter"
   >
-    <template slot="popover">
+    <template slot="trigger">
+      <slot />
+    </template>
+    <div
+      slot="content"
+    >
       <Status
         v-if="status"
         :is-preview="true"
@@ -18,10 +23,8 @@
       >
         <i class="icon-spin4 animate-spin" />
       </div>
-    </template>
-
-    <slot />
-  </v-popover>
+    </div>
+  </Popover>
 </template>
 
 <script src="./status_popover.js" ></script>
@@ -29,44 +32,19 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.tooltip.popover.status-popover {
+.status-popover {
   font-size: 1rem;
   min-width: 15em;
   max-width: 95%;
-  margin-left: 0.5em;
-
-  .popover-inner {
-    border-color: $fallback--border;
-    border-color: var(--border, $fallback--border);
-    border-style: solid;
-    border-width: 1px;
-    border-radius: $fallback--tooltipRadius;
-    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
-    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
-    box-shadow: var(--popupShadow);
-  }
 
-  .popover-arrow::before {
-    position: absolute;
-    content: '';
-    left: -7px;
-    border: solid 7px transparent;
-    z-index: -1;
-  }
-
-  &[x-placement^="bottom-start"] .popover-arrow::before {
-    top: -2px;
-    border-top-width: 0;
-    border-bottom-color: $fallback--border;
-    border-bottom-color: var(--border, $fallback--border);
-  }
-
-  &[x-placement^="top-start"] .popover-arrow::before {
-    bottom: -2px;
-    border-bottom-width: 0;
-    border-top-color: $fallback--border;
-    border-top-color: var(--border, $fallback--border);
-  }
+  border-color: $fallback--border;
+  border-color: var(--border, $fallback--border);
+  border-style: solid;
+  border-width: 1px;
+  border-radius: $fallback--tooltipRadius;
+  border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
+  box-shadow: var(--popupShadow);
 
   .status-el.status-el {
     border: none;
diff --git a/src/main.js b/src/main.js
index baf73ac8..be4213fa 100644
--- a/src/main.js
+++ b/src/main.js
@@ -31,7 +31,6 @@ import VueChatScroll from 'vue-chat-scroll'
 import VueClickOutside from 'v-click-outside'
 import PortalVue from 'portal-vue'
 import VBodyScrollLock from './directives/body_scroll_lock'
-import VTooltip from 'v-tooltip'
 
 import afterStoreSetup from './boot/after_store.js'
 
@@ -44,13 +43,6 @@ Vue.use(VueChatScroll)
 Vue.use(VueClickOutside)
 Vue.use(PortalVue)
 Vue.use(VBodyScrollLock)
-Vue.use(VTooltip, {
-  popover: {
-    defaultTrigger: 'hover click',
-    defaultContainer: false,
-    defaultOffset: 5
-  }
-})
 
 const i18n = new VueI18n({
   // By default, use the browser locale, we will update it if neccessary
diff --git a/yarn.lock b/yarn.lock
index b794042f..0defefcb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5941,11 +5941,6 @@ pngjs@^3.3.0:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-3.3.3.tgz#85173703bde3edac8998757b96e5821d0966a21b"
 
-popper.js@^1.15.0:
-  version "1.15.0"
-  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.15.0.tgz#5560b99bbad7647e9faa475c6b8056621f5a4ff2"
-  integrity sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA==
-
 portal-vue@^2.1.4:
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/portal-vue/-/portal-vue-2.1.4.tgz#1fc679d77e294dc8d026f1eb84aa467de11b392e"
@@ -7823,15 +7818,6 @@ v-click-outside@^2.1.1:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/v-click-outside/-/v-click-outside-2.1.3.tgz#b7297abe833a439dc0895e6418a494381e64b5e7"
 
-v-tooltip@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/v-tooltip/-/v-tooltip-2.0.2.tgz#8610d9eece2cc44fd66c12ef2f12eec6435cab9b"
-  integrity sha512-xQ+qzOFfywkLdjHknRPgMMupQNS8yJtf9Utd5Dxiu/0n4HtrxqsgDtN2MLZ0LKbburtSAQgyypuE/snM8bBZhw==
-  dependencies:
-    lodash "^4.17.11"
-    popper.js "^1.15.0"
-    vue-resize "^0.4.5"
-
 validate-npm-package-license@^3.0.1:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"
@@ -7906,11 +7892,6 @@ vue-loader@^14.0.0:
     vue-style-loader "^4.0.1"
     vue-template-es2015-compiler "^1.6.0"
 
-vue-resize@^0.4.5:
-  version "0.4.5"
-  resolved "https://registry.yarnpkg.com/vue-resize/-/vue-resize-0.4.5.tgz#4777a23042e3c05620d9cbda01c0b3cc5e32dcea"
-  integrity sha512-bhP7MlgJQ8TIkZJXAfDf78uJO+mEI3CaLABLjv0WNzr4CcGRGPIAItyWYnP6LsPA4Oq0WE+suidNs6dgpO4RHg==
-
 vue-router@^3.0.1:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.0.2.tgz#dedc67afe6c4e2bc25682c8b1c2a8c0d7c7e56be"
-- 
cgit v1.2.3-70-g09d2


From ab4005add57f36cc78b774971f9942c5894362dc Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Mon, 2 Mar 2020 08:35:57 +0200
Subject: add status unavailable message when status can't be loaded in status
 preview

---
 src/components/status_popover/status_popover.js  |  7 +++++++
 src/components/status_popover/status_popover.vue | 10 ++++++++--
 src/i18n/en.json                                 |  3 ++-
 src/i18n/fi.json                                 |  3 ++-
 src/modules/statuses.js                          |  2 +-
 5 files changed, 20 insertions(+), 5 deletions(-)

(limited to 'src/components')

diff --git a/src/components/status_popover/status_popover.js b/src/components/status_popover/status_popover.js
index cb55f67e..159132a9 100644
--- a/src/components/status_popover/status_popover.js
+++ b/src/components/status_popover/status_popover.js
@@ -5,6 +5,11 @@ const StatusPopover = {
   props: [
     'statusId'
   ],
+  data () {
+    return {
+      error: false
+    }
+  },
   computed: {
     status () {
       return find(this.$store.state.statuses.allStatuses, { id: this.statusId })
@@ -18,6 +23,8 @@ const StatusPopover = {
     enter () {
       if (!this.status) {
         this.$store.dispatch('fetchStatus', this.statusId)
+          .then(data => (this.error = false))
+          .catch(e => (this.error = true))
       }
     }
   }
diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue
index 11f6cb5a..f5948207 100644
--- a/src/components/status_popover/status_popover.vue
+++ b/src/components/status_popover/status_popover.vue
@@ -17,9 +17,15 @@
         :statusoid="status"
         :compact="true"
       />
+      <div
+        v-else-if="error"
+        class="status-preview-no-content faint"
+      >
+        {{ $t('status.status_unavailable') }}
+      </div>
       <div
         v-else
-        class="status-preview-loading"
+        class="status-preview-no-content"
       >
         <i class="icon-spin4 animate-spin" />
       </div>
@@ -50,7 +56,7 @@
     border: none;
   }
 
-  .status-preview-loading {
+  .status-preview-no-content {
     padding: 1em;
     text-align: center;
 
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 82acc1ab..54d0608e 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -615,7 +615,8 @@
     "reply_to": "Reply to",
     "replies_list": "Replies:",
     "mute_conversation": "Mute conversation",
-    "unmute_conversation": "Unmute conversation"
+    "unmute_conversation": "Unmute conversation",
+    "status_unavailable": "Status unavailable"
   },
   "user_card": {
     "approve": "Approve",
diff --git a/src/i18n/fi.json b/src/i18n/fi.json
index ac8b2ac9..926e6087 100644
--- a/src/i18n/fi.json
+++ b/src/i18n/fi.json
@@ -289,7 +289,8 @@
     "reply_to": "Vastaus",
     "replies_list": "Vastaukset:",
     "mute_conversation": "Hiljennä keskustelu",
-    "unmute_conversation": "Poista hiljennys"
+    "unmute_conversation": "Poista hiljennys",
+    "status_unavailable": "Viesti ei saatavissa"
   },
   "user_card": {
     "approve": "Hyväksy",
diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index 25b62ac7..f1b7dcbd 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -616,7 +616,7 @@ const statuses = {
       commit('setNotificationsSilence', { value })
     },
     fetchStatus ({ rootState, dispatch }, id) {
-      rootState.api.backendInteractor.fetchStatus({ id })
+      return rootState.api.backendInteractor.fetchStatus({ id })
         .then((status) => dispatch('addNewStatuses', { statuses: [status] }))
     },
     deleteStatus ({ rootState, commit }, status) {
-- 
cgit v1.2.3-70-g09d2


From b9820b84a14119f3a7a4e1f663927b1ad455a5c2 Mon Sep 17 00:00:00 2001
From: Alex <caskd@420blaze.it>
Date: Sat, 14 Mar 2020 19:41:38 +0000
Subject: Prevent overflow for long usernames/domains

---
 src/components/notifications/notifications.scss | 1 +
 1 file changed, 1 insertion(+)

(limited to 'src/components')

diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index f5b13322..a8f4430f 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -81,6 +81,7 @@
 
   .follow-text, .move-text {
     padding: 0.5em 0;
+    overflow-wrap: break-word;
   }
 
   .status-el {
-- 
cgit v1.2.3-70-g09d2


From 8c5946b72881c38ce43a4b25bda8a38d4f08aac3 Mon Sep 17 00:00:00 2001
From: Mark Felder <feld@FreeBSD.org>
Date: Mon, 30 Mar 2020 12:39:28 -0500
Subject: Add button in 3dot menu to copy status link to clipboard

---
 src/components/extra_buttons/extra_buttons.js  | 10 ++++++++++
 src/components/extra_buttons/extra_buttons.vue |  8 +++++++-
 src/i18n/en.json                               |  3 ++-
 static/fontello.json                           |  8 +++++++-
 4 files changed, 26 insertions(+), 3 deletions(-)

(limited to 'src/components')

diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js
index 37485383..2dd77c66 100644
--- a/src/components/extra_buttons/extra_buttons.js
+++ b/src/components/extra_buttons/extra_buttons.js
@@ -3,6 +3,11 @@ import Popover from '../popover/popover.vue'
 const ExtraButtons = {
   props: [ 'status' ],
   components: { Popover },
+  data: function () {
+    return {
+      statusLink: `https://${this.$store.state.instance.name}${this.$router.resolve({ name: 'conversation', params: { id: this.status.id } }).href}`
+    }
+  },
   methods: {
     deleteStatus () {
       const confirmed = window.confirm(this.$t('status.delete_confirm'))
@@ -29,6 +34,11 @@ const ExtraButtons = {
       this.$store.dispatch('unmuteConversation', this.status.id)
         .then(() => this.$emit('onSuccess'))
         .catch(err => this.$emit('onError', err.error.error))
+    },
+    copyLink () {
+      navigator.clipboard.writeText(this.statusLink)
+        .then(() => this.$emit('onSuccess'))
+        .catch(err => this.$emit('onError', err.error.error))
     }
   },
   computed: {
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index 3a7f1283..c785a180 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -1,6 +1,5 @@
 <template>
   <Popover
-    v-if="canDelete || canMute || canPin"
     trigger="click"
     placement="top"
     class="extra-button-popover"
@@ -45,6 +44,13 @@
         >
           <i class="icon-cancel" /><span>{{ $t("status.delete") }}</span>
         </button>
+        <button
+          v-close-popover
+          class="dropdown-item dropdown-item-icon"
+          @click.prevent="copyLink"
+        >
+          <i class="icon-share" /><span>{{ $t("status.copy_link") }}</span>
+        </button>
       </div>
     </div>
     <i
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 54d0608e..3a16585d 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -616,7 +616,8 @@
     "replies_list": "Replies:",
     "mute_conversation": "Mute conversation",
     "unmute_conversation": "Unmute conversation",
-    "status_unavailable": "Status unavailable"
+    "status_unavailable": "Status unavailable",
+    "copy_link": "Copy link to status"
   },
   "user_card": {
     "approve": "Approve",
diff --git a/static/fontello.json b/static/fontello.json
index 5a7086a2..9e56232c 100755
--- a/static/fontello.json
+++ b/static/fontello.json
@@ -345,6 +345,12 @@
       "css": "link",
       "code": 59427,
       "src": "fontawesome"
+    },
+    {
+      "uid": "4aad6bb50b02c18508aae9cbe14e784e",
+      "css": "share",
+      "code": 61920,
+      "src": "fontawesome"
     }
   ]
-}
+}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 2fbb94fe5c7f6743a699e6e1ccb2cd8de341ccca Mon Sep 17 00:00:00 2001
From: Karol Kosek <krkk@krkk.ct8.pl>
Date: Sat, 18 Apr 2020 18:48:45 +0200
Subject: Fix user names with the RTL char in notifications

---
 src/components/notification/notification.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components')

diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 411c0271..51875747 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -47,7 +47,7 @@
         <span class="notification-details">
           <div class="name-and-action">
             <!-- eslint-disable vue/no-v-html -->
-            <span
+            <bdi
               v-if="!!notification.from_profile.name_html"
               class="username"
               :title="'@'+notification.from_profile.screen_name"
-- 
cgit v1.2.3-70-g09d2


From 6bb75a3a6d8452a3e1b88085fe87cf27386f222c Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Tue, 21 Apr 2020 23:27:51 +0300
Subject: make relationships separate from users

---
 src/boot/after_store.js                            |  3 ++
 src/components/account_actions/account_actions.js  |  2 +-
 src/components/account_actions/account_actions.vue |  8 ++---
 src/components/basic_user_card/basic_user_card.vue |  2 +-
 src/components/block_card/block_card.js            |  5 ++-
 src/components/follow_button/follow_button.js      | 14 ++++----
 src/components/follow_card/follow_card.js          |  3 ++
 src/components/follow_card/follow_card.vue         |  5 +--
 src/components/mute_card/mute_card.js              |  9 ++++--
 src/components/notification/notification.js        |  2 +-
 src/components/notification/notification.vue       |  2 +-
 src/components/side_drawer/side_drawer.vue         |  2 +-
 src/components/status/status.js                    | 15 +++++++--
 src/components/status/status.vue                   |  2 +-
 src/components/user_card/user_card.js              |  8 ++++-
 src/components/user_card/user_card.vue             | 15 +++++----
 src/components/user_panel/user_panel.vue           |  2 +-
 src/components/user_profile/user_profile.vue       |  2 +-
 src/components/user_settings/user_settings.js      |  8 ++---
 src/modules/users.js                               | 37 ++++++++--------------
 src/services/api/api.service.js                    |  4 ++-
 .../entity_normalizer/entity_normalizer.service.js | 25 +++++++++------
 .../follow_manipulate/follow_manipulate.js         | 15 +++++----
 .../notifications_fetcher.service.js               |  1 -
 .../timeline_fetcher/timeline_fetcher.service.js   |  2 ++
 25 files changed, 112 insertions(+), 81 deletions(-)

(limited to 'src/components')

diff --git a/src/boot/after_store.js b/src/boot/after_store.js
index d70e1058..1522d4f0 100644
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@@ -304,6 +304,9 @@ const afterStoreSetup = async ({ store, i18n }) => {
     getNodeInfo({ store })
   ])
 
+  // Start fetching things that don't need to block the UI
+  store.dispatch('fetchMutes')
+
   const router = new VueRouter({
     mode: 'history',
     routes: routes(store),
diff --git a/src/components/account_actions/account_actions.js b/src/components/account_actions/account_actions.js
index 5d7ecf7e..0826c275 100644
--- a/src/components/account_actions/account_actions.js
+++ b/src/components/account_actions/account_actions.js
@@ -3,7 +3,7 @@ import Popover from '../popover/popover.vue'
 
 const AccountActions = {
   props: [
-    'user'
+    'user', 'relationship'
   ],
   data () {
     return { }
diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index 483783cf..744b77d5 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -9,16 +9,16 @@
         class="account-tools-popover"
       >
         <div class="dropdown-menu">
-          <template v-if="user.following">
+          <template v-if="relationship.following">
             <button
-              v-if="user.showing_reblogs"
+              v-if="relationship.showing_reblogs"
               class="btn btn-default dropdown-item"
               @click="hideRepeats"
             >
               {{ $t('user_card.hide_repeats') }}
             </button>
             <button
-              v-if="!user.showing_reblogs"
+              v-if="!relationship.showing_reblogs"
               class="btn btn-default dropdown-item"
               @click="showRepeats"
             >
@@ -30,7 +30,7 @@
             />
           </template>
           <button
-            v-if="user.statusnet_blocking"
+            v-if="relationship.blocking"
             class="btn btn-default btn-block dropdown-item"
             @click="unblockUser"
           >
diff --git a/src/components/basic_user_card/basic_user_card.vue b/src/components/basic_user_card/basic_user_card.vue
index 8a02174e..b5a11e2b 100644
--- a/src/components/basic_user_card/basic_user_card.vue
+++ b/src/components/basic_user_card/basic_user_card.vue
@@ -12,7 +12,7 @@
       class="basic-user-card-expanded-content"
     >
       <UserCard
-        :user="user"
+        :userId="user.id"
         :rounded="true"
         :bordered="true"
       />
diff --git a/src/components/block_card/block_card.js b/src/components/block_card/block_card.js
index c459ff1b..659c75d8 100644
--- a/src/components/block_card/block_card.js
+++ b/src/components/block_card/block_card.js
@@ -11,8 +11,11 @@ const BlockCard = {
     user () {
       return this.$store.getters.findUser(this.userId)
     },
+    relationship () {
+      return this.$store.state.users.relationships[this.userId] || {}
+    },
     blocked () {
-      return this.user.statusnet_blocking
+      return this.relationship.blocking
     }
   },
   components: {
diff --git a/src/components/follow_button/follow_button.js b/src/components/follow_button/follow_button.js
index 12da2645..af7b1fef 100644
--- a/src/components/follow_button/follow_button.js
+++ b/src/components/follow_button/follow_button.js
@@ -1,6 +1,6 @@
 import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate'
 export default {
-  props: ['user', 'labelFollowing', 'buttonClass'],
+  props: ['relationship', 'labelFollowing', 'buttonClass'],
   data () {
     return {
       inProgress: false
@@ -8,12 +8,12 @@ export default {
   },
   computed: {
     isPressed () {
-      return this.inProgress || this.user.following
+      return this.inProgress || this.relationship.following
     },
     title () {
-      if (this.inProgress || this.user.following) {
+      if (this.inProgress || this.relationship.following) {
         return this.$t('user_card.follow_unfollow')
-      } else if (this.user.requested) {
+      } else if (this.relationship.requested) {
         return this.$t('user_card.follow_again')
       } else {
         return this.$t('user_card.follow')
@@ -22,9 +22,9 @@ export default {
     label () {
       if (this.inProgress) {
         return this.$t('user_card.follow_progress')
-      } else if (this.user.following) {
+      } else if (this.relationship.following) {
         return this.labelFollowing || this.$t('user_card.following')
-      } else if (this.user.requested) {
+      } else if (this.relationship.requested) {
         return this.$t('user_card.follow_sent')
       } else {
         return this.$t('user_card.follow')
@@ -33,7 +33,7 @@ export default {
   },
   methods: {
     onClick () {
-      this.user.following ? this.unfollow() : this.follow()
+      this.relationship.following ? this.unfollow() : this.follow()
     },
     follow () {
       this.inProgress = true
diff --git a/src/components/follow_card/follow_card.js b/src/components/follow_card/follow_card.js
index aefd609e..620ae7fd 100644
--- a/src/components/follow_card/follow_card.js
+++ b/src/components/follow_card/follow_card.js
@@ -18,6 +18,9 @@ const FollowCard = {
     },
     loggedIn () {
       return this.$store.state.users.currentUser
+    },
+    relationship () {
+      return this.$store.state.users.relationships[this.user.id]
     }
   }
 }
diff --git a/src/components/follow_card/follow_card.vue b/src/components/follow_card/follow_card.vue
index 81e6e6dc..d789a325 100644
--- a/src/components/follow_card/follow_card.vue
+++ b/src/components/follow_card/follow_card.vue
@@ -2,14 +2,14 @@
   <basic-user-card :user="user">
     <div class="follow-card-content-container">
       <span
-        v-if="!noFollowsYou && user.follows_you"
+        v-if="!noFollowsYou && relationship.followed_by"
         class="faint"
       >
         {{ isMe ? $t('user_card.its_you') : $t('user_card.follows_you') }}
       </span>
       <template v-if="!loggedIn">
         <div
-          v-if="!user.following"
+          v-if="!relationship.following"
           class="follow-card-follow-button"
         >
           <RemoteFollow :user="user" />
@@ -18,6 +18,7 @@
       <template v-else>
         <FollowButton
           :user="user"
+          :relationship="relationship"
           class="follow-card-follow-button"
           :label-following="$t('user_card.follow_unfollow')"
         />
diff --git a/src/components/mute_card/mute_card.js b/src/components/mute_card/mute_card.js
index 65c9cfb5..be528d37 100644
--- a/src/components/mute_card/mute_card.js
+++ b/src/components/mute_card/mute_card.js
@@ -11,8 +11,11 @@ const MuteCard = {
     user () {
       return this.$store.getters.findUser(this.userId)
     },
+    relationship () {
+      return this.$store.state.users.relationships[this.userId]
+    },
     muted () {
-      return this.user.muted
+      return this.relationship.muting
     }
   },
   components: {
@@ -21,13 +24,13 @@ const MuteCard = {
   methods: {
     unmuteUser () {
       this.progress = true
-      this.$store.dispatch('unmuteUser', this.user.id).then(() => {
+      this.$store.dispatch('unmuteUser', this.userId).then(() => {
         this.progress = false
       })
     },
     muteUser () {
       this.progress = true
-      this.$store.dispatch('muteUser', this.user.id).then(() => {
+      this.$store.dispatch('muteUser', this.userId).then(() => {
         this.progress = false
       })
     }
diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index e7bd769e..09554f54 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -56,7 +56,7 @@ const Notification = {
       return this.generateUserProfileLink(this.targetUser)
     },
     needMute () {
-      return this.user.muted
+      return (this.$store.state.users.relationships[this.user.id] || {}).muting
     }
   }
 }
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 411c0271..24d9fe90 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -40,7 +40,7 @@
       <div class="notification-right">
         <UserCard
           v-if="userExpanded"
-          :user="getUser(notification)"
+          :user-id="getUser(notification).id"
           :rounded="true"
           :bordered="true"
         />
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index df1d22a4..a9dbbeec 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -19,7 +19,7 @@
       >
         <UserCard
           v-if="currentUser"
-          :user="currentUser"
+          :userId="currentUser.id"
           :hide-bio="true"
         />
         <div
diff --git a/src/components/status/status.js b/src/components/status/status.js
index fc5956ec..a73e3ae2 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -118,7 +118,13 @@ const Status = {
 
       return hits
     },
-    muted () { return !this.unmuted && ((!(this.inProfile && this.status.user.id === this.profileUserId) && this.status.user.muted) || (!this.inConversation && this.status.thread_muted) || this.muteWordHits.length > 0) },
+    muted () {
+      const relationship = this.$store.state.users.relationships[this.status.user.id] || {}
+      return !this.unmuted && (
+        (!(this.inProfile && this.status.user.id === this.profileUserId) && relationship.muting) ||
+        (!this.inConversation && this.status.thread_muted) ||
+        this.muteWordHits.length > 0)
+    },
     hideFilteredStatuses () {
       return this.mergedConfig.hideFilteredStatuses
     },
@@ -178,8 +184,11 @@ const Status = {
         if (this.status.user.id === this.status.attentions[i].id) {
           continue
         }
-        const taggedUser = this.$store.getters.findUser(this.status.attentions[i].id)
-        if (checkFollowing && taggedUser && taggedUser.following) {
+        // There's zero guarantee of this working. If we happen to have that user and their
+        // relationship in store then it will work, but there's kinda little chance of having
+        // them for people you're not following.
+        const relationship = this.$store.state.users.relationships[this.status.attentions[i].id]
+        if (checkFollowing && relationship && relationship.following) {
           return false
         }
         if (this.status.attentions[i].id === this.currentUser.id) {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index ca295640..a04b501a 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -94,7 +94,7 @@
         <div class="status-body">
           <UserCard
             v-if="userExpanded"
-            :user="status.user"
+            :userId="status.user.id"
             :rounded="true"
             :bordered="true"
             class="status-usercard"
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index 1cdbd3fa..fb3cfebc 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -9,7 +9,7 @@ import { mapGetters } from 'vuex'
 
 export default {
   props: [
-    'user', 'switcher', 'selected', 'hideBio', 'rounded', 'bordered', 'allowZoomingAvatar'
+    'userId', 'switcher', 'selected', 'hideBio', 'rounded', 'bordered', 'allowZoomingAvatar'
   ],
   data () {
     return {
@@ -21,6 +21,12 @@ export default {
     this.$store.dispatch('fetchUserRelationship', this.user.id)
   },
   computed: {
+    user () {
+      return this.$store.getters.findUser(this.userId)
+    },
+    relationship () {
+      return this.$store.state.users.relationships[this.userId] || {}
+    },
     classes () {
       return [{
         'user-card-rounded-t': this.rounded === 'top', // set border-top-left-radius and border-top-right-radius
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 4ee040e8..25fdd70e 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -8,7 +8,9 @@
       :style="style"
       class="background-image"
     />
-    <div class="panel-heading">
+    <div
+      class="panel-heading"
+    >
       <div class="user-info">
         <div class="container">
           <a
@@ -69,6 +71,7 @@
               <AccountActions
                 v-if="isOtherUser && loggedIn"
                 :user="user"
+                :relationship="relationship"
               />
             </div>
             <div class="bottom-line">
@@ -92,7 +95,7 @@
         </div>
         <div class="user-meta">
           <div
-            v-if="user.follows_you && loggedIn && isOtherUser"
+            v-if="relationship.followed_by && loggedIn && isOtherUser"
             class="following"
           >
             {{ $t('user_card.follows_you') }}
@@ -139,10 +142,10 @@
           class="user-interactions"
         >
           <div class="btn-group">
-            <FollowButton :user="user" />
-            <template v-if="user.following">
+            <FollowButton :relationship="relationship" />
+            <template v-if="relationship.following">
               <ProgressButton
-                v-if="!user.subscribed"
+                v-if="!relationship.subscribing"
                 class="btn btn-default"
                 :click="subscribeUser"
                 :title="$t('user_card.subscribe')"
@@ -161,7 +164,7 @@
           </div>
           <div>
             <button
-              v-if="user.muted"
+              v-if="relationship.muting"
               class="btn btn-default btn-block toggled"
               @click="unmuteUser"
             >
diff --git a/src/components/user_panel/user_panel.vue b/src/components/user_panel/user_panel.vue
index e9f08015..ea4e2e9f 100644
--- a/src/components/user_panel/user_panel.vue
+++ b/src/components/user_panel/user_panel.vue
@@ -6,7 +6,7 @@
       class="panel panel-default signed-in"
     >
       <UserCard
-        :user="user"
+        :userId="user.id"
         :hide-bio="true"
         rounded="top"
       />
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 14082e83..7855c839 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -5,7 +5,7 @@
       class="user-profile panel panel-default"
     >
       <UserCard
-        :user="user"
+        :userId="user.id"
         :switcher="true"
         :selected="timeline.viewing"
         :allow-zooming-avatar="true"
diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index eca6f9b1..adfab8fa 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -351,14 +351,14 @@ const UserSettings = {
     },
     filterUnblockedUsers (userIds) {
       return reject(userIds, (userId) => {
-        const user = this.$store.getters.findUser(userId)
-        return !user || user.statusnet_blocking || user.id === this.$store.state.users.currentUser.id
+        const relationship = this.$store.state.users.relationships[userId] || {}
+        return relationship.blocking || userId === this.$store.state.users.currentUser.id
       })
     },
     filterUnMutedUsers (userIds) {
       return reject(userIds, (userId) => {
-        const user = this.$store.getters.findUser(userId)
-        return !user || user.muted || user.id === this.$store.state.users.currentUser.id
+        const relationship = this.$store.state.users.relationships[userId] || {}
+        return relationship.muting || userId === this.$store.state.users.currentUser.id
       })
     },
     queryUserIds (query) {
diff --git a/src/modules/users.js b/src/modules/users.js
index df133be0..7e73ab18 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -146,26 +146,19 @@ export const mutations = {
     }
   },
   addNewUsers (state, users) {
-    each(users, (user) => mergeOrAdd(state.users, state.usersObject, user))
+    each(users, (user) => {
+      // console.log(user)
+      if (user.relationship) {
+        set(state.relationships, user.relationship.id, user.relationship)
+      }
+      mergeOrAdd(state.users, state.usersObject, user)
+    })
   },
   updateUserRelationship (state, relationships) {
     relationships.forEach((relationship) => {
-      const user = state.usersObject[relationship.id]
-      if (user) {
-        user.follows_you = relationship.followed_by
-        user.following = relationship.following
-        user.muted = relationship.muting
-        user.statusnet_blocking = relationship.blocking
-        user.subscribed = relationship.subscribing
-        user.showing_reblogs = relationship.showing_reblogs
-      }
+      set(state.relationships, relationship.id, relationship)
     })
   },
-  updateBlocks (state, blockedUsers) {
-    // Reset statusnet_blocking of all fetched users
-    each(state.users, (user) => { user.statusnet_blocking = false })
-    each(blockedUsers, (user) => mergeOrAdd(state.users, state.usersObject, user))
-  },
   saveBlockIds (state, blockIds) {
     state.currentUser.blockIds = blockIds
   },
@@ -174,11 +167,6 @@ export const mutations = {
       state.currentUser.blockIds.push(blockId)
     }
   },
-  updateMutes (state, mutedUsers) {
-    // Reset muted of all fetched users
-    each(state.users, (user) => { user.muted = false })
-    each(mutedUsers, (user) => mergeOrAdd(state.users, state.usersObject, user))
-  },
   saveMuteIds (state, muteIds) {
     state.currentUser.muteIds = muteIds
   },
@@ -254,7 +242,8 @@ export const defaultState = {
   users: [],
   usersObject: {},
   signUpPending: false,
-  signUpErrors: []
+  signUpErrors: [],
+  relationships: {}
 }
 
 const users = {
@@ -279,7 +268,7 @@ const users = {
       return store.rootState.api.backendInteractor.fetchBlocks()
         .then((blocks) => {
           store.commit('saveBlockIds', map(blocks, 'id'))
-          store.commit('updateBlocks', blocks)
+          store.commit('addNewUsers', blocks)
           return blocks
         })
     },
@@ -298,8 +287,8 @@ const users = {
     fetchMutes (store) {
       return store.rootState.api.backendInteractor.fetchMutes()
         .then((mutes) => {
-          store.commit('updateMutes', mutes)
           store.commit('saveMuteIds', map(mutes, 'id'))
+          store.commit('addNewUsers', mutes)
           return mutes
         })
     },
@@ -416,7 +405,7 @@ const users = {
     },
     addNewNotifications (store, { notifications }) {
       const users = map(notifications, 'from_profile')
-      const targetUsers = map(notifications, 'target')
+      const targetUsers = map(notifications, 'target').filter(_ => _)
       const notificationIds = notifications.map(_ => _.id)
       store.commit('addNewUsers', users)
       store.commit('addNewUsers', targetUsers)
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 7db1d094..ee6bf151 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -496,7 +496,8 @@ const fetchTimeline = ({
   userId = false,
   tag = false,
   withMuted = false,
-  withMove = false
+  withMove = false,
+  withRelationships = false
 }) => {
   const timelineUrls = {
     public: MASTODON_PUBLIC_TIMELINE,
@@ -542,6 +543,7 @@ const fetchTimeline = ({
 
   params.push(['count', 20])
   params.push(['with_muted', withMuted])
+  params.push(['with_relationships', withRelationships])
 
   const queryString = map(params, (param) => `${param[0]}=${param[1]}`).join('&')
   url += `?${queryString}`
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index 84169a7b..97f9f2ae 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -73,7 +73,7 @@ export const parseUser = (data) => {
       output.background_image = data.pleroma.background_image
       output.token = data.pleroma.chat_token
 
-      if (relationship) {
+      if (relationship && !relationship) {
         output.follows_you = relationship.followed_by
         output.requested = relationship.requested
         output.following = relationship.following
@@ -82,6 +82,9 @@ export const parseUser = (data) => {
         output.showing_reblogs = relationship.showing_reblogs
         output.subscribed = relationship.subscribing
       }
+      if (relationship) {
+        output.relationship = relationship
+      }
 
       output.allow_following_move = data.pleroma.allow_following_move
 
@@ -137,16 +140,10 @@ export const parseUser = (data) => {
 
     output.statusnet_profile_url = data.statusnet_profile_url
 
-    output.statusnet_blocking = data.statusnet_blocking
-
     output.is_local = data.is_local
     output.role = data.role
     output.show_role = data.show_role
 
-    output.follows_you = data.follows_you
-
-    output.muted = data.muted
-
     if (data.rights) {
       output.rights = {
         moderator: data.rights.delete_others_notice,
@@ -160,10 +157,16 @@ export const parseUser = (data) => {
     output.hide_follows_count = data.hide_follows_count
     output.hide_followers_count = data.hide_followers_count
     output.background_image = data.background_image
-    // on mastoapi this info is contained in a "relationship"
-    output.following = data.following
     // Websocket token
     output.token = data.token
+
+    // Convert relationsip data to expected format
+    output.relationship = {
+      muting: data.muted,
+      blocking: data.statusnet_blocking,
+      followed_by: data.follows_you,
+      following: data.following
+    }
   }
 
   output.created_at = new Date(data.created_at)
@@ -317,6 +320,9 @@ export const parseStatus = (data) => {
     ? String(output.in_reply_to_user_id)
     : null
 
+  if (data.account.pleroma.relationship) {
+    data.account.pleroma.relationship = undefined
+  }
   output.user = parseUser(masto ? data.account : data.user)
 
   output.attentions = ((masto ? data.mentions : data.attentions) || []).map(parseUser)
@@ -342,7 +348,6 @@ export const parseNotification = (data) => {
   }
   const masto = !data.hasOwnProperty('ntype')
   const output = {}
-
   if (masto) {
     output.type = mastoDict[data.type] || data.type
     output.seen = data.pleroma.is_seen
diff --git a/src/services/follow_manipulate/follow_manipulate.js b/src/services/follow_manipulate/follow_manipulate.js
index 29b38a0f..c5d86afa 100644
--- a/src/services/follow_manipulate/follow_manipulate.js
+++ b/src/services/follow_manipulate/follow_manipulate.js
@@ -1,15 +1,18 @@
-const fetchUser = (attempt, user, store) => new Promise((resolve, reject) => {
+const fetchRelationship = (attempt, user, store) => new Promise((resolve, reject) => {
   setTimeout(() => {
-    store.state.api.backendInteractor.fetchUser({ id: user.id })
-      .then((user) => store.commit('addNewUsers', [user]))
-      .then(() => resolve([user.following, user.requested, user.locked, attempt]))
+    store.state.api.backendInteractor.fetchUserRelationship({ id: user.id })
+      .then((relationship) => {
+        store.commit('updateUserRelationship', [relationship])
+        return relationship
+      })
+      .then((relationship) => resolve([relationship.following, relationship.requested, user.locked, attempt]))
       .catch((e) => reject(e))
   }, 500)
 }).then(([following, sent, locked, attempt]) => {
   if (!following && !(locked && sent) && attempt <= 3) {
     // If we BE reports that we still not following that user - retry,
     // increment attempts by one
-    fetchUser(++attempt, user, store)
+    fetchRelationship(++attempt, user, store)
   }
 })
 
@@ -31,7 +34,7 @@ export const requestFollow = (user, store) => new Promise((resolve, reject) => {
       // don't know that yet.
       // Recursive Promise, it will call itself up to 3 times.
 
-      return fetchUser(1, user, store)
+      return fetchRelationship(1, user, store)
         .then(() => {
           resolve()
         })
diff --git a/src/services/notifications_fetcher/notifications_fetcher.service.js b/src/services/notifications_fetcher/notifications_fetcher.service.js
index 864e32f8..eb6d84c4 100644
--- a/src/services/notifications_fetcher/notifications_fetcher.service.js
+++ b/src/services/notifications_fetcher/notifications_fetcher.service.js
@@ -48,7 +48,6 @@ const fetchNotifications = ({ store, args, older }) => {
       update({ store, notifications, older })
       return notifications
     }, () => store.dispatch('setNotificationsError', { value: true }))
-    .catch(() => store.dispatch('setNotificationsError', { value: true }))
 }
 
 const startFetching = ({ credentials, store }) => {
diff --git a/src/services/timeline_fetcher/timeline_fetcher.service.js b/src/services/timeline_fetcher/timeline_fetcher.service.js
index c6b28ad5..96fafff9 100644
--- a/src/services/timeline_fetcher/timeline_fetcher.service.js
+++ b/src/services/timeline_fetcher/timeline_fetcher.service.js
@@ -31,6 +31,7 @@ const fetchAndUpdate = ({
   const { getters } = store
   const timelineData = rootState.statuses.timelines[camelCase(timeline)]
   const hideMutedPosts = getters.mergedConfig.hideMutedPosts
+  const replyVisibility = getters.mergedConfig.replyVisibility
 
   if (older) {
     args['until'] = until || timelineData.minId
@@ -41,6 +42,7 @@ const fetchAndUpdate = ({
   args['userId'] = userId
   args['tag'] = tag
   args['withMuted'] = !hideMutedPosts
+  args['withRelationships'] = replyVisibility === 'following'
 
   const numStatusesBeforeFetch = timelineData.statuses.length
 
-- 
cgit v1.2.3-70-g09d2


From 4b7007bc7dc4af8601454d8a84cf9f68e47545dd Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Tue, 21 Apr 2020 23:56:48 +0300
Subject: fix mistakes

---
 src/components/user_card/user_card.vue                      | 4 +---
 src/modules/users.js                                        | 1 -
 src/services/entity_normalizer/entity_normalizer.service.js | 3 ---
 3 files changed, 1 insertion(+), 7 deletions(-)

(limited to 'src/components')

diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 25fdd70e..b40435cd 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -8,9 +8,7 @@
       :style="style"
       class="background-image"
     />
-    <div
-      class="panel-heading"
-    >
+    <div class="panel-heading">
       <div class="user-info">
         <div class="container">
           <a
diff --git a/src/modules/users.js b/src/modules/users.js
index 7e73ab18..591d4634 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -147,7 +147,6 @@ export const mutations = {
   },
   addNewUsers (state, users) {
     each(users, (user) => {
-      // console.log(user)
       if (user.relationship) {
         set(state.relationships, user.relationship.id, user.relationship)
       }
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index 97f9f2ae..66a7a8b7 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -320,9 +320,6 @@ export const parseStatus = (data) => {
     ? String(output.in_reply_to_user_id)
     : null
 
-  if (data.account.pleroma.relationship) {
-    data.account.pleroma.relationship = undefined
-  }
   output.user = parseUser(masto ? data.account : data.user)
 
   output.attentions = ((masto ? data.mentions : data.attentions) || []).map(parseUser)
-- 
cgit v1.2.3-70-g09d2


From aa561473226d22d71c37756265df6949795a6cab Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Wed, 22 Apr 2020 15:06:10 +0300
Subject: fix follow

---
 src/components/follow_button/follow_button.js       |  6 +++---
 src/services/follow_manipulate/follow_manipulate.js | 20 ++++++++++----------
 2 files changed, 13 insertions(+), 13 deletions(-)

(limited to 'src/components')

diff --git a/src/components/follow_button/follow_button.js b/src/components/follow_button/follow_button.js
index af7b1fef..95e7cb6b 100644
--- a/src/components/follow_button/follow_button.js
+++ b/src/components/follow_button/follow_button.js
@@ -37,16 +37,16 @@ export default {
     },
     follow () {
       this.inProgress = true
-      requestFollow(this.user, this.$store).then(() => {
+      requestFollow(this.relationship.id, this.$store).then(() => {
         this.inProgress = false
       })
     },
     unfollow () {
       const store = this.$store
       this.inProgress = true
-      requestUnfollow(this.user, store).then(() => {
+      requestUnfollow(this.relationship.id, store).then(() => {
         this.inProgress = false
-        store.commit('removeStatus', { timeline: 'friends', userId: this.user.id })
+        store.commit('removeStatus', { timeline: 'friends', userId: this.relationship.id })
       })
     }
   }
diff --git a/src/services/follow_manipulate/follow_manipulate.js b/src/services/follow_manipulate/follow_manipulate.js
index c5d86afa..08f4c4d6 100644
--- a/src/services/follow_manipulate/follow_manipulate.js
+++ b/src/services/follow_manipulate/follow_manipulate.js
@@ -1,27 +1,27 @@
-const fetchRelationship = (attempt, user, store) => new Promise((resolve, reject) => {
+const fetchRelationship = (attempt, userId, store) => new Promise((resolve, reject) => {
   setTimeout(() => {
-    store.state.api.backendInteractor.fetchUserRelationship({ id: user.id })
+    store.state.api.backendInteractor.fetchUserRelationship({ id: userId })
       .then((relationship) => {
         store.commit('updateUserRelationship', [relationship])
         return relationship
       })
-      .then((relationship) => resolve([relationship.following, relationship.requested, user.locked, attempt]))
+      .then((relationship) => resolve([relationship.following, relationship.requested, relationship.locked, attempt]))
       .catch((e) => reject(e))
   }, 500)
 }).then(([following, sent, locked, attempt]) => {
   if (!following && !(locked && sent) && attempt <= 3) {
     // If we BE reports that we still not following that user - retry,
     // increment attempts by one
-    fetchRelationship(++attempt, user, store)
+    fetchRelationship(++attempt, userId, store)
   }
 })
 
-export const requestFollow = (user, store) => new Promise((resolve, reject) => {
-  store.state.api.backendInteractor.followUser({ id: user.id })
+export const requestFollow = (userId, store) => new Promise((resolve, reject) => {
+  store.state.api.backendInteractor.followUser({ id: userId })
     .then((updated) => {
       store.commit('updateUserRelationship', [updated])
 
-      if (updated.following || (user.locked && user.requested)) {
+      if (updated.following || (updated.locked && updated.requested)) {
         // If we get result immediately or the account is locked, just stop.
         resolve()
         return
@@ -34,15 +34,15 @@ export const requestFollow = (user, store) => new Promise((resolve, reject) => {
       // don't know that yet.
       // Recursive Promise, it will call itself up to 3 times.
 
-      return fetchRelationship(1, user, store)
+      return fetchRelationship(1, updated, store)
         .then(() => {
           resolve()
         })
     })
 })
 
-export const requestUnfollow = (user, store) => new Promise((resolve, reject) => {
-  store.state.api.backendInteractor.unfollowUser({ id: user.id })
+export const requestUnfollow = (userId, store) => new Promise((resolve, reject) => {
+  store.state.api.backendInteractor.unfollowUser({ id: userId })
     .then((updated) => {
       store.commit('updateUserRelationship', [updated])
       resolve({
-- 
cgit v1.2.3-70-g09d2


From ca00e93b6092c855b0109e1e6dab93c29a28716a Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Thu, 23 Apr 2020 14:27:27 +0300
Subject: minor fixes

---
 src/components/follow_card/follow_card.vue                  | 3 +--
 src/components/side_drawer/side_drawer.vue                  | 2 +-
 src/components/status/status.vue                            | 2 +-
 src/services/entity_normalizer/entity_normalizer.service.js | 1 +
 4 files changed, 4 insertions(+), 4 deletions(-)

(limited to 'src/components')

diff --git a/src/components/follow_card/follow_card.vue b/src/components/follow_card/follow_card.vue
index d789a325..76a70730 100644
--- a/src/components/follow_card/follow_card.vue
+++ b/src/components/follow_card/follow_card.vue
@@ -17,10 +17,9 @@
       </template>
       <template v-else>
         <FollowButton
-          :user="user"
           :relationship="relationship"
-          class="follow-card-follow-button"
           :label-following="$t('user_card.follow_unfollow')"
+          class="follow-card-follow-button"
         />
       </template>
     </div>
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index a9dbbeec..2958a386 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -19,7 +19,7 @@
       >
         <UserCard
           v-if="currentUser"
-          :userId="currentUser.id"
+          :user-id="currentUser.id"
           :hide-bio="true"
         />
         <div
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index a04b501a..dd7cd579 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -94,7 +94,7 @@
         <div class="status-body">
           <UserCard
             v-if="userExpanded"
-            :userId="status.user.id"
+            :user-id="status.user.id"
             :rounded="true"
             :bordered="true"
             class="status-usercard"
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index 7237fdfc..724dcc4b 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -336,6 +336,7 @@ export const parseNotification = (data) => {
   }
   const masto = !data.hasOwnProperty('ntype')
   const output = {}
+
   if (masto) {
     output.type = mastoDict[data.type] || data.type
     output.seen = data.pleroma.is_seen
-- 
cgit v1.2.3-70-g09d2


From c476193fd9e5bbb783ad4d3be80839caf180f598 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Thu, 23 Apr 2020 14:44:55 +0300
Subject: minor lint fixes

---
 src/components/user_panel/user_panel.vue     | 2 +-
 src/components/user_profile/user_profile.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/components')

diff --git a/src/components/user_panel/user_panel.vue b/src/components/user_panel/user_panel.vue
index ea4e2e9f..1db4f648 100644
--- a/src/components/user_panel/user_panel.vue
+++ b/src/components/user_panel/user_panel.vue
@@ -6,7 +6,7 @@
       class="panel panel-default signed-in"
     >
       <UserCard
-        :userId="user.id"
+        :user-id="user.id"
         :hide-bio="true"
         rounded="top"
       />
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 7855c839..1871d46c 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -5,7 +5,7 @@
       class="user-profile panel panel-default"
     >
       <UserCard
-        :userId="user.id"
+        :user-id="userId"
         :switcher="true"
         :selected="timeline.viewing"
         :allow-zooming-avatar="true"
-- 
cgit v1.2.3-70-g09d2


From f6fce92cf7a463fbdf270d494404dca5aae06045 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Thu, 23 Apr 2020 14:48:15 +0300
Subject: last lint warning

---
 src/components/basic_user_card/basic_user_card.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components')

diff --git a/src/components/basic_user_card/basic_user_card.vue b/src/components/basic_user_card/basic_user_card.vue
index b5a11e2b..9e410610 100644
--- a/src/components/basic_user_card/basic_user_card.vue
+++ b/src/components/basic_user_card/basic_user_card.vue
@@ -12,7 +12,7 @@
       class="basic-user-card-expanded-content"
     >
       <UserCard
-        :userId="user.id"
+        :user-id="user.id"
         :rounded="true"
         :bordered="true"
       />
-- 
cgit v1.2.3-70-g09d2


From af9492977aaa10903d54add3187b5cf9d9a00d6c Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Fri, 24 Apr 2020 18:53:17 +0300
Subject: add back mute prediction, add getter for relationships

---
 src/components/block_card/block_card.js         |  2 +-
 src/components/follow_card/follow_card.js       |  2 +-
 src/components/mute_card/mute_card.js           |  2 +-
 src/components/notification/notification.js     |  2 +-
 src/components/status/status.js                 |  2 +-
 src/components/user_card/user_card.js           |  2 +-
 src/components/user_settings/user_settings.js   |  4 ++--
 src/modules/users.js                            | 12 ++++++++++++
 test/unit/specs/components/user_profile.spec.js |  1 +
 9 files changed, 21 insertions(+), 8 deletions(-)

(limited to 'src/components')

diff --git a/src/components/block_card/block_card.js b/src/components/block_card/block_card.js
index 659c75d8..0bf4e37b 100644
--- a/src/components/block_card/block_card.js
+++ b/src/components/block_card/block_card.js
@@ -12,7 +12,7 @@ const BlockCard = {
       return this.$store.getters.findUser(this.userId)
     },
     relationship () {
-      return this.$store.state.users.relationships[this.userId] || {}
+      return this.$store.getters.relationship(this.userId)
     },
     blocked () {
       return this.relationship.blocking
diff --git a/src/components/follow_card/follow_card.js b/src/components/follow_card/follow_card.js
index 620ae7fd..6dcb6d47 100644
--- a/src/components/follow_card/follow_card.js
+++ b/src/components/follow_card/follow_card.js
@@ -20,7 +20,7 @@ const FollowCard = {
       return this.$store.state.users.currentUser
     },
     relationship () {
-      return this.$store.state.users.relationships[this.user.id]
+      return this.$store.getters.relationship(this.user.id)
     }
   }
 }
diff --git a/src/components/mute_card/mute_card.js b/src/components/mute_card/mute_card.js
index be528d37..cbec0e9b 100644
--- a/src/components/mute_card/mute_card.js
+++ b/src/components/mute_card/mute_card.js
@@ -12,7 +12,7 @@ const MuteCard = {
       return this.$store.getters.findUser(this.userId)
     },
     relationship () {
-      return this.$store.state.users.relationships[this.userId]
+      return this.$store.getters.relationship(this.userId)
     },
     muted () {
       return this.relationship.muting
diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index 09554f54..ff1c2817 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -56,7 +56,7 @@ const Notification = {
       return this.generateUserProfileLink(this.targetUser)
     },
     needMute () {
-      return (this.$store.state.users.relationships[this.user.id] || {}).muting
+      return this.$store.getters.relationship(this.user.id).muting
     }
   }
 }
diff --git a/src/components/status/status.js b/src/components/status/status.js
index a73e3ae2..a36de028 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -119,7 +119,7 @@ const Status = {
       return hits
     },
     muted () {
-      const relationship = this.$store.state.users.relationships[this.status.user.id] || {}
+      const relationship = this.$store.getters.relationship(this.userId)
       return !this.unmuted && (
         (!(this.inProfile && this.status.user.id === this.profileUserId) && relationship.muting) ||
         (!this.inConversation && this.status.thread_muted) ||
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index fb3cfebc..8e6b9d7f 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -25,7 +25,7 @@ export default {
       return this.$store.getters.findUser(this.userId)
     },
     relationship () {
-      return this.$store.state.users.relationships[this.userId] || {}
+      return this.$store.getters.relationship(this.userId)
     },
     classes () {
       return [{
diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index adfab8fa..5338c974 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -351,13 +351,13 @@ const UserSettings = {
     },
     filterUnblockedUsers (userIds) {
       return reject(userIds, (userId) => {
-        const relationship = this.$store.state.users.relationships[userId] || {}
+        const relationship = this.$store.getters.relationship(this.userId)
         return relationship.blocking || userId === this.$store.state.users.currentUser.id
       })
     },
     filterUnMutedUsers (userIds) {
       return reject(userIds, (userId) => {
-        const relationship = this.$store.state.users.relationships[userId] || {}
+        const relationship = this.$store.getters.relationship(this.userId)
         return relationship.muting || userId === this.$store.state.users.currentUser.id
       })
     },
diff --git a/src/modules/users.js b/src/modules/users.js
index 6b19fc97..fb04ebd3 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -48,6 +48,11 @@ const unblockUser = (store, id) => {
 }
 
 const muteUser = (store, id) => {
+  const predictedRelationship = store.state.relationships[id] || { id }
+  predictedRelationship.muting = true
+  store.commit('updateUserRelationship', [predictedRelationship])
+  store.commit('addMuteId', id)
+
   return store.rootState.api.backendInteractor.muteUser({ id })
     .then((relationship) => {
       store.commit('updateUserRelationship', [relationship])
@@ -56,6 +61,10 @@ const muteUser = (store, id) => {
 }
 
 const unmuteUser = (store, id) => {
+  const predictedRelationship = store.state.relationships[id] || { id }
+  predictedRelationship.muting = false
+  store.commit('updateUserRelationship', [predictedRelationship])
+
   return store.rootState.api.backendInteractor.unmuteUser({ id })
     .then((relationship) => store.commit('updateUserRelationship', [relationship]))
 }
@@ -227,6 +236,9 @@ export const getters = {
       return state.usersObject[query.toLowerCase()]
     }
     return result
+  },
+  relationship: state => id => {
+    return state.relationships[id] || { id, loading: true }
   }
 }
 
diff --git a/test/unit/specs/components/user_profile.spec.js b/test/unit/specs/components/user_profile.spec.js
index 0a3f2d27..dcf066f9 100644
--- a/test/unit/specs/components/user_profile.spec.js
+++ b/test/unit/specs/components/user_profile.spec.js
@@ -19,6 +19,7 @@ const actions = {
 
 const testGetters = {
   findUser: state => getters.findUser(state.users),
+  relationship: state => getters.relationship(state.users),
   mergedConfig: state => ({
     colors: '',
     highlight: {},
-- 
cgit v1.2.3-70-g09d2


From 8b1aa593a46869ac1ea26de8a1f31d9fa2f44e56 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Mon, 27 Apr 2020 10:06:17 +0300
Subject: fix status mutes

---
 src/components/status/status.js | 2 +-
 src/modules/users.js            | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

(limited to 'src/components')

diff --git a/src/components/status/status.js b/src/components/status/status.js
index a36de028..890f4b91 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -119,7 +119,7 @@ const Status = {
       return hits
     },
     muted () {
-      const relationship = this.$store.getters.relationship(this.userId)
+      const relationship = this.$store.getters.relationship(this.status.user.id)
       return !this.unmuted && (
         (!(this.inProfile && this.status.user.id === this.profileUserId) && relationship.muting) ||
         (!this.inConversation && this.status.thread_muted) ||
diff --git a/src/modules/users.js b/src/modules/users.js
index fb04ebd3..1d1b415c 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -238,7 +238,8 @@ export const getters = {
     return result
   },
   relationship: state => id => {
-    return state.relationships[id] || { id, loading: true }
+    const rel = id && state.relationships[id]
+    return rel || { id, loading: true }
   }
 }
 
-- 
cgit v1.2.3-70-g09d2


From 7a25160ddc15a97a02366dff60ec12801348f229 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Mon, 27 Apr 2020 12:53:04 +0300
Subject: Separate status content from status like in direct conversations mr

---
 src/components/status/status.js                  | 188 +-----------------
 src/components/status/status.vue                 | 230 +---------------------
 src/components/status_content/status_content.js  | 210 ++++++++++++++++++++
 src/components/status_content/status_content.vue | 240 +++++++++++++++++++++++
 4 files changed, 460 insertions(+), 408 deletions(-)
 create mode 100644 src/components/status_content/status_content.js
 create mode 100644 src/components/status_content/status_content.vue

(limited to 'src/components')

diff --git a/src/components/status/status.js b/src/components/status/status.js
index 61d66301..ab3de5fc 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -1,23 +1,17 @@
-import Attachment from '../attachment/attachment.vue'
 import FavoriteButton from '../favorite_button/favorite_button.vue'
 import ReactButton from '../react_button/react_button.vue'
 import RetweetButton from '../retweet_button/retweet_button.vue'
-import Poll from '../poll/poll.vue'
 import ExtraButtons from '../extra_buttons/extra_buttons.vue'
 import PostStatusForm from '../post_status_form/post_status_form.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'
 import AvatarList from '../avatar_list/avatar_list.vue'
 import Timeago from '../timeago/timeago.vue'
+import StatusContent from '../status_content/status_content.vue'
 import StatusPopover from '../status_popover/status_popover.vue'
 import EmojiReactions from '../emoji_reactions/emoji_reactions.vue'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
-import fileType from 'src/services/file_type/file_type.service'
-import { processHtml } from 'src/services/tiny_post_html_processor/tiny_post_html_processor.service.js'
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
-import { mentionMatchesUrl, extractTagFromUrl } from 'src/services/matcher/matcher.service.js'
 import { filter, unescape, uniqBy } from 'lodash'
 import { mapGetters, mapState } from 'vuex'
 
@@ -43,17 +37,10 @@ const Status = {
       replying: false,
       unmuted: false,
       userExpanded: false,
-      showingTall: this.inConversation && this.focused,
-      showingLongSubject: false,
-      error: null,
-      // not as computed because it sets the initial state which will be changed later
-      expandingSubject: !this.$store.getters.mergedConfig.collapseMessageWithSubject
+      error: null
     }
   },
   computed: {
-    localCollapseSubjectDefault () {
-      return this.mergedConfig.collapseMessageWithSubject
-    },
     muteWords () {
       return this.mergedConfig.muteWords
     },
@@ -79,10 +66,6 @@ const Status = {
       const highlight = this.mergedConfig.highlight
       return highlightStyle(highlight[user.screen_name])
     },
-    hideAttachments () {
-      return (this.mergedConfig.hideAttachments && !this.inConversation) ||
-        (this.mergedConfig.hideAttachmentsInConv && this.inConversation)
-    },
     userProfileLink () {
       return this.generateUserProfileLink(this.status.user.id, this.status.user.screen_name)
     },
@@ -135,20 +118,6 @@ const Status = {
       // use conversation highlight only when in conversation
       return this.status.id === this.highlight
     },
-    // This is a bit hacky, but we want to approximate post height before rendering
-    // so we count newlines (masto uses <p> for paragraphs, GS uses <br> between them)
-    // as well as approximate line count by counting characters and approximating ~80
-    // per line.
-    //
-    // Using max-height + overflow: auto for status components resulted in false positives
-    // very often with japanese characters, and it was very annoying.
-    tallStatus () {
-      const lengthScore = this.status.statusnet_html.split(/<p|<br/).length + this.status.text.length / 80
-      return lengthScore > 20
-    },
-    longSubject () {
-      return this.status.summary.length > 900
-    },
     isReply () {
       return !!(this.status.in_reply_to_status_id && this.status.in_reply_to_user_id)
     },
@@ -188,32 +157,6 @@ const Status = {
       }
       return this.status.attentions.length > 0
     },
-
-    // When a status has a subject and is also tall, we should only have one show more/less button. If the default is to collapse statuses with subjects, we just treat it like a status with a subject; otherwise, we just treat it like a tall status.
-    mightHideBecauseSubject () {
-      return this.status.summary && (!this.tallStatus || this.localCollapseSubjectDefault)
-    },
-    mightHideBecauseTall () {
-      return this.tallStatus && (!this.status.summary || !this.localCollapseSubjectDefault)
-    },
-    hideSubjectStatus () {
-      return this.mightHideBecauseSubject && !this.expandingSubject
-    },
-    hideTallStatus () {
-      return this.mightHideBecauseTall && !this.showingTall
-    },
-    showingMore () {
-      return (this.mightHideBecauseTall && this.showingTall) || (this.mightHideBecauseSubject && this.expandingSubject)
-    },
-    nsfwClickthrough () {
-      if (!this.status.nsfw) {
-        return false
-      }
-      if (this.status.summary && this.localCollapseSubjectDefault) {
-        return false
-      }
-      return true
-    },
     replySubject () {
       if (!this.status.summary) return ''
       const decodedSummary = unescape(this.status.summary)
@@ -227,83 +170,6 @@ const Status = {
         return ''
       }
     },
-    attachmentSize () {
-      if ((this.mergedConfig.hideAttachments && !this.inConversation) ||
-        (this.mergedConfig.hideAttachmentsInConv && this.inConversation) ||
-        (this.status.attachments.length > this.maxThumbnails)) {
-        return 'hide'
-      } else if (this.compact) {
-        return 'small'
-      }
-      return 'normal'
-    },
-    galleryTypes () {
-      if (this.attachmentSize === 'hide') {
-        return []
-      }
-      return this.mergedConfig.playVideosInModal
-        ? ['image', 'video']
-        : ['image']
-    },
-    galleryAttachments () {
-      return this.status.attachments.filter(
-        file => fileType.fileMatchesSomeType(this.galleryTypes, file)
-      )
-    },
-    nonGalleryAttachments () {
-      return this.status.attachments.filter(
-        file => !fileType.fileMatchesSomeType(this.galleryTypes, file)
-      )
-    },
-    hasImageAttachments () {
-      return this.status.attachments.some(
-        file => fileType.fileType(file.mimetype) === 'image'
-      )
-    },
-    hasVideoAttachments () {
-      return this.status.attachments.some(
-        file => fileType.fileType(file.mimetype) === 'video'
-      )
-    },
-    maxThumbnails () {
-      return this.mergedConfig.maxThumbnails
-    },
-    postBodyHtml () {
-      const html = this.status.statusnet_html
-
-      if (this.mergedConfig.greentext) {
-        try {
-          if (html.includes('&gt;')) {
-            // This checks if post has '>' at the beginning, excluding mentions so that @mention >impying works
-            return processHtml(html, (string) => {
-              if (string.includes('&gt;') &&
-                  string
-                    .replace(/<[^>]+?>/gi, '') // remove all tags
-                    .replace(/@\w+/gi, '') // remove mentions (even failed ones)
-                    .trim()
-                    .startsWith('&gt;')) {
-                return `<span class='greentext'>${string}</span>`
-              } else {
-                return string
-              }
-            })
-          } else {
-            return html
-          }
-        } catch (e) {
-          console.err('Failed to process status html', e)
-          return html
-        }
-      } else {
-        return html
-      }
-    },
-    contentHtml () {
-      if (!this.status.summary_html) {
-        return this.postBodyHtml
-      }
-      return this.status.summary_html + '<br />' + this.postBodyHtml
-    },
     combinedFavsAndRepeatsUsers () {
       // Use the status from the global status repository since favs and repeats are saved in it
       const combinedUsers = [].concat(
@@ -312,9 +178,6 @@ const Status = {
       )
       return uniqBy(combinedUsers, 'id')
     },
-    ownStatus () {
-      return this.status.user.id === this.currentUser.id
-    },
     tags () {
       return this.status.tags.filter(tagObj => tagObj.hasOwnProperty('name')).map(tagObj => tagObj.name).join(' ')
     },
@@ -328,21 +191,18 @@ const Status = {
     })
   },
   components: {
-    Attachment,
     FavoriteButton,
     ReactButton,
     RetweetButton,
     ExtraButtons,
     PostStatusForm,
-    Poll,
     UserCard,
     UserAvatar,
-    Gallery,
-    LinkPreview,
     AvatarList,
     Timeago,
     StatusPopover,
-    EmojiReactions
+    EmojiReactions,
+    StatusContent
   },
   methods: {
     visibilityIcon (visibility) {
@@ -363,32 +223,6 @@ const Status = {
     clearError () {
       this.error = undefined
     },
-    linkClicked (event) {
-      const target = event.target.closest('.status-content a')
-      if (target) {
-        if (target.className.match(/mention/)) {
-          const href = target.href
-          const attn = this.status.attentions.find(attn => mentionMatchesUrl(attn, href))
-          if (attn) {
-            event.stopPropagation()
-            event.preventDefault()
-            const link = this.generateUserProfileLink(attn.id, attn.screen_name)
-            this.$router.push(link)
-            return
-          }
-        }
-        if (target.rel.match(/(?:^|\s)tag(?:$|\s)/) || target.className.match(/hashtag/)) {
-          // Extract tag name from link url
-          const tag = extractTagFromUrl(target.href)
-          if (tag) {
-            const link = this.generateTagLink(tag)
-            this.$router.push(link)
-            return
-          }
-        }
-        window.open(target.href, '_blank')
-      }
-    },
     toggleReplying () {
       this.replying = !this.replying
     },
@@ -406,22 +240,8 @@ const Status = {
     toggleUserExpanded () {
       this.userExpanded = !this.userExpanded
     },
-    toggleShowMore () {
-      if (this.mightHideBecauseTall) {
-        this.showingTall = !this.showingTall
-      } else if (this.mightHideBecauseSubject) {
-        this.expandingSubject = !this.expandingSubject
-      }
-    },
     generateUserProfileLink (id, name) {
       return generateProfileLink(id, name, this.$store.state.instance.restrictedNicknames)
-    },
-    generateTagLink (tag) {
-      return `/tag/${tag}`
-    },
-    setMedia () {
-      const attachments = this.attachmentSize === 'hide' ? this.status.attachments : this.galleryAttachments
-      return () => this.$store.dispatch('setMedia', attachments)
     }
   },
   watch: {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index ca295640..1ee4f27c 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -226,118 +226,12 @@
             </div>
           </div>
 
-          <div
-            v-if="longSubject"
-            class="status-content-wrapper"
-            :class="{ 'tall-status': !showingLongSubject }"
-          >
-            <a
-              v-if="!showingLongSubject"
-              class="tall-status-hider"
-              :class="{ 'tall-status-hider_focused': isFocused }"
-              href="#"
-              @click.prevent="showingLongSubject=true"
-            >{{ $t("general.show_more") }}</a>
-            <div
-              class="status-content media-body"
-              @click.prevent="linkClicked"
-              v-html="contentHtml"
-            />
-            <a
-              v-if="showingLongSubject"
-              href="#"
-              class="status-unhider"
-              @click.prevent="showingLongSubject=false"
-            >{{ $t("general.show_less") }}</a>
-          </div>
-          <div
-            v-else
-            :class="{'tall-status': hideTallStatus}"
-            class="status-content-wrapper"
-          >
-            <a
-              v-if="hideTallStatus"
-              class="tall-status-hider"
-              :class="{ 'tall-status-hider_focused': isFocused }"
-              href="#"
-              @click.prevent="toggleShowMore"
-            >{{ $t("general.show_more") }}</a>
-            <div
-              v-if="!hideSubjectStatus"
-              class="status-content media-body"
-              @click.prevent="linkClicked"
-              v-html="contentHtml"
-            />
-            <div
-              v-else
-              class="status-content media-body"
-              @click.prevent="linkClicked"
-              v-html="status.summary_html"
-            />
-            <a
-              v-if="hideSubjectStatus"
-              href="#"
-              class="cw-status-hider"
-              @click.prevent="toggleShowMore"
-            >
-              {{ $t("general.show_more") }}
-              <span
-                v-if="hasImageAttachments"
-                class="icon-picture"
-              />
-              <span
-                v-if="hasVideoAttachments"
-                class="icon-video"
-              />
-              <span
-                v-if="status.card"
-                class="icon-link"
-              />
-            </a>
-            <a
-              v-if="showingMore"
-              href="#"
-              class="status-unhider"
-              @click.prevent="toggleShowMore"
-            >{{ $t("general.show_less") }}</a>
-          </div>
-
-          <div v-if="status.poll && status.poll.options">
-            <poll :base-poll="status.poll" />
-          </div>
-
-          <div
-            v-if="status.attachments && (!hideSubjectStatus || showingLongSubject)"
-            class="attachments media-body"
-          >
-            <attachment
-              v-for="attachment in nonGalleryAttachments"
-              :key="attachment.id"
-              class="non-gallery"
-              :size="attachmentSize"
-              :nsfw="nsfwClickthrough"
-              :attachment="attachment"
-              :allow-play="true"
-              :set-media="setMedia()"
-            />
-            <gallery
-              v-if="galleryAttachments.length > 0"
-              :nsfw="nsfwClickthrough"
-              :attachments="galleryAttachments"
-              :set-media="setMedia()"
-            />
-          </div>
-
-          <div
-            v-if="status.card && !hideSubjectStatus && !noHeading"
-            class="link-preview media-body"
-          >
-            <link-preview
-              :card="status.card"
-              :size="attachmentSize"
-              :nsfw="nsfwClickthrough"
-            />
-          </div>
+          <StatusContent
+            :status="status"
+            :no-heading="noHeading"
+            :highlight="highlight"
+            :focused="isFocused"
+          />
 
           <transition name="fade">
             <div
@@ -630,105 +524,6 @@ $status-margin: 0.75em;
     }
   }
 
-  .tall-status {
-    position: relative;
-    height: 220px;
-    overflow-x: hidden;
-    overflow-y: hidden;
-    z-index: 1;
-    .status-content {
-      height: 100%;
-      mask: linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat,
-            linear-gradient(to top, white, white);
-      /* Autoprefixed seem to ignore this one, and also syntax is different */
-      -webkit-mask-composite: xor;
-      mask-composite: exclude;
-    }
-  }
-
-  .tall-status-hider {
-    display: inline-block;
-    word-break: break-all;
-    position: absolute;
-    height: 70px;
-    margin-top: 150px;
-    width: 100%;
-    text-align: center;
-    line-height: 110px;
-    z-index: 2;
-  }
-
-  .status-unhider, .cw-status-hider {
-    width: 100%;
-    text-align: center;
-    display: inline-block;
-    word-break: break-all;
-  }
-
-  .status-content {
-    font-family: var(--postFont, sans-serif);
-    line-height: 1.4em;
-    white-space: pre-wrap;
-
-    a {
-      color: $fallback--link;
-      color: var(--postLink, $fallback--link);
-    }
-
-    img, video {
-      max-width: 100%;
-      max-height: 400px;
-      vertical-align: middle;
-      object-fit: contain;
-
-      &.emoji {
-        width: 32px;
-        height: 32px;
-      }
-    }
-
-    blockquote {
-      margin: 0.2em 0 0.2em 2em;
-      font-style: italic;
-    }
-
-    pre {
-      overflow: auto;
-    }
-
-    code, samp, kbd, var, pre {
-      font-family: var(--postCodeFont, monospace);
-    }
-
-    p {
-      margin: 0 0 1em 0;
-    }
-
-    p:last-child {
-      margin: 0 0 0 0;
-    }
-
-    h1 {
-      font-size: 1.1em;
-      line-height: 1.2em;
-      margin: 1.4em 0;
-    }
-
-    h2 {
-      font-size: 1.1em;
-      margin: 1.0em 0;
-    }
-
-    h3 {
-      font-size: 1em;
-      margin: 1.2em 0;
-    }
-
-    h4 {
-      margin: 1.1em 0;
-    }
-  }
-
   .retweet-info {
     padding: 0.4em $status-margin;
     margin: 0;
@@ -790,11 +585,6 @@ $status-margin: 0.75em;
   }
 }
 
-.greentext {
-  color: $fallback--cGreen;
-  color: var(--cGreen, $fallback--cGreen);
-}
-
 .status-conversation {
   border-left-style: solid;
 }
@@ -866,14 +656,6 @@ a.unmute {
   flex: 1;
 }
 
-.timeline :not(.panel-disabled) > {
-  .status-el:last-child {
-    border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
-    border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
-    border-bottom: none;
-  }
-}
-
 .favs-repeated-users {
   margin-top: $status-margin;
 
diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js
new file mode 100644
index 00000000..ccc01b6f
--- /dev/null
+++ b/src/components/status_content/status_content.js
@@ -0,0 +1,210 @@
+import Attachment from '../attachment/attachment.vue'
+import Poll from '../poll/poll.vue'
+import Gallery from '../gallery/gallery.vue'
+import LinkPreview from '../link-preview/link-preview.vue'
+import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
+import fileType from 'src/services/file_type/file_type.service'
+import { processHtml } from 'src/services/tiny_post_html_processor/tiny_post_html_processor.service.js'
+import { mentionMatchesUrl, extractTagFromUrl } from 'src/services/matcher/matcher.service.js'
+import { mapGetters, mapState } from 'vuex'
+
+const StatusContent = {
+  name: 'StatusContent',
+  props: [
+    'status',
+    'focused',
+    'noHeading',
+    'fullContent'
+  ],
+  data () {
+    return {
+      showingTall: this.inConversation && this.focused,
+      showingLongSubject: false,
+      // not as computed because it sets the initial state which will be changed later
+      expandingSubject: !this.$store.getters.mergedConfig.collapseMessageWithSubject
+    }
+  },
+  computed: {
+    localCollapseSubjectDefault () {
+      return this.mergedConfig.collapseMessageWithSubject
+    },
+    hideAttachments () {
+      return (this.mergedConfig.hideAttachments && !this.inConversation) ||
+        (this.mergedConfig.hideAttachmentsInConv && this.inConversation)
+    },
+    // This is a bit hacky, but we want to approximate post height before rendering
+    // so we count newlines (masto uses <p> for paragraphs, GS uses <br> between them)
+    // as well as approximate line count by counting characters and approximating ~80
+    // per line.
+    //
+    // Using max-height + overflow: auto for status components resulted in false positives
+    // very often with japanese characters, and it was very annoying.
+    tallStatus () {
+      const lengthScore = this.status.statusnet_html.split(/<p|<br/).length + this.status.text.length / 80
+      return lengthScore > 20
+    },
+    longSubject () {
+      return this.status.summary.length > 900
+    },
+    // When a status has a subject and is also tall, we should only have one show more/less button. If the default is to collapse statuses with subjects, we just treat it like a status with a subject; otherwise, we just treat it like a tall status.
+    mightHideBecauseSubject () {
+      return this.status.summary && (!this.tallStatus || this.localCollapseSubjectDefault)
+    },
+    mightHideBecauseTall () {
+      return this.tallStatus && (!this.status.summary || !this.localCollapseSubjectDefault)
+    },
+    hideSubjectStatus () {
+      return this.mightHideBecauseSubject && !this.expandingSubject
+    },
+    hideTallStatus () {
+      return this.mightHideBecauseTall && !this.showingTall
+    },
+    showingMore () {
+      return (this.mightHideBecauseTall && this.showingTall) || (this.mightHideBecauseSubject && this.expandingSubject)
+    },
+    nsfwClickthrough () {
+      if (!this.status.nsfw) {
+        return false
+      }
+      if (this.status.summary && this.localCollapseSubjectDefault) {
+        return false
+      }
+      return true
+    },
+    attachmentSize () {
+      if ((this.mergedConfig.hideAttachments && !this.inConversation) ||
+        (this.mergedConfig.hideAttachmentsInConv && this.inConversation) ||
+        (this.status.attachments.length > this.maxThumbnails)) {
+        return 'hide'
+      } else if (this.compact) {
+        return 'small'
+      }
+      return 'normal'
+    },
+    galleryTypes () {
+      if (this.attachmentSize === 'hide') {
+        return []
+      }
+      return this.mergedConfig.playVideosInModal
+        ? ['image', 'video']
+        : ['image']
+    },
+    galleryAttachments () {
+      return this.status.attachments.filter(
+        file => fileType.fileMatchesSomeType(this.galleryTypes, file)
+      )
+    },
+    nonGalleryAttachments () {
+      return this.status.attachments.filter(
+        file => !fileType.fileMatchesSomeType(this.galleryTypes, file)
+      )
+    },
+    hasImageAttachments () {
+      return this.status.attachments.some(
+        file => fileType.fileType(file.mimetype) === 'image'
+      )
+    },
+    hasVideoAttachments () {
+      return this.status.attachments.some(
+        file => fileType.fileType(file.mimetype) === 'video'
+      )
+    },
+    maxThumbnails () {
+      return this.mergedConfig.maxThumbnails
+    },
+    postBodyHtml () {
+      const html = this.status.statusnet_html
+
+      if (this.mergedConfig.greentext) {
+        try {
+          if (html.includes('&gt;')) {
+            // This checks if post has '>' at the beginning, excluding mentions so that @mention >impying works
+            return processHtml(html, (string) => {
+              if (string.includes('&gt;') &&
+                  string
+                    .replace(/<[^>]+?>/gi, '') // remove all tags
+                    .replace(/@\w+/gi, '') // remove mentions (even failed ones)
+                    .trim()
+                    .startsWith('&gt;')) {
+                return `<span class='greentext'>${string}</span>`
+              } else {
+                return string
+              }
+            })
+          } else {
+            return html
+          }
+        } catch (e) {
+          console.err('Failed to process status html', e)
+          return html
+        }
+      } else {
+        return html
+      }
+    },
+    contentHtml () {
+      if (!this.status.summary_html) {
+        return this.postBodyHtml
+      }
+      return this.status.summary_html + '<br />' + this.postBodyHtml
+    },
+    ...mapGetters(['mergedConfig']),
+    ...mapState({
+      betterShadow: state => state.interface.browserSupport.cssFilter,
+      currentUser: state => state.users.currentUser
+    })
+  },
+  components: {
+    Attachment,
+    Poll,
+    Gallery,
+    LinkPreview
+  },
+  methods: {
+    linkClicked (event) {
+      const target = event.target.closest('.status-content a')
+      if (target) {
+        if (target.className.match(/mention/)) {
+          const href = target.href
+          const attn = this.status.attentions.find(attn => mentionMatchesUrl(attn, href))
+          if (attn) {
+            event.stopPropagation()
+            event.preventDefault()
+            const link = this.generateUserProfileLink(attn.id, attn.screen_name)
+            this.$router.push(link)
+            return
+          }
+        }
+        if (target.rel.match(/(?:^|\s)tag(?:$|\s)/) || target.className.match(/hashtag/)) {
+          // Extract tag name from link url
+          const tag = extractTagFromUrl(target.href)
+          if (tag) {
+            const link = this.generateTagLink(tag)
+            this.$router.push(link)
+            return
+          }
+        }
+        window.open(target.href, '_blank')
+      }
+    },
+    toggleShowMore () {
+      if (this.mightHideBecauseTall) {
+        this.showingTall = !this.showingTall
+      } else if (this.mightHideBecauseSubject) {
+        this.expandingSubject = !this.expandingSubject
+      }
+    },
+    generateUserProfileLink (id, name) {
+      return generateProfileLink(id, name, this.$store.state.instance.restrictedNicknames)
+    },
+    generateTagLink (tag) {
+      return `/tag/${tag}`
+    },
+    setMedia () {
+      const attachments = this.attachmentSize === 'hide' ? this.status.attachments : this.galleryAttachments
+      return () => this.$store.dispatch('setMedia', attachments)
+    }
+  }
+}
+
+export default StatusContent
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
new file mode 100644
index 00000000..8c2e8749
--- /dev/null
+++ b/src/components/status_content/status_content.vue
@@ -0,0 +1,240 @@
+<template>
+  <!-- eslint-disable vue/no-v-html -->
+  <div class="status-body">
+    <slot name="header" />
+    <div
+      v-if="longSubject"
+      class="status-content-wrapper"
+      :class="{ 'tall-status': !showingLongSubject }"
+    >
+      <a
+        v-if="!showingLongSubject"
+        class="tall-status-hider"
+        :class="{ 'tall-status-hider_focused': focused }"
+        href="#"
+        @click.prevent="showingLongSubject=true"
+      >
+        {{ $t("general.show_more") }}
+        <span
+          v-if="hasImageAttachments"
+          class="icon-picture"
+        />
+        <span
+          v-if="hasVideoAttachments"
+          class="icon-video"
+        />
+        <span
+          v-if="status.card"
+          class="icon-link"
+        />
+      </a>
+      <div
+        class="status-content media-body"
+        @click.prevent="linkClicked"
+        v-html="contentHtml"
+      />
+      <a
+        v-if="showingLongSubject"
+        href="#"
+        class="status-unhider"
+        @click.prevent="showingLongSubject=false"
+      >{{ $t("general.show_less") }}</a>
+    </div>
+    <div
+      v-else
+      :class="{'tall-status': hideTallStatus}"
+      class="status-content-wrapper"
+    >
+      <a
+        v-if="hideTallStatus"
+        class="tall-status-hider"
+        :class="{ 'tall-status-hider_focused': focused }"
+        href="#"
+        @click.prevent="toggleShowMore"
+      >{{ $t("general.show_more") }}</a>
+      <div
+        v-if="!hideSubjectStatus"
+        class="status-content media-body"
+        @click.prevent="linkClicked"
+        v-html="contentHtml"
+      />
+      <div
+        v-else
+        class="status-content media-body"
+        @click.prevent="linkClicked"
+        v-html="status.summary_html"
+      />
+      <a
+        v-if="hideSubjectStatus"
+        href="#"
+        class="cw-status-hider"
+        @click.prevent="toggleShowMore"
+      >{{ $t("general.show_more") }}</a>
+      <a
+        v-if="showingMore"
+        href="#"
+        class="status-unhider"
+        @click.prevent="toggleShowMore"
+      >{{ $t("general.show_less") }}</a>
+    </div>
+
+    <div v-if="status.poll && status.poll.options">
+      <poll :base-poll="status.poll" />
+    </div>
+
+    <div
+      v-if="status.attachments.length !== 0 && (!hideSubjectStatus || showingLongSubject)"
+      class="attachments media-body"
+    >
+      <attachment
+        v-for="attachment in nonGalleryAttachments"
+        :key="attachment.id"
+        class="non-gallery"
+        :size="attachmentSize"
+        :nsfw="nsfwClickthrough"
+        :attachment="attachment"
+        :allow-play="true"
+        :set-media="setMedia()"
+      />
+      <gallery
+        v-if="galleryAttachments.length > 0"
+        :nsfw="nsfwClickthrough"
+        :attachments="galleryAttachments"
+        :set-media="setMedia()"
+      />
+    </div>
+
+    <div
+      v-if="status.card && !hideSubjectStatus && !noHeading"
+      class="link-preview media-body"
+    >
+      <link-preview
+        :card="status.card"
+        :size="attachmentSize"
+        :nsfw="nsfwClickthrough"
+      />
+    </div>
+    <slot name="footer" />
+  </div>
+  <!-- eslint-enable vue/no-v-html -->
+</template>
+
+<script src="./status_content.js" ></script>
+<style lang="scss">
+@import '../../_variables.scss';
+
+$status-margin: 0.75em;
+
+.status-body {
+  flex: 1;
+  min-width: 0;
+
+  .tall-status {
+    position: relative;
+    height: 220px;
+    overflow-x: hidden;
+    overflow-y: hidden;
+    z-index: 1;
+    .status-content {
+      height: 100%;
+      mask: linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat,
+            linear-gradient(to top, white, white);
+      /* Autoprefixed seem to ignore this one, and also syntax is different */
+      -webkit-mask-composite: xor;
+      mask-composite: exclude;
+    }
+  }
+
+  .tall-status-hider {
+    display: inline-block;
+    word-break: break-all;
+    position: absolute;
+    height: 70px;
+    margin-top: 150px;
+    width: 100%;
+    text-align: center;
+    line-height: 110px;
+    z-index: 2;
+  }
+
+  .status-unhider, .cw-status-hider {
+    width: 100%;
+    text-align: center;
+    display: inline-block;
+    word-break: break-all;
+  }
+
+  .status-content {
+    font-family: var(--postFont, sans-serif);
+    line-height: 1.4em;
+    white-space: pre-wrap;
+
+    img, video {
+      max-width: 100%;
+      max-height: 400px;
+      vertical-align: middle;
+      object-fit: contain;
+
+      &.emoji {
+        width: 32px;
+        height: 32px;
+      }
+    }
+
+    blockquote {
+      margin: 0.2em 0 0.2em 2em;
+      font-style: italic;
+    }
+
+    pre {
+      overflow: auto;
+    }
+
+    code, samp, kbd, var, pre {
+      font-family: var(--postCodeFont, monospace);
+    }
+
+    p {
+      margin: 0 0 1em 0;
+    }
+
+    p:last-child {
+      margin: 0 0 0 0;
+    }
+
+    h1 {
+      font-size: 1.1em;
+      line-height: 1.2em;
+      margin: 1.4em 0;
+    }
+
+    h2 {
+      font-size: 1.1em;
+      margin: 1.0em 0;
+    }
+
+    h3 {
+      font-size: 1em;
+      margin: 1.2em 0;
+    }
+
+    h4 {
+      margin: 1.1em 0;
+    }
+  }
+}
+
+.greentext {
+  color: $fallback--cGreen;
+  color: var(--cGreen, $fallback--cGreen);
+}
+
+.timeline :not(.panel-disabled) > {
+  .status-el:last-child {
+    border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
+    border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
+    border-bottom: none;
+  }
+}
+
+</style>
-- 
cgit v1.2.3-70-g09d2


From 01b07f01e9340935faf51e5a3c8034cc90423989 Mon Sep 17 00:00:00 2001
From: eugenijm <eugenijm@protonmail.com>
Date: Sat, 25 Apr 2020 07:04:39 +0300
Subject: Add support for follow request notifications

---
 CHANGELOG.md                                       |  3 ++
 src/components/notification/notification.js        | 19 ++++++++++
 src/components/notification/notification.vue       | 44 ++++++++++++++++------
 src/components/notifications/notifications.scss    | 15 ++++++++
 src/i18n/en.json                                   |  5 ++-
 src/modules/config.js                              |  3 +-
 src/modules/statuses.js                            | 22 ++++++++++-
 src/services/api/api.service.js                    | 11 ++++++
 .../entity_normalizer/entity_normalizer.service.js |  5 +--
 .../notification_utils/notification_utils.js       |  7 +++-
 static/fontello.json                               | 14 ++++++-
 11 files changed, 128 insertions(+), 20 deletions(-)

(limited to 'src/components')

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f45561d0..685fe629 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 ### Changed
 - Emoji autocomplete will match any part of the word and not just start, for example :drool will now helpfully suggest :blobcatdrool: and :blobcatdroolreach:
 
+### Add
+- Follow request notification support
+
 ## [2.0.2] - 2020-04-08
 ### Fixed
 - Favorite/Repeat avatars not showing up on private instances/non-public posts
diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index e7bd769e..6deee7d5 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -2,6 +2,7 @@ import Status from '../status/status.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import UserCard from '../user_card/user_card.vue'
 import Timeago from '../timeago/timeago.vue'
+import { isStatusNotification } from '../../services/notification_utils/notification_utils.js'
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 
@@ -32,6 +33,21 @@ const Notification = {
     },
     toggleMute () {
       this.unmuted = !this.unmuted
+    },
+    approveUser () {
+      this.$store.state.api.backendInteractor.approveUser({ id: this.user.id })
+      this.$store.dispatch('removeFollowRequest', this.user)
+      this.$store.dispatch('updateNotification', {
+        id: this.notification.id,
+        updater: notification => {
+          notification.type = 'follow'
+        }
+      })
+    },
+    denyUser () {
+      this.$store.state.api.backendInteractor.denyUser({ id: this.user.id })
+      this.$store.dispatch('removeFollowRequest', this.user)
+      this.$store.dispatch('dismissNotification', { id: this.notification.id })
     }
   },
   computed: {
@@ -57,6 +73,9 @@ const Notification = {
     },
     needMute () {
       return this.user.muted
+    },
+    isStatusNotification () {
+      return isStatusNotification(this.notification.type)
     }
   }
 }
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 51875747..02802776 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -74,6 +74,10 @@
               <i class="fa icon-user-plus lit" />
               <small>{{ $t('notifications.followed_you') }}</small>
             </span>
+            <span v-if="notification.type === 'follow_request'">
+              <i class="fa icon-user lit" />
+              <small>{{ $t('notifications.follow_request') }}</small>
+            </span>
             <span v-if="notification.type === 'move'">
               <i class="fa icon-arrow-curved lit" />
               <small>{{ $t('notifications.migrated_to') }}</small>
@@ -87,30 +91,30 @@
             </span>
           </div>
           <div
-            v-if="notification.type === 'follow' || notification.type === 'move'"
+            v-if="isStatusNotification"
             class="timeago"
           >
-            <span class="faint">
+            <router-link
+              v-if="notification.status"
+              :to="{ name: 'conversation', params: { id: notification.status.id } }"
+              class="faint-link"
+            >
               <Timeago
                 :time="notification.created_at"
                 :auto-update="240"
               />
-            </span>
+            </router-link>
           </div>
           <div
             v-else
             class="timeago"
           >
-            <router-link
-              v-if="notification.status"
-              :to="{ name: 'conversation', params: { id: notification.status.id } }"
-              class="faint-link"
-            >
+            <span class="faint">
               <Timeago
                 :time="notification.created_at"
                 :auto-update="240"
               />
-            </router-link>
+            </span>
           </div>
           <a
             v-if="needMute"
@@ -119,12 +123,30 @@
           ><i class="button-icon icon-eye-off" /></a>
         </span>
         <div
-          v-if="notification.type === 'follow'"
+          v-if="notification.type === 'follow' || notification.type === 'follow_request'"
           class="follow-text"
         >
-          <router-link :to="userProfileLink">
+          <router-link
+            :to="userProfileLink"
+            class="follow-name"
+          >
             @{{ notification.from_profile.screen_name }}
           </router-link>
+          <div
+            v-if="notification.type === 'follow_request'"
+            style="white-space: nowrap;"
+          >
+            <i
+              class="icon-ok button-icon add-reaction-button"
+              :title="$t('tool_tip.accept_follow_request')"
+              @click="approveUser()"
+            />
+            <i
+              class="icon-cancel button-icon add-reaction-button"
+              :title="$t('tool_tip.accept_follow_request')"
+              @click="denyUser()"
+            />
+          </div>
         </div>
         <div
           v-else-if="notification.type === 'move'"
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index a8f4430f..80dad28b 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -82,6 +82,16 @@
   .follow-text, .move-text {
     padding: 0.5em 0;
     overflow-wrap: break-word;
+    display: flex;
+    justify-content: space-between;
+
+    .follow-name {
+      display: block;
+      max-width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
   }
 
   .status-el {
@@ -143,6 +153,11 @@
       color: var(--cGreen, $fallback--cGreen);
     }
 
+    .icon-user.lit {
+      color: $fallback--cBlue;
+      color: var(--cBlue, $fallback--cBlue);
+    }
+
     .icon-user-plus.lit {
       color: $fallback--cBlue;
       color: var(--cBlue, $fallback--cBlue);
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 54d0608e..37d9591c 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -124,6 +124,7 @@
     "broken_favorite": "Unknown status, searching for it...",
     "favorited_you": "favorited your status",
     "followed_you": "followed you",
+    "follow_request": "wants to follow you",
     "load_older": "Load older notifications",
     "notifications": "Notifications",
     "read": "Read!",
@@ -697,7 +698,9 @@
     "reply": "Reply",
     "favorite": "Favorite",
     "add_reaction": "Add Reaction",
-    "user_settings": "User Settings"
+    "user_settings": "User Settings",
+    "accept_follow_request": "Accept follow request",
+    "reject_follow_request": "Reject follow request"
   },
   "upload":{
     "error": {
diff --git a/src/modules/config.js b/src/modules/config.js
index 7997521d..8f4638f5 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -34,7 +34,8 @@ export const defaultState = {
     likes: true,
     repeats: true,
     moves: true,
-    emojiReactions: false
+    emojiReactions: false,
+    followRequest: true
   },
   webPushNotifications: false,
   muteWords: [],
diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index f1b7dcbd..239f41eb 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -13,6 +13,7 @@ import {
   omitBy
 } from 'lodash'
 import { set } from 'vue'
+import { isStatusNotification } from '../services/notification_utils/notification_utils.js'
 import apiService from '../services/api/api.service.js'
 // import parse from '../services/status_parser/status_parser.js'
 
@@ -321,7 +322,7 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
 
 const addNewNotifications = (state, { dispatch, notifications, older, visibleNotificationTypes, rootGetters }) => {
   each(notifications, (notification) => {
-    if (notification.type !== 'follow' && notification.type !== 'move') {
+    if (isStatusNotification(notification.type)) {
       notification.action = addStatusToGlobalStorage(state, notification.action).item
       notification.status = notification.status && addStatusToGlobalStorage(state, notification.status).item
     }
@@ -361,13 +362,16 @@ const addNewNotifications = (state, { dispatch, notifications, older, visibleNot
           case 'move':
             i18nString = 'migrated_to'
             break
+          case 'follow_request':
+            i18nString = 'follow_request'
+            break
         }
 
         if (notification.type === 'pleroma:emoji_reaction') {
           notifObj.body = rootGetters.i18n.t('notifications.reacted_with', [notification.emoji])
         } else if (i18nString) {
           notifObj.body = rootGetters.i18n.t('notifications.' + i18nString)
-        } else {
+        } else if (isStatusNotification(notification.type)) {
           notifObj.body = notification.status.text
         }
 
@@ -521,6 +525,13 @@ export const mutations = {
       notification.seen = true
     })
   },
+  dismissNotification (state, { id }) {
+    state.notifications.data = state.notifications.data.filter(n => n.id !== id)
+  },
+  updateNotification (state, { id, updater }) {
+    const notification = find(state.notifications.data, n => n.id === id)
+    notification && updater(notification)
+  },
   queueFlush (state, { timeline, id }) {
     state.timelines[timeline].flushMarker = id
   },
@@ -680,6 +691,13 @@ const statuses = {
         credentials: rootState.users.currentUser.credentials
       })
     },
+    dismissNotification ({ rootState, commit }, { id }) {
+      rootState.api.backendInteractor.dismissNotification({ id })
+        .then(() => commit('dismissNotification', { id }))
+    },
+    updateNotification ({ rootState, commit }, { id, updater }) {
+      commit('updateNotification', { id, updater })
+    },
     fetchFavsAndRepeats ({ rootState, commit }, id) {
       Promise.all([
         rootState.api.backendInteractor.fetchFavoritedByUsers({ id }),
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index ad2b2ad5..cda61ee2 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -29,6 +29,7 @@ const MASTODON_LOGIN_URL = '/api/v1/accounts/verify_credentials'
 const MASTODON_REGISTRATION_URL = '/api/v1/accounts'
 const MASTODON_USER_FAVORITES_TIMELINE_URL = '/api/v1/favourites'
 const MASTODON_USER_NOTIFICATIONS_URL = '/api/v1/notifications'
+const MASTODON_DISMISS_NOTIFICATION_URL = id => `/api/v1/notifications/${id}/dismiss`
 const MASTODON_FAVORITE_URL = id => `/api/v1/statuses/${id}/favourite`
 const MASTODON_UNFAVORITE_URL = id => `/api/v1/statuses/${id}/unfavourite`
 const MASTODON_RETWEET_URL = id => `/api/v1/statuses/${id}/reblog`
@@ -1010,6 +1011,15 @@ const unmuteDomain = ({ domain, credentials }) => {
   })
 }
 
+const dismissNotification = ({ credentials, id }) => {
+  return promisedRequest({
+    url: MASTODON_DISMISS_NOTIFICATION_URL(id),
+    method: 'POST',
+    payload: { id },
+    credentials
+  })
+}
+
 export const getMastodonSocketURI = ({ credentials, stream, args = {} }) => {
   return Object.entries({
     ...(credentials
@@ -1165,6 +1175,7 @@ const apiService = {
   denyUser,
   suggestions,
   markNotificationsAsSeen,
+  dismissNotification,
   vote,
   fetchPoll,
   fetchFavoritedByUsers,
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index 84169a7b..6cacd0b8 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -1,4 +1,5 @@
 import escape from 'escape-html'
+import { isStatusNotification } from '../notification_utils/notification_utils.js'
 
 const qvitterStatusType = (status) => {
   if (status.is_post_verb) {
@@ -346,9 +347,7 @@ export const parseNotification = (data) => {
   if (masto) {
     output.type = mastoDict[data.type] || data.type
     output.seen = data.pleroma.is_seen
-    output.status = output.type === 'follow' || output.type === 'move'
-      ? null
-      : parseStatus(data.status)
+    output.status = isStatusNotification(output.type) ? parseStatus(data.status) : null
     output.action = output.status // TODO: Refactor, this is unneeded
     output.target = output.type !== 'move'
       ? null
diff --git a/src/services/notification_utils/notification_utils.js b/src/services/notification_utils/notification_utils.js
index b17bd7bf..eb479227 100644
--- a/src/services/notification_utils/notification_utils.js
+++ b/src/services/notification_utils/notification_utils.js
@@ -1,4 +1,4 @@
-import { filter, sortBy } from 'lodash'
+import { filter, sortBy, includes } from 'lodash'
 
 export const notificationsFromStore = store => store.state.statuses.notifications.data
 
@@ -7,10 +7,15 @@ export const visibleTypes = store => ([
   store.state.config.notificationVisibility.mentions && 'mention',
   store.state.config.notificationVisibility.repeats && 'repeat',
   store.state.config.notificationVisibility.follows && 'follow',
+  store.state.config.notificationVisibility.followRequest && 'follow_request',
   store.state.config.notificationVisibility.moves && 'move',
   store.state.config.notificationVisibility.emojiReactions && 'pleroma:emoji_reaction'
 ].filter(_ => _))
 
+const statusNotifications = ['like', 'mention', 'repeat', 'pleroma:emoji_reaction']
+
+export const isStatusNotification = (type) => includes(statusNotifications, type)
+
 const sortById = (a, b) => {
   const seqA = Number(a.id)
   const seqB = Number(b.id)
diff --git a/static/fontello.json b/static/fontello.json
index 5a7086a2..5963b68b 100755
--- a/static/fontello.json
+++ b/static/fontello.json
@@ -345,6 +345,18 @@
       "css": "link",
       "code": 59427,
       "src": "fontawesome"
+    },
+    {
+      "uid": "8b80d36d4ef43889db10bc1f0dc9a862",
+      "css": "user",
+      "code": 59428,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "12f4ece88e46abd864e40b35e05b11cd",
+      "css": "ok",
+      "code": 59431,
+      "src": "fontawesome"
     }
   ]
-}
+}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 406fdd8edec210d14589e0ff684a166250236779 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Sat, 2 May 2020 10:19:47 +0300
Subject: follow request bugfixes, wrong text, notifs not being marked as read,
 approving from follow request view

---
 .../follow_request_card/follow_request_card.js        | 19 +++++++++++++++++++
 src/components/notification/notification.js           |  1 +
 src/components/notification/notification.vue          |  6 +++---
 src/components/notifications/notifications.scss       | 19 +++++++++++++++++++
 4 files changed, 42 insertions(+), 3 deletions(-)

(limited to 'src/components')

diff --git a/src/components/follow_request_card/follow_request_card.js b/src/components/follow_request_card/follow_request_card.js
index a8931787..2a9d3db5 100644
--- a/src/components/follow_request_card/follow_request_card.js
+++ b/src/components/follow_request_card/follow_request_card.js
@@ -1,4 +1,5 @@
 import BasicUserCard from '../basic_user_card/basic_user_card.vue'
+import { notificationsFromStore } from '../../services/notification_utils/notification_utils.js'
 
 const FollowRequestCard = {
   props: ['user'],
@@ -6,13 +7,31 @@ const FollowRequestCard = {
     BasicUserCard
   },
   methods: {
+    findFollowRequestNotificationId () {
+      const notif = notificationsFromStore(this.$store).find(
+        (notif) => notif.from_profile.id === this.user.id && notif.type === 'follow_request'
+      )
+      return notif && notif.id
+    },
     approveUser () {
       this.$store.state.api.backendInteractor.approveUser({ id: this.user.id })
       this.$store.dispatch('removeFollowRequest', this.user)
+
+      const notifId = this.findFollowRequestNotificationId()
+      this.$store.dispatch('updateNotification', {
+        id: notifId,
+        updater: notification => {
+          notification.type = 'follow'
+          notification.seen = true
+        }
+      })
     },
     denyUser () {
       this.$store.state.api.backendInteractor.denyUser({ id: this.user.id })
       this.$store.dispatch('removeFollowRequest', this.user)
+
+      const notifId = this.findFollowRequestNotificationId()
+      this.$store.dispatch('dismissNotification', { id: notifId })
     }
   }
 }
diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index 6deee7d5..8c20ff09 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -41,6 +41,7 @@ const Notification = {
         id: this.notification.id,
         updater: notification => {
           notification.type = 'follow'
+          notification.seen = true
         }
       })
     },
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 02802776..f6da07dd 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -137,13 +137,13 @@
             style="white-space: nowrap;"
           >
             <i
-              class="icon-ok button-icon add-reaction-button"
+              class="icon-ok button-icon follow-request-accept"
               :title="$t('tool_tip.accept_follow_request')"
               @click="approveUser()"
             />
             <i
-              class="icon-cancel button-icon add-reaction-button"
-              :title="$t('tool_tip.accept_follow_request')"
+              class="icon-cancel button-icon follow-request-reject"
+              :title="$t('tool_tip.reject_follow_request')"
               @click="denyUser()"
             />
           </div>
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 80dad28b..9efcfcf8 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -79,6 +79,25 @@
     }
   }
 
+  .follow-request-accept {
+    cursor: pointer;
+
+    &:hover {
+      color: $fallback--text;
+      color: var(--text, $fallback--text);
+    }
+  }
+
+  .follow-request-reject {
+    cursor: pointer;
+
+    &:hover {
+      color: $fallback--cRed;
+      color: var(--cRed, $fallback--cRed);
+    }
+  }
+
+
   .follow-text, .move-text {
     padding: 0.5em 0;
     overflow-wrap: break-word;
-- 
cgit v1.2.3-70-g09d2


From 75519223f9a715aacb99d3780ee681089a479292 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Sat, 2 May 2020 10:52:57 +0300
Subject: mark single notifs as seen properly on server

---
 src/components/follow_request_card/follow_request_card.js |  2 +-
 src/components/notification/notification.js               |  2 +-
 src/modules/statuses.js                                   | 12 ++++++++++++
 src/services/api/api.service.js                           | 12 ++++++++----
 4 files changed, 22 insertions(+), 6 deletions(-)

(limited to 'src/components')

diff --git a/src/components/follow_request_card/follow_request_card.js b/src/components/follow_request_card/follow_request_card.js
index 2a9d3db5..33e2699e 100644
--- a/src/components/follow_request_card/follow_request_card.js
+++ b/src/components/follow_request_card/follow_request_card.js
@@ -18,11 +18,11 @@ const FollowRequestCard = {
       this.$store.dispatch('removeFollowRequest', this.user)
 
       const notifId = this.findFollowRequestNotificationId()
+      this.$store.dispatch('markSingleNotificationAsSeen', { id: notifId })
       this.$store.dispatch('updateNotification', {
         id: notifId,
         updater: notification => {
           notification.type = 'follow'
-          notification.seen = true
         }
       })
     },
diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index 8c20ff09..abe3bebe 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -37,11 +37,11 @@ const Notification = {
     approveUser () {
       this.$store.state.api.backendInteractor.approveUser({ id: this.user.id })
       this.$store.dispatch('removeFollowRequest', this.user)
+      this.$store.dispatch('markSingleNotificationAsSeen', { id: this.notification.id })
       this.$store.dispatch('updateNotification', {
         id: this.notification.id,
         updater: notification => {
           notification.type = 'follow'
-          notification.seen = true
         }
       })
     },
diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index 239f41eb..2a8b9581 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -525,6 +525,10 @@ export const mutations = {
       notification.seen = true
     })
   },
+  markSingleNotificationAsSeen (state, { id }) {
+    const notification = find(state.notifications.data, n => n.id === id)
+    if (notification) notification.seen = true
+  },
   dismissNotification (state, { id }) {
     state.notifications.data = state.notifications.data.filter(n => n.id !== id)
   },
@@ -691,6 +695,14 @@ const statuses = {
         credentials: rootState.users.currentUser.credentials
       })
     },
+    markSingleNotificationAsSeen ({ rootState, commit }, { id }) {
+      commit('markSingleNotificationAsSeen', { id })
+      apiService.markNotificationsAsSeen({
+        single: true,
+        id,
+        credentials: rootState.users.currentUser.credentials
+      })
+    },
     dismissNotification ({ rootState, commit }, { id }) {
       rootState.api.backendInteractor.dismissNotification({ id })
         .then(() => commit('dismissNotification', { id }))
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 3a58c38d..72c8874f 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -4,7 +4,6 @@ import 'whatwg-fetch'
 import { RegistrationError, StatusCodeError } from '../errors/errors'
 
 /* eslint-env browser */
-const QVITTER_USER_NOTIFICATIONS_READ_URL = '/api/qvitter/statuses/notifications/read.json'
 const BLOCKS_IMPORT_URL = '/api/pleroma/blocks_import'
 const FOLLOW_IMPORT_URL = '/api/pleroma/follow_import'
 const DELETE_ACCOUNT_URL = '/api/pleroma/delete_account'
@@ -17,6 +16,7 @@ const DEACTIVATE_USER_URL = '/api/pleroma/admin/users/deactivate'
 const ADMIN_USERS_URL = '/api/pleroma/admin/users'
 const SUGGESTIONS_URL = '/api/v1/suggestions'
 const NOTIFICATION_SETTINGS_URL = '/api/pleroma/notification_settings'
+const NOTIFICATION_READ_URL = '/api/v1/pleroma/notifications/read'
 
 const MFA_SETTINGS_URL = '/api/pleroma/accounts/mfa'
 const MFA_BACKUP_CODES_URL = '/api/pleroma/accounts/mfa/backup_codes'
@@ -841,12 +841,16 @@ const suggestions = ({ credentials }) => {
   }).then((data) => data.json())
 }
 
-const markNotificationsAsSeen = ({ id, credentials }) => {
+const markNotificationsAsSeen = ({ id, credentials, single = false }) => {
   const body = new FormData()
 
-  body.append('latest_id', id)
+  if (single) {
+    body.append('id', id)
+  } else {
+    body.append('max_id', id)
+  }
 
-  return fetch(QVITTER_USER_NOTIFICATIONS_READ_URL, {
+  return fetch(NOTIFICATION_READ_URL, {
     body,
     headers: authHeaders(credentials),
     method: 'POST'
-- 
cgit v1.2.3-70-g09d2


From 92ccaa97bb0a2c15b96e2fbcf03823ba902dc516 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Sat, 2 May 2020 11:51:39 +0300
Subject: don't dismiss a rejected follow request on server

---
 src/components/follow_request_card/follow_request_card.js | 9 +++++----
 src/components/notification/notification.js               | 6 ++++--
 src/modules/statuses.js                                   | 5 ++++-
 3 files changed, 13 insertions(+), 7 deletions(-)

(limited to 'src/components')

diff --git a/src/components/follow_request_card/follow_request_card.js b/src/components/follow_request_card/follow_request_card.js
index 33e2699e..cbd75311 100644
--- a/src/components/follow_request_card/follow_request_card.js
+++ b/src/components/follow_request_card/follow_request_card.js
@@ -27,11 +27,12 @@ const FollowRequestCard = {
       })
     },
     denyUser () {
-      this.$store.state.api.backendInteractor.denyUser({ id: this.user.id })
-      this.$store.dispatch('removeFollowRequest', this.user)
-
       const notifId = this.findFollowRequestNotificationId()
-      this.$store.dispatch('dismissNotification', { id: notifId })
+      this.$store.state.api.backendInteractor.denyUser({ id: this.user.id })
+        .then(() => {
+          this.$store.dispatch('dismissNotificationLocal', { id: notifId })
+          this.$store.dispatch('removeFollowRequest', this.user)
+        })
     }
   }
 }
diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index abe3bebe..1ae81ce4 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -47,8 +47,10 @@ const Notification = {
     },
     denyUser () {
       this.$store.state.api.backendInteractor.denyUser({ id: this.user.id })
-      this.$store.dispatch('removeFollowRequest', this.user)
-      this.$store.dispatch('dismissNotification', { id: this.notification.id })
+        .then(() => {
+          this.$store.dispatch('dismissNotificationLocal', { id: this.notification.id })
+          this.$store.dispatch('removeFollowRequest', this.user)
+        })
     }
   },
   computed: {
diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index 2a8b9581..cd8c1dba 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -703,9 +703,12 @@ const statuses = {
         credentials: rootState.users.currentUser.credentials
       })
     },
+    dismissNotificationLocal ({ rootState, commit }, { id }) {
+      commit('dismissNotification', { id })
+    },
     dismissNotification ({ rootState, commit }, { id }) {
+      commit('dismissNotification', { id })
       rootState.api.backendInteractor.dismissNotification({ id })
-        .then(() => commit('dismissNotification', { id }))
     },
     updateNotification ({ rootState, commit }, { id, updater }) {
       commit('updateNotification', { id, updater })
-- 
cgit v1.2.3-70-g09d2


From 2e35289c3376881ca17b9330113c816a3327f245 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 3 May 2020 17:36:12 +0300
Subject: initial work on settings modal

---
 src/App.js                                         |   5 +
 src/App.scss                                       |   3 +
 src/App.vue                                        |   7 +-
 .../mobile_post_status_button.js                   |   2 +-
 .../post_status_modal/post_status_modal.js         |   3 -
 .../post_status_modal/post_status_modal.vue        |   1 -
 src/components/settings_modal/settings_modal.js    |  39 ++
 src/components/settings_modal/settings_modal.scss  |  59 ++
 src/components/settings_modal/settings_modal.vue   |  31 ++
 .../settings_modal/tabs/data_import_export.js      |  65 +++
 .../settings_modal/tabs/data_import_export.vue     |  43 ++
 .../settings_modal/tabs/mutes_and_blocks.js        | 124 +++++
 .../settings_modal/tabs/mutes_and_blocks.vue       | 173 ++++++
 .../settings_modal/tabs/notifications.js           |  27 +
 .../settings_modal/tabs/notifications.vue          |  42 ++
 src/components/settings_modal/tabs/profile.js      | 179 ++++++
 src/components/settings_modal/tabs/profile.scss    |  82 +++
 src/components/settings_modal/tabs/profile.vue     | 213 ++++++++
 src/components/settings_modal/tabs/security.js     | 106 ++++
 src/components/settings_modal/tabs/security.vue    | 143 +++++
 src/components/tab_switcher/tab_switcher.js        |   7 +-
 src/components/tab_switcher/tab_switcher.scss      | 220 +++++---
 src/components/user_settings/user_settings.js      | 257 +--------
 src/components/user_settings/user_settings.vue     | 597 ---------------------
 src/i18n/en.json                                   |   1 +
 src/modules/interface.js                           |  28 +
 26 files changed, 1530 insertions(+), 927 deletions(-)
 create mode 100644 src/components/settings_modal/settings_modal.js
 create mode 100644 src/components/settings_modal/settings_modal.scss
 create mode 100644 src/components/settings_modal/settings_modal.vue
 create mode 100644 src/components/settings_modal/tabs/data_import_export.js
 create mode 100644 src/components/settings_modal/tabs/data_import_export.vue
 create mode 100644 src/components/settings_modal/tabs/mutes_and_blocks.js
 create mode 100644 src/components/settings_modal/tabs/mutes_and_blocks.vue
 create mode 100644 src/components/settings_modal/tabs/notifications.js
 create mode 100644 src/components/settings_modal/tabs/notifications.vue
 create mode 100644 src/components/settings_modal/tabs/profile.js
 create mode 100644 src/components/settings_modal/tabs/profile.scss
 create mode 100644 src/components/settings_modal/tabs/profile.vue
 create mode 100644 src/components/settings_modal/tabs/security.js
 create mode 100644 src/components/settings_modal/tabs/security.vue

(limited to 'src/components')

diff --git a/src/App.js b/src/App.js
index 61b5eec1..4d9d50d4 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,6 +6,7 @@ import InstanceSpecificPanel from './components/instance_specific_panel/instance
 import FeaturesPanel from './components/features_panel/features_panel.vue'
 import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue'
 import ChatPanel from './components/chat_panel/chat_panel.vue'
+import SettingsModal from './components/settings_modal/settings_modal.vue'
 import MediaModal from './components/media_modal/media_modal.vue'
 import SideDrawer from './components/side_drawer/side_drawer.vue'
 import MobilePostStatusButton from './components/mobile_post_status_button/mobile_post_status_button.vue'
@@ -29,6 +30,7 @@ export default {
     SideDrawer,
     MobilePostStatusButton,
     MobileNav,
+    SettingsModal,
     UserReportingModal,
     PostStatusModal
   },
@@ -112,6 +114,9 @@ export default {
     onSearchBarToggled (hidden) {
       this.searchBarHidden = hidden
     },
+    openSettingsModal () {
+      this.$store.dispatch('openSettingsModal')
+    },
     updateMobileState () {
       const mobileLayout = windowWidth() <= 800
       const changed = mobileLayout !== this.isMobileLayout
diff --git a/src/App.scss b/src/App.scss
index 89aa3215..7db9461c 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -860,6 +860,7 @@ nav {
   }
 }
 
+// DELETE
 .setting-item {
   border-bottom: 2px solid var(--fg, $fallback--fg);
   margin: 1em 1em 1.4em;
@@ -905,6 +906,8 @@ nav {
     max-width: 6em;
   }
 }
+// DELETE
+
 .select-multiple {
   display: flex;
   .option-list {
diff --git a/src/App.vue b/src/App.vue
index ff62fc51..db3f981f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -46,15 +46,15 @@
             @toggled="onSearchBarToggled"
             @click.stop.native
           />
-          <router-link
+          <a
             class="mobile-hidden"
-            :to="{ name: 'settings'}"
+            @click.stop="openSettingsModal"
           >
             <i
               class="button-icon icon-cog nav-icon"
               :title="$t('nav.preferences')"
             />
-          </router-link>
+          </a>
           <a
             v-if="currentUser && currentUser.role === 'admin'"
             href="/pleroma/admin/#/login-pleroma"
@@ -122,6 +122,7 @@
     <MobilePostStatusButton />
     <UserReportingModal />
     <PostStatusModal />
+    <SettingsModal />
     <portal-target name="modal" />
   </div>
 </template>
diff --git a/src/components/mobile_post_status_button/mobile_post_status_button.js b/src/components/mobile_post_status_button/mobile_post_status_button.js
index 0ad12bb1..ff2d4eaa 100644
--- a/src/components/mobile_post_status_button/mobile_post_status_button.js
+++ b/src/components/mobile_post_status_button/mobile_post_status_button.js
@@ -52,7 +52,7 @@ const MobilePostStatusButton = {
       window.removeEventListener('scroll', this.handleScrollEnd)
     },
     openPostForm () {
-      this.$store.dispatch('openPostStatusModal')
+      this.$store.dispatch('openSettingsModal')
     },
     handleOSK () {
       // This is a big hack: we're guessing from changed window sizes if the
diff --git a/src/components/post_status_modal/post_status_modal.js b/src/components/post_status_modal/post_status_modal.js
index b44354db..be945400 100644
--- a/src/components/post_status_modal/post_status_modal.js
+++ b/src/components/post_status_modal/post_status_modal.js
@@ -13,9 +13,6 @@ const PostStatusModal = {
     }
   },
   computed: {
-    isLoggedIn () {
-      return !!this.$store.state.users.currentUser
-    },
     modalActivated () {
       return this.$store.state.postStatus.modalActivated
     },
diff --git a/src/components/post_status_modal/post_status_modal.vue b/src/components/post_status_modal/post_status_modal.vue
index dbcd321e..07c58f74 100644
--- a/src/components/post_status_modal/post_status_modal.vue
+++ b/src/components/post_status_modal/post_status_modal.vue
@@ -1,6 +1,5 @@
 <template>
   <Modal
-    v-if="isLoggedIn && !resettingForm"
     :is-open="modalActivated"
     class="post-form-modal-view"
     @backdropClicked="closeModal"
diff --git a/src/components/settings_modal/settings_modal.js b/src/components/settings_modal/settings_modal.js
new file mode 100644
index 00000000..1f4c038f
--- /dev/null
+++ b/src/components/settings_modal/settings_modal.js
@@ -0,0 +1,39 @@
+import Modal from '../modal/modal.vue'
+import TabSwitcher from '../tab_switcher/tab_switcher.js'
+
+import Profile from './tabs/profile.vue'
+import Security from './tabs/security.vue'
+import Notifications from './tabs/notifications.vue'
+import DataImportExport from './tabs/data_import_export.vue'
+import MutesAndBlocks from './tabs/mutes_and_blocks.vue'
+
+const SettingsModal = {
+  components: {
+    Modal,
+    TabSwitcher,
+    Profile,
+    Security,
+    Notifications,
+    DataImportExport,
+    MutesAndBlocks
+  },
+  data () {
+    return {
+      resettingForm: false
+    }
+  },
+  computed: {
+    isLoggedIn () {
+      return !!this.$store.state.users.currentUser
+    },
+    modalActivated () {
+      return this.$store.state.interface.settingsModalState !== 'hidden'
+    }
+  },
+  watch: {
+  },
+  methods: {
+  }
+}
+
+export default SettingsModal
diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss
new file mode 100644
index 00000000..8cea52d2
--- /dev/null
+++ b/src/components/settings_modal/settings_modal.scss
@@ -0,0 +1,59 @@
+@import '../../_variables.scss';
+.settings-modal {
+  .settings_tab-switcher {
+    height: 100%;
+  }
+  .settings-modal-panel {
+    width: 1000px;
+    max-width: 90vw;
+    height: 90vh;
+  }
+  .panel-body {
+    overflow-y: hidden;
+  }
+  .setting-item {
+    border-bottom: 2px solid var(--fg, $fallback--fg);
+    margin: 1em 1em 1.4em;
+    padding-bottom: 1.4em;
+
+    > div {
+      margin-bottom: .5em;
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    &:last-child {
+      border-bottom: none;
+      padding-bottom: 0;
+      margin-bottom: 1em;
+    }
+
+    select {
+      min-width: 10em;
+    }
+
+
+    textarea {
+      width: 100%;
+      max-width: 100%;
+      height: 100px;
+    }
+
+    .unavailable,
+    .unavailable i {
+      color: var(--cRed, $fallback--cRed);
+      color: $fallback--cRed;
+    }
+
+    .btn {
+      min-height: 28px;
+      min-width: 10em;
+      padding: 0 2em;
+    }
+
+    .number-input {
+      max-width: 6em;
+    }
+  }
+}
diff --git a/src/components/settings_modal/settings_modal.vue b/src/components/settings_modal/settings_modal.vue
new file mode 100644
index 00000000..9e35d3f6
--- /dev/null
+++ b/src/components/settings_modal/settings_modal.vue
@@ -0,0 +1,31 @@
+<template>
+<Modal
+  v-if="isLoggedIn && !resettingForm"
+  :is-open="modalActivated"
+  class="settings-modal"
+  >
+  <div class="settings-modal-panel panel">
+    <div class="panel-heading">
+      {{ $t('settings.settings') }}
+    </div>
+    <div class="panel-body">
+      <tab-switcher
+        class="settings_tab-switcher"
+        :sideTabBar="true"
+        :scrollableTabs="true"
+        ref="tabSwitcher"
+        >
+        <div :label="$t('settings.profile_tab')"><Profile /></div>
+        <div :label="$t('settings.security_tab')"><Security /></div>
+        <div :label="$t('settings.notifications')"><Notifications /></div>
+        <div :label="$t('settings.data_import_export_tab')"><DataImportExport /></div>
+        <div :label="$t('settings.mutes_and_blocks')"><MutesAndBlocks /></div>
+      </tab-switcher>
+    </div>
+  </div>
+</Modal>
+</template>
+
+<script src="./settings_modal.js"></script>
+
+<style src="./settings_modal.scss" lang="scss"></style>
diff --git a/src/components/settings_modal/tabs/data_import_export.js b/src/components/settings_modal/tabs/data_import_export.js
new file mode 100644
index 00000000..f68d12e9
--- /dev/null
+++ b/src/components/settings_modal/tabs/data_import_export.js
@@ -0,0 +1,65 @@
+import Importer from '../../importer/importer.vue'
+import Exporter from '../../exporter/exporter.vue'
+import Checkbox from '../../checkbox/checkbox.vue'
+
+const DataImportExport = {
+  data () {
+    return {
+      activeTab: 'profile',
+      newDomainToMute: ''
+    }
+  },
+  created () {
+    this.$store.dispatch('fetchTokens')
+  },
+  components: {
+    Importer,
+    Exporter,
+    Checkbox
+  },
+  computed: {
+    user () {
+      return this.$store.state.users.currentUser
+    }
+  },
+  methods: {
+    getFollowsContent () {
+      return this.$store.state.api.backendInteractor.exportFriends({ id: this.$store.state.users.currentUser.id })
+        .then(this.generateExportableUsersContent)
+    },
+    getBlocksContent () {
+      return this.$store.state.api.backendInteractor.fetchBlocks()
+        .then(this.generateExportableUsersContent)
+    },
+    importFollows (file) {
+      return this.$store.state.api.backendInteractor.importFollows({ file })
+        .then((status) => {
+          if (!status) {
+            throw new Error('failed')
+          }
+        })
+    },
+    importBlocks (file) {
+      return this.$store.state.api.backendInteractor.importBlocks({ file })
+        .then((status) => {
+          if (!status) {
+            throw new Error('failed')
+          }
+        })
+    },
+    generateExportableUsersContent (users) {
+      // Get addresses
+      return users.map((user) => {
+        // check is it's a local user
+        if (user && user.is_local) {
+          // append the instance address
+          // eslint-disable-next-line no-undef
+          return user.screen_name + '@' + location.hostname
+        }
+        return user.screen_name
+      }).join('\n')
+    }
+  }
+}
+
+export default DataImportExport
diff --git a/src/components/settings_modal/tabs/data_import_export.vue b/src/components/settings_modal/tabs/data_import_export.vue
new file mode 100644
index 00000000..464df6d3
--- /dev/null
+++ b/src/components/settings_modal/tabs/data_import_export.vue
@@ -0,0 +1,43 @@
+<template>
+<div
+  :label="$t('settings.data_import_export_tab')"
+  >
+  <div class="setting-item">
+    <h2>{{ $t('settings.follow_import') }}</h2>
+    <p>{{ $t('settings.import_followers_from_a_csv_file') }}</p>
+    <Importer
+      :submit-handler="importFollows"
+      :success-message="$t('settings.follows_imported')"
+      :error-message="$t('settings.follow_import_error')"
+      />
+  </div>
+  <div class="setting-item">
+    <h2>{{ $t('settings.follow_export') }}</h2>
+    <Exporter
+      :get-content="getFollowsContent"
+      filename="friends.csv"
+      :export-button-label="$t('settings.follow_export_button')"
+      />
+  </div>
+  <div class="setting-item">
+    <h2>{{ $t('settings.block_import') }}</h2>
+    <p>{{ $t('settings.import_blocks_from_a_csv_file') }}</p>
+    <Importer
+      :submit-handler="importBlocks"
+      :success-message="$t('settings.blocks_imported')"
+      :error-message="$t('settings.block_import_error')"
+      />
+  </div>
+  <div class="setting-item">
+    <h2>{{ $t('settings.block_export') }}</h2>
+    <Exporter
+      :get-content="getBlocksContent"
+      filename="blocks.csv"
+      :export-button-label="$t('settings.block_export_button')"
+      />
+  </div>
+</div>
+</template>
+
+<script src="./data_import_export.js"></script>
+<!-- <style lang="scss" src="./profile.scss"></style> -->
diff --git a/src/components/settings_modal/tabs/mutes_and_blocks.js b/src/components/settings_modal/tabs/mutes_and_blocks.js
new file mode 100644
index 00000000..51895ddc
--- /dev/null
+++ b/src/components/settings_modal/tabs/mutes_and_blocks.js
@@ -0,0 +1,124 @@
+import get from 'lodash/get'
+import map from 'lodash/map'
+import reject from 'lodash/reject'
+import Autosuggest from '../../autosuggest/autosuggest.vue'
+import TabSwitcher from '../../tab_switcher/tab_switcher.js'
+import BlockCard from '../../block_card/block_card.vue'
+import MuteCard from '../../mute_card/mute_card.vue'
+import DomainMuteCard from '../../domain_mute_card/domain_mute_card.vue'
+import SelectableList from '../../selectable_list/selectable_list.vue'
+import ProgressButton from '../../progress_button/progress_button.vue'
+import withSubscription from '../../../hocs/with_subscription/with_subscription'
+import Checkbox from '../../checkbox/checkbox.vue'
+
+const BlockList = withSubscription({
+  fetch: (props, $store) => $store.dispatch('fetchBlocks'),
+  select: (props, $store) => get($store.state.users.currentUser, 'blockIds', []),
+  childPropName: 'items'
+})(SelectableList)
+
+const MuteList = withSubscription({
+  fetch: (props, $store) => $store.dispatch('fetchMutes'),
+  select: (props, $store) => get($store.state.users.currentUser, 'muteIds', []),
+  childPropName: 'items'
+})(SelectableList)
+
+const DomainMuteList = withSubscription({
+  fetch: (props, $store) => $store.dispatch('fetchDomainMutes'),
+  select: (props, $store) => get($store.state.users.currentUser, 'domainMutes', []),
+  childPropName: 'items'
+})(SelectableList)
+
+const MutesAndBlocks = {
+  data () {
+    return {
+      activeTab: 'profile',
+      newDomainToMute: ''
+    }
+  },
+  created () {
+    this.$store.dispatch('fetchTokens')
+  },
+  components: {
+    TabSwitcher,
+    BlockList,
+    MuteList,
+    DomainMuteList,
+    BlockCard,
+    MuteCard,
+    DomainMuteCard,
+    ProgressButton,
+    Autosuggest,
+    Checkbox
+  },
+  methods: {
+    importFollows (file) {
+      return this.$store.state.api.backendInteractor.importFollows({ file })
+        .then((status) => {
+          if (!status) {
+            throw new Error('failed')
+          }
+        })
+    },
+    importBlocks (file) {
+      return this.$store.state.api.backendInteractor.importBlocks({ file })
+        .then((status) => {
+          if (!status) {
+            throw new Error('failed')
+          }
+        })
+    },
+    generateExportableUsersContent (users) {
+      // Get addresses
+      return users.map((user) => {
+        // check is it's a local user
+        if (user && user.is_local) {
+          // append the instance address
+          // eslint-disable-next-line no-undef
+          return user.screen_name + '@' + location.hostname
+        }
+        return user.screen_name
+      }).join('\n')
+    },
+    activateTab (tabName) {
+      this.activeTab = tabName
+    },
+    filterUnblockedUsers (userIds) {
+      return reject(userIds, (userId) => {
+        const user = this.$store.getters.findUser(userId)
+        return !user || user.statusnet_blocking || user.id === this.$store.state.users.currentUser.id
+      })
+    },
+    filterUnMutedUsers (userIds) {
+      return reject(userIds, (userId) => {
+        const user = this.$store.getters.findUser(userId)
+        return !user || user.muted || user.id === this.$store.state.users.currentUser.id
+      })
+    },
+    queryUserIds (query) {
+      return this.$store.dispatch('searchUsers', query)
+        .then((users) => map(users, 'id'))
+    },
+    blockUsers (ids) {
+      return this.$store.dispatch('blockUsers', ids)
+    },
+    unblockUsers (ids) {
+      return this.$store.dispatch('unblockUsers', ids)
+    },
+    muteUsers (ids) {
+      return this.$store.dispatch('muteUsers', ids)
+    },
+    unmuteUsers (ids) {
+      return this.$store.dispatch('unmuteUsers', ids)
+    },
+    unmuteDomains (domains) {
+      return this.$store.dispatch('unmuteDomains', domains)
+    },
+    muteDomain () {
+      return this.$store.dispatch('muteDomain', this.newDomainToMute)
+        .then(() => { this.newDomainToMute = '' })
+    }
+  }
+}
+
+export default MutesAndBlocks
diff --git a/src/components/settings_modal/tabs/mutes_and_blocks.vue b/src/components/settings_modal/tabs/mutes_and_blocks.vue
new file mode 100644
index 00000000..3aff47a0
--- /dev/null
+++ b/src/components/settings_modal/tabs/mutes_and_blocks.vue
@@ -0,0 +1,173 @@
+<template>
+  <tab-switcher>
+    <div :label="$t('settings.blocks_tab')">
+      <div class="profile-edit-usersearch-wrapper">
+        <Autosuggest
+          :filter="filterUnblockedUsers"
+          :query="queryUserIds"
+          :placeholder="$t('settings.search_user_to_block')"
+          >
+          <BlockCard
+            slot-scope="row"
+            :user-id="row.item"
+            />
+        </Autosuggest>
+      </div>
+      <BlockList
+        :refresh="true"
+        :get-key="identity"
+        >
+        <template
+          slot="header"
+          slot-scope="{selected}"
+          >
+          <div class="profile-edit-bulk-actions">
+            <ProgressButton
+              v-if="selected.length > 0"
+              class="btn btn-default"
+              :click="() => blockUsers(selected)"
+              >
+              {{ $t('user_card.block') }}
+              <template slot="progress">
+                {{ $t('user_card.block_progress') }}
+              </template>
+            </ProgressButton>
+            <ProgressButton
+              v-if="selected.length > 0"
+              class="btn btn-default"
+              :click="() => unblockUsers(selected)"
+              >
+              {{ $t('user_card.unblock') }}
+              <template slot="progress">
+                {{ $t('user_card.unblock_progress') }}
+              </template>
+            </ProgressButton>
+          </div>
+        </template>
+        <template
+          slot="item"
+          slot-scope="{item}"
+          >
+          <BlockCard :user-id="item" />
+        </template>
+        <template slot="empty">
+          {{ $t('settings.no_blocks') }}
+        </template>
+      </BlockList>
+    </div>
+
+    <div :label="$t('settings.mutes_tab')">
+      <tab-switcher>
+        <div label="Users">
+          <div class="profile-edit-usersearch-wrapper">
+            <Autosuggest
+              :filter="filterUnMutedUsers"
+              :query="queryUserIds"
+              :placeholder="$t('settings.search_user_to_mute')"
+              >
+              <MuteCard
+                slot-scope="row"
+                :user-id="row.item"
+                />
+            </Autosuggest>
+          </div>
+          <MuteList
+            :refresh="true"
+            :get-key="identity"
+            >
+            <template
+              slot="header"
+              slot-scope="{selected}"
+              >
+              <div class="profile-edit-bulk-actions">
+                <ProgressButton
+                  v-if="selected.length > 0"
+                  class="btn btn-default"
+                  :click="() => muteUsers(selected)"
+                  >
+                  {{ $t('user_card.mute') }}
+                  <template slot="progress">
+                    {{ $t('user_card.mute_progress') }}
+                  </template>
+                </ProgressButton>
+                <ProgressButton
+                  v-if="selected.length > 0"
+                  class="btn btn-default"
+                  :click="() => unmuteUsers(selected)"
+                  >
+                  {{ $t('user_card.unmute') }}
+                  <template slot="progress">
+                    {{ $t('user_card.unmute_progress') }}
+                  </template>
+                </ProgressButton>
+              </div>
+            </template>
+            <template
+              slot="item"
+              slot-scope="{item}"
+              >
+              <MuteCard :user-id="item" />
+            </template>
+            <template slot="empty">
+              {{ $t('settings.no_mutes') }}
+            </template>
+          </MuteList>
+        </div>
+
+        <div :label="$t('settings.domain_mutes')">
+          <div class="profile-edit-domain-mute-form">
+            <input
+              v-model="newDomainToMute"
+              :placeholder="$t('settings.type_domains_to_mute')"
+              type="text"
+              @keyup.enter="muteDomain"
+              >
+            <ProgressButton
+              class="btn btn-default"
+              :click="muteDomain"
+              >
+              {{ $t('domain_mute_card.mute') }}
+              <template slot="progress">
+                {{ $t('domain_mute_card.mute_progress') }}
+              </template>
+            </ProgressButton>
+          </div>
+          <DomainMuteList
+            :refresh="true"
+            :get-key="identity"
+            >
+            <template
+              slot="header"
+              slot-scope="{selected}"
+              >
+              <div class="profile-edit-bulk-actions">
+                <ProgressButton
+                  v-if="selected.length > 0"
+                  class="btn btn-default"
+                  :click="() => unmuteDomains(selected)"
+                  >
+                  {{ $t('domain_mute_card.unmute') }}
+                  <template slot="progress">
+                    {{ $t('domain_mute_card.unmute_progress') }}
+                  </template>
+                </ProgressButton>
+              </div>
+            </template>
+            <template
+              slot="item"
+              slot-scope="{item}"
+              >
+              <DomainMuteCard :domain="item" />
+            </template>
+            <template slot="empty">
+              {{ $t('settings.no_mutes') }}
+            </template>
+          </DomainMuteList>
+        </div>
+      </tab-switcher>
+    </div>
+  </tab-switcher>
+</template>
+
+<script src="./mutes_and_blocks.js"></script>
+<!-- <style lang="scss" src="./profile.scss"></style> -->
diff --git a/src/components/settings_modal/tabs/notifications.js b/src/components/settings_modal/tabs/notifications.js
new file mode 100644
index 00000000..0a870b3f
--- /dev/null
+++ b/src/components/settings_modal/tabs/notifications.js
@@ -0,0 +1,27 @@
+import Checkbox from '../../checkbox/checkbox.vue'
+
+const Notifications = {
+  data () {
+    return {
+      activeTab: 'profile',
+      notificationSettings: this.$store.state.users.currentUser.notification_settings,
+      newDomainToMute: ''
+    }
+  },
+  components: {
+    Checkbox
+  },
+  computed: {
+    user () {
+      return this.$store.state.users.currentUser
+    }
+  },
+  methods: {
+    updateNotificationSettings () {
+      this.$store.state.api.backendInteractor
+        .updateNotificationSettings({ settings: this.notificationSettings })
+    }
+  }
+}
+
+export default Notifications
diff --git a/src/components/settings_modal/tabs/notifications.vue b/src/components/settings_modal/tabs/notifications.vue
new file mode 100644
index 00000000..f9a7c17b
--- /dev/null
+++ b/src/components/settings_modal/tabs/notifications.vue
@@ -0,0 +1,42 @@
+<template>
+<div :label="$t('settings.notifications')">
+  <div class="setting-item">
+    <div class="select-multiple">
+      <span class="label">{{ $t('settings.notification_setting') }}</span>
+      <ul class="option-list">
+        <li>
+          <Checkbox v-model="notificationSettings.follows">
+            {{ $t('settings.notification_setting_follows') }}
+          </Checkbox>
+        </li>
+        <li>
+          <Checkbox v-model="notificationSettings.followers">
+            {{ $t('settings.notification_setting_followers') }}
+          </Checkbox>
+        </li>
+        <li>
+          <Checkbox v-model="notificationSettings.non_follows">
+            {{ $t('settings.notification_setting_non_follows') }}
+          </Checkbox>
+        </li>
+        <li>
+          <Checkbox v-model="notificationSettings.non_followers">
+            {{ $t('settings.notification_setting_non_followers') }}
+          </Checkbox>
+        </li>
+      </ul>
+    </div>
+    <p>{{ $t('settings.notification_mutes') }}</p>
+    <p>{{ $t('settings.notification_blocks') }}</p>
+    <button
+      class="btn btn-default"
+      @click="updateNotificationSettings"
+      >
+      {{ $t('general.submit') }}
+    </button>
+  </div>
+</div>
+</template>
+
+<script src="./notifications.js"></script>
+<!-- <style lang="scss" src="./profile.scss"></style> -->
diff --git a/src/components/settings_modal/tabs/profile.js b/src/components/settings_modal/tabs/profile.js
new file mode 100644
index 00000000..18c44024
--- /dev/null
+++ b/src/components/settings_modal/tabs/profile.js
@@ -0,0 +1,179 @@
+import unescape from 'lodash/unescape'
+import ImageCropper from '../../image_cropper/image_cropper.vue'
+import ScopeSelector from '../../scope_selector/scope_selector.vue'
+import fileSizeFormatService from '../../../services/file_size_format/file_size_format.js'
+import ProgressButton from '../../progress_button/progress_button.vue'
+import EmojiInput from '../../emoji_input/emoji_input.vue'
+import suggestor from '../../emoji_input/suggestor.js'
+import Autosuggest from '../../autosuggest/autosuggest.vue'
+import Checkbox from '../../checkbox/checkbox.vue'
+
+const ProfileTab = {
+  data () {
+    return {
+      newName: this.$store.state.users.currentUser.name,
+      newBio: unescape(this.$store.state.users.currentUser.description),
+      newLocked: this.$store.state.users.currentUser.locked,
+      newNoRichText: this.$store.state.users.currentUser.no_rich_text,
+      newDefaultScope: this.$store.state.users.currentUser.default_scope,
+      hideFollows: this.$store.state.users.currentUser.hide_follows,
+      hideFollowers: this.$store.state.users.currentUser.hide_followers,
+      hideFollowsCount: this.$store.state.users.currentUser.hide_follows_count,
+      hideFollowersCount: this.$store.state.users.currentUser.hide_followers_count,
+      showRole: this.$store.state.users.currentUser.show_role,
+      role: this.$store.state.users.currentUser.role,
+      discoverable: this.$store.state.users.currentUser.discoverable,
+      allowFollowingMove: this.$store.state.users.currentUser.allow_following_move,
+      pickAvatarBtnVisible: true,
+      bannerUploading: false,
+      backgroundUploading: false,
+      banner: null,
+      bannerPreview: null,
+      background: null,
+      backgroundPreview: null,
+      bannerUploadError: null,
+      backgroundUploadError: null,
+    }
+  },
+  components: {
+    ScopeSelector,
+    ImageCropper,
+    EmojiInput,
+    Autosuggest,
+    ProgressButton,
+    Checkbox
+  },
+  computed: {
+    user () {
+      return this.$store.state.users.currentUser
+    },
+    emojiUserSuggestor () {
+      return suggestor({
+        emoji: [
+          ...this.$store.state.instance.emoji,
+          ...this.$store.state.instance.customEmoji
+        ],
+        users: this.$store.state.users.users,
+        updateUsersList: (input) => this.$store.dispatch('searchUsers', input)
+      })
+    },
+    emojiSuggestor () {
+      return suggestor({ emoji: [
+        ...this.$store.state.instance.emoji,
+        ...this.$store.state.instance.customEmoji
+      ] })
+    }
+  },
+  methods: {
+    updateProfile () {
+      this.$store.state.api.backendInteractor
+        .updateProfile({
+          params: {
+            note: this.newBio,
+            locked: this.newLocked,
+            // Backend notation.
+            /* eslint-disable camelcase */
+            display_name: this.newName,
+            default_scope: this.newDefaultScope,
+            no_rich_text: this.newNoRichText,
+            hide_follows: this.hideFollows,
+            hide_followers: this.hideFollowers,
+            discoverable: this.discoverable,
+            allow_following_move: this.allowFollowingMove,
+            hide_follows_count: this.hideFollowsCount,
+            hide_followers_count: this.hideFollowersCount,
+            show_role: this.showRole
+            /* eslint-enable camelcase */
+          } }).then((user) => {
+          this.$store.commit('addNewUsers', [user])
+          this.$store.commit('setCurrentUser', user)
+        })
+    },
+    changeVis (visibility) {
+      this.newDefaultScope = visibility
+    },
+    uploadFile (slot, e) {
+      const file = e.target.files[0]
+      if (!file) { return }
+      if (file.size > this.$store.state.instance[slot + 'limit']) {
+        const filesize = fileSizeFormatService.fileSizeFormat(file.size)
+        const allowedsize = fileSizeFormatService.fileSizeFormat(this.$store.state.instance[slot + 'limit'])
+        this[slot + 'UploadError'] = [
+          this.$t('upload.error.base'),
+          this.$t(
+            'upload.error.file_too_big',
+            {
+              filesize: filesize.num,
+              filesizeunit: filesize.unit,
+              allowedsize: allowedsize.num,
+              allowedsizeunit: allowedsize.unit
+            }
+          )
+        ].join(' ')
+        return
+      }
+      // eslint-disable-next-line no-undef
+      const reader = new FileReader()
+      reader.onload = ({ target }) => {
+        const img = target.result
+        this[slot + 'Preview'] = img
+        this[slot] = file
+      }
+      reader.readAsDataURL(file)
+    },
+    submitAvatar (cropper, file) {
+      const that = this
+      return new Promise((resolve, reject) => {
+        function updateAvatar (avatar) {
+          that.$store.state.api.backendInteractor.updateAvatar({ avatar })
+            .then((user) => {
+              that.$store.commit('addNewUsers', [user])
+              that.$store.commit('setCurrentUser', user)
+              resolve()
+            })
+            .catch((err) => {
+              reject(new Error(that.$t('upload.error.base') + ' ' + err.message))
+            })
+        }
+
+        if (cropper) {
+          cropper.getCroppedCanvas().toBlob(updateAvatar, file.type)
+        } else {
+          updateAvatar(file)
+        }
+      })
+    },
+    submitBanner () {
+      if (!this.bannerPreview) { return }
+
+      this.bannerUploading = true
+      this.$store.state.api.backendInteractor.updateBanner({ banner: this.banner })
+        .then((user) => {
+          this.$store.commit('addNewUsers', [user])
+          this.$store.commit('setCurrentUser', user)
+          this.bannerPreview = null
+        })
+        .catch((err) => {
+          this.bannerUploadError = this.$t('upload.error.base') + ' ' + err.message
+        })
+        .then(() => { this.bannerUploading = false })
+    },
+    submitBg () {
+      if (!this.backgroundPreview) { return }
+      let background = this.background
+      this.backgroundUploading = true
+      this.$store.state.api.backendInteractor.updateBg({ background }).then((data) => {
+        if (!data.error) {
+          this.$store.commit('addNewUsers', [data])
+          this.$store.commit('setCurrentUser', data)
+          this.backgroundPreview = null
+        } else {
+          this.backgroundUploadError = this.$t('upload.error.base') + data.error
+        }
+        this.backgroundUploading = false
+      })
+    }
+  }
+}
+
+export default ProfileTab
diff --git a/src/components/settings_modal/tabs/profile.scss b/src/components/settings_modal/tabs/profile.scss
new file mode 100644
index 00000000..4aab81eb
--- /dev/null
+++ b/src/components/settings_modal/tabs/profile.scss
@@ -0,0 +1,82 @@
+@import '../../../_variables.scss';
+.profile-tab {
+  .bio {
+    margin: 0;
+  }
+
+  .visibility-tray {
+    padding-top: 5px;
+  }
+
+  input[type=file] {
+    padding: 5px;
+    height: auto;
+  }
+
+  .banner {
+    max-width: 100%;
+  }
+
+  .uploading {
+    font-size: 1.5em;
+    margin: 0.25em;
+  }
+
+  .name-changer {
+    width: 100%;
+  }
+
+  .bg {
+    max-width: 100%;
+  }
+
+  .current-avatar {
+    display: block;
+    width: 150px;
+    height: 150px;
+    border-radius: $fallback--avatarRadius;
+    border-radius: var(--avatarRadius, $fallback--avatarRadius);
+  }
+
+  .oauth-tokens {
+    width: 100%;
+
+    th {
+      text-align: left;
+    }
+
+    .actions {
+      text-align: right;
+    }
+  }
+
+  &-usersearch-wrapper {
+    padding: 1em;
+  }
+
+  &-bulk-actions {
+    text-align: right;
+    padding: 0 1em;
+    min-height: 28px;
+
+    button {
+      width: 10em;
+    }
+  }
+
+  &-domain-mute-form {
+    padding: 1em;
+    display: flex;
+    flex-direction: column;
+
+    button {
+      align-self: flex-end;
+      margin-top: 1em;
+      width: 10em;
+    }
+  }
+
+  .setting-subitem {
+    margin-left: 1.75em;
+  }
+}
diff --git a/src/components/settings_modal/tabs/profile.vue b/src/components/settings_modal/tabs/profile.vue
new file mode 100644
index 00000000..335fc12e
--- /dev/null
+++ b/src/components/settings_modal/tabs/profile.vue
@@ -0,0 +1,213 @@
+<template>
+<div class="profile-tab">
+  <div class="setting-item">
+    <h2>{{ $t('settings.name_bio') }}</h2>
+    <p>{{ $t('settings.name') }}</p>
+    <EmojiInput
+      v-model="newName"
+      enable-emoji-picker
+      :suggest="emojiSuggestor"
+      >
+      <input
+        id="username"
+        v-model="newName"
+        classname="name-changer"
+        >
+    </EmojiInput>
+    <p>{{ $t('settings.bio') }}</p>
+    <EmojiInput
+      v-model="newBio"
+      enable-emoji-picker
+      :suggest="emojiUserSuggestor"
+      >
+      <textarea
+        v-model="newBio"
+        classname="bio"
+        />
+    </EmojiInput>
+    <p>
+      <Checkbox v-model="newLocked">
+        {{ $t('settings.lock_account_description') }}
+      </Checkbox>
+    </p>
+    <div>
+      <label for="default-vis">{{ $t('settings.default_vis') }}</label>
+      <div
+        id="default-vis"
+        class="visibility-tray"
+        >
+        <scope-selector
+          :show-all="true"
+          :user-default="newDefaultScope"
+          :initial-scope="newDefaultScope"
+          :on-scope-change="changeVis"
+          />
+      </div>
+    </div>
+    <p>
+      <Checkbox v-model="newNoRichText">
+        {{ $t('settings.no_rich_text_description') }}
+      </Checkbox>
+    </p>
+    <p>
+      <Checkbox v-model="hideFollows">
+        {{ $t('settings.hide_follows_description') }}
+      </Checkbox>
+    </p>
+    <p class="setting-subitem">
+      <Checkbox
+        v-model="hideFollowsCount"
+        :disabled="!hideFollows"
+        >
+        {{ $t('settings.hide_follows_count_description') }}
+      </Checkbox>
+    </p>
+    <p>
+      <Checkbox v-model="hideFollowers">
+        {{ $t('settings.hide_followers_description') }}
+      </Checkbox>
+    </p>
+    <p class="setting-subitem">
+      <Checkbox
+        v-model="hideFollowersCount"
+        :disabled="!hideFollowers"
+        >
+        {{ $t('settings.hide_followers_count_description') }}
+      </Checkbox>
+    </p>
+    <p>
+      <Checkbox v-model="allowFollowingMove">
+        {{ $t('settings.allow_following_move') }}
+      </Checkbox>
+    </p>
+    <p v-if="role === 'admin' || role === 'moderator'">
+      <Checkbox v-model="showRole">
+        <template v-if="role === 'admin'">
+          {{ $t('settings.show_admin_badge') }}
+        </template>
+        <template v-if="role === 'moderator'">
+          {{ $t('settings.show_moderator_badge') }}
+        </template>
+      </Checkbox>
+    </p>
+    <p>
+      <Checkbox v-model="discoverable">
+        {{ $t('settings.discoverable') }}
+      </Checkbox>
+    </p>
+    <button
+      :disabled="newName && newName.length === 0"
+      class="btn btn-default"
+      @click="updateProfile"
+      >
+      {{ $t('general.submit') }}
+    </button>
+  </div>
+  <div class="setting-item">
+    <h2>{{ $t('settings.avatar') }}</h2>
+    <p class="visibility-notice">
+      {{ $t('settings.avatar_size_instruction') }}
+    </p>
+    <p>{{ $t('settings.current_avatar') }}</p>
+    <img
+      :src="user.profile_image_url_original"
+      class="current-avatar"
+      >
+    <p>{{ $t('settings.set_new_avatar') }}</p>
+    <button
+      v-show="pickAvatarBtnVisible"
+      id="pick-avatar"
+      class="btn"
+      type="button"
+      >
+      {{ $t('settings.upload_a_photo') }}
+    </button>
+    <image-cropper
+      trigger="#pick-avatar"
+      :submit-handler="submitAvatar"
+      @open="pickAvatarBtnVisible=false"
+      @close="pickAvatarBtnVisible=true"
+      />
+  </div>
+  <div class="setting-item">
+    <h2>{{ $t('settings.profile_banner') }}</h2>
+    <p>{{ $t('settings.current_profile_banner') }}</p>
+    <img
+      :src="user.cover_photo"
+      class="banner"
+      >
+    <p>{{ $t('settings.set_new_profile_banner') }}</p>
+    <img
+      v-if="bannerPreview"
+      class="banner"
+      :src="bannerPreview"
+      >
+    <div>
+      <input
+        type="file"
+        @change="uploadFile('banner', $event)"
+        >
+    </div>
+    <i
+      v-if="bannerUploading"
+      class=" icon-spin4 animate-spin uploading"
+      />
+    <button
+      v-else-if="bannerPreview"
+      class="btn btn-default"
+      @click="submitBanner"
+      >
+      {{ $t('general.submit') }}
+    </button>
+    <div
+      v-if="bannerUploadError"
+      class="alert error"
+      >
+      Error: {{ bannerUploadError }}
+      <i
+        class="button-icon icon-cancel"
+        @click="clearUploadError('banner')"
+        />
+    </div>
+  </div>
+  <div class="setting-item">
+    <h2>{{ $t('settings.profile_background') }}</h2>
+    <p>{{ $t('settings.set_new_profile_background') }}</p>
+    <img
+      v-if="backgroundPreview"
+      class="bg"
+      :src="backgroundPreview"
+      >
+    <div>
+      <input
+        type="file"
+        @change="uploadFile('background', $event)"
+        >
+    </div>
+    <i
+      v-if="backgroundUploading"
+      class=" icon-spin4 animate-spin uploading"
+      />
+    <button
+      v-else-if="backgroundPreview"
+      class="btn btn-default"
+      @click="submitBg"
+      >
+      {{ $t('general.submit') }}
+    </button>
+    <div
+      v-if="backgroundUploadError"
+      class="alert error"
+      >
+      Error: {{ backgroundUploadError }}
+      <i
+        class="button-icon icon-cancel"
+        @click="clearUploadError('background')"
+        />
+    </div>
+  </div>
+</div>
+</template>
+
+<script src="./profile.js"></script>
+<style lang="scss" src="./profile.scss"></style>
diff --git a/src/components/settings_modal/tabs/security.js b/src/components/settings_modal/tabs/security.js
new file mode 100644
index 00000000..cc791b7a
--- /dev/null
+++ b/src/components/settings_modal/tabs/security.js
@@ -0,0 +1,106 @@
+import ProgressButton from '../../progress_button/progress_button.vue'
+import Checkbox from '../../checkbox/checkbox.vue'
+import Mfa from '../../user_settings/mfa.vue'
+
+const Security = {
+  data () {
+    return {
+      newEmail: '',
+      changeEmailError: false,
+      changeEmailPassword: '',
+      changedEmail: false,
+      deletingAccount: false,
+      deleteAccountConfirmPasswordInput: '',
+      deleteAccountError: false,
+      changePasswordInputs: [ '', '', '' ],
+      changedPassword: false,
+      changePasswordError: false
+    }
+  },
+  created () {
+    this.$store.dispatch('fetchTokens')
+  },
+  components: {
+    ProgressButton,
+    Mfa,
+    Checkbox
+  },
+  computed: {
+    user () {
+      return this.$store.state.users.currentUser
+    },
+    pleromaBackend () {
+      return this.$store.state.instance.pleromaBackend
+    },
+    oauthTokens () {
+      return this.$store.state.oauthTokens.tokens.map(oauthToken => {
+        return {
+          id: oauthToken.id,
+          appName: oauthToken.app_name,
+          validUntil: new Date(oauthToken.valid_until).toLocaleDateString()
+        }
+      })
+    }
+  },
+  methods: {
+    confirmDelete () {
+      this.deletingAccount = true
+    },
+    deleteAccount () {
+      this.$store.state.api.backendInteractor.deleteAccount({ password: this.deleteAccountConfirmPasswordInput })
+        .then((res) => {
+          if (res.status === 'success') {
+            this.$store.dispatch('logout')
+            this.$router.push({ name: 'root' })
+          } else {
+            this.deleteAccountError = res.error
+          }
+        })
+    },
+    changePassword () {
+      const params = {
+        password: this.changePasswordInputs[0],
+        newPassword: this.changePasswordInputs[1],
+        newPasswordConfirmation: this.changePasswordInputs[2]
+      }
+      this.$store.state.api.backendInteractor.changePassword(params)
+        .then((res) => {
+          if (res.status === 'success') {
+            this.changedPassword = true
+            this.changePasswordError = false
+            this.logout()
+          } else {
+            this.changedPassword = false
+            this.changePasswordError = res.error
+          }
+        })
+    },
+    changeEmail () {
+      const params = {
+        email: this.newEmail,
+        password: this.changeEmailPassword
+      }
+      this.$store.state.api.backendInteractor.changeEmail(params)
+        .then((res) => {
+          if (res.status === 'success') {
+            this.changedEmail = true
+            this.changeEmailError = false
+          } else {
+            this.changedEmail = false
+            this.changeEmailError = res.error
+          }
+        })
+    },
+    logout () {
+      this.$store.dispatch('logout')
+      this.$router.replace('/')
+    },
+    revokeToken (id) {
+      if (window.confirm(`${this.$i18n.t('settings.revoke_token')}?`)) {
+        this.$store.dispatch('revokeToken', id)
+      }
+    }
+  }
+}
+
+export default Security
diff --git a/src/components/settings_modal/tabs/security.vue b/src/components/settings_modal/tabs/security.vue
new file mode 100644
index 00000000..603c9a04
--- /dev/null
+++ b/src/components/settings_modal/tabs/security.vue
@@ -0,0 +1,143 @@
+<template>
+<div :label="$t('settings.security_tab')">
+  <div class="setting-item">
+    <h2>{{ $t('settings.change_email') }}</h2>
+    <div>
+      <p>{{ $t('settings.new_email') }}</p>
+      <input
+        v-model="newEmail"
+        type="email"
+        autocomplete="email"
+        >
+    </div>
+    <div>
+      <p>{{ $t('settings.current_password') }}</p>
+      <input
+        v-model="changeEmailPassword"
+        type="password"
+        autocomplete="current-password"
+        >
+    </div>
+    <button
+      class="btn btn-default"
+      @click="changeEmail"
+      >
+      {{ $t('general.submit') }}
+    </button>
+    <p v-if="changedEmail">
+      {{ $t('settings.changed_email') }}
+    </p>
+    <template v-if="changeEmailError !== false">
+      <p>{{ $t('settings.change_email_error') }}</p>
+      <p>{{ changeEmailError }}</p>
+    </template>
+  </div>
+
+  <div class="setting-item">
+    <h2>{{ $t('settings.change_password') }}</h2>
+    <div>
+      <p>{{ $t('settings.current_password') }}</p>
+      <input
+        v-model="changePasswordInputs[0]"
+        type="password"
+        >
+    </div>
+    <div>
+      <p>{{ $t('settings.new_password') }}</p>
+      <input
+        v-model="changePasswordInputs[1]"
+        type="password"
+        >
+    </div>
+    <div>
+      <p>{{ $t('settings.confirm_new_password') }}</p>
+      <input
+        v-model="changePasswordInputs[2]"
+        type="password"
+        >
+    </div>
+    <button
+      class="btn btn-default"
+      @click="changePassword"
+      >
+      {{ $t('general.submit') }}
+    </button>
+    <p v-if="changedPassword">
+      {{ $t('settings.changed_password') }}
+    </p>
+    <p v-else-if="changePasswordError !== false">
+      {{ $t('settings.change_password_error') }}
+    </p>
+    <p v-if="changePasswordError">
+      {{ changePasswordError }}
+    </p>
+  </div>
+
+  <div class="setting-item">
+    <h2>{{ $t('settings.oauth_tokens') }}</h2>
+    <table class="oauth-tokens">
+      <thead>
+        <tr>
+          <th>{{ $t('settings.app_name') }}</th>
+          <th>{{ $t('settings.valid_until') }}</th>
+          <th />
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="oauthToken in oauthTokens"
+          :key="oauthToken.id"
+          >
+          <td>{{ oauthToken.appName }}</td>
+          <td>{{ oauthToken.validUntil }}</td>
+          <td class="actions">
+            <button
+              class="btn btn-default"
+              @click="revokeToken(oauthToken.id)"
+              >
+              {{ $t('settings.revoke_token') }}
+            </button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <mfa />
+  <div class="setting-item">
+    <h2>{{ $t('settings.delete_account') }}</h2>
+    <p v-if="!deletingAccount">
+      {{ $t('settings.delete_account_description') }}
+    </p>
+    <div v-if="deletingAccount">
+      <p>{{ $t('settings.delete_account_instructions') }}</p>
+      <p>{{ $t('login.password') }}</p>
+      <input
+        v-model="deleteAccountConfirmPasswordInput"
+        type="password"
+        >
+      <button
+        class="btn btn-default"
+        @click="deleteAccount"
+        >
+        {{ $t('settings.delete_account') }}
+      </button>
+    </div>
+    <p v-if="deleteAccountError !== false">
+      {{ $t('settings.delete_account_error') }}
+    </p>
+    <p v-if="deleteAccountError">
+      {{ deleteAccountError }}
+    </p>
+    <button
+      v-if="!deletingAccount"
+      class="btn btn-default"
+      @click="confirmDelete"
+      >
+      {{ $t('general.submit') }}
+    </button>
+  </div>
+</div>
+</template>
+
+<script src="./security.js"></script>
+<!-- <style lang="scss" src="./profile.scss"></style> -->
diff --git a/src/components/tab_switcher/tab_switcher.js b/src/components/tab_switcher/tab_switcher.js
index 008e1e95..97791de3 100644
--- a/src/components/tab_switcher/tab_switcher.js
+++ b/src/components/tab_switcher/tab_switcher.js
@@ -24,6 +24,11 @@ export default Vue.component('tab-switcher', {
       required: false,
       type: Boolean,
       default: false
+    },
+    sideTabBar: {
+      required: false,
+      type: Boolean,
+      default: false
     }
   },
   data () {
@@ -105,7 +110,7 @@ export default Vue.component('tab-switcher', {
     })
 
     return (
-      <div class="tab-switcher">
+      <div class={'tab-switcher ' + (this.sideTabBar ? 'side-tabs' : 'top-tabs')}>
         <div class="tabs">
           {tabs}
         </div>
diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
index df585faa..a443531e 100644
--- a/src/components/tab_switcher/tab_switcher.scss
+++ b/src/components/tab_switcher/tab_switcher.scss
@@ -2,7 +2,116 @@
 
 .tab-switcher {
   display: flex;
-  flex-direction: column;
+
+  &.top-tabs {
+    flex-direction: column;
+    > .tabs {
+      width: 100%;
+      overflow-y: hidden;
+      overflow-x: auto;
+      padding-top: 5px;
+      flex-direction: row;
+      &::after, &::before {
+        content: '';
+        flex: 1 1 auto;
+        border-bottom: 1px solid;
+        border-bottom-color: $fallback--border;
+        border-bottom-color: var(--border, $fallback--border);
+      }
+      .tab-wrapper {
+        height: 28px;
+
+        &:not(.active)::after {
+          left: 0;
+          right: 0;
+          bottom: 0;
+          border-bottom: 1px solid;
+          border-bottom-color: $fallback--border;
+          border-bottom-color: var(--border, $fallback--border);
+        }
+      }
+      .tab {
+        width: 100%;
+        min-width: 1px;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+        padding-bottom: 99px;
+        margin-bottom: 6px - 99px;
+      }
+    }
+    .contents.scrollable-tabs {
+      flex-basis: 0;
+    }
+  }
+
+  &.side-tabs {
+    flex-direction: row;
+    > .contents {
+      flex: 0 1 80%;
+    }
+    > .tabs {
+      flex: 1 0 auto;
+      overflow-y: auto;
+      overflow-x: hidden;
+      padding-top: 5px;
+      flex-direction: column;
+      &::after {
+        content: '';
+        flex: 1 1 auto;
+        border-right: 1px solid;
+        border-right-color: $fallback--border;
+        border-right-color: var(--border, $fallback--border);
+      }
+      .tab-wrapper {
+        min-width: 10em;
+        &:not(.active)::after {
+          top: 0;
+          right: 0;
+          bottom: 0;
+          border-right: 1px solid;
+          border-right-color: $fallback--border;
+          border-right-color: var(--border, $fallback--border);
+        }
+      }
+      .tab {
+        box-sizing: content-box;
+        width: 100%;
+        margin-bottom: 5px;
+        min-width: 10em;
+        min-width: 1px;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+        // padding-right: 200px;
+        // margin-right: 6px - 200px;
+        margin-left: 6px;
+      }
+
+      .tab-wrapper {
+        min-width: 10em;
+        &:not(.active)::after {
+          top: 0;
+          right: 0;
+          bottom: 0;
+          border-right: 1px solid;
+          border-right-color: $fallback--border;
+          border-right-color: var(--border, $fallback--border);
+        }
+      }
+      .tab {
+        box-sizing: content-box;
+        width: 100%;
+        margin-bottom: 5px;
+        min-width: 10em;
+        min-width: 1px;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+        // padding-right: 200px;
+        // margin-right: 6px - 200px;
+        margin-left: 6px;
+      }
+    }
+  }
+
 
   .contents {
     flex: 1 0 auto;
@@ -13,86 +122,65 @@
     }
 
     &.scrollable-tabs {
-      flex-basis: 0;
       overflow-y: auto;
     }
   }
+
+  .tab {
+    position: relative;
+    white-space: nowrap;
+
+    padding: 6px 1em;
+    color: $fallback--text;
+    color: var(--tabText, $fallback--text);
+    background-color: $fallback--fg;
+    background-color: var(--tab, $fallback--fg);
+
+    &:not(.active) {
+      z-index: 4;
+
+      &:hover {
+        z-index: 6;
+      }
+    }
+
+    &.active {
+      background: transparent;
+      z-index: 5;
+      color: $fallback--text;
+      color: var(--tabActiveText, $fallback--text);
+    }
+
+    img {
+      max-height: 26px;
+      vertical-align: top;
+      margin-top: -5px;
+    }
+  }
+
+
   .tabs {
     display: flex;
     position: relative;
-    width: 100%;
-    overflow-y: hidden;
-    overflow-x: auto;
-    padding-top: 5px;
     box-sizing: border-box;
 
     &::after, &::before {
       display: block;
-      content: '';
       flex: 1 1 auto;
-      border-bottom: 1px solid;
-      border-bottom-color: $fallback--border;
-      border-bottom-color: var(--border, $fallback--border);
     }
+  }
 
-    .tab-wrapper {
-      height: 28px;
-      position: relative;
-      display: flex;
-      flex: 0 0 auto;
-
-      .tab {
-        width: 100%;
-        min-width: 1px;
-        position: relative;
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-        padding: 6px 1em;
-        padding-bottom: 99px;
-        margin-bottom: 6px - 99px;
-        white-space: nowrap;
-
-        color: $fallback--text;
-        color: var(--tabText, $fallback--text);
-        background-color: $fallback--fg;
-        background-color: var(--tab, $fallback--fg);
-
-        &:not(.active) {
-          z-index: 4;
-
-          &:hover {
-            z-index: 6;
-          }
-        }
-
-        &.active {
-          background: transparent;
-          z-index: 5;
-          color: $fallback--text;
-          color: var(--tabActiveText, $fallback--text);
-        }
-
-        img {
-          max-height: 26px;
-          vertical-align: top;
-          margin-top: -5px;
-        }
-      }
+  .tab-wrapper {
+    position: relative;
+    display: flex;
+    flex: 0 0 auto;
 
-      &:not(.active) {
-        &::after {
-          content: '';
-          position: absolute;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          z-index: 7;
-          border-bottom: 1px solid;
-          border-bottom-color: $fallback--border;
-          border-bottom-color: var(--border, $fallback--border);
-        }
+    &:not(.active) {
+      &::after {
+        content: '';
+        position: absolute;
+        z-index: 7;
       }
     }
-
   }
 }
diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index eca6f9b1..e07d4e56 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -1,25 +1,17 @@
-import unescape from 'lodash/unescape'
 import get from 'lodash/get'
 import map from 'lodash/map'
 import reject from 'lodash/reject'
+import Autosuggest from '../autosuggest/autosuggest.vue'
 import TabSwitcher from '../tab_switcher/tab_switcher.js'
-import ImageCropper from '../image_cropper/image_cropper.vue'
-import StyleSwitcher from '../style_switcher/style_switcher.vue'
-import ScopeSelector from '../scope_selector/scope_selector.vue'
-import fileSizeFormatService from '../../services/file_size_format/file_size_format.js'
 import BlockCard from '../block_card/block_card.vue'
 import MuteCard from '../mute_card/mute_card.vue'
 import DomainMuteCard from '../domain_mute_card/domain_mute_card.vue'
 import SelectableList from '../selectable_list/selectable_list.vue'
 import ProgressButton from '../progress_button/progress_button.vue'
-import EmojiInput from '../emoji_input/emoji_input.vue'
-import suggestor from '../emoji_input/suggestor.js'
-import Autosuggest from '../autosuggest/autosuggest.vue'
 import Importer from '../importer/importer.vue'
 import Exporter from '../exporter/exporter.vue'
 import withSubscription from '../../hocs/with_subscription/with_subscription'
 import Checkbox from '../checkbox/checkbox.vue'
-import Mfa from './mfa.vue'
 
 const BlockList = withSubscription({
   fetch: (props, $store) => $store.dispatch('fetchBlocks'),
@@ -42,40 +34,7 @@ const DomainMuteList = withSubscription({
 const UserSettings = {
   data () {
     return {
-      newEmail: '',
-      newName: this.$store.state.users.currentUser.name,
-      newBio: unescape(this.$store.state.users.currentUser.description),
-      newLocked: this.$store.state.users.currentUser.locked,
-      newNoRichText: this.$store.state.users.currentUser.no_rich_text,
-      newDefaultScope: this.$store.state.users.currentUser.default_scope,
-      hideFollows: this.$store.state.users.currentUser.hide_follows,
-      hideFollowers: this.$store.state.users.currentUser.hide_followers,
-      hideFollowsCount: this.$store.state.users.currentUser.hide_follows_count,
-      hideFollowersCount: this.$store.state.users.currentUser.hide_followers_count,
-      showRole: this.$store.state.users.currentUser.show_role,
-      role: this.$store.state.users.currentUser.role,
-      discoverable: this.$store.state.users.currentUser.discoverable,
-      allowFollowingMove: this.$store.state.users.currentUser.allow_following_move,
-      pickAvatarBtnVisible: true,
-      bannerUploading: false,
-      backgroundUploading: false,
-      banner: null,
-      bannerPreview: null,
-      background: null,
-      backgroundPreview: null,
-      bannerUploadError: null,
-      backgroundUploadError: null,
-      changeEmailError: false,
-      changeEmailPassword: '',
-      changedEmail: false,
-      deletingAccount: false,
-      deleteAccountConfirmPasswordInput: '',
-      deleteAccountError: false,
-      changePasswordInputs: [ '', '', '' ],
-      changedPassword: false,
-      changePasswordError: false,
       activeTab: 'profile',
-      notificationSettings: this.$store.state.users.currentUser.notification_settings,
       newDomainToMute: ''
     }
   },
@@ -83,176 +42,29 @@ const UserSettings = {
     this.$store.dispatch('fetchTokens')
   },
   components: {
-    StyleSwitcher,
-    ScopeSelector,
     TabSwitcher,
-    ImageCropper,
     BlockList,
     MuteList,
     DomainMuteList,
-    EmojiInput,
-    Autosuggest,
     BlockCard,
     MuteCard,
     DomainMuteCard,
     ProgressButton,
-    Importer,
-    Exporter,
-    Mfa,
+    Autosuggest,
     Checkbox
   },
   computed: {
     user () {
       return this.$store.state.users.currentUser
     },
-    emojiUserSuggestor () {
-      return suggestor({
-        emoji: [
-          ...this.$store.state.instance.emoji,
-          ...this.$store.state.instance.customEmoji
-        ],
-        users: this.$store.state.users.users,
-        updateUsersList: (input) => this.$store.dispatch('searchUsers', input)
-      })
-    },
-    emojiSuggestor () {
-      return suggestor({ emoji: [
-        ...this.$store.state.instance.emoji,
-        ...this.$store.state.instance.customEmoji
-      ] })
-    },
     pleromaBackend () {
       return this.$store.state.instance.pleromaBackend
     },
-    minimalScopesMode () {
-      return this.$store.state.instance.minimalScopesMode
-    },
-    vis () {
-      return {
-        public: { selected: this.newDefaultScope === 'public' },
-        unlisted: { selected: this.newDefaultScope === 'unlisted' },
-        private: { selected: this.newDefaultScope === 'private' },
-        direct: { selected: this.newDefaultScope === 'direct' }
-      }
-    },
     currentSaveStateNotice () {
       return this.$store.state.interface.settings.currentSaveStateNotice
-    },
-    oauthTokens () {
-      return this.$store.state.oauthTokens.tokens.map(oauthToken => {
-        return {
-          id: oauthToken.id,
-          appName: oauthToken.app_name,
-          validUntil: new Date(oauthToken.valid_until).toLocaleDateString()
-        }
-      })
     }
   },
   methods: {
-    updateProfile () {
-      this.$store.state.api.backendInteractor
-        .updateProfile({
-          params: {
-            note: this.newBio,
-            locked: this.newLocked,
-            // Backend notation.
-            /* eslint-disable camelcase */
-            display_name: this.newName,
-            default_scope: this.newDefaultScope,
-            no_rich_text: this.newNoRichText,
-            hide_follows: this.hideFollows,
-            hide_followers: this.hideFollowers,
-            discoverable: this.discoverable,
-            allow_following_move: this.allowFollowingMove,
-            hide_follows_count: this.hideFollowsCount,
-            hide_followers_count: this.hideFollowersCount,
-            show_role: this.showRole
-            /* eslint-enable camelcase */
-          } }).then((user) => {
-          this.$store.commit('addNewUsers', [user])
-          this.$store.commit('setCurrentUser', user)
-        })
-    },
-    updateNotificationSettings () {
-      this.$store.state.api.backendInteractor
-        .updateNotificationSettings({ settings: this.notificationSettings })
-    },
-    changeVis (visibility) {
-      this.newDefaultScope = visibility
-    },
-    uploadFile (slot, e) {
-      const file = e.target.files[0]
-      if (!file) { return }
-      if (file.size > this.$store.state.instance[slot + 'limit']) {
-        const filesize = fileSizeFormatService.fileSizeFormat(file.size)
-        const allowedsize = fileSizeFormatService.fileSizeFormat(this.$store.state.instance[slot + 'limit'])
-        this[slot + 'UploadError'] = this.$t('upload.error.base') + ' ' + this.$t('upload.error.file_too_big', { filesize: filesize.num, filesizeunit: filesize.unit, allowedsize: allowedsize.num, allowedsizeunit: allowedsize.unit })
-        return
-      }
-      // eslint-disable-next-line no-undef
-      const reader = new FileReader()
-      reader.onload = ({ target }) => {
-        const img = target.result
-        this[slot + 'Preview'] = img
-        this[slot] = file
-      }
-      reader.readAsDataURL(file)
-    },
-    submitAvatar (cropper, file) {
-      const that = this
-      return new Promise((resolve, reject) => {
-        function updateAvatar (avatar) {
-          that.$store.state.api.backendInteractor.updateAvatar({ avatar })
-            .then((user) => {
-              that.$store.commit('addNewUsers', [user])
-              that.$store.commit('setCurrentUser', user)
-              resolve()
-            })
-            .catch((err) => {
-              reject(new Error(that.$t('upload.error.base') + ' ' + err.message))
-            })
-        }
-
-        if (cropper) {
-          cropper.getCroppedCanvas().toBlob(updateAvatar, file.type)
-        } else {
-          updateAvatar(file)
-        }
-      })
-    },
-    clearUploadError (slot) {
-      this[slot + 'UploadError'] = null
-    },
-    submitBanner () {
-      if (!this.bannerPreview) { return }
-
-      this.bannerUploading = true
-      this.$store.state.api.backendInteractor.updateBanner({ banner: this.banner })
-        .then((user) => {
-          this.$store.commit('addNewUsers', [user])
-          this.$store.commit('setCurrentUser', user)
-          this.bannerPreview = null
-        })
-        .catch((err) => {
-          this.bannerUploadError = this.$t('upload.error.base') + ' ' + err.message
-        })
-        .then(() => { this.bannerUploading = false })
-    },
-    submitBg () {
-      if (!this.backgroundPreview) { return }
-      let background = this.background
-      this.backgroundUploading = true
-      this.$store.state.api.backendInteractor.updateBg({ background }).then((data) => {
-        if (!data.error) {
-          this.$store.commit('addNewUsers', [data])
-          this.$store.commit('setCurrentUser', data)
-          this.backgroundPreview = null
-        } else {
-          this.backgroundUploadError = this.$t('upload.error.base') + data.error
-        }
-        this.backgroundUploading = false
-      })
-    },
     importFollows (file) {
       return this.$store.state.api.backendInteractor.importFollows({ file })
         .then((status) => {
@@ -281,74 +93,9 @@ const UserSettings = {
         return user.screen_name
       }).join('\n')
     },
-    getFollowsContent () {
-      return this.$store.state.api.backendInteractor.exportFriends({ id: this.$store.state.users.currentUser.id })
-        .then(this.generateExportableUsersContent)
-    },
-    getBlocksContent () {
-      return this.$store.state.api.backendInteractor.fetchBlocks()
-        .then(this.generateExportableUsersContent)
-    },
-    confirmDelete () {
-      this.deletingAccount = true
-    },
-    deleteAccount () {
-      this.$store.state.api.backendInteractor.deleteAccount({ password: this.deleteAccountConfirmPasswordInput })
-        .then((res) => {
-          if (res.status === 'success') {
-            this.$store.dispatch('logout')
-            this.$router.push({ name: 'root' })
-          } else {
-            this.deleteAccountError = res.error
-          }
-        })
-    },
-    changePassword () {
-      const params = {
-        password: this.changePasswordInputs[0],
-        newPassword: this.changePasswordInputs[1],
-        newPasswordConfirmation: this.changePasswordInputs[2]
-      }
-      this.$store.state.api.backendInteractor.changePassword(params)
-        .then((res) => {
-          if (res.status === 'success') {
-            this.changedPassword = true
-            this.changePasswordError = false
-            this.logout()
-          } else {
-            this.changedPassword = false
-            this.changePasswordError = res.error
-          }
-        })
-    },
-    changeEmail () {
-      const params = {
-        email: this.newEmail,
-        password: this.changeEmailPassword
-      }
-      this.$store.state.api.backendInteractor.changeEmail(params)
-        .then((res) => {
-          if (res.status === 'success') {
-            this.changedEmail = true
-            this.changeEmailError = false
-          } else {
-            this.changedEmail = false
-            this.changeEmailError = res.error
-          }
-        })
-    },
     activateTab (tabName) {
       this.activeTab = tabName
     },
-    logout () {
-      this.$store.dispatch('logout')
-      this.$router.replace('/')
-    },
-    revokeToken (id) {
-      if (window.confirm(`${this.$i18n.t('settings.revoke_token')}?`)) {
-        this.$store.dispatch('revokeToken', id)
-      }
-    },
     filterUnblockedUsers (userIds) {
       return reject(userIds, (userId) => {
         const user = this.$store.getters.findUser(userId)
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index 8b2336b4..2a88714f 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -25,603 +25,6 @@
       </transition>
     </div>
     <div class="panel-body profile-edit">
-      <tab-switcher>
-        <div :label="$t('settings.profile_tab')">
-          <div class="setting-item">
-            <h2>{{ $t('settings.name_bio') }}</h2>
-            <p>{{ $t('settings.name') }}</p>
-            <EmojiInput
-              v-model="newName"
-              enable-emoji-picker
-              :suggest="emojiSuggestor"
-            >
-              <input
-                id="username"
-                v-model="newName"
-                classname="name-changer"
-              >
-            </EmojiInput>
-            <p>{{ $t('settings.bio') }}</p>
-            <EmojiInput
-              v-model="newBio"
-              enable-emoji-picker
-              :suggest="emojiUserSuggestor"
-            >
-              <textarea
-                v-model="newBio"
-                classname="bio"
-              />
-            </EmojiInput>
-            <p>
-              <Checkbox v-model="newLocked">
-                {{ $t('settings.lock_account_description') }}
-              </Checkbox>
-            </p>
-            <div>
-              <label for="default-vis">{{ $t('settings.default_vis') }}</label>
-              <div
-                id="default-vis"
-                class="visibility-tray"
-              >
-                <scope-selector
-                  :show-all="true"
-                  :user-default="newDefaultScope"
-                  :initial-scope="newDefaultScope"
-                  :on-scope-change="changeVis"
-                />
-              </div>
-            </div>
-            <p>
-              <Checkbox v-model="newNoRichText">
-                {{ $t('settings.no_rich_text_description') }}
-              </Checkbox>
-            </p>
-            <p>
-              <Checkbox v-model="hideFollows">
-                {{ $t('settings.hide_follows_description') }}
-              </Checkbox>
-            </p>
-            <p class="setting-subitem">
-              <Checkbox
-                v-model="hideFollowsCount"
-                :disabled="!hideFollows"
-              >
-                {{ $t('settings.hide_follows_count_description') }}
-              </Checkbox>
-            </p>
-            <p>
-              <Checkbox v-model="hideFollowers">
-                {{ $t('settings.hide_followers_description') }}
-              </Checkbox>
-            </p>
-            <p class="setting-subitem">
-              <Checkbox
-                v-model="hideFollowersCount"
-                :disabled="!hideFollowers"
-              >
-                {{ $t('settings.hide_followers_count_description') }}
-              </Checkbox>
-            </p>
-            <p>
-              <Checkbox v-model="allowFollowingMove">
-                {{ $t('settings.allow_following_move') }}
-              </Checkbox>
-            </p>
-            <p v-if="role === 'admin' || role === 'moderator'">
-              <Checkbox v-model="showRole">
-                <template v-if="role === 'admin'">
-                  {{ $t('settings.show_admin_badge') }}
-                </template>
-                <template v-if="role === 'moderator'">
-                  {{ $t('settings.show_moderator_badge') }}
-                </template>
-              </Checkbox>
-            </p>
-            <p>
-              <Checkbox v-model="discoverable">
-                {{ $t('settings.discoverable') }}
-              </Checkbox>
-            </p>
-            <button
-              :disabled="newName && newName.length === 0"
-              class="btn btn-default"
-              @click="updateProfile"
-            >
-              {{ $t('general.submit') }}
-            </button>
-          </div>
-          <div class="setting-item">
-            <h2>{{ $t('settings.avatar') }}</h2>
-            <p class="visibility-notice">
-              {{ $t('settings.avatar_size_instruction') }}
-            </p>
-            <p>{{ $t('settings.current_avatar') }}</p>
-            <img
-              :src="user.profile_image_url_original"
-              class="current-avatar"
-            >
-            <p>{{ $t('settings.set_new_avatar') }}</p>
-            <button
-              v-show="pickAvatarBtnVisible"
-              id="pick-avatar"
-              class="btn"
-              type="button"
-            >
-              {{ $t('settings.upload_a_photo') }}
-            </button>
-            <image-cropper
-              trigger="#pick-avatar"
-              :submit-handler="submitAvatar"
-              @open="pickAvatarBtnVisible=false"
-              @close="pickAvatarBtnVisible=true"
-            />
-          </div>
-          <div class="setting-item">
-            <h2>{{ $t('settings.profile_banner') }}</h2>
-            <p>{{ $t('settings.current_profile_banner') }}</p>
-            <img
-              :src="user.cover_photo"
-              class="banner"
-            >
-            <p>{{ $t('settings.set_new_profile_banner') }}</p>
-            <img
-              v-if="bannerPreview"
-              class="banner"
-              :src="bannerPreview"
-            >
-            <div>
-              <input
-                type="file"
-                @change="uploadFile('banner', $event)"
-              >
-            </div>
-            <i
-              v-if="bannerUploading"
-              class=" icon-spin4 animate-spin uploading"
-            />
-            <button
-              v-else-if="bannerPreview"
-              class="btn btn-default"
-              @click="submitBanner"
-            >
-              {{ $t('general.submit') }}
-            </button>
-            <div
-              v-if="bannerUploadError"
-              class="alert error"
-            >
-              Error: {{ bannerUploadError }}
-              <i
-                class="button-icon icon-cancel"
-                @click="clearUploadError('banner')"
-              />
-            </div>
-          </div>
-          <div class="setting-item">
-            <h2>{{ $t('settings.profile_background') }}</h2>
-            <p>{{ $t('settings.set_new_profile_background') }}</p>
-            <img
-              v-if="backgroundPreview"
-              class="bg"
-              :src="backgroundPreview"
-            >
-            <div>
-              <input
-                type="file"
-                @change="uploadFile('background', $event)"
-              >
-            </div>
-            <i
-              v-if="backgroundUploading"
-              class=" icon-spin4 animate-spin uploading"
-            />
-            <button
-              v-else-if="backgroundPreview"
-              class="btn btn-default"
-              @click="submitBg"
-            >
-              {{ $t('general.submit') }}
-            </button>
-            <div
-              v-if="backgroundUploadError"
-              class="alert error"
-            >
-              Error: {{ backgroundUploadError }}
-              <i
-                class="button-icon icon-cancel"
-                @click="clearUploadError('background')"
-              />
-            </div>
-          </div>
-        </div>
-
-        <div :label="$t('settings.security_tab')">
-          <div class="setting-item">
-            <h2>{{ $t('settings.change_email') }}</h2>
-            <div>
-              <p>{{ $t('settings.new_email') }}</p>
-              <input
-                v-model="newEmail"
-                type="email"
-                autocomplete="email"
-              >
-            </div>
-            <div>
-              <p>{{ $t('settings.current_password') }}</p>
-              <input
-                v-model="changeEmailPassword"
-                type="password"
-                autocomplete="current-password"
-              >
-            </div>
-            <button
-              class="btn btn-default"
-              @click="changeEmail"
-            >
-              {{ $t('general.submit') }}
-            </button>
-            <p v-if="changedEmail">
-              {{ $t('settings.changed_email') }}
-            </p>
-            <template v-if="changeEmailError !== false">
-              <p>{{ $t('settings.change_email_error') }}</p>
-              <p>{{ changeEmailError }}</p>
-            </template>
-          </div>
-
-          <div class="setting-item">
-            <h2>{{ $t('settings.change_password') }}</h2>
-            <div>
-              <p>{{ $t('settings.current_password') }}</p>
-              <input
-                v-model="changePasswordInputs[0]"
-                type="password"
-              >
-            </div>
-            <div>
-              <p>{{ $t('settings.new_password') }}</p>
-              <input
-                v-model="changePasswordInputs[1]"
-                type="password"
-              >
-            </div>
-            <div>
-              <p>{{ $t('settings.confirm_new_password') }}</p>
-              <input
-                v-model="changePasswordInputs[2]"
-                type="password"
-              >
-            </div>
-            <button
-              class="btn btn-default"
-              @click="changePassword"
-            >
-              {{ $t('general.submit') }}
-            </button>
-            <p v-if="changedPassword">
-              {{ $t('settings.changed_password') }}
-            </p>
-            <p v-else-if="changePasswordError !== false">
-              {{ $t('settings.change_password_error') }}
-            </p>
-            <p v-if="changePasswordError">
-              {{ changePasswordError }}
-            </p>
-          </div>
-
-          <div class="setting-item">
-            <h2>{{ $t('settings.oauth_tokens') }}</h2>
-            <table class="oauth-tokens">
-              <thead>
-                <tr>
-                  <th>{{ $t('settings.app_name') }}</th>
-                  <th>{{ $t('settings.valid_until') }}</th>
-                  <th />
-                </tr>
-              </thead>
-              <tbody>
-                <tr
-                  v-for="oauthToken in oauthTokens"
-                  :key="oauthToken.id"
-                >
-                  <td>{{ oauthToken.appName }}</td>
-                  <td>{{ oauthToken.validUntil }}</td>
-                  <td class="actions">
-                    <button
-                      class="btn btn-default"
-                      @click="revokeToken(oauthToken.id)"
-                    >
-                      {{ $t('settings.revoke_token') }}
-                    </button>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-          <mfa />
-          <div class="setting-item">
-            <h2>{{ $t('settings.delete_account') }}</h2>
-            <p v-if="!deletingAccount">
-              {{ $t('settings.delete_account_description') }}
-            </p>
-            <div v-if="deletingAccount">
-              <p>{{ $t('settings.delete_account_instructions') }}</p>
-              <p>{{ $t('login.password') }}</p>
-              <input
-                v-model="deleteAccountConfirmPasswordInput"
-                type="password"
-              >
-              <button
-                class="btn btn-default"
-                @click="deleteAccount"
-              >
-                {{ $t('settings.delete_account') }}
-              </button>
-            </div>
-            <p v-if="deleteAccountError !== false">
-              {{ $t('settings.delete_account_error') }}
-            </p>
-            <p v-if="deleteAccountError">
-              {{ deleteAccountError }}
-            </p>
-            <button
-              v-if="!deletingAccount"
-              class="btn btn-default"
-              @click="confirmDelete"
-            >
-              {{ $t('general.submit') }}
-            </button>
-          </div>
-        </div>
-
-        <div
-          v-if="pleromaBackend"
-          :label="$t('settings.notifications')"
-        >
-          <div class="setting-item">
-            <div class="select-multiple">
-              <span class="label">{{ $t('settings.notification_setting') }}</span>
-              <ul class="option-list">
-                <li>
-                  <Checkbox v-model="notificationSettings.follows">
-                    {{ $t('settings.notification_setting_follows') }}
-                  </Checkbox>
-                </li>
-                <li>
-                  <Checkbox v-model="notificationSettings.followers">
-                    {{ $t('settings.notification_setting_followers') }}
-                  </Checkbox>
-                </li>
-                <li>
-                  <Checkbox v-model="notificationSettings.non_follows">
-                    {{ $t('settings.notification_setting_non_follows') }}
-                  </Checkbox>
-                </li>
-                <li>
-                  <Checkbox v-model="notificationSettings.non_followers">
-                    {{ $t('settings.notification_setting_non_followers') }}
-                  </Checkbox>
-                </li>
-              </ul>
-            </div>
-            <p>{{ $t('settings.notification_mutes') }}</p>
-            <p>{{ $t('settings.notification_blocks') }}</p>
-            <button
-              class="btn btn-default"
-              @click="updateNotificationSettings"
-            >
-              {{ $t('general.submit') }}
-            </button>
-          </div>
-        </div>
-
-        <div
-          v-if="pleromaBackend"
-          :label="$t('settings.data_import_export_tab')"
-        >
-          <div class="setting-item">
-            <h2>{{ $t('settings.follow_import') }}</h2>
-            <p>{{ $t('settings.import_followers_from_a_csv_file') }}</p>
-            <Importer
-              :submit-handler="importFollows"
-              :success-message="$t('settings.follows_imported')"
-              :error-message="$t('settings.follow_import_error')"
-            />
-          </div>
-          <div class="setting-item">
-            <h2>{{ $t('settings.follow_export') }}</h2>
-            <Exporter
-              :get-content="getFollowsContent"
-              filename="friends.csv"
-              :export-button-label="$t('settings.follow_export_button')"
-            />
-          </div>
-          <div class="setting-item">
-            <h2>{{ $t('settings.block_import') }}</h2>
-            <p>{{ $t('settings.import_blocks_from_a_csv_file') }}</p>
-            <Importer
-              :submit-handler="importBlocks"
-              :success-message="$t('settings.blocks_imported')"
-              :error-message="$t('settings.block_import_error')"
-            />
-          </div>
-          <div class="setting-item">
-            <h2>{{ $t('settings.block_export') }}</h2>
-            <Exporter
-              :get-content="getBlocksContent"
-              filename="blocks.csv"
-              :export-button-label="$t('settings.block_export_button')"
-            />
-          </div>
-        </div>
-
-        <div :label="$t('settings.blocks_tab')">
-          <div class="profile-edit-usersearch-wrapper">
-            <Autosuggest
-              :filter="filterUnblockedUsers"
-              :query="queryUserIds"
-              :placeholder="$t('settings.search_user_to_block')"
-            >
-              <BlockCard
-                slot-scope="row"
-                :user-id="row.item"
-              />
-            </Autosuggest>
-          </div>
-          <BlockList
-            :refresh="true"
-            :get-key="identity"
-          >
-            <template
-              slot="header"
-              slot-scope="{selected}"
-            >
-              <div class="profile-edit-bulk-actions">
-                <ProgressButton
-                  v-if="selected.length > 0"
-                  class="btn btn-default"
-                  :click="() => blockUsers(selected)"
-                >
-                  {{ $t('user_card.block') }}
-                  <template slot="progress">
-                    {{ $t('user_card.block_progress') }}
-                  </template>
-                </ProgressButton>
-                <ProgressButton
-                  v-if="selected.length > 0"
-                  class="btn btn-default"
-                  :click="() => unblockUsers(selected)"
-                >
-                  {{ $t('user_card.unblock') }}
-                  <template slot="progress">
-                    {{ $t('user_card.unblock_progress') }}
-                  </template>
-                </ProgressButton>
-              </div>
-            </template>
-            <template
-              slot="item"
-              slot-scope="{item}"
-            >
-              <BlockCard :user-id="item" />
-            </template>
-            <template slot="empty">
-              {{ $t('settings.no_blocks') }}
-            </template>
-          </BlockList>
-        </div>
-
-        <div :label="$t('settings.mutes_tab')">
-          <tab-switcher>
-            <div label="Users">
-              <div class="profile-edit-usersearch-wrapper">
-                <Autosuggest
-                  :filter="filterUnMutedUsers"
-                  :query="queryUserIds"
-                  :placeholder="$t('settings.search_user_to_mute')"
-                >
-                  <MuteCard
-                    slot-scope="row"
-                    :user-id="row.item"
-                  />
-                </Autosuggest>
-              </div>
-              <MuteList
-                :refresh="true"
-                :get-key="identity"
-              >
-                <template
-                  slot="header"
-                  slot-scope="{selected}"
-                >
-                  <div class="profile-edit-bulk-actions">
-                    <ProgressButton
-                      v-if="selected.length > 0"
-                      class="btn btn-default"
-                      :click="() => muteUsers(selected)"
-                    >
-                      {{ $t('user_card.mute') }}
-                      <template slot="progress">
-                        {{ $t('user_card.mute_progress') }}
-                      </template>
-                    </ProgressButton>
-                    <ProgressButton
-                      v-if="selected.length > 0"
-                      class="btn btn-default"
-                      :click="() => unmuteUsers(selected)"
-                    >
-                      {{ $t('user_card.unmute') }}
-                      <template slot="progress">
-                        {{ $t('user_card.unmute_progress') }}
-                      </template>
-                    </ProgressButton>
-                  </div>
-                </template>
-                <template
-                  slot="item"
-                  slot-scope="{item}"
-                >
-                  <MuteCard :user-id="item" />
-                </template>
-                <template slot="empty">
-                  {{ $t('settings.no_mutes') }}
-                </template>
-              </MuteList>
-            </div>
-
-            <div :label="$t('settings.domain_mutes')">
-              <div class="profile-edit-domain-mute-form">
-                <input
-                  v-model="newDomainToMute"
-                  :placeholder="$t('settings.type_domains_to_mute')"
-                  type="text"
-                  @keyup.enter="muteDomain"
-                >
-                <ProgressButton
-                  class="btn btn-default"
-                  :click="muteDomain"
-                >
-                  {{ $t('domain_mute_card.mute') }}
-                  <template slot="progress">
-                    {{ $t('domain_mute_card.mute_progress') }}
-                  </template>
-                </ProgressButton>
-              </div>
-              <DomainMuteList
-                :refresh="true"
-                :get-key="identity"
-              >
-                <template
-                  slot="header"
-                  slot-scope="{selected}"
-                >
-                  <div class="profile-edit-bulk-actions">
-                    <ProgressButton
-                      v-if="selected.length > 0"
-                      class="btn btn-default"
-                      :click="() => unmuteDomains(selected)"
-                    >
-                      {{ $t('domain_mute_card.unmute') }}
-                      <template slot="progress">
-                        {{ $t('domain_mute_card.unmute_progress') }}
-                      </template>
-                    </ProgressButton>
-                  </div>
-                </template>
-                <template
-                  slot="item"
-                  slot-scope="{item}"
-                >
-                  <DomainMuteCard :domain="item" />
-                </template>
-                <template slot="empty">
-                  {{ $t('settings.no_mutes') }}
-                </template>
-              </DomainMuteList>
-            </div>
-          </tab-switcher>
-        </div>
-      </tab-switcher>
     </div>
   </div>
 </template>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 37d9591c..312f7283 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -278,6 +278,7 @@
     "current_avatar": "Your current avatar",
     "current_password": "Current password",
     "current_profile_banner": "Your current profile banner",
+    "mutes_and_blocks": "Mutes and Blocks",
     "data_import_export_tab": "Data Import / Export",
     "default_vis": "Default visibility scope",
     "delete_account": "Delete Account",
diff --git a/src/modules/interface.js b/src/modules/interface.js
index 5b2762e5..e55b7290 100644
--- a/src/modules/interface.js
+++ b/src/modules/interface.js
@@ -1,6 +1,7 @@
 import { set, delete as del } from 'vue'
 
 const defaultState = {
+  settingsModalState: 'hidden',
   settings: {
     currentSaveStateNotice: null,
     noticeClearTimeout: null,
@@ -35,6 +36,24 @@ const interfaceMod = {
     },
     setMobileLayout (state, value) {
       state.mobileLayout = value
+    },
+    closeSettingsModal (state) {
+      state.settingsModalState = 'hidden'
+    },
+    togglePeekSettingsModal (state) {
+      switch (state.settingsModalState) {
+        case 'minimized':
+          state.settingsModalState = 'visible'
+          return
+        case 'visible':
+          state.settingsModalState = 'minimized'
+          return
+        default:
+          throw new Error('Illegal minimization state of settings modal')
+      }
+    },
+    openSettingsModal (state) {
+      state.settingsModalState = 'visible'
     }
   },
   actions: {
@@ -49,6 +68,15 @@ const interfaceMod = {
     },
     setMobileLayout ({ commit }, value) {
       commit('setMobileLayout', value)
+    },
+    closeSettingsModal ({ commit }) {
+      commit('closeSettingsModal')
+    },
+    openSettingsModal ({ commit }) {
+      commit('openSettingsModal')
+    },
+    togglePeekSettingsModal ({ commit }) {
+      commit('togglePeekSettingsModal')
     }
   }
 }
-- 
cgit v1.2.3-70-g09d2


From f7f8a579fa17102a994dc7bd7a4c7808e0964d55 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Mon, 4 May 2020 12:56:39 +0300
Subject: make email validation conditional work

---
 src/components/registration/registration.js | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

(limited to 'src/components')

diff --git a/src/components/registration/registration.js b/src/components/registration/registration.js
index 1d8109e4..dab06e1e 100644
--- a/src/components/registration/registration.js
+++ b/src/components/registration/registration.js
@@ -14,15 +14,17 @@ const registration = {
     },
     captcha: {}
   }),
-  validations: {
-    user: {
-      email: requiredIf('accountActivationRequired'),
-      username: { required },
-      fullname: { required },
-      password: { required },
-      confirm: {
-        required,
-        sameAsPassword: sameAs('password')
+  validations () {
+    return {
+      user: {
+        email: { required: requiredIf(() => this.accountActivationRequired) },
+        username: { required },
+        fullname: { required },
+        password: { required },
+        confirm: {
+          required,
+          sameAsPassword: sameAs('password')
+        }
       }
     }
   },
@@ -43,7 +45,8 @@ const registration = {
       signedIn: (state) => !!state.users.currentUser,
       isPending: (state) => state.users.signUpPending,
       serverValidationErrors: (state) => state.users.signUpErrors,
-      termsOfService: (state) => state.instance.tos
+      termsOfService: (state) => state.instance.tos,
+      accountActivationRequired: (state) => state.instance.accountActivationRequired
     })
   },
   methods: {
-- 
cgit v1.2.3-70-g09d2


From b3003d4e8de46ebf0ade12e6c6527bbfdb016e1d Mon Sep 17 00:00:00 2001
From: Mark Felder <feld@FreeBSD.org>
Date: Wed, 6 May 2020 11:46:40 -0500
Subject: Add notification privacy option to user settings

---
 src/components/user_settings/user_settings.vue | 12 ++++++++++++
 src/i18n/en.json                               |  3 +++
 2 files changed, 15 insertions(+)

(limited to 'src/components')

diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index 8b2336b4..ad184520 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -379,6 +379,7 @@
           :label="$t('settings.notifications')"
         >
           <div class="setting-item">
+            <h2>{{ $t('settings.notification_setting_filters') }}</h2>
             <div class="select-multiple">
               <span class="label">{{ $t('settings.notification_setting') }}</span>
               <ul class="option-list">
@@ -404,6 +405,17 @@
                 </li>
               </ul>
             </div>
+          </div>
+
+          <div class="setting-item">
+            <h2>{{ $t('settings.notification_setting_privacy') }}</h2>
+            <p>
+              <Checkbox v-model="notificationSettings.privacy_option">
+                {{ $t('settings.notification_setting_privacy_option') }}
+              </Checkbox>
+            </p>
+          </div>
+          <div class="setting-item">
             <p>{{ $t('settings.notification_mutes') }}</p>
             <p>{{ $t('settings.notification_blocks') }}</p>
             <button
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 37d9591c..e42754ea 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -405,11 +405,14 @@
     "fun": "Fun",
     "greentext": "Meme arrows",
     "notifications": "Notifications",
+    "notification_setting_filters": "Filters",
     "notification_setting": "Receive notifications from:",
     "notification_setting_follows": "Users you follow",
     "notification_setting_non_follows": "Users you do not follow",
     "notification_setting_followers": "Users who follow you",
     "notification_setting_non_followers": "Users who do not follow you",
+    "notification_setting_privacy": "Privacy",
+    "notification_setting_privacy_option": "Hide the sender and contents of push notifications",
     "notification_mutes": "To stop receiving notifications from a specific user, use a mute.",
     "notification_blocks": "Blocking a user stops all notifications as well as unsubscribes them.",
     "enable_web_push_notifications": "Enable web push notifications",
-- 
cgit v1.2.3-70-g09d2


From 93baa8b664ed7769f5a562953b4b9b93d21ff043 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Fri, 8 May 2020 00:10:49 +0300
Subject: fix gap when not logged in

---
 src/components/react_button/react_button.js  | 2 +-
 src/components/react_button/react_button.vue | 1 -
 src/components/status/status.vue             | 2 +-
 3 files changed, 2 insertions(+), 3 deletions(-)

(limited to 'src/components')

diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js
index 19949563..abc3bf07 100644
--- a/src/components/react_button/react_button.js
+++ b/src/components/react_button/react_button.js
@@ -2,7 +2,7 @@ import Popover from '../popover/popover.vue'
 import { mapGetters } from 'vuex'
 
 const ReactButton = {
-  props: ['status', 'loggedIn'],
+  props: ['status'],
   data () {
     return {
       filterWord: ''
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index ab4b4fcd..0b34add1 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -37,7 +37,6 @@
       </div>
     </div>
     <i
-      v-if="loggedIn"
       slot="trigger"
       class="icon-smile button-icon add-reaction-button"
       :title="$t('tool_tip.add_reaction')"
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index ca295640..76b5c5ab 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -404,7 +404,7 @@
               :status="status"
             />
             <ReactButton
-              :logged-in="loggedIn"
+              v-if="loggedIn"
               :status="status"
             />
             <extra-buttons
-- 
cgit v1.2.3-70-g09d2


From 41fc26869f4ce9e93da94f1e441c69e2e37b0124 Mon Sep 17 00:00:00 2001
From: Mark Felder <feld@FreeBSD.org>
Date: Thu, 7 May 2020 16:33:21 -0500
Subject: Correctly resolve the URI of the server

---
 src/components/extra_buttons/extra_buttons.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components')

diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js
index 2dd77c66..e1bf7e20 100644
--- a/src/components/extra_buttons/extra_buttons.js
+++ b/src/components/extra_buttons/extra_buttons.js
@@ -5,7 +5,7 @@ const ExtraButtons = {
   components: { Popover },
   data: function () {
     return {
-      statusLink: `https://${this.$store.state.instance.name}${this.$router.resolve({ name: 'conversation', params: { id: this.status.id } }).href}`
+      statusLink: `${this.$store.state.instance.server}${this.$router.resolve({ name: 'conversation', params: { id: this.status.id } }).href}`
     }
   },
   methods: {
-- 
cgit v1.2.3-70-g09d2


From ddc3b86d24249021cc1634dbdfb476684265f293 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Fri, 8 May 2020 10:46:00 +0300
Subject: fix popover not closing on pressing the buttons

---
 src/components/extra_buttons/extra_buttons.js  |  8 +++-----
 src/components/extra_buttons/extra_buttons.vue | 13 ++++++++-----
 2 files changed, 11 insertions(+), 10 deletions(-)

(limited to 'src/components')

diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js
index e1bf7e20..e4b19d01 100644
--- a/src/components/extra_buttons/extra_buttons.js
+++ b/src/components/extra_buttons/extra_buttons.js
@@ -3,11 +3,6 @@ import Popover from '../popover/popover.vue'
 const ExtraButtons = {
   props: [ 'status' ],
   components: { Popover },
-  data: function () {
-    return {
-      statusLink: `${this.$store.state.instance.server}${this.$router.resolve({ name: 'conversation', params: { id: this.status.id } }).href}`
-    }
-  },
   methods: {
     deleteStatus () {
       const confirmed = window.confirm(this.$t('status.delete_confirm'))
@@ -56,6 +51,9 @@ const ExtraButtons = {
     },
     canMute () {
       return !!this.currentUser
+    },
+    statusLink () {
+      return `${this.$store.state.instance.server}${this.$router.resolve({ name: 'conversation', params: { id: this.status.id } }).href}`
     }
   }
 }
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index c785a180..bca93ea7 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -4,7 +4,10 @@
     placement="top"
     class="extra-button-popover"
   >
-    <div slot="content">
+    <div
+      slot="content"
+      slot-scope="{close}"
+    >
       <div class="dropdown-menu">
         <button
           v-if="canMute && !status.thread_muted"
@@ -22,32 +25,32 @@
         </button>
         <button
           v-if="!status.pinned && canPin"
-          v-close-popover
           class="dropdown-item dropdown-item-icon"
           @click.prevent="pinStatus"
+          @click="close"
         >
           <i class="icon-pin" /><span>{{ $t("status.pin") }}</span>
         </button>
         <button
           v-if="status.pinned && canPin"
-          v-close-popover
           class="dropdown-item dropdown-item-icon"
           @click.prevent="unpinStatus"
+          @click="close"
         >
           <i class="icon-pin" /><span>{{ $t("status.unpin") }}</span>
         </button>
         <button
           v-if="canDelete"
-          v-close-popover
           class="dropdown-item dropdown-item-icon"
           @click.prevent="deleteStatus"
+          @click="close"
         >
           <i class="icon-cancel" /><span>{{ $t("status.delete") }}</span>
         </button>
         <button
-          v-close-popover
           class="dropdown-item dropdown-item-icon"
           @click.prevent="copyLink"
+          @click="close"
         >
           <i class="icon-share" /><span>{{ $t("status.copy_link") }}</span>
         </button>
-- 
cgit v1.2.3-70-g09d2


From bcebec478e43b3851e85c94335940e8fc7546cc8 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 10 May 2020 06:46:06 +0300
Subject: moved stuff from settings, cleaned up naming for tabs, added close
 and peek

---
 src/App.scss                                       |  48 --
 src/components/modal/modal.vue                     |  16 +-
 src/components/settings/settings.js                | 128 ---
 src/components/settings/settings.vue               | 424 ---------
 src/components/settings_modal/settings_modal.js    |  42 +-
 src/components/settings_modal/settings_modal.scss  |  30 +-
 src/components/settings_modal/settings_modal.vue   |  26 +-
 .../settings_modal/tabs/data_import_export.js      |  65 --
 .../settings_modal/tabs/data_import_export.vue     |  43 -
 .../settings_modal/tabs/data_import_export_tab.js  |  65 ++
 .../settings_modal/tabs/data_import_export_tab.vue |  43 +
 .../settings_modal/tabs/filtering_tab.js           |  26 +
 .../settings_modal/tabs/filtering_tab.vue          |  86 ++
 src/components/settings_modal/tabs/general_tab.js  |  32 +
 src/components/settings_modal/tabs/general_tab.vue | 272 ++++++
 .../tabs/helpers/shared_computed_object.js         |  69 ++
 .../settings_modal/tabs/mutes_and_blocks.js        | 124 ---
 .../settings_modal/tabs/mutes_and_blocks.vue       | 173 ----
 .../settings_modal/tabs/mutes_and_blocks_tab.js    | 124 +++
 .../settings_modal/tabs/mutes_and_blocks_tab.vue   | 173 ++++
 .../settings_modal/tabs/notifications.js           |  27 -
 .../settings_modal/tabs/notifications.vue          |  42 -
 .../settings_modal/tabs/notifications_tab.js       |  27 +
 .../settings_modal/tabs/notifications_tab.vue      |  42 +
 src/components/settings_modal/tabs/profile.js      | 179 ----
 src/components/settings_modal/tabs/profile.scss    |  82 --
 src/components/settings_modal/tabs/profile.vue     | 213 -----
 src/components/settings_modal/tabs/profile_tab.js  | 179 ++++
 .../settings_modal/tabs/profile_tab.scss           |  82 ++
 src/components/settings_modal/tabs/profile_tab.vue | 213 +++++
 src/components/settings_modal/tabs/security.js     | 106 ---
 src/components/settings_modal/tabs/security.vue    | 143 ---
 .../settings_modal/tabs/security_tab/confirm.js    |   9 +
 .../settings_modal/tabs/security_tab/confirm.vue   |  22 +
 .../settings_modal/tabs/security_tab/mfa.js        | 155 ++++
 .../settings_modal/tabs/security_tab/mfa.vue       | 174 ++++
 .../tabs/security_tab/mfa_backup_codes.js          |  17 +
 .../tabs/security_tab/mfa_backup_codes.vue         |  35 +
 .../settings_modal/tabs/security_tab/mfa_totp.js   |  49 ++
 .../settings_modal/tabs/security_tab/mfa_totp.vue  |  43 +
 .../tabs/security_tab/security_tab.js              | 106 +++
 .../tabs/security_tab/security_tab.vue             | 143 +++
 .../settings_modal/tabs/theme_tab/preview.vue      | 117 +++
 .../settings_modal/tabs/theme_tab/theme_tab.js     | 759 ++++++++++++++++
 .../settings_modal/tabs/theme_tab/theme_tab.scss   | 339 ++++++++
 .../settings_modal/tabs/theme_tab/theme_tab.vue    | 956 +++++++++++++++++++++
 src/components/settings_modal/tabs/version_tab.js  |  24 +
 src/components/settings_modal/tabs/version_tab.vue |  31 +
 src/components/style_switcher/preview.vue          | 117 ---
 src/components/style_switcher/style_switcher.js    | 758 ----------------
 src/components/style_switcher/style_switcher.scss  | 335 --------
 src/components/style_switcher/style_switcher.vue   | 956 ---------------------
 src/components/tab_switcher/tab_switcher.scss      |   6 +
 src/components/user_card/user_card.vue             |  11 +-
 src/components/user_settings/confirm.js            |   9 -
 src/components/user_settings/confirm.vue           |  22 -
 src/components/user_settings/mfa.js                | 155 ----
 src/components/user_settings/mfa.vue               | 173 ----
 src/components/user_settings/mfa_backup_codes.js   |  17 -
 src/components/user_settings/mfa_backup_codes.vue  |  33 -
 src/components/user_settings/mfa_totp.js           |  49 --
 src/components/user_settings/mfa_totp.vue          |  43 -
 src/components/user_settings/user_settings.js      | 140 ---
 src/components/user_settings/user_settings.vue     | 119 ---
 src/i18n/en.json                                   |   4 +-
 65 files changed, 4509 insertions(+), 4761 deletions(-)
 delete mode 100644 src/components/settings/settings.js
 delete mode 100644 src/components/settings/settings.vue
 delete mode 100644 src/components/settings_modal/tabs/data_import_export.js
 delete mode 100644 src/components/settings_modal/tabs/data_import_export.vue
 create mode 100644 src/components/settings_modal/tabs/data_import_export_tab.js
 create mode 100644 src/components/settings_modal/tabs/data_import_export_tab.vue
 create mode 100644 src/components/settings_modal/tabs/filtering_tab.js
 create mode 100644 src/components/settings_modal/tabs/filtering_tab.vue
 create mode 100644 src/components/settings_modal/tabs/general_tab.js
 create mode 100644 src/components/settings_modal/tabs/general_tab.vue
 create mode 100644 src/components/settings_modal/tabs/helpers/shared_computed_object.js
 delete mode 100644 src/components/settings_modal/tabs/mutes_and_blocks.js
 delete mode 100644 src/components/settings_modal/tabs/mutes_and_blocks.vue
 create mode 100644 src/components/settings_modal/tabs/mutes_and_blocks_tab.js
 create mode 100644 src/components/settings_modal/tabs/mutes_and_blocks_tab.vue
 delete mode 100644 src/components/settings_modal/tabs/notifications.js
 delete mode 100644 src/components/settings_modal/tabs/notifications.vue
 create mode 100644 src/components/settings_modal/tabs/notifications_tab.js
 create mode 100644 src/components/settings_modal/tabs/notifications_tab.vue
 delete mode 100644 src/components/settings_modal/tabs/profile.js
 delete mode 100644 src/components/settings_modal/tabs/profile.scss
 delete mode 100644 src/components/settings_modal/tabs/profile.vue
 create mode 100644 src/components/settings_modal/tabs/profile_tab.js
 create mode 100644 src/components/settings_modal/tabs/profile_tab.scss
 create mode 100644 src/components/settings_modal/tabs/profile_tab.vue
 delete mode 100644 src/components/settings_modal/tabs/security.js
 delete mode 100644 src/components/settings_modal/tabs/security.vue
 create mode 100644 src/components/settings_modal/tabs/security_tab/confirm.js
 create mode 100644 src/components/settings_modal/tabs/security_tab/confirm.vue
 create mode 100644 src/components/settings_modal/tabs/security_tab/mfa.js
 create mode 100644 src/components/settings_modal/tabs/security_tab/mfa.vue
 create mode 100644 src/components/settings_modal/tabs/security_tab/mfa_backup_codes.js
 create mode 100644 src/components/settings_modal/tabs/security_tab/mfa_backup_codes.vue
 create mode 100644 src/components/settings_modal/tabs/security_tab/mfa_totp.js
 create mode 100644 src/components/settings_modal/tabs/security_tab/mfa_totp.vue
 create mode 100644 src/components/settings_modal/tabs/security_tab/security_tab.js
 create mode 100644 src/components/settings_modal/tabs/security_tab/security_tab.vue
 create mode 100644 src/components/settings_modal/tabs/theme_tab/preview.vue
 create mode 100644 src/components/settings_modal/tabs/theme_tab/theme_tab.js
 create mode 100644 src/components/settings_modal/tabs/theme_tab/theme_tab.scss
 create mode 100644 src/components/settings_modal/tabs/theme_tab/theme_tab.vue
 create mode 100644 src/components/settings_modal/tabs/version_tab.js
 create mode 100644 src/components/settings_modal/tabs/version_tab.vue
 delete mode 100644 src/components/style_switcher/preview.vue
 delete mode 100644 src/components/style_switcher/style_switcher.js
 delete mode 100644 src/components/style_switcher/style_switcher.scss
 delete mode 100644 src/components/style_switcher/style_switcher.vue
 delete mode 100644 src/components/user_settings/confirm.js
 delete mode 100644 src/components/user_settings/confirm.vue
 delete mode 100644 src/components/user_settings/mfa.js
 delete mode 100644 src/components/user_settings/mfa.vue
 delete mode 100644 src/components/user_settings/mfa_backup_codes.js
 delete mode 100644 src/components/user_settings/mfa_backup_codes.vue
 delete mode 100644 src/components/user_settings/mfa_totp.js
 delete mode 100644 src/components/user_settings/mfa_totp.vue
 delete mode 100644 src/components/user_settings/user_settings.js
 delete mode 100644 src/components/user_settings/user_settings.vue

(limited to 'src/components')

diff --git a/src/App.scss b/src/App.scss
index 7db9461c..120eea53 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -860,54 +860,6 @@ nav {
   }
 }
 
-// DELETE
-.setting-item {
-  border-bottom: 2px solid var(--fg, $fallback--fg);
-  margin: 1em 1em 1.4em;
-  padding-bottom: 1.4em;
-
-  > div {
-    margin-bottom: .5em;
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  &:last-child {
-    border-bottom: none;
-    padding-bottom: 0;
-    margin-bottom: 1em;
-  }
-
-  select {
-    min-width: 10em;
-  }
-
-
-  textarea {
-    width: 100%;
-    max-width: 100%;
-    height: 100px;
-  }
-
-  .unavailable,
-  .unavailable i {
-    color: var(--cRed, $fallback--cRed);
-    color: $fallback--cRed;
-  }
-
-  .btn {
-    min-height: 28px;
-    min-width: 10em;
-    padding: 0 2em;
-  }
-
-  .number-input {
-    max-width: 6em;
-  }
-}
-// DELETE
-
 .select-multiple {
   display: flex;
   .option-list {
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index cee24241..e5ecc0c0 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -3,6 +3,7 @@
     v-show="isOpen"
     v-body-scroll-lock="isOpen"
     class="modal-view"
+    :class="{ 'modal-background': !noBackground }"
     @click.self="$emit('backdropClicked')"
   >
     <slot />
@@ -15,6 +16,10 @@ export default {
     isOpen: {
       type: Boolean,
       default: true
+    },
+    noBackground: {
+      type: Boolean,
+      default: false
     }
   }
 }
@@ -32,10 +37,19 @@ export default {
   justify-content: center;
   align-items: center;
   overflow: auto;
+  pointer-events: none;
   animation-duration: 0.2s;
-  background-color: rgba(0, 0, 0, 0.5);
   animation-name: modal-background-fadein;
 
+  > * {
+    pointer-events: initial;
+  }
+
+  &.modal-background {
+    pointer-events: initial;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
   body:not(.scroll-locked) & {
     opacity: 0;
   }
diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js
deleted file mode 100644
index 31a9e9be..00000000
--- a/src/components/settings/settings.js
+++ /dev/null
@@ -1,128 +0,0 @@
-/* eslint-env browser */
-import { filter, trim } from 'lodash'
-
-import TabSwitcher from '../tab_switcher/tab_switcher.js'
-import StyleSwitcher from '../style_switcher/style_switcher.vue'
-import InterfaceLanguageSwitcher from '../interface_language_switcher/interface_language_switcher.vue'
-import { extractCommit } from '../../services/version/version.service'
-import { instanceDefaultProperties, defaultState as configDefaultState } from '../../modules/config.js'
-import Checkbox from '../checkbox/checkbox.vue'
-
-const pleromaFeCommitUrl = 'https://git.pleroma.social/pleroma/pleroma-fe/commit/'
-const pleromaBeCommitUrl = 'https://git.pleroma.social/pleroma/pleroma/commit/'
-
-const multiChoiceProperties = [
-  'postContentType',
-  'subjectLineBehavior'
-]
-
-const settings = {
-  data () {
-    const instance = this.$store.state.instance
-
-    return {
-      loopSilentAvailable:
-        // Firefox
-        Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'mozHasAudio') ||
-        // Chrome-likes
-        Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'webkitAudioDecodedByteCount') ||
-        // Future spec, still not supported in Nightly 63 as of 08/2018
-        Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'audioTracks'),
-
-      backendVersion: instance.backendVersion,
-      frontendVersion: instance.frontendVersion
-    }
-  },
-  components: {
-    TabSwitcher,
-    StyleSwitcher,
-    InterfaceLanguageSwitcher,
-    Checkbox
-  },
-  computed: {
-    user () {
-      return this.$store.state.users.currentUser
-    },
-    currentSaveStateNotice () {
-      return this.$store.state.interface.settings.currentSaveStateNotice
-    },
-    postFormats () {
-      return this.$store.state.instance.postFormats || []
-    },
-    instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel },
-    frontendVersionLink () {
-      return pleromaFeCommitUrl + this.frontendVersion
-    },
-    backendVersionLink () {
-      return pleromaBeCommitUrl + extractCommit(this.backendVersion)
-    },
-    // Getting localized values for instance-default properties
-    ...instanceDefaultProperties
-      .filter(key => multiChoiceProperties.includes(key))
-      .map(key => [
-        key + 'DefaultValue',
-        function () {
-          return this.$store.getters.instanceDefaultConfig[key]
-        }
-      ])
-      .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),
-    ...instanceDefaultProperties
-      .filter(key => !multiChoiceProperties.includes(key))
-      .map(key => [
-        key + 'LocalizedValue',
-        function () {
-          return this.$t('settings.values.' + this.$store.getters.instanceDefaultConfig[key])
-        }
-      ])
-      .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),
-    // Generating computed values for vuex properties
-    ...Object.keys(configDefaultState)
-      .map(key => [key, {
-        get () { return this.$store.getters.mergedConfig[key] },
-        set (value) {
-          this.$store.dispatch('setOption', { name: key, value })
-        }
-      }])
-      .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),
-    // Special cases (need to transform values or perform actions first)
-    muteWordsString: {
-      get () { return this.$store.getters.mergedConfig.muteWords.join('\n') },
-      set (value) {
-        this.$store.dispatch('setOption', {
-          name: 'muteWords',
-          value: filter(value.split('\n'), (word) => trim(word).length > 0)
-        })
-      }
-    },
-    useStreamingApi: {
-      get () { return this.$store.getters.mergedConfig.useStreamingApi },
-      set (value) {
-        const promise = value
-          ? this.$store.dispatch('enableMastoSockets')
-          : this.$store.dispatch('disableMastoSockets')
-
-        promise.then(() => {
-          this.$store.dispatch('setOption', { name: 'useStreamingApi', value })
-        }).catch((e) => {
-          console.error('Failed starting MastoAPI Streaming socket', e)
-          this.$store.dispatch('disableMastoSockets')
-          this.$store.dispatch('setOption', { name: 'useStreamingApi', value: false })
-        })
-      }
-    }
-  },
-  // Updating nested properties
-  watch: {
-    notificationVisibility: {
-      handler (value) {
-        this.$store.dispatch('setOption', {
-          name: 'notificationVisibility',
-          value: this.$store.getters.mergedConfig.notificationVisibility
-        })
-      },
-      deep: true
-    }
-  }
-}
-
-export default settings
diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
deleted file mode 100644
index 9e14b449..00000000
--- a/src/components/settings/settings.vue
+++ /dev/null
@@ -1,424 +0,0 @@
-<template>
-  <div class="settings panel panel-default">
-    <div class="panel-heading">
-      <div class="title">
-        {{ $t('settings.settings') }}
-      </div>
-
-      <transition name="fade">
-        <template v-if="currentSaveStateNotice">
-          <div
-            v-if="currentSaveStateNotice.error"
-            class="alert error"
-            @click.prevent
-          >
-            {{ $t('settings.saving_err') }}
-          </div>
-
-          <div
-            v-if="!currentSaveStateNotice.error"
-            class="alert transparent"
-            @click.prevent
-          >
-            {{ $t('settings.saving_ok') }}
-          </div>
-        </template>
-      </transition>
-    </div>
-    <div class="panel-body">
-      <keep-alive>
-        <tab-switcher>
-          <div :label="$t('settings.general')">
-            <div class="setting-item">
-              <h2>{{ $t('settings.interface') }}</h2>
-              <ul class="setting-list">
-                <li>
-                  <interface-language-switcher />
-                </li>
-                <li v-if="instanceSpecificPanelPresent">
-                  <Checkbox v-model="hideISP">
-                    {{ $t('settings.hide_isp') }}
-                  </Checkbox>
-                </li>
-              </ul>
-            </div>
-            <div class="setting-item">
-              <h2>{{ $t('nav.timeline') }}</h2>
-              <ul class="setting-list">
-                <li>
-                  <Checkbox v-model="hideMutedPosts">
-                    {{ $t('settings.hide_muted_posts') }} {{ $t('settings.instance_default', { value: hideMutedPostsLocalizedValue }) }}
-                  </Checkbox>
-                </li>
-                <li>
-                  <Checkbox v-model="collapseMessageWithSubject">
-                    {{ $t('settings.collapse_subject') }} {{ $t('settings.instance_default', { value: collapseMessageWithSubjectLocalizedValue }) }}
-                  </Checkbox>
-                </li>
-                <li>
-                  <Checkbox v-model="streaming">
-                    {{ $t('settings.streaming') }}
-                  </Checkbox>
-                  <ul
-                    class="setting-list suboptions"
-                    :class="[{disabled: !streaming}]"
-                  >
-                    <li>
-                      <Checkbox
-                        v-model="pauseOnUnfocused"
-                        :disabled="!streaming"
-                      >
-                        {{ $t('settings.pause_on_unfocused') }}
-                      </Checkbox>
-                    </li>
-                  </ul>
-                </li>
-                <li>
-                  <Checkbox v-model="useStreamingApi">
-                    {{ $t('settings.useStreamingApi') }}
-                    <br>
-                    <small>
-                      {{ $t('settings.useStreamingApiWarning') }}
-                    </small>
-                  </Checkbox>
-                </li>
-                <li>
-                  <Checkbox v-model="autoLoad">
-                    {{ $t('settings.autoload') }}
-                  </Checkbox>
-                </li>
-                <li>
-                  <Checkbox v-model="hoverPreview">
-                    {{ $t('settings.reply_link_preview') }}
-                  </Checkbox>
-                </li>
-                <li>
-                  <Checkbox v-model="emojiReactionsOnTimeline">
-                    {{ $t('settings.emoji_reactions_on_timeline') }}
-                  </Checkbox>
-                </li>
-              </ul>
-            </div>
-
-            <div class="setting-item">
-              <h2>{{ $t('settings.composing') }}</h2>
-              <ul class="setting-list">
-                <li>
-                  <Checkbox v-model="scopeCopy">
-                    {{ $t('settings.scope_copy') }} {{ $t('settings.instance_default', { value: scopeCopyLocalizedValue }) }}
-                  </Checkbox>
-                </li>
-                <li>
-                  <Checkbox v-model="alwaysShowSubjectInput">
-                    {{ $t('settings.subject_input_always_show') }} {{ $t('settings.instance_default', { value: alwaysShowSubjectInputLocalizedValue }) }}
-                  </Checkbox>
-                </li>
-                <li>
-                  <div>
-                    {{ $t('settings.subject_line_behavior') }}
-                    <label
-                      for="subjectLineBehavior"
-                      class="select"
-                    >
-                      <select
-                        id="subjectLineBehavior"
-                        v-model="subjectLineBehavior"
-                      >
-                        <option value="email">
-                          {{ $t('settings.subject_line_email') }}
-                          {{ subjectLineBehaviorDefaultValue == 'email' ? $t('settings.instance_default_simple') : '' }}
-                        </option>
-                        <option value="masto">
-                          {{ $t('settings.subject_line_mastodon') }}
-                          {{ subjectLineBehaviorDefaultValue == 'mastodon' ? $t('settings.instance_default_simple') : '' }}
-                        </option>
-                        <option value="noop">
-                          {{ $t('settings.subject_line_noop') }}
-                          {{ subjectLineBehaviorDefaultValue == 'noop' ? $t('settings.instance_default_simple') : '' }}
-                        </option>
-                      </select>
-                      <i class="icon-down-open" />
-                    </label>
-                  </div>
-                </li>
-                <li v-if="postFormats.length > 0">
-                  <div>
-                    {{ $t('settings.post_status_content_type') }}
-                    <label
-                      for="postContentType"
-                      class="select"
-                    >
-                      <select
-                        id="postContentType"
-                        v-model="postContentType"
-                      >
-                        <option
-                          v-for="postFormat in postFormats"
-                          :key="postFormat"
-                          :value="postFormat"
-                        >
-                          {{ $t(`post_status.content_type["${postFormat}"]`) }}
-                          {{ postContentTypeDefaultValue === postFormat ? $t('settings.instance_default_simple') : '' }}
-                        </option>
-                      </select>
-                      <i class="icon-down-open" />
-                    </label>
-                  </div>
-                </li>
-                <li>
-                  <Checkbox v-model="minimalScopesMode">
-                    {{ $t('settings.minimal_scopes_mode') }} {{ $t('settings.instance_default', { value: minimalScopesModeLocalizedValue }) }}
-                  </Checkbox>
-                </li>
-                <li>
-                  <Checkbox v-model="autohideFloatingPostButton">
-                    {{ $t('settings.autohide_floating_post_button') }}
-                  </Checkbox>
-                </li>
-                <li>
-                  <Checkbox v-model="padEmoji">
-                    {{ $t('settings.pad_emoji') }}
-                  </Checkbox>
-                </li>
-              </ul>
-            </div>
-
-            <div class="setting-item">
-              <h2>{{ $t('settings.attachments') }}</h2>
-              <ul class="setting-list">
-                <li>
-                  <Checkbox v-model="hideAttachments">
-                    {{ $t('settings.hide_attachments_in_tl') }}
-                  </Checkbox>
-                </li>
-                <li>
-                  <Checkbox v-model="hideAttachmentsInConv">
-                    {{ $t('settings.hide_attachments_in_convo') }}
-                  </Checkbox>
-                </li>
-                <li>
-                  <label for="maxThumbnails">
-                    {{ $t('settings.max_thumbnails') }}
-                  </label>
-                  <input
-                    id="maxThumbnails"
-                    v-model.number="maxThumbnails"
-                    class="number-input"
-                    type="number"
-                    min="0"
-                    step="1"
-                  >
-                </li>
-                <li>
-                  <Checkbox v-model="hideNsfw">
-                    {{ $t('settings.nsfw_clickthrough') }}
-                  </Checkbox>
-                </li>
-                <ul class="setting-list suboptions">
-                  <li>
-                    <Checkbox
-                      v-model="preloadImage"
-                      :disabled="!hideNsfw"
-                    >
-                      {{ $t('settings.preload_images') }}
-                    </Checkbox>
-                  </li>
-                  <li>
-                    <Checkbox
-                      v-model="useOneClickNsfw"
-                      :disabled="!hideNsfw"
-                    >
-                      {{ $t('settings.use_one_click_nsfw') }}
-                    </Checkbox>
-                  </li>
-                </ul>
-                <li>
-                  <Checkbox v-model="stopGifs">
-                    {{ $t('settings.stop_gifs') }}
-                  </Checkbox>
-                </li>
-                <li>
-                  <Checkbox v-model="loopVideo">
-                    {{ $t('settings.loop_video') }}
-                  </Checkbox>
-                  <ul
-                    class="setting-list suboptions"
-                    :class="[{disabled: !streaming}]"
-                  >
-                    <li>
-                      <Checkbox
-                        v-model="loopVideoSilentOnly"
-                        :disabled="!loopVideo || !loopSilentAvailable"
-                      >
-                        {{ $t('settings.loop_video_silent_only') }}
-                      </Checkbox>
-                      <div
-                        v-if="!loopSilentAvailable"
-                        class="unavailable"
-                      >
-                        <i class="icon-globe" />! {{ $t('settings.limited_availability') }}
-                      </div>
-                    </li>
-                  </ul>
-                </li>
-                <li>
-                  <Checkbox v-model="playVideosInModal">
-                    {{ $t('settings.play_videos_in_modal') }}
-                  </Checkbox>
-                </li>
-                <li>
-                  <Checkbox v-model="useContainFit">
-                    {{ $t('settings.use_contain_fit') }}
-                  </Checkbox>
-                </li>
-              </ul>
-            </div>
-
-            <div class="setting-item">
-              <h2>{{ $t('settings.notifications') }}</h2>
-              <ul class="setting-list">
-                <li>
-                  <Checkbox v-model="webPushNotifications">
-                    {{ $t('settings.enable_web_push_notifications') }}
-                  </Checkbox>
-                </li>
-              </ul>
-            </div>
-
-            <div class="setting-item">
-              <h2>{{ $t('settings.fun') }}</h2>
-              <ul class="setting-list">
-                <li>
-                  <Checkbox v-model="greentext">
-                    {{ $t('settings.greentext') }} {{ $t('settings.instance_default', { value: greentextLocalizedValue }) }}
-                  </Checkbox>
-                </li>
-              </ul>
-            </div>
-          </div>
-
-          <div :label="$t('settings.theme')">
-            <div class="setting-item">
-              <style-switcher />
-            </div>
-          </div>
-
-          <div :label="$t('settings.filtering')">
-            <div class="setting-item">
-              <div class="select-multiple">
-                <span class="label">{{ $t('settings.notification_visibility') }}</span>
-                <ul class="option-list">
-                  <li>
-                    <Checkbox v-model="notificationVisibility.likes">
-                      {{ $t('settings.notification_visibility_likes') }}
-                    </Checkbox>
-                  </li>
-                  <li>
-                    <Checkbox v-model="notificationVisibility.repeats">
-                      {{ $t('settings.notification_visibility_repeats') }}
-                    </Checkbox>
-                  </li>
-                  <li>
-                    <Checkbox v-model="notificationVisibility.follows">
-                      {{ $t('settings.notification_visibility_follows') }}
-                    </Checkbox>
-                  </li>
-                  <li>
-                    <Checkbox v-model="notificationVisibility.mentions">
-                      {{ $t('settings.notification_visibility_mentions') }}
-                    </Checkbox>
-                  </li>
-                  <li>
-                    <Checkbox v-model="notificationVisibility.moves">
-                      {{ $t('settings.notification_visibility_moves') }}
-                    </Checkbox>
-                  </li>
-                  <li>
-                    <Checkbox v-model="notificationVisibility.emojiReactions">
-                      {{ $t('settings.notification_visibility_emoji_reactions') }}
-                    </Checkbox>
-                  </li>
-                </ul>
-              </div>
-              <div>
-                {{ $t('settings.replies_in_timeline') }}
-                <label
-                  for="replyVisibility"
-                  class="select"
-                >
-                  <select
-                    id="replyVisibility"
-                    v-model="replyVisibility"
-                  >
-                    <option
-                      value="all"
-                      selected
-                    >{{ $t('settings.reply_visibility_all') }}</option>
-                    <option value="following">{{ $t('settings.reply_visibility_following') }}</option>
-                    <option value="self">{{ $t('settings.reply_visibility_self') }}</option>
-                  </select>
-                  <i class="icon-down-open" />
-                </label>
-              </div>
-              <div>
-                <Checkbox v-model="hidePostStats">
-                  {{ $t('settings.hide_post_stats') }} {{ $t('settings.instance_default', { value: hidePostStatsLocalizedValue }) }}
-                </Checkbox>
-              </div>
-              <div>
-                <Checkbox v-model="hideUserStats">
-                  {{ $t('settings.hide_user_stats') }} {{ $t('settings.instance_default', { value: hideUserStatsLocalizedValue }) }}
-                </Checkbox>
-              </div>
-            </div>
-            <div class="setting-item">
-              <div>
-                <p>{{ $t('settings.filtering_explanation') }}</p>
-                <textarea
-                  id="muteWords"
-                  v-model="muteWordsString"
-                />
-              </div>
-              <div>
-                <Checkbox v-model="hideFilteredStatuses">
-                  {{ $t('settings.hide_filtered_statuses') }} {{ $t('settings.instance_default', { value: hideFilteredStatusesLocalizedValue }) }}
-                </Checkbox>
-              </div>
-            </div>
-          </div>
-          <div :label="$t('settings.version.title')">
-            <div class="setting-item">
-              <ul class="setting-list">
-                <li>
-                  <p>{{ $t('settings.version.backend_version') }}</p>
-                  <ul class="option-list">
-                    <li>
-                      <a
-                        :href="backendVersionLink"
-                        target="_blank"
-                      >{{ backendVersion }}</a>
-                    </li>
-                  </ul>
-                </li>
-                <li>
-                  <p>{{ $t('settings.version.frontend_version') }}</p>
-                  <ul class="option-list">
-                    <li>
-                      <a
-                        :href="frontendVersionLink"
-                        target="_blank"
-                      >{{ frontendVersion }}</a>
-                    </li>
-                  </ul>
-                </li>
-              </ul>
-            </div>
-          </div>
-        </tab-switcher>
-      </keep-alive>
-    </div>
-  </div>
-</template>
-
-<script src="./settings.js">
-</script>
diff --git a/src/components/settings_modal/settings_modal.js b/src/components/settings_modal/settings_modal.js
index 1f4c038f..d60babf6 100644
--- a/src/components/settings_modal/settings_modal.js
+++ b/src/components/settings_modal/settings_modal.js
@@ -1,21 +1,30 @@
-import Modal from '../modal/modal.vue'
-import TabSwitcher from '../tab_switcher/tab_switcher.js'
+import Modal from 'src/components/modal/modal.vue'
+import TabSwitcher from 'src/components/tab_switcher/tab_switcher.js'
 
-import Profile from './tabs/profile.vue'
-import Security from './tabs/security.vue'
-import Notifications from './tabs/notifications.vue'
-import DataImportExport from './tabs/data_import_export.vue'
-import MutesAndBlocks from './tabs/mutes_and_blocks.vue'
+import DataImportExportTab from './tabs/data_import_export_tab.vue'
+import MutesAndBlocksTab from './tabs/mutes_and_blocks_tab.vue'
+import NotificationsTab from './tabs/notifications_tab.vue'
+import FilteringTab from './tabs/filtering_tab.vue'
+import SecurityTab from './tabs/security_tab/security_tab.vue'
+import ProfileTab from './tabs/profile_tab.vue'
+import GeneralTab from './tabs/general_tab.vue'
+import VersionTab from './tabs/version_tab.vue'
+import ThemeTab from './tabs/theme_tab/theme_tab.vue'
 
 const SettingsModal = {
   components: {
     Modal,
     TabSwitcher,
-    Profile,
-    Security,
-    Notifications,
-    DataImportExport,
-    MutesAndBlocks
+
+    DataImportExportTab,
+    MutesAndBlocksTab,
+    NotificationsTab,
+    FilteringTab,
+    SecurityTab,
+    ProfileTab,
+    GeneralTab,
+    VersionTab,
+    ThemeTab
   },
   data () {
     return {
@@ -28,11 +37,20 @@ const SettingsModal = {
     },
     modalActivated () {
       return this.$store.state.interface.settingsModalState !== 'hidden'
+    },
+    modalPeeked () {
+      return this.$store.state.interface.settingsModalState === 'minimized'
     }
   },
   watch: {
   },
   methods: {
+    closeModal () {
+      this.$store.dispatch('closeSettingsModal')
+    },
+    peekModal () {
+      this.$store.dispatch('togglePeekSettingsModal')
+    }
   }
 }
 
diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss
index 8cea52d2..3efbe205 100644
--- a/src/components/settings_modal/settings_modal.scss
+++ b/src/components/settings_modal/settings_modal.scss
@@ -1,14 +1,29 @@
-@import '../../_variables.scss';
+@import 'src/_variables.scss';
 .settings-modal {
+
   .settings_tab-switcher {
     height: 100%;
   }
+  &.peek {
+    .settings-modal-panel {
+      transform: translateY(calc(100% - 50px));
+    }
+  }
+
   .settings-modal-panel {
+    transition: transform;
+    transition-timing-function: ease-in-out;
+    transition-duration: 300ms;
     width: 1000px;
     max-width: 90vw;
     height: 90vh;
+    @media all and (max-width: 800px) {
+      max-width: 100vw;
+      height: 100vh;
+    }
   }
   .panel-body {
+    height: 100%;
     overflow-y: hidden;
   }
   .setting-item {
@@ -16,6 +31,12 @@
     margin: 1em 1em 1.4em;
     padding-bottom: 1.4em;
 
+    .btn {
+      min-height: 28px;
+      min-width: 10em;
+      padding: 0 2em;
+    }
+
     > div {
       margin-bottom: .5em;
       &:last-child {
@@ -33,7 +54,6 @@
       min-width: 10em;
     }
 
-
     textarea {
       width: 100%;
       max-width: 100%;
@@ -46,12 +66,6 @@
       color: $fallback--cRed;
     }
 
-    .btn {
-      min-height: 28px;
-      min-width: 10em;
-      padding: 0 2em;
-    }
-
     .number-input {
       max-width: 6em;
     }
diff --git a/src/components/settings_modal/settings_modal.vue b/src/components/settings_modal/settings_modal.vue
index 9e35d3f6..53481bdd 100644
--- a/src/components/settings_modal/settings_modal.vue
+++ b/src/components/settings_modal/settings_modal.vue
@@ -3,10 +3,20 @@
   v-if="isLoggedIn && !resettingForm"
   :is-open="modalActivated"
   class="settings-modal"
+  :class="{ peek: modalPeeked }"
+  :no-background="modalPeeked"
   >
   <div class="settings-modal-panel panel">
     <div class="panel-heading">
-      {{ $t('settings.settings') }}
+      <span class="title">
+        {{ $t('settings.settings') }}
+      </span>
+      <button class="btn" @click="peekModal">
+        {{ $t('general.peek') }}
+      </button>
+      <button class="btn" @click="closeModal">
+        {{ $t('general.close') }}
+      </button>
     </div>
     <div class="panel-body">
       <tab-switcher
@@ -15,11 +25,15 @@
         :scrollableTabs="true"
         ref="tabSwitcher"
         >
-        <div :label="$t('settings.profile_tab')"><Profile /></div>
-        <div :label="$t('settings.security_tab')"><Security /></div>
-        <div :label="$t('settings.notifications')"><Notifications /></div>
-        <div :label="$t('settings.data_import_export_tab')"><DataImportExport /></div>
-        <div :label="$t('settings.mutes_and_blocks')"><MutesAndBlocks /></div>
+        <div :label="$t('settings.general')"><GeneralTab /></div>
+        <div :label="$t('settings.profile_tab')"><ProfileTab /></div>
+        <div :label="$t('settings.security_tab')"><SecurityTab /></div>
+        <div :label="$t('settings.filtering')"><FilteringTab /></div>
+        <div :label="$t('settings.theme')"><ThemeTab /></div>
+        <div :label="$t('settings.notifications')"><NotificationsTab /></div>
+        <div :label="$t('settings.data_import_export_tab')"><DataImportExportTab /></div>
+        <div :label="$t('settings.mutes_and_blocks')"><MutesAndBlocksTab /></div>
+        <div :label="$t('settings.version.title')"><VersionTab /></div>
       </tab-switcher>
     </div>
   </div>
diff --git a/src/components/settings_modal/tabs/data_import_export.js b/src/components/settings_modal/tabs/data_import_export.js
deleted file mode 100644
index f68d12e9..00000000
--- a/src/components/settings_modal/tabs/data_import_export.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import Importer from '../../importer/importer.vue'
-import Exporter from '../../exporter/exporter.vue'
-import Checkbox from '../../checkbox/checkbox.vue'
-
-const DataImportExport = {
-  data () {
-    return {
-      activeTab: 'profile',
-      newDomainToMute: ''
-    }
-  },
-  created () {
-    this.$store.dispatch('fetchTokens')
-  },
-  components: {
-    Importer,
-    Exporter,
-    Checkbox
-  },
-  computed: {
-    user () {
-      return this.$store.state.users.currentUser
-    }
-  },
-  methods: {
-    getFollowsContent () {
-      return this.$store.state.api.backendInteractor.exportFriends({ id: this.$store.state.users.currentUser.id })
-        .then(this.generateExportableUsersContent)
-    },
-    getBlocksContent () {
-      return this.$store.state.api.backendInteractor.fetchBlocks()
-        .then(this.generateExportableUsersContent)
-    },
-    importFollows (file) {
-      return this.$store.state.api.backendInteractor.importFollows({ file })
-        .then((status) => {
-          if (!status) {
-            throw new Error('failed')
-          }
-        })
-    },
-    importBlocks (file) {
-      return this.$store.state.api.backendInteractor.importBlocks({ file })
-        .then((status) => {
-          if (!status) {
-            throw new Error('failed')
-          }
-        })
-    },
-    generateExportableUsersContent (users) {
-      // Get addresses
-      return users.map((user) => {
-        // check is it's a local user
-        if (user && user.is_local) {
-          // append the instance address
-          // eslint-disable-next-line no-undef
-          return user.screen_name + '@' + location.hostname
-        }
-        return user.screen_name
-      }).join('\n')
-    }
-  }
-}
-
-export default DataImportExport
diff --git a/src/components/settings_modal/tabs/data_import_export.vue b/src/components/settings_modal/tabs/data_import_export.vue
deleted file mode 100644
index 464df6d3..00000000
--- a/src/components/settings_modal/tabs/data_import_export.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-<div
-  :label="$t('settings.data_import_export_tab')"
-  >
-  <div class="setting-item">
-    <h2>{{ $t('settings.follow_import') }}</h2>
-    <p>{{ $t('settings.import_followers_from_a_csv_file') }}</p>
-    <Importer
-      :submit-handler="importFollows"
-      :success-message="$t('settings.follows_imported')"
-      :error-message="$t('settings.follow_import_error')"
-      />
-  </div>
-  <div class="setting-item">
-    <h2>{{ $t('settings.follow_export') }}</h2>
-    <Exporter
-      :get-content="getFollowsContent"
-      filename="friends.csv"
-      :export-button-label="$t('settings.follow_export_button')"
-      />
-  </div>
-  <div class="setting-item">
-    <h2>{{ $t('settings.block_import') }}</h2>
-    <p>{{ $t('settings.import_blocks_from_a_csv_file') }}</p>
-    <Importer
-      :submit-handler="importBlocks"
-      :success-message="$t('settings.blocks_imported')"
-      :error-message="$t('settings.block_import_error')"
-      />
-  </div>
-  <div class="setting-item">
-    <h2>{{ $t('settings.block_export') }}</h2>
-    <Exporter
-      :get-content="getBlocksContent"
-      filename="blocks.csv"
-      :export-button-label="$t('settings.block_export_button')"
-      />
-  </div>
-</div>
-</template>
-
-<script src="./data_import_export.js"></script>
-<!-- <style lang="scss" src="./profile.scss"></style> -->
diff --git a/src/components/settings_modal/tabs/data_import_export_tab.js b/src/components/settings_modal/tabs/data_import_export_tab.js
new file mode 100644
index 00000000..168f89e1
--- /dev/null
+++ b/src/components/settings_modal/tabs/data_import_export_tab.js
@@ -0,0 +1,65 @@
+import Importer from 'src/components/importer/importer.vue'
+import Exporter from 'src/components/exporter/exporter.vue'
+import Checkbox from 'src/components/checkbox/checkbox.vue'
+
+const DataImportExportTab = {
+  data () {
+    return {
+      activeTab: 'profile',
+      newDomainToMute: ''
+    }
+  },
+  created () {
+    this.$store.dispatch('fetchTokens')
+  },
+  components: {
+    Importer,
+    Exporter,
+    Checkbox
+  },
+  computed: {
+    user () {
+      return this.$store.state.users.currentUser
+    }
+  },
+  methods: {
+    getFollowsContent () {
+      return this.$store.state.api.backendInteractor.exportFriends({ id: this.$store.state.users.currentUser.id })
+        .then(this.generateExportableUsersContent)
+    },
+    getBlocksContent () {
+      return this.$store.state.api.backendInteractor.fetchBlocks()
+        .then(this.generateExportableUsersContent)
+    },
+    importFollows (file) {
+      return this.$store.state.api.backendInteractor.importFollows({ file })
+        .then((status) => {
+          if (!status) {
+            throw new Error('failed')
+          }
+        })
+    },
+    importBlocks (file) {
+      return this.$store.state.api.backendInteractor.importBlocks({ file })
+        .then((status) => {
+          if (!status) {
+            throw new Error('failed')
+          }
+        })
+    },
+    generateExportableUsersContent (users) {
+      // Get addresses
+      return users.map((user) => {
+        // check is it's a local user
+        if (user && user.is_local) {
+          // append the instance address
+          // eslint-disable-next-line no-undef
+          return user.screen_name + '@' + location.hostname
+        }
+        return user.screen_name
+      }).join('\n')
+    }
+  }
+}
+
+export default DataImportExportTab
diff --git a/src/components/settings_modal/tabs/data_import_export_tab.vue b/src/components/settings_modal/tabs/data_import_export_tab.vue
new file mode 100644
index 00000000..3ddc8b03
--- /dev/null
+++ b/src/components/settings_modal/tabs/data_import_export_tab.vue
@@ -0,0 +1,43 @@
+<template>
+<div
+  :label="$t('settings.data_import_export_tab')"
+  >
+  <div class="setting-item">
+    <h2>{{ $t('settings.follow_import') }}</h2>
+    <p>{{ $t('settings.import_followers_from_a_csv_file') }}</p>
+    <Importer
+      :submit-handler="importFollows"
+      :success-message="$t('settings.follows_imported')"
+      :error-message="$t('settings.follow_import_error')"
+      />
+  </div>
+  <div class="setting-item">
+    <h2>{{ $t('settings.follow_export') }}</h2>
+    <Exporter
+      :get-content="getFollowsContent"
+      filename="friends.csv"
+      :export-button-label="$t('settings.follow_export_button')"
+      />
+  </div>
+  <div class="setting-item">
+    <h2>{{ $t('settings.block_import') }}</h2>
+    <p>{{ $t('settings.import_blocks_from_a_csv_file') }}</p>
+    <Importer
+      :submit-handler="importBlocks"
+      :success-message="$t('settings.blocks_imported')"
+      :error-message="$t('settings.block_import_error')"
+      />
+  </div>
+  <div class="setting-item">
+    <h2>{{ $t('settings.block_export') }}</h2>
+    <Exporter
+      :get-content="getBlocksContent"
+      filename="blocks.csv"
+      :export-button-label="$t('settings.block_export_button')"
+      />
+  </div>
+</div>
+</template>
+
+<script src="./data_import_export_tab.js"></script>
+<!-- <style lang="scss" src="./profile.scss"></style> -->
diff --git a/src/components/settings_modal/tabs/filtering_tab.js b/src/components/settings_modal/tabs/filtering_tab.js
new file mode 100644
index 00000000..ec330667
--- /dev/null
+++ b/src/components/settings_modal/tabs/filtering_tab.js
@@ -0,0 +1,26 @@
+import Checkbox from 'src/components/checkbox/checkbox.vue'
+
+import SharedComputedObject from './helpers/shared_computed_object.js'
+
+const FilteringTab = {
+  components: {
+    Checkbox
+  },
+  computed: {
+    ...SharedComputedObject()
+  },
+  // Updating nested properties
+  watch: {
+    notificationVisibility: {
+      handler (value) {
+        this.$store.dispatch('setOption', {
+          name: 'notificationVisibility',
+          value: this.$store.getters.mergedConfig.notificationVisibility
+        })
+      },
+      deep: true
+    }
+  }
+}
+
+export default FilteringTab
diff --git a/src/components/settings_modal/tabs/filtering_tab.vue b/src/components/settings_modal/tabs/filtering_tab.vue
new file mode 100644
index 00000000..647ec7b4
--- /dev/null
+++ b/src/components/settings_modal/tabs/filtering_tab.vue
@@ -0,0 +1,86 @@
+<template>
+<div :label="$t('settings.filtering')">
+  <div class="setting-item">
+    <div class="select-multiple">
+      <span class="label">{{ $t('settings.notification_visibility') }}</span>
+      <ul class="option-list">
+        <li>
+          <Checkbox v-model="notificationVisibility.likes">
+            {{ $t('settings.notification_visibility_likes') }}
+          </Checkbox>
+        </li>
+        <li>
+          <Checkbox v-model="notificationVisibility.repeats">
+            {{ $t('settings.notification_visibility_repeats') }}
+          </Checkbox>
+        </li>
+        <li>
+          <Checkbox v-model="notificationVisibility.follows">
+            {{ $t('settings.notification_visibility_follows') }}
+          </Checkbox>
+        </li>
+        <li>
+          <Checkbox v-model="notificationVisibility.mentions">
+            {{ $t('settings.notification_visibility_mentions') }}
+          </Checkbox>
+        </li>
+        <li>
+          <Checkbox v-model="notificationVisibility.moves">
+            {{ $t('settings.notification_visibility_moves') }}
+          </Checkbox>
+        </li>
+        <li>
+          <Checkbox v-model="notificationVisibility.emojiReactions">
+            {{ $t('settings.notification_visibility_emoji_reactions') }}
+          </Checkbox>
+        </li>
+      </ul>
+    </div>
+    <div>
+      {{ $t('settings.replies_in_timeline') }}
+      <label
+        for="replyVisibility"
+        class="select"
+        >
+        <select
+          id="replyVisibility"
+          v-model="replyVisibility"
+          >
+          <option
+            value="all"
+            selected
+            >{{ $t('settings.reply_visibility_all') }}</option>
+          <option value="following">{{ $t('settings.reply_visibility_following') }}</option>
+          <option value="self">{{ $t('settings.reply_visibility_self') }}</option>
+        </select>
+        <i class="icon-down-open" />
+      </label>
+    </div>
+    <div>
+      <Checkbox v-model="hidePostStats">
+        {{ $t('settings.hide_post_stats') }} {{ $t('settings.instance_default', { value: hidePostStatsLocalizedValue }) }}
+      </Checkbox>
+    </div>
+    <div>
+      <Checkbox v-model="hideUserStats">
+        {{ $t('settings.hide_user_stats') }} {{ $t('settings.instance_default', { value: hideUserStatsLocalizedValue }) }}
+      </Checkbox>
+    </div>
+  </div>
+  <div class="setting-item">
+    <div>
+      <p>{{ $t('settings.filtering_explanation') }}</p>
+      <textarea
+        id="muteWords"
+        v-model="muteWordsString"
+        />
+    </div>
+    <div>
+      <Checkbox v-model="hideFilteredStatuses">
+        {{ $t('settings.hide_filtered_statuses') }} {{ $t('settings.instance_default', { value: hideFilteredStatusesLocalizedValue }) }}
+      </Checkbox>
+    </div>
+  </div>
+</div>
+</template>
+<script src="./filtering_tab.js"></script>
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
new file mode 100644
index 00000000..82bf6862
--- /dev/null
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -0,0 +1,32 @@
+import Checkbox from 'src/components/checkbox/checkbox.vue'
+import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
+
+import SharedComputedObject from './helpers/shared_computed_object.js'
+
+const GeneralTab = {
+  data () {
+    const instance = this.$store.state.instance
+    return {
+      loopSilentAvailable:
+      // Firefox
+      Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'mozHasAudio') ||
+      // Chrome-likes
+      Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'webkitAudioDecodedByteCount') ||
+      // Future spec, still not supported in Nightly 63 as of 08/2018
+      Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'audioTracks'),
+    }
+  },
+  components: {
+    Checkbox,
+    InterfaceLanguageSwitcher
+  },
+  computed: {
+    postFormats () {
+      return this.$store.state.instance.postFormats || []
+    },
+    instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel },
+    ...SharedComputedObject()
+  }
+}
+
+export default GeneralTab
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
new file mode 100644
index 00000000..0d2da07a
--- /dev/null
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -0,0 +1,272 @@
+<template>
+<div :label="$t('settings.general')">
+  <div class="setting-item">
+    <h2>{{ $t('settings.interface') }}</h2>
+    <ul class="setting-list">
+      <li>
+        <interface-language-switcher />
+      </li>
+      <li v-if="instanceSpecificPanelPresent">
+        <Checkbox v-model="hideISP">
+          {{ $t('settings.hide_isp') }}
+        </Checkbox>
+      </li>
+    </ul>
+  </div>
+  <div class="setting-item">
+    <h2>{{ $t('nav.timeline') }}</h2>
+    <ul class="setting-list">
+      <li>
+        <Checkbox v-model="hideMutedPosts">
+          {{ $t('settings.hide_muted_posts') }} {{ $t('settings.instance_default', { value: hideMutedPostsLocalizedValue }) }}
+        </Checkbox>
+      </li>
+      <li>
+        <Checkbox v-model="collapseMessageWithSubject">
+          {{ $t('settings.collapse_subject') }} {{ $t('settings.instance_default', { value: collapseMessageWithSubjectLocalizedValue }) }}
+        </Checkbox>
+      </li>
+      <li>
+        <Checkbox v-model="streaming">
+          {{ $t('settings.streaming') }}
+        </Checkbox>
+        <ul
+          class="setting-list suboptions"
+          :class="[{disabled: !streaming}]"
+          >
+          <li>
+            <Checkbox
+              v-model="pauseOnUnfocused"
+              :disabled="!streaming"
+              >
+              {{ $t('settings.pause_on_unfocused') }}
+            </Checkbox>
+          </li>
+        </ul>
+      </li>
+      <li>
+        <Checkbox v-model="useStreamingApi">
+          {{ $t('settings.useStreamingApi') }}
+          <br>
+          <small>
+            {{ $t('settings.useStreamingApiWarning') }}
+          </small>
+        </Checkbox>
+      </li>
+      <li>
+        <Checkbox v-model="autoLoad">
+          {{ $t('settings.autoload') }}
+        </Checkbox>
+      </li>
+      <li>
+        <Checkbox v-model="hoverPreview">
+          {{ $t('settings.reply_link_preview') }}
+        </Checkbox>
+      </li>
+      <li>
+        <Checkbox v-model="emojiReactionsOnTimeline">
+          {{ $t('settings.emoji_reactions_on_timeline') }}
+        </Checkbox>
+      </li>
+    </ul>
+  </div>
+
+  <div class="setting-item">
+    <h2>{{ $t('settings.composing') }}</h2>
+    <ul class="setting-list">
+      <li>
+        <Checkbox v-model="scopeCopy">
+          {{ $t('settings.scope_copy') }} {{ $t('settings.instance_default', { value: scopeCopyLocalizedValue }) }}
+        </Checkbox>
+      </li>
+      <li>
+        <Checkbox v-model="alwaysShowSubjectInput">
+          {{ $t('settings.subject_input_always_show') }} {{ $t('settings.instance_default', { value: alwaysShowSubjectInputLocalizedValue }) }}
+        </Checkbox>
+      </li>
+      <li>
+        <div>
+          {{ $t('settings.subject_line_behavior') }}
+          <label
+            for="subjectLineBehavior"
+            class="select"
+            >
+            <select
+              id="subjectLineBehavior"
+              v-model="subjectLineBehavior"
+              >
+              <option value="email">
+                {{ $t('settings.subject_line_email') }}
+                {{ subjectLineBehaviorDefaultValue == 'email' ? $t('settings.instance_default_simple') : '' }}
+              </option>
+              <option value="masto">
+                {{ $t('settings.subject_line_mastodon') }}
+                {{ subjectLineBehaviorDefaultValue == 'mastodon' ? $t('settings.instance_default_simple') : '' }}
+              </option>
+              <option value="noop">
+                {{ $t('settings.subject_line_noop') }}
+                {{ subjectLineBehaviorDefaultValue == 'noop' ? $t('settings.instance_default_simple') : '' }}
+              </option>
+            </select>
+            <i class="icon-down-open" />
+          </label>
+        </div>
+      </li>
+      <li v-if="postFormats.length > 0">
+        <div>
+          {{ $t('settings.post_status_content_type') }}
+          <label
+            for="postContentType"
+            class="select"
+            >
+            <select
+              id="postContentType"
+              v-model="postContentType"
+              >
+              <option
+                v-for="postFormat in postFormats"
+                :key="postFormat"
+                :value="postFormat"
+                >
+                {{ $t(`post_status.content_type["${postFormat}"]`) }}
+                {{ postContentTypeDefaultValue === postFormat ? $t('settings.instance_default_simple') : '' }}
+              </option>
+            </select>
+            <i class="icon-down-open" />
+          </label>
+        </div>
+      </li>
+      <li>
+        <Checkbox v-model="minimalScopesMode">
+          {{ $t('settings.minimal_scopes_mode') }} {{ $t('settings.instance_default', { value: minimalScopesModeLocalizedValue }) }}
+        </Checkbox>
+      </li>
+      <li>
+        <Checkbox v-model="autohideFloatingPostButton">
+          {{ $t('settings.autohide_floating_post_button') }}
+        </Checkbox>
+      </li>
+      <li>
+        <Checkbox v-model="padEmoji">
+          {{ $t('settings.pad_emoji') }}
+        </Checkbox>
+      </li>
+    </ul>
+  </div>
+
+  <div class="setting-item">
+      <h2>{{ $t('settings.attachments') }}</h2>
+      <ul class="setting-list">
+        <li>
+          <Checkbox v-model="hideAttachments">
+            {{ $t('settings.hide_attachments_in_tl') }}
+          </Checkbox>
+        </li>
+        <li>
+          <Checkbox v-model="hideAttachmentsInConv">
+            {{ $t('settings.hide_attachments_in_convo') }}
+          </Checkbox>
+        </li>
+        <li>
+          <label for="maxThumbnails">
+            {{ $t('settings.max_thumbnails') }}
+          </label>
+          <input
+            id="maxThumbnails"
+            v-model.number="maxThumbnails"
+            class="number-input"
+            type="number"
+            min="0"
+            step="1"
+            >
+        </li>
+        <li>
+          <Checkbox v-model="hideNsfw">
+            {{ $t('settings.nsfw_clickthrough') }}
+          </Checkbox>
+        </li>
+        <ul class="setting-list suboptions">
+          <li>
+            <Checkbox
+              v-model="preloadImage"
+              :disabled="!hideNsfw"
+              >
+              {{ $t('settings.preload_images') }}
+            </Checkbox>
+          </li>
+          <li>
+            <Checkbox
+              v-model="useOneClickNsfw"
+              :disabled="!hideNsfw"
+              >
+              {{ $t('settings.use_one_click_nsfw') }}
+            </Checkbox>
+          </li>
+        </ul>
+        <li>
+          <Checkbox v-model="stopGifs">
+            {{ $t('settings.stop_gifs') }}
+          </Checkbox>
+        </li>
+        <li>
+          <Checkbox v-model="loopVideo">
+            {{ $t('settings.loop_video') }}
+          </Checkbox>
+          <ul
+            class="setting-list suboptions"
+            :class="[{disabled: !streaming}]"
+            >
+            <li>
+              <Checkbox
+                v-model="loopVideoSilentOnly"
+                :disabled="!loopVideo || !loopSilentAvailable"
+                >
+                {{ $t('settings.loop_video_silent_only') }}
+              </Checkbox>
+              <div
+                v-if="!loopSilentAvailable"
+                class="unavailable"
+                >
+                <i class="icon-globe" />! {{ $t('settings.limited_availability') }}
+              </div>
+            </li>
+          </ul>
+        </li>
+        <li>
+          <Checkbox v-model="playVideosInModal">
+            {{ $t('settings.play_videos_in_modal') }}
+          </Checkbox>
+        </li>
+        <li>
+          <Checkbox v-model="useContainFit">
+            {{ $t('settings.use_contain_fit') }}
+          </Checkbox>
+        </li>
+      </ul>
+    </div>
+
+    <div class="setting-item">
+      <h2>{{ $t('settings.notifications') }}</h2>
+      <ul class="setting-list">
+        <li>
+          <Checkbox v-model="webPushNotifications">
+            {{ $t('settings.enable_web_push_notifications') }}
+          </Checkbox>
+        </li>
+      </ul>
+    </div>
+
+    <div class="setting-item">
+      <h2>{{ $t('settings.fun') }}</h2>
+      <ul class="setting-list">
+        <li>
+          <Checkbox v-model="greentext">
+            {{ $t('settings.greentext') }} {{ $t('settings.instance_default', { value: greentextLocalizedValue }) }}
+          </Checkbox>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script src="./general_tab.js"></script>
diff --git a/src/components/settings_modal/tabs/helpers/shared_computed_object.js b/src/components/settings_modal/tabs/helpers/shared_computed_object.js
new file mode 100644
index 00000000..61643e3b
--- /dev/null
+++ b/src/components/settings_modal/tabs/helpers/shared_computed_object.js
@@ -0,0 +1,69 @@
+import { filter, trim } from 'lodash'
+import { instanceDefaultProperties, defaultState as configDefaultState } from 'src/modules/config.js'
+
+const multiChoiceProperties = [
+  'postContentType',
+  'subjectLineBehavior'
+]
+
+const SharedComputedObject = () => ({
+  user () {
+    return this.$store.state.users.currentUser
+  },
+  // Getting localized values for instance-default properties
+  ...instanceDefaultProperties
+    .filter(key => multiChoiceProperties.includes(key))
+    .map(key => [
+      key + 'DefaultValue',
+      function () {
+        return this.$store.getters.instanceDefaultConfig[key]
+      }
+    ])
+    .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),
+  ...instanceDefaultProperties
+    .filter(key => !multiChoiceProperties.includes(key))
+    .map(key => [
+      key + 'LocalizedValue',
+      function () {
+        return this.$t('settings.values.' + this.$store.getters.instanceDefaultConfig[key])
+      }
+    ])
+    .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),
+  // Generating computed values for vuex properties
+  ...Object.keys(configDefaultState)
+    .map(key => [key, {
+      get () { return this.$store.getters.mergedConfig[key] },
+      set (value) {
+        this.$store.dispatch('setOption', { name: key, value })
+      }
+    }])
+    .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),
+  // Special cases (need to transform values or perform actions first)
+  muteWordsString: {
+    get () { return this.$store.getters.mergedConfig.muteWords.join('\n') },
+    set (value) {
+      this.$store.dispatch('setOption', {
+        name: 'muteWords',
+        value: filter(value.split('\n'), (word) => trim(word).length > 0)
+      })
+    }
+  },
+  useStreamingApi: {
+    get () { return this.$store.getters.mergedConfig.useStreamingApi },
+    set (value) {
+      const promise = value
+        ? this.$store.dispatch('enableMastoSockets')
+        : this.$store.dispatch('disableMastoSockets')
+
+      promise.then(() => {
+        this.$store.dispatch('setOption', { name: 'useStreamingApi', value })
+      }).catch((e) => {
+        console.error('Failed starting MastoAPI Streaming socket', e)
+        this.$store.dispatch('disableMastoSockets')
+        this.$store.dispatch('setOption', { name: 'useStreamingApi', value: false })
+      })
+    }
+  }
+})
+
+export default SharedComputedObject
diff --git a/src/components/settings_modal/tabs/mutes_and_blocks.js b/src/components/settings_modal/tabs/mutes_and_blocks.js
deleted file mode 100644
index 51895ddc..00000000
--- a/src/components/settings_modal/tabs/mutes_and_blocks.js
+++ /dev/null
@@ -1,124 +0,0 @@
-import get from 'lodash/get'
-import map from 'lodash/map'
-import reject from 'lodash/reject'
-import Autosuggest from '../../autosuggest/autosuggest.vue'
-import TabSwitcher from '../../tab_switcher/tab_switcher.js'
-import BlockCard from '../../block_card/block_card.vue'
-import MuteCard from '../../mute_card/mute_card.vue'
-import DomainMuteCard from '../../domain_mute_card/domain_mute_card.vue'
-import SelectableList from '../../selectable_list/selectable_list.vue'
-import ProgressButton from '../../progress_button/progress_button.vue'
-import withSubscription from '../../../hocs/with_subscription/with_subscription'
-import Checkbox from '../../checkbox/checkbox.vue'
-
-const BlockList = withSubscription({
-  fetch: (props, $store) => $store.dispatch('fetchBlocks'),
-  select: (props, $store) => get($store.state.users.currentUser, 'blockIds', []),
-  childPropName: 'items'
-})(SelectableList)
-
-const MuteList = withSubscription({
-  fetch: (props, $store) => $store.dispatch('fetchMutes'),
-  select: (props, $store) => get($store.state.users.currentUser, 'muteIds', []),
-  childPropName: 'items'
-})(SelectableList)
-
-const DomainMuteList = withSubscription({
-  fetch: (props, $store) => $store.dispatch('fetchDomainMutes'),
-  select: (props, $store) => get($store.state.users.currentUser, 'domainMutes', []),
-  childPropName: 'items'
-})(SelectableList)
-
-const MutesAndBlocks = {
-  data () {
-    return {
-      activeTab: 'profile',
-      newDomainToMute: ''
-    }
-  },
-  created () {
-    this.$store.dispatch('fetchTokens')
-  },
-  components: {
-    TabSwitcher,
-    BlockList,
-    MuteList,
-    DomainMuteList,
-    BlockCard,
-    MuteCard,
-    DomainMuteCard,
-    ProgressButton,
-    Autosuggest,
-    Checkbox
-  },
-  methods: {
-    importFollows (file) {
-      return this.$store.state.api.backendInteractor.importFollows({ file })
-        .then((status) => {
-          if (!status) {
-            throw new Error('failed')
-          }
-        })
-    },
-    importBlocks (file) {
-      return this.$store.state.api.backendInteractor.importBlocks({ file })
-        .then((status) => {
-          if (!status) {
-            throw new Error('failed')
-          }
-        })
-    },
-    generateExportableUsersContent (users) {
-      // Get addresses
-      return users.map((user) => {
-        // check is it's a local user
-        if (user && user.is_local) {
-          // append the instance address
-          // eslint-disable-next-line no-undef
-          return user.screen_name + '@' + location.hostname
-        }
-        return user.screen_name
-      }).join('\n')
-    },
-    activateTab (tabName) {
-      this.activeTab = tabName
-    },
-    filterUnblockedUsers (userIds) {
-      return reject(userIds, (userId) => {
-        const user = this.$store.getters.findUser(userId)
-        return !user || user.statusnet_blocking || user.id === this.$store.state.users.currentUser.id
-      })
-    },
-    filterUnMutedUsers (userIds) {
-      return reject(userIds, (userId) => {
-        const user = this.$store.getters.findUser(userId)
-        return !user || user.muted || user.id === this.$store.state.users.currentUser.id
-      })
-    },
-    queryUserIds (query) {
-      return this.$store.dispatch('searchUsers', query)
-        .then((users) => map(users, 'id'))
-    },
-    blockUsers (ids) {
-      return this.$store.dispatch('blockUsers', ids)
-    },
-    unblockUsers (ids) {
-      return this.$store.dispatch('unblockUsers', ids)
-    },
-    muteUsers (ids) {
-      return this.$store.dispatch('muteUsers', ids)
-    },
-    unmuteUsers (ids) {
-      return this.$store.dispatch('unmuteUsers', ids)
-    },
-    unmuteDomains (domains) {
-      return this.$store.dispatch('unmuteDomains', domains)
-    },
-    muteDomain () {
-      return this.$store.dispatch('muteDomain', this.newDomainToMute)
-        .then(() => { this.newDomainToMute = '' })
-    }
-  }
-}
-
-export default MutesAndBlocks
diff --git a/src/components/settings_modal/tabs/mutes_and_blocks.vue b/src/components/settings_modal/tabs/mutes_and_blocks.vue
deleted file mode 100644
index 3aff47a0..00000000
--- a/src/components/settings_modal/tabs/mutes_and_blocks.vue
+++ /dev/null
@@ -1,173 +0,0 @@
-<template>
-  <tab-switcher>
-    <div :label="$t('settings.blocks_tab')">
-      <div class="profile-edit-usersearch-wrapper">
-        <Autosuggest
-          :filter="filterUnblockedUsers"
-          :query="queryUserIds"
-          :placeholder="$t('settings.search_user_to_block')"
-          >
-          <BlockCard
-            slot-scope="row"
-            :user-id="row.item"
-            />
-        </Autosuggest>
-      </div>
-      <BlockList
-        :refresh="true"
-        :get-key="identity"
-        >
-        <template
-          slot="header"
-          slot-scope="{selected}"
-          >
-          <div class="profile-edit-bulk-actions">
-            <ProgressButton
-              v-if="selected.length > 0"
-              class="btn btn-default"
-              :click="() => blockUsers(selected)"
-              >
-              {{ $t('user_card.block') }}
-              <template slot="progress">
-                {{ $t('user_card.block_progress') }}
-              </template>
-            </ProgressButton>
-            <ProgressButton
-              v-if="selected.length > 0"
-              class="btn btn-default"
-              :click="() => unblockUsers(selected)"
-              >
-              {{ $t('user_card.unblock') }}
-              <template slot="progress">
-                {{ $t('user_card.unblock_progress') }}
-              </template>
-            </ProgressButton>
-          </div>
-        </template>
-        <template
-          slot="item"
-          slot-scope="{item}"
-          >
-          <BlockCard :user-id="item" />
-        </template>
-        <template slot="empty">
-          {{ $t('settings.no_blocks') }}
-        </template>
-      </BlockList>
-    </div>
-
-    <div :label="$t('settings.mutes_tab')">
-      <tab-switcher>
-        <div label="Users">
-          <div class="profile-edit-usersearch-wrapper">
-            <Autosuggest
-              :filter="filterUnMutedUsers"
-              :query="queryUserIds"
-              :placeholder="$t('settings.search_user_to_mute')"
-              >
-              <MuteCard
-                slot-scope="row"
-                :user-id="row.item"
-                />
-            </Autosuggest>
-          </div>
-          <MuteList
-            :refresh="true"
-            :get-key="identity"
-            >
-            <template
-              slot="header"
-              slot-scope="{selected}"
-              >
-              <div class="profile-edit-bulk-actions">
-                <ProgressButton
-                  v-if="selected.length > 0"
-                  class="btn btn-default"
-                  :click="() => muteUsers(selected)"
-                  >
-                  {{ $t('user_card.mute') }}
-                  <template slot="progress">
-                    {{ $t('user_card.mute_progress') }}
-                  </template>
-                </ProgressButton>
-                <ProgressButton
-                  v-if="selected.length > 0"
-                  class="btn btn-default"
-                  :click="() => unmuteUsers(selected)"
-                  >
-                  {{ $t('user_card.unmute') }}
-                  <template slot="progress">
-                    {{ $t('user_card.unmute_progress') }}
-                  </template>
-                </ProgressButton>
-              </div>
-            </template>
-            <template
-              slot="item"
-              slot-scope="{item}"
-              >
-              <MuteCard :user-id="item" />
-            </template>
-            <template slot="empty">
-              {{ $t('settings.no_mutes') }}
-            </template>
-          </MuteList>
-        </div>
-
-        <div :label="$t('settings.domain_mutes')">
-          <div class="profile-edit-domain-mute-form">
-            <input
-              v-model="newDomainToMute"
-              :placeholder="$t('settings.type_domains_to_mute')"
-              type="text"
-              @keyup.enter="muteDomain"
-              >
-            <ProgressButton
-              class="btn btn-default"
-              :click="muteDomain"
-              >
-              {{ $t('domain_mute_card.mute') }}
-              <template slot="progress">
-                {{ $t('domain_mute_card.mute_progress') }}
-              </template>
-            </ProgressButton>
-          </div>
-          <DomainMuteList
-            :refresh="true"
-            :get-key="identity"
-            >
-            <template
-              slot="header"
-              slot-scope="{selected}"
-              >
-              <div class="profile-edit-bulk-actions">
-                <ProgressButton
-                  v-if="selected.length > 0"
-                  class="btn btn-default"
-                  :click="() => unmuteDomains(selected)"
-                  >
-                  {{ $t('domain_mute_card.unmute') }}
-                  <template slot="progress">
-                    {{ $t('domain_mute_card.unmute_progress') }}
-                  </template>
-                </ProgressButton>
-              </div>
-            </template>
-            <template
-              slot="item"
-              slot-scope="{item}"
-              >
-              <DomainMuteCard :domain="item" />
-            </template>
-            <template slot="empty">
-              {{ $t('settings.no_mutes') }}
-            </template>
-          </DomainMuteList>
-        </div>
-      </tab-switcher>
-    </div>
-  </tab-switcher>
-</template>
-
-<script src="./mutes_and_blocks.js"></script>
-<!-- <style lang="scss" src="./profile.scss"></style> -->
diff --git a/src/components/settings_modal/tabs/mutes_and_blocks_tab.js b/src/components/settings_modal/tabs/mutes_and_blocks_tab.js
new file mode 100644
index 00000000..3f6b7205
--- /dev/null
+++ b/src/components/settings_modal/tabs/mutes_and_blocks_tab.js
@@ -0,0 +1,124 @@
+import get from 'lodash/get'
+import map from 'lodash/map'
+import reject from 'lodash/reject'
+import Autosuggest from 'src/components/autosuggest/autosuggest.vue'
+import TabSwitcher from 'src/components/tab_switcher/tab_switcher.js'
+import BlockCard from 'src/components/block_card/block_card.vue'
+import MuteCard from 'src/components/mute_card/mute_card.vue'
+import DomainMuteCard from 'src/components/domain_mute_card/domain_mute_card.vue'
+import SelectableList from 'src/components/selectable_list/selectable_list.vue'
+import ProgressButton from 'src/components/progress_button/progress_button.vue'
+import withSubscription from 'src/components/../hocs/with_subscription/with_subscription'
+import Checkbox from 'src/components/checkbox/checkbox.vue'
+
+const BlockList = withSubscription({
+  fetch: (props, $store) => $store.dispatch('fetchBlocks'),
+  select: (props, $store) => get($store.state.users.currentUser, 'blockIds', []),
+  childPropName: 'items'
+})(SelectableList)
+
+const MuteList = withSubscription({
+  fetch: (props, $store) => $store.dispatch('fetchMutes'),
+  select: (props, $store) => get($store.state.users.currentUser, 'muteIds', []),
+  childPropName: 'items'
+})(SelectableList)
+
+const DomainMuteList = withSubscription({
+  fetch: (props, $store) => $store.dispatch('fetchDomainMutes'),
+  select: (props, $store) => get($store.state.users.currentUser, 'domainMutes', []),
+  childPropName: 'items'
+})(SelectableList)
+
+const MutesAndBlocks = {
+  data () {
+    return {
+      activeTab: 'profile',
+      newDomainToMute: ''
+    }
+  },
+  created () {
+    this.$store.dispatch('fetchTokens')
+  },
+  components: {
+    TabSwitcher,
+    BlockList,
+    MuteList,
+    DomainMuteList,
+    BlockCard,
+    MuteCard,
+    DomainMuteCard,
+    ProgressButton,
+    Autosuggest,
+    Checkbox
+  },
+  methods: {
+    importFollows (file) {
+      return this.$store.state.api.backendInteractor.importFollows({ file })
+        .then((status) => {
+          if (!status) {
+            throw new Error('failed')
+          }
+        })
+    },
+    importBlocks (file) {
+      return this.$store.state.api.backendInteractor.importBlocks({ file })
+        .then((status) => {
+          if (!status) {
+            throw new Error('failed')
+          }
+        })
+    },
+    generateExportableUsersContent (users) {
+      // Get addresses
+      return users.map((user) => {
+        // check is it's a local user
+        if (user && user.is_local) {
+          // append the instance address
+          // eslint-disable-next-line no-undef
+          return user.screen_name + '@' + location.hostname
+        }
+        return user.screen_name
+      }).join('\n')
+    },
+    activateTab (tabName) {
+      this.activeTab = tabName
+    },
+    filterUnblockedUsers (userIds) {
+      return reject(userIds, (userId) => {
+        const user = this.$store.getters.findUser(userId)
+        return !user || user.statusnet_blocking || user.id === this.$store.state.users.currentUser.id
+      })
+    },
+    filterUnMutedUsers (userIds) {
+      return reject(userIds, (userId) => {
+        const user = this.$store.getters.findUser(userId)
+        return !user || user.muted || user.id === this.$store.state.users.currentUser.id
+      })
+    },
+    queryUserIds (query) {
+      return this.$store.dispatch('searchUsers', query)
+        .then((users) => map(users, 'id'))
+    },
+    blockUsers (ids) {
+      return this.$store.dispatch('blockUsers', ids)
+    },
+    unblockUsers (ids) {
+      return this.$store.dispatch('unblockUsers', ids)
+    },
+    muteUsers (ids) {
+      return this.$store.dispatch('muteUsers', ids)
+    },
+    unmuteUsers (ids) {
+      return this.$store.dispatch('unmuteUsers', ids)
+    },
+    unmuteDomains (domains) {
+      return this.$store.dispatch('unmuteDomains', domains)
+    },
+    muteDomain () {
+      return this.$store.dispatch('muteDomain', this.newDomainToMute)
+        .then(() => { this.newDomainToMute = '' })
+    }
+  }
+}
+
+export default MutesAndBlocks
diff --git a/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue b/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue
new file mode 100644
index 00000000..7fce7b78
--- /dev/null
+++ b/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue
@@ -0,0 +1,173 @@
+<template>
+  <tab-switcher>
+    <div :label="$t('settings.blocks_tab')">
+      <div class="profile-edit-usersearch-wrapper">
+        <Autosuggest
+          :filter="filterUnblockedUsers"
+          :query="queryUserIds"
+          :placeholder="$t('settings.search_user_to_block')"
+          >
+          <BlockCard
+            slot-scope="row"
+            :user-id="row.item"
+            />
+        </Autosuggest>
+      </div>
+      <BlockList
+        :refresh="true"
+        :get-key="i => i"
+        >
+        <template
+          slot="header"
+          slot-scope="{selected}"
+          >
+          <div class="profile-edit-bulk-actions">
+            <ProgressButton
+              v-if="selected.length > 0"
+              class="btn btn-default"
+              :click="() => blockUsers(selected)"
+              >
+              {{ $t('user_card.block') }}
+              <template slot="progress">
+                {{ $t('user_card.block_progress') }}
+              </template>
+            </ProgressButton>
+            <ProgressButton
+              v-if="selected.length > 0"
+              class="btn btn-default"
+              :click="() => unblockUsers(selected)"
+              >
+              {{ $t('user_card.unblock') }}
+              <template slot="progress">
+                {{ $t('user_card.unblock_progress') }}
+              </template>
+            </ProgressButton>
+          </div>
+        </template>
+        <template
+          slot="item"
+          slot-scope="{item}"
+          >
+          <BlockCard :user-id="item" />
+        </template>
+        <template slot="empty">
+          {{ $t('settings.no_blocks') }}
+        </template>
+      </BlockList>
+    </div>
+
+    <div :label="$t('settings.mutes_tab')">
+      <tab-switcher>
+        <div label="Users">
+          <div class="profile-edit-usersearch-wrapper">
+            <Autosuggest
+              :filter="filterUnMutedUsers"
+              :query="queryUserIds"
+              :placeholder="$t('settings.search_user_to_mute')"
+              >
+              <MuteCard
+                slot-scope="row"
+                :user-id="row.item"
+                />
+            </Autosuggest>
+          </div>
+          <MuteList
+            :refresh="true"
+            :get-key="i => i"
+            >
+            <template
+              slot="header"
+              slot-scope="{selected}"
+              >
+              <div class="profile-edit-bulk-actions">
+                <ProgressButton
+                  v-if="selected.length > 0"
+                  class="btn btn-default"
+                  :click="() => muteUsers(selected)"
+                  >
+                  {{ $t('user_card.mute') }}
+                  <template slot="progress">
+                    {{ $t('user_card.mute_progress') }}
+                  </template>
+                </ProgressButton>
+                <ProgressButton
+                  v-if="selected.length > 0"
+                  class="btn btn-default"
+                  :click="() => unmuteUsers(selected)"
+                  >
+                  {{ $t('user_card.unmute') }}
+                  <template slot="progress">
+                    {{ $t('user_card.unmute_progress') }}
+                  </template>
+                </ProgressButton>
+              </div>
+            </template>
+            <template
+              slot="item"
+              slot-scope="{item}"
+              >
+              <MuteCard :user-id="item" />
+            </template>
+            <template slot="empty">
+              {{ $t('settings.no_mutes') }}
+            </template>
+          </MuteList>
+        </div>
+
+        <div :label="$t('settings.domain_mutes')">
+          <div class="profile-edit-domain-mute-form">
+            <input
+              v-model="newDomainToMute"
+              :placeholder="$t('settings.type_domains_to_mute')"
+              type="text"
+              @keyup.enter="muteDomain"
+              >
+            <ProgressButton
+              class="btn btn-default"
+              :click="muteDomain"
+              >
+              {{ $t('domain_mute_card.mute') }}
+              <template slot="progress">
+                {{ $t('domain_mute_card.mute_progress') }}
+              </template>
+            </ProgressButton>
+          </div>
+          <DomainMuteList
+            :refresh="true"
+            :get-key="i => i"
+            >
+            <template
+              slot="header"
+              slot-scope="{selected}"
+              >
+              <div class="profile-edit-bulk-actions">
+                <ProgressButton
+                  v-if="selected.length > 0"
+                  class="btn btn-default"
+                  :click="() => unmuteDomains(selected)"
+                  >
+                  {{ $t('domain_mute_card.unmute') }}
+                  <template slot="progress">
+                    {{ $t('domain_mute_card.unmute_progress') }}
+                  </template>
+                </ProgressButton>
+              </div>
+            </template>
+            <template
+              slot="item"
+              slot-scope="{item}"
+              >
+              <DomainMuteCard :domain="item" />
+            </template>
+            <template slot="empty">
+              {{ $t('settings.no_mutes') }}
+            </template>
+          </DomainMuteList>
+        </div>
+      </tab-switcher>
+    </div>
+  </tab-switcher>
+</template>
+
+<script src="./mutes_and_blocks_tab.js"></script>
+<!-- <style lang="scss" src="./profile.scss"></style> -->
diff --git a/src/components/settings_modal/tabs/notifications.js b/src/components/settings_modal/tabs/notifications.js
deleted file mode 100644
index 0a870b3f..00000000
--- a/src/components/settings_modal/tabs/notifications.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import Checkbox from '../../checkbox/checkbox.vue'
-
-const Notifications = {
-  data () {
-    return {
-      activeTab: 'profile',
-      notificationSettings: this.$store.state.users.currentUser.notification_settings,
-      newDomainToMute: ''
-    }
-  },
-  components: {
-    Checkbox
-  },
-  computed: {
-    user () {
-      return this.$store.state.users.currentUser
-    }
-  },
-  methods: {
-    updateNotificationSettings () {
-      this.$store.state.api.backendInteractor
-        .updateNotificationSettings({ settings: this.notificationSettings })
-    }
-  }
-}
-
-export default Notifications
diff --git a/src/components/settings_modal/tabs/notifications.vue b/src/components/settings_modal/tabs/notifications.vue
deleted file mode 100644
index f9a7c17b..00000000
--- a/src/components/settings_modal/tabs/notifications.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-<div :label="$t('settings.notifications')">
-  <div class="setting-item">
-    <div class="select-multiple">
-      <span class="label">{{ $t('settings.notification_setting') }}</span>
-      <ul class="option-list">
-        <li>
-          <Checkbox v-model="notificationSettings.follows">
-            {{ $t('settings.notification_setting_follows') }}
-          </Checkbox>
-        </li>
-        <li>
-          <Checkbox v-model="notificationSettings.followers">
-            {{ $t('settings.notification_setting_followers') }}
-          </Checkbox>
-        </li>
-        <li>
-          <Checkbox v-model="notificationSettings.non_follows">
-            {{ $t('settings.notification_setting_non_follows') }}
-          </Checkbox>
-        </li>
-        <li>
-          <Checkbox v-model="notificationSettings.non_followers">
-            {{ $t('settings.notification_setting_non_followers') }}
-          </Checkbox>
-        </li>
-      </ul>
-    </div>
-    <p>{{ $t('settings.notification_mutes') }}</p>
-    <p>{{ $t('settings.notification_blocks') }}</p>
-    <button
-      class="btn btn-default"
-      @click="updateNotificationSettings"
-      >
-      {{ $t('general.submit') }}
-    </button>
-  </div>
-</div>
-</template>
-
-<script src="./notifications.js"></script>
-<!-- <style lang="scss" src="./profile.scss"></style> -->
diff --git a/src/components/settings_modal/tabs/notifications_tab.js b/src/components/settings_modal/tabs/notifications_tab.js
new file mode 100644
index 00000000..3e44c95d
--- /dev/null
+++ b/src/components/settings_modal/tabs/notifications_tab.js
@@ -0,0 +1,27 @@
+import Checkbox from 'src/components/checkbox/checkbox.vue'
+
+const NotificationsTab = {
+  data () {
+    return {
+      activeTab: 'profile',
+      notificationSettings: this.$store.state.users.currentUser.notification_settings,
+      newDomainToMute: ''
+    }
+  },
+  components: {
+    Checkbox
+  },
+  computed: {
+    user () {
+      return this.$store.state.users.currentUser
+    }
+  },
+  methods: {
+    updateNotificationSettings () {
+      this.$store.state.api.backendInteractor
+        .updateNotificationSettings({ settings: this.notificationSettings })
+    }
+  }
+}
+
+export default NotificationsTab
diff --git a/src/components/settings_modal/tabs/notifications_tab.vue b/src/components/settings_modal/tabs/notifications_tab.vue
new file mode 100644
index 00000000..ab33a6a5
--- /dev/null
+++ b/src/components/settings_modal/tabs/notifications_tab.vue
@@ -0,0 +1,42 @@
+<template>
+<div :label="$t('settings.notifications')">
+  <div class="setting-item">
+    <div class="select-multiple">
+      <span class="label">{{ $t('settings.notification_setting') }}</span>
+      <ul class="option-list">
+        <li>
+          <Checkbox v-model="notificationSettings.follows">
+            {{ $t('settings.notification_setting_follows') }}
+          </Checkbox>
+        </li>
+        <li>
+          <Checkbox v-model="notificationSettings.followers">
+            {{ $t('settings.notification_setting_followers') }}
+          </Checkbox>
+        </li>
+        <li>
+          <Checkbox v-model="notificationSettings.non_follows">
+            {{ $t('settings.notification_setting_non_follows') }}
+          </Checkbox>
+        </li>
+        <li>
+          <Checkbox v-model="notificationSettings.non_followers">
+            {{ $t('settings.notification_setting_non_followers') }}
+          </Checkbox>
+        </li>
+      </ul>
+    </div>
+    <p>{{ $t('settings.notification_mutes') }}</p>
+    <p>{{ $t('settings.notification_blocks') }}</p>
+    <button
+      class="btn btn-default"
+      @click="updateNotificationSettings"
+      >
+      {{ $t('general.submit') }}
+    </button>
+  </div>
+</div>
+</template>
+
+<script src="./notifications_tab.js"></script>
+<!-- <style lang="scss" src="./profile.scss"></style> -->
diff --git a/src/components/settings_modal/tabs/profile.js b/src/components/settings_modal/tabs/profile.js
deleted file mode 100644
index 18c44024..00000000
--- a/src/components/settings_modal/tabs/profile.js
+++ /dev/null
@@ -1,179 +0,0 @@
-import unescape from 'lodash/unescape'
-import ImageCropper from '../../image_cropper/image_cropper.vue'
-import ScopeSelector from '../../scope_selector/scope_selector.vue'
-import fileSizeFormatService from '../../../services/file_size_format/file_size_format.js'
-import ProgressButton from '../../progress_button/progress_button.vue'
-import EmojiInput from '../../emoji_input/emoji_input.vue'
-import suggestor from '../../emoji_input/suggestor.js'
-import Autosuggest from '../../autosuggest/autosuggest.vue'
-import Checkbox from '../../checkbox/checkbox.vue'
-
-const ProfileTab = {
-  data () {
-    return {
-      newName: this.$store.state.users.currentUser.name,
-      newBio: unescape(this.$store.state.users.currentUser.description),
-      newLocked: this.$store.state.users.currentUser.locked,
-      newNoRichText: this.$store.state.users.currentUser.no_rich_text,
-      newDefaultScope: this.$store.state.users.currentUser.default_scope,
-      hideFollows: this.$store.state.users.currentUser.hide_follows,
-      hideFollowers: this.$store.state.users.currentUser.hide_followers,
-      hideFollowsCount: this.$store.state.users.currentUser.hide_follows_count,
-      hideFollowersCount: this.$store.state.users.currentUser.hide_followers_count,
-      showRole: this.$store.state.users.currentUser.show_role,
-      role: this.$store.state.users.currentUser.role,
-      discoverable: this.$store.state.users.currentUser.discoverable,
-      allowFollowingMove: this.$store.state.users.currentUser.allow_following_move,
-      pickAvatarBtnVisible: true,
-      bannerUploading: false,
-      backgroundUploading: false,
-      banner: null,
-      bannerPreview: null,
-      background: null,
-      backgroundPreview: null,
-      bannerUploadError: null,
-      backgroundUploadError: null,
-    }
-  },
-  components: {
-    ScopeSelector,
-    ImageCropper,
-    EmojiInput,
-    Autosuggest,
-    ProgressButton,
-    Checkbox
-  },
-  computed: {
-    user () {
-      return this.$store.state.users.currentUser
-    },
-    emojiUserSuggestor () {
-      return suggestor({
-        emoji: [
-          ...this.$store.state.instance.emoji,
-          ...this.$store.state.instance.customEmoji
-        ],
-        users: this.$store.state.users.users,
-        updateUsersList: (input) => this.$store.dispatch('searchUsers', input)
-      })
-    },
-    emojiSuggestor () {
-      return suggestor({ emoji: [
-        ...this.$store.state.instance.emoji,
-        ...this.$store.state.instance.customEmoji
-      ] })
-    }
-  },
-  methods: {
-    updateProfile () {
-      this.$store.state.api.backendInteractor
-        .updateProfile({
-          params: {
-            note: this.newBio,
-            locked: this.newLocked,
-            // Backend notation.
-            /* eslint-disable camelcase */
-            display_name: this.newName,
-            default_scope: this.newDefaultScope,
-            no_rich_text: this.newNoRichText,
-            hide_follows: this.hideFollows,
-            hide_followers: this.hideFollowers,
-            discoverable: this.discoverable,
-            allow_following_move: this.allowFollowingMove,
-            hide_follows_count: this.hideFollowsCount,
-            hide_followers_count: this.hideFollowersCount,
-            show_role: this.showRole
-            /* eslint-enable camelcase */
-          } }).then((user) => {
-          this.$store.commit('addNewUsers', [user])
-          this.$store.commit('setCurrentUser', user)
-        })
-    },
-    changeVis (visibility) {
-      this.newDefaultScope = visibility
-    },
-    uploadFile (slot, e) {
-      const file = e.target.files[0]
-      if (!file) { return }
-      if (file.size > this.$store.state.instance[slot + 'limit']) {
-        const filesize = fileSizeFormatService.fileSizeFormat(file.size)
-        const allowedsize = fileSizeFormatService.fileSizeFormat(this.$store.state.instance[slot + 'limit'])
-        this[slot + 'UploadError'] = [
-          this.$t('upload.error.base'),
-          this.$t(
-            'upload.error.file_too_big',
-            {
-              filesize: filesize.num,
-              filesizeunit: filesize.unit,
-              allowedsize: allowedsize.num,
-              allowedsizeunit: allowedsize.unit
-            }
-          )
-        ].join(' ')
-        return
-      }
-      // eslint-disable-next-line no-undef
-      const reader = new FileReader()
-      reader.onload = ({ target }) => {
-        const img = target.result
-        this[slot + 'Preview'] = img
-        this[slot] = file
-      }
-      reader.readAsDataURL(file)
-    },
-    submitAvatar (cropper, file) {
-      const that = this
-      return new Promise((resolve, reject) => {
-        function updateAvatar (avatar) {
-          that.$store.state.api.backendInteractor.updateAvatar({ avatar })
-            .then((user) => {
-              that.$store.commit('addNewUsers', [user])
-              that.$store.commit('setCurrentUser', user)
-              resolve()
-            })
-            .catch((err) => {
-              reject(new Error(that.$t('upload.error.base') + ' ' + err.message))
-            })
-        }
-
-        if (cropper) {
-          cropper.getCroppedCanvas().toBlob(updateAvatar, file.type)
-        } else {
-          updateAvatar(file)
-        }
-      })
-    },
-    submitBanner () {
-      if (!this.bannerPreview) { return }
-
-      this.bannerUploading = true
-      this.$store.state.api.backendInteractor.updateBanner({ banner: this.banner })
-        .then((user) => {
-          this.$store.commit('addNewUsers', [user])
-          this.$store.commit('setCurrentUser', user)
-          this.bannerPreview = null
-        })
-        .catch((err) => {
-          this.bannerUploadError = this.$t('upload.error.base') + ' ' + err.message
-        })
-        .then(() => { this.bannerUploading = false })
-    },
-    submitBg () {
-      if (!this.backgroundPreview) { return }
-      let background = this.background
-      this.backgroundUploading = true
-      this.$store.state.api.backendInteractor.updateBg({ background }).then((data) => {
-        if (!data.error) {
-          this.$store.commit('addNewUsers', [data])
-          this.$store.commit('setCurrentUser', data)
-          this.backgroundPreview = null
-        } else {
-          this.backgroundUploadError = this.$t('upload.error.base') + data.error
-        }
-        this.backgroundUploading = false
-      })
-    }
-  }
-}
-
-export default ProfileTab
diff --git a/src/components/settings_modal/tabs/profile.scss b/src/components/settings_modal/tabs/profile.scss
deleted file mode 100644
index 4aab81eb..00000000
--- a/src/components/settings_modal/tabs/profile.scss
+++ /dev/null
@@ -1,82 +0,0 @@
-@import '../../../_variables.scss';
-.profile-tab {
-  .bio {
-    margin: 0;
-  }
-
-  .visibility-tray {
-    padding-top: 5px;
-  }
-
-  input[type=file] {
-    padding: 5px;
-    height: auto;
-  }
-
-  .banner {
-    max-width: 100%;
-  }
-
-  .uploading {
-    font-size: 1.5em;
-    margin: 0.25em;
-  }
-
-  .name-changer {
-    width: 100%;
-  }
-
-  .bg {
-    max-width: 100%;
-  }
-
-  .current-avatar {
-    display: block;
-    width: 150px;
-    height: 150px;
-    border-radius: $fallback--avatarRadius;
-    border-radius: var(--avatarRadius, $fallback--avatarRadius);
-  }
-
-  .oauth-tokens {
-    width: 100%;
-
-    th {
-      text-align: left;
-    }
-
-    .actions {
-      text-align: right;
-    }
-  }
-
-  &-usersearch-wrapper {
-    padding: 1em;
-  }
-
-  &-bulk-actions {
-    text-align: right;
-    padding: 0 1em;
-    min-height: 28px;
-
-    button {
-      width: 10em;
-    }
-  }
-
-  &-domain-mute-form {
-    padding: 1em;
-    display: flex;
-    flex-direction: column;
-
-    button {
-      align-self: flex-end;
-      margin-top: 1em;
-      width: 10em;
-    }
-  }
-
-  .setting-subitem {
-    margin-left: 1.75em;
-  }
-}
diff --git a/src/components/settings_modal/tabs/profile.vue b/src/components/settings_modal/tabs/profile.vue
deleted file mode 100644
index 335fc12e..00000000
--- a/src/components/settings_modal/tabs/profile.vue
+++ /dev/null
@@ -1,213 +0,0 @@
-<template>
-<div class="profile-tab">
-  <div class="setting-item">
-    <h2>{{ $t('settings.name_bio') }}</h2>
-    <p>{{ $t('settings.name') }}</p>
-    <EmojiInput
-      v-model="newName"
-      enable-emoji-picker
-      :suggest="emojiSuggestor"
-      >
-      <input
-        id="username"
-        v-model="newName"
-        classname="name-changer"
-        >
-    </EmojiInput>
-    <p>{{ $t('settings.bio') }}</p>
-    <EmojiInput
-      v-model="newBio"
-      enable-emoji-picker
-      :suggest="emojiUserSuggestor"
-      >
-      <textarea
-        v-model="newBio"
-        classname="bio"
-        />
-    </EmojiInput>
-    <p>
-      <Checkbox v-model="newLocked">
-        {{ $t('settings.lock_account_description') }}
-      </Checkbox>
-    </p>
-    <div>
-      <label for="default-vis">{{ $t('settings.default_vis') }}</label>
-      <div
-        id="default-vis"
-        class="visibility-tray"
-        >
-        <scope-selector
-          :show-all="true"
-          :user-default="newDefaultScope"
-          :initial-scope="newDefaultScope"
-          :on-scope-change="changeVis"
-          />
-      </div>
-    </div>
-    <p>
-      <Checkbox v-model="newNoRichText">
-        {{ $t('settings.no_rich_text_description') }}
-      </Checkbox>
-    </p>
-    <p>
-      <Checkbox v-model="hideFollows">
-        {{ $t('settings.hide_follows_description') }}
-      </Checkbox>
-    </p>
-    <p class="setting-subitem">
-      <Checkbox
-        v-model="hideFollowsCount"
-        :disabled="!hideFollows"
-        >
-        {{ $t('settings.hide_follows_count_description') }}
-      </Checkbox>
-    </p>
-    <p>
-      <Checkbox v-model="hideFollowers">
-        {{ $t('settings.hide_followers_description') }}
-      </Checkbox>
-    </p>
-    <p class="setting-subitem">
-      <Checkbox
-        v-model="hideFollowersCount"
-        :disabled="!hideFollowers"
-        >
-        {{ $t('settings.hide_followers_count_description') }}
-      </Checkbox>
-    </p>
-    <p>
-      <Checkbox v-model="allowFollowingMove">
-        {{ $t('settings.allow_following_move') }}
-      </Checkbox>
-    </p>
-    <p v-if="role === 'admin' || role === 'moderator'">
-      <Checkbox v-model="showRole">
-        <template v-if="role === 'admin'">
-          {{ $t('settings.show_admin_badge') }}
-        </template>
-        <template v-if="role === 'moderator'">
-          {{ $t('settings.show_moderator_badge') }}
-        </template>
-      </Checkbox>
-    </p>
-    <p>
-      <Checkbox v-model="discoverable">
-        {{ $t('settings.discoverable') }}
-      </Checkbox>
-    </p>
-    <button
-      :disabled="newName && newName.length === 0"
-      class="btn btn-default"
-      @click="updateProfile"
-      >
-      {{ $t('general.submit') }}
-    </button>
-  </div>
-  <div class="setting-item">
-    <h2>{{ $t('settings.avatar') }}</h2>
-    <p class="visibility-notice">
-      {{ $t('settings.avatar_size_instruction') }}
-    </p>
-    <p>{{ $t('settings.current_avatar') }}</p>
-    <img
-      :src="user.profile_image_url_original"
-      class="current-avatar"
-      >
-    <p>{{ $t('settings.set_new_avatar') }}</p>
-    <button
-      v-show="pickAvatarBtnVisible"
-      id="pick-avatar"
-      class="btn"
-      type="button"
-      >
-      {{ $t('settings.upload_a_photo') }}
-    </button>
-    <image-cropper
-      trigger="#pick-avatar"
-      :submit-handler="submitAvatar"
-      @open="pickAvatarBtnVisible=false"
-      @close="pickAvatarBtnVisible=true"
-      />
-  </div>
-  <div class="setting-item">
-    <h2>{{ $t('settings.profile_banner') }}</h2>
-    <p>{{ $t('settings.current_profile_banner') }}</p>
-    <img
-      :src="user.cover_photo"
-      class="banner"
-      >
-    <p>{{ $t('settings.set_new_profile_banner') }}</p>
-    <img
-      v-if="bannerPreview"
-      class="banner"
-      :src="bannerPreview"
-      >
-    <div>
-      <input
-        type="file"
-        @change="uploadFile('banner', $event)"
-        >
-    </div>
-    <i
-      v-if="bannerUploading"
-      class=" icon-spin4 animate-spin uploading"
-      />
-    <button
-      v-else-if="bannerPreview"
-      class="btn btn-default"
-      @click="submitBanner"
-      >
-      {{ $t('general.submit') }}
-    </button>
-    <div
-      v-if="bannerUploadError"
-      class="alert error"
-      >
-      Error: {{ bannerUploadError }}
-      <i
-        class="button-icon icon-cancel"
-        @click="clearUploadError('banner')"
-        />
-    </div>
-  </div>
-  <div class="setting-item">
-    <h2>{{ $t('settings.profile_background') }}</h2>
-    <p>{{ $t('settings.set_new_profile_background') }}</p>
-    <img
-      v-if="backgroundPreview"
-      class="bg"
-      :src="backgroundPreview"
-      >
-    <div>
-      <input
-        type="file"
-        @change="uploadFile('background', $event)"
-        >
-    </div>
-    <i
-      v-if="backgroundUploading"
-      class=" icon-spin4 animate-spin uploading"
-      />
-    <button
-      v-else-if="backgroundPreview"
-      class="btn btn-default"
-      @click="submitBg"
-      >
-      {{ $t('general.submit') }}
-    </button>
-    <div
-      v-if="backgroundUploadError"
-      class="alert error"
-      >
-      Error: {{ backgroundUploadError }}
-      <i
-        class="button-icon icon-cancel"
-        @click="clearUploadError('background')"
-        />
-    </div>
-  </div>
-</div>
-</template>
-
-<script src="./profile.js"></script>
-<style lang="scss" src="./profile.scss"></style>
diff --git a/src/components/settings_modal/tabs/profile_tab.js b/src/components/settings_modal/tabs/profile_tab.js
new file mode 100644
index 00000000..949b480b
--- /dev/null
+++ b/src/components/settings_modal/tabs/profile_tab.js
@@ -0,0 +1,179 @@
+import unescape from 'lodash/unescape'
+import ImageCropper from 'src/components/image_cropper/image_cropper.vue'
+import ScopeSelector from 'src/components/scope_selector/scope_selector.vue'
+import fileSizeFormatService from 'src/components/../services/file_size_format/file_size_format.js'
+import ProgressButton from 'src/components/progress_button/progress_button.vue'
+import EmojiInput from 'src/components/emoji_input/emoji_input.vue'
+import suggestor from 'src/components/emoji_input/suggestor.js'
+import Autosuggest from 'src/components/autosuggest/autosuggest.vue'
+import Checkbox from 'src/components/checkbox/checkbox.vue'
+
+const ProfileTab = {
+  data () {
+    return {
+      newName: this.$store.state.users.currentUser.name,
+      newBio: unescape(this.$store.state.users.currentUser.description),
+      newLocked: this.$store.state.users.currentUser.locked,
+      newNoRichText: this.$store.state.users.currentUser.no_rich_text,
+      newDefaultScope: this.$store.state.users.currentUser.default_scope,
+      hideFollows: this.$store.state.users.currentUser.hide_follows,
+      hideFollowers: this.$store.state.users.currentUser.hide_followers,
+      hideFollowsCount: this.$store.state.users.currentUser.hide_follows_count,
+      hideFollowersCount: this.$store.state.users.currentUser.hide_followers_count,
+      showRole: this.$store.state.users.currentUser.show_role,
+      role: this.$store.state.users.currentUser.role,
+      discoverable: this.$store.state.users.currentUser.discoverable,
+      allowFollowingMove: this.$store.state.users.currentUser.allow_following_move,
+      pickAvatarBtnVisible: true,
+      bannerUploading: false,
+      backgroundUploading: false,
+      banner: null,
+      bannerPreview: null,
+      background: null,
+      backgroundPreview: null,
+      bannerUploadError: null,
+      backgroundUploadError: null,
+    }
+  },
+  components: {
+    ScopeSelector,
+    ImageCropper,
+    EmojiInput,
+    Autosuggest,
+    ProgressButton,
+    Checkbox
+  },
+  computed: {
+    user () {
+      return this.$store.state.users.currentUser
+    },
+    emojiUserSuggestor () {
+      return suggestor({
+        emoji: [
+          ...this.$store.state.instance.emoji,
+          ...this.$store.state.instance.customEmoji
+        ],
+        users: this.$store.state.users.users,
+        updateUsersList: (input) => this.$store.dispatch('searchUsers', input)
+      })
+    },
+    emojiSuggestor () {
+      return suggestor({ emoji: [
+        ...this.$store.state.instance.emoji,
+        ...this.$store.state.instance.customEmoji
+      ] })
+    }
+  },
+  methods: {
+    updateProfile () {
+      this.$store.state.api.backendInteractor
+        .updateProfile({
+          params: {
+            note: this.newBio,
+            locked: this.newLocked,
+            // Backend notation.
+            /* eslint-disable camelcase */
+            display_name: this.newName,
+            default_scope: this.newDefaultScope,
+            no_rich_text: this.newNoRichText,
+            hide_follows: this.hideFollows,
+            hide_followers: this.hideFollowers,
+            discoverable: this.discoverable,
+            allow_following_move: this.allowFollowingMove,
+            hide_follows_count: this.hideFollowsCount,
+            hide_followers_count: this.hideFollowersCount,
+            show_role: this.showRole
+            /* eslint-enable camelcase */
+          } }).then((user) => {
+          this.$store.commit('addNewUsers', [user])
+          this.$store.commit('setCurrentUser', user)
+        })
+    },
+    changeVis (visibility) {
+      this.newDefaultScope = visibility
+    },
+    uploadFile (slot, e) {
+      const file = e.target.files[0]
+      if (!file) { return }
+      if (file.size > this.$store.state.instance[slot + 'limit']) {
+        const filesize = fileSizeFormatService.fileSizeFormat(file.size)
+        const allowedsize = fileSizeFormatService.fileSizeFormat(this.$store.state.instance[slot + 'limit'])
+        this[slot + 'UploadError'] = [
+          this.$t('upload.error.base'),
+          this.$t(
+            'upload.error.file_too_big',
+            {
+              filesize: filesize.num,
+              filesizeunit: filesize.unit,
+              allowedsize: allowedsize.num,
+              allowedsizeunit: allowedsize.unit
+            }
+          )
+        ].join(' ')
+        return
+      }
+      // eslint-disable-next-line no-undef
+      const reader = new FileReader()
+      reader.onload = ({ target }) => {
+        const img = target.result
+        this[slot + 'Preview'] = img
+        this[slot] = file
+      }
+      reader.readAsDataURL(file)
+    },
+    submitAvatar (cropper, file) {
+      const that = this
+      return new Promise((resolve, reject) => {
+        function updateAvatar (avatar) {
+          that.$store.state.api.backendInteractor.updateAvatar({ avatar })
+            .then((user) => {
+              that.$store.commit('addNewUsers', [user])
+              that.$store.commit('setCurrentUser', user)
+              resolve()
+            })
+            .catch((err) => {
+              reject(new Error(that.$t('upload.error.base') + ' ' + err.message))
+            })
+        }
+
+        if (cropper) {
+          cropper.getCroppedCanvas().toBlob(updateAvatar, file.type)
+        } else {
+          updateAvatar(file)
+        }
+      })
+    },
+    submitBanner () {
+      if (!this.bannerPreview) { return }
+
+      this.bannerUploading = true
+      this.$store.state.api.backendInteractor.updateBanner({ banner: this.banner })
+        .then((user) => {
+          this.$store.commit('addNewUsers', [user])
+          this.$store.commit('setCurrentUser', user)
+          this.bannerPreview = null
+        })
+        .catch((err) => {
+          this.bannerUploadError = this.$t('upload.error.base') + ' ' + err.message
+        })
+        .then(() => { this.bannerUploading = false })
+    },
+    submitBg () {
+      if (!this.backgroundPreview) { return }
+      let background = this.background
+      this.backgroundUploading = true
+      this.$store.state.api.backendInteractor.updateBg({ background }).then((data) => {
+        if (!data.error) {
+          this.$store.commit('addNewUsers', [data])
+          this.$store.commit('setCurrentUser', data)
+          this.backgroundPreview = null
+        } else {
+          this.backgroundUploadError = this.$t('upload.error.base') + data.error
+        }
+        this.backgroundUploading = false
+      })
+    }
+  }
+}
+
+export default ProfileTab
diff --git a/src/components/settings_modal/tabs/profile_tab.scss b/src/components/settings_modal/tabs/profile_tab.scss
new file mode 100644
index 00000000..4aab81eb
--- /dev/null
+++ b/src/components/settings_modal/tabs/profile_tab.scss
@@ -0,0 +1,82 @@
+@import '../../../_variables.scss';
+.profile-tab {
+  .bio {
+    margin: 0;
+  }
+
+  .visibility-tray {
+    padding-top: 5px;
+  }
+
+  input[type=file] {
+    padding: 5px;
+    height: auto;
+  }
+
+  .banner {
+    max-width: 100%;
+  }
+
+  .uploading {
+    font-size: 1.5em;
+    margin: 0.25em;
+  }
+
+  .name-changer {
+    width: 100%;
+  }
+
+  .bg {
+    max-width: 100%;
+  }
+
+  .current-avatar {
+    display: block;
+    width: 150px;
+    height: 150px;
+    border-radius: $fallback--avatarRadius;
+    border-radius: var(--avatarRadius, $fallback--avatarRadius);
+  }
+
+  .oauth-tokens {
+    width: 100%;
+
+    th {
+      text-align: left;
+    }
+
+    .actions {
+      text-align: right;
+    }
+  }
+
+  &-usersearch-wrapper {
+    padding: 1em;
+  }
+
+  &-bulk-actions {
+    text-align: right;
+    padding: 0 1em;
+    min-height: 28px;
+
+    button {
+      width: 10em;
+    }
+  }
+
+  &-domain-mute-form {
+    padding: 1em;
+    display: flex;
+    flex-direction: column;
+
+    button {
+      align-self: flex-end;
+      margin-top: 1em;
+      width: 10em;
+    }
+  }
+
+  .setting-subitem {
+    margin-left: 1.75em;
+  }
+}
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
new file mode 100644
index 00000000..9dd89b99
--- /dev/null
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -0,0 +1,213 @@
+<template>
+<div class="profile-tab">
+  <div class="setting-item">
+    <h2>{{ $t('settings.name_bio') }}</h2>
+    <p>{{ $t('settings.name') }}</p>
+    <EmojiInput
+      v-model="newName"
+      enable-emoji-picker
+      :suggest="emojiSuggestor"
+      >
+      <input
+        id="username"
+        v-model="newName"
+        classname="name-changer"
+        >
+    </EmojiInput>
+    <p>{{ $t('settings.bio') }}</p>
+    <EmojiInput
+      v-model="newBio"
+      enable-emoji-picker
+      :suggest="emojiUserSuggestor"
+      >
+      <textarea
+        v-model="newBio"
+        classname="bio"
+        />
+    </EmojiInput>
+    <p>
+      <Checkbox v-model="newLocked">
+        {{ $t('settings.lock_account_description') }}
+      </Checkbox>
+    </p>
+    <div>
+      <label for="default-vis">{{ $t('settings.default_vis') }}</label>
+      <div
+        id="default-vis"
+        class="visibility-tray"
+        >
+        <scope-selector
+          :show-all="true"
+          :user-default="newDefaultScope"
+          :initial-scope="newDefaultScope"
+          :on-scope-change="changeVis"
+          />
+      </div>
+    </div>
+    <p>
+      <Checkbox v-model="newNoRichText">
+        {{ $t('settings.no_rich_text_description') }}
+      </Checkbox>
+    </p>
+    <p>
+      <Checkbox v-model="hideFollows">
+        {{ $t('settings.hide_follows_description') }}
+      </Checkbox>
+    </p>
+    <p class="setting-subitem">
+      <Checkbox
+        v-model="hideFollowsCount"
+        :disabled="!hideFollows"
+        >
+        {{ $t('settings.hide_follows_count_description') }}
+      </Checkbox>
+    </p>
+    <p>
+      <Checkbox v-model="hideFollowers">
+        {{ $t('settings.hide_followers_description') }}
+      </Checkbox>
+    </p>
+    <p class="setting-subitem">
+      <Checkbox
+        v-model="hideFollowersCount"
+        :disabled="!hideFollowers"
+        >
+        {{ $t('settings.hide_followers_count_description') }}
+      </Checkbox>
+    </p>
+    <p>
+      <Checkbox v-model="allowFollowingMove">
+        {{ $t('settings.allow_following_move') }}
+      </Checkbox>
+    </p>
+    <p v-if="role === 'admin' || role === 'moderator'">
+      <Checkbox v-model="showRole">
+        <template v-if="role === 'admin'">
+          {{ $t('settings.show_admin_badge') }}
+        </template>
+        <template v-if="role === 'moderator'">
+          {{ $t('settings.show_moderator_badge') }}
+        </template>
+      </Checkbox>
+    </p>
+    <p>
+      <Checkbox v-model="discoverable">
+        {{ $t('settings.discoverable') }}
+      </Checkbox>
+    </p>
+    <button
+      :disabled="newName && newName.length === 0"
+      class="btn btn-default"
+      @click="updateProfile"
+      >
+      {{ $t('general.submit') }}
+    </button>
+  </div>
+  <div class="setting-item">
+    <h2>{{ $t('settings.avatar') }}</h2>
+    <p class="visibility-notice">
+      {{ $t('settings.avatar_size_instruction') }}
+    </p>
+    <p>{{ $t('settings.current_avatar') }}</p>
+    <img
+      :src="user.profile_image_url_original"
+      class="current-avatar"
+      >
+    <p>{{ $t('settings.set_new_avatar') }}</p>
+    <button
+      v-show="pickAvatarBtnVisible"
+      id="pick-avatar"
+      class="btn"
+      type="button"
+      >
+      {{ $t('settings.upload_a_photo') }}
+    </button>
+    <image-cropper
+      trigger="#pick-avatar"
+      :submit-handler="submitAvatar"
+      @open="pickAvatarBtnVisible=false"
+      @close="pickAvatarBtnVisible=true"
+      />
+  </div>
+  <div class="setting-item">
+    <h2>{{ $t('settings.profile_banner') }}</h2>
+    <p>{{ $t('settings.current_profile_banner') }}</p>
+    <img
+      :src="user.cover_photo"
+      class="banner"
+      >
+    <p>{{ $t('settings.set_new_profile_banner') }}</p>
+    <img
+      v-if="bannerPreview"
+      class="banner"
+      :src="bannerPreview"
+      >
+    <div>
+      <input
+        type="file"
+        @change="uploadFile('banner', $event)"
+        >
+    </div>
+    <i
+      v-if="bannerUploading"
+      class=" icon-spin4 animate-spin uploading"
+      />
+    <button
+      v-else-if="bannerPreview"
+      class="btn btn-default"
+      @click="submitBanner"
+      >
+      {{ $t('general.submit') }}
+    </button>
+    <div
+      v-if="bannerUploadError"
+      class="alert error"
+      >
+      Error: {{ bannerUploadError }}
+      <i
+        class="button-icon icon-cancel"
+        @click="clearUploadError('banner')"
+        />
+    </div>
+  </div>
+  <div class="setting-item">
+    <h2>{{ $t('settings.profile_background') }}</h2>
+    <p>{{ $t('settings.set_new_profile_background') }}</p>
+    <img
+      v-if="backgroundPreview"
+      class="bg"
+      :src="backgroundPreview"
+      >
+    <div>
+      <input
+        type="file"
+        @change="uploadFile('background', $event)"
+        >
+    </div>
+    <i
+      v-if="backgroundUploading"
+      class=" icon-spin4 animate-spin uploading"
+      />
+    <button
+      v-else-if="backgroundPreview"
+      class="btn btn-default"
+      @click="submitBg"
+      >
+      {{ $t('general.submit') }}
+    </button>
+    <div
+      v-if="backgroundUploadError"
+      class="alert error"
+      >
+      Error: {{ backgroundUploadError }}
+      <i
+        class="button-icon icon-cancel"
+        @click="clearUploadError('background')"
+        />
+    </div>
+  </div>
+</div>
+</template>
+
+<script src="./profile_tab.js"></script>
+<style lang="scss" src="./profile_tab.scss"></style>
diff --git a/src/components/settings_modal/tabs/security.js b/src/components/settings_modal/tabs/security.js
deleted file mode 100644
index cc791b7a..00000000
--- a/src/components/settings_modal/tabs/security.js
+++ /dev/null
@@ -1,106 +0,0 @@
-import ProgressButton from '../../progress_button/progress_button.vue'
-import Checkbox from '../../checkbox/checkbox.vue'
-import Mfa from '../../user_settings/mfa.vue'
-
-const Security = {
-  data () {
-    return {
-      newEmail: '',
-      changeEmailError: false,
-      changeEmailPassword: '',
-      changedEmail: false,
-      deletingAccount: false,
-      deleteAccountConfirmPasswordInput: '',
-      deleteAccountError: false,
-      changePasswordInputs: [ '', '', '' ],
-      changedPassword: false,
-      changePasswordError: false
-    }
-  },
-  created () {
-    this.$store.dispatch('fetchTokens')
-  },
-  components: {
-    ProgressButton,
-    Mfa,
-    Checkbox
-  },
-  computed: {
-    user () {
-      return this.$store.state.users.currentUser
-    },
-    pleromaBackend () {
-      return this.$store.state.instance.pleromaBackend
-    },
-    oauthTokens () {
-      return this.$store.state.oauthTokens.tokens.map(oauthToken => {
-        return {
-          id: oauthToken.id,
-          appName: oauthToken.app_name,
-          validUntil: new Date(oauthToken.valid_until).toLocaleDateString()
-        }
-      })
-    }
-  },
-  methods: {
-    confirmDelete () {
-      this.deletingAccount = true
-    },
-    deleteAccount () {
-      this.$store.state.api.backendInteractor.deleteAccount({ password: this.deleteAccountConfirmPasswordInput })
-        .then((res) => {
-          if (res.status === 'success') {
-            this.$store.dispatch('logout')
-            this.$router.push({ name: 'root' })
-          } else {
-            this.deleteAccountError = res.error
-          }
-        })
-    },
-    changePassword () {
-      const params = {
-        password: this.changePasswordInputs[0],
-        newPassword: this.changePasswordInputs[1],
-        newPasswordConfirmation: this.changePasswordInputs[2]
-      }
-      this.$store.state.api.backendInteractor.changePassword(params)
-        .then((res) => {
-          if (res.status === 'success') {
-            this.changedPassword = true
-            this.changePasswordError = false
-            this.logout()
-          } else {
-            this.changedPassword = false
-            this.changePasswordError = res.error
-          }
-        })
-    },
-    changeEmail () {
-      const params = {
-        email: this.newEmail,
-        password: this.changeEmailPassword
-      }
-      this.$store.state.api.backendInteractor.changeEmail(params)
-        .then((res) => {
-          if (res.status === 'success') {
-            this.changedEmail = true
-            this.changeEmailError = false
-          } else {
-            this.changedEmail = false
-            this.changeEmailError = res.error
-          }
-        })
-    },
-    logout () {
-      this.$store.dispatch('logout')
-      this.$router.replace('/')
-    },
-    revokeToken (id) {
-      if (window.confirm(`${this.$i18n.t('settings.revoke_token')}?`)) {
-        this.$store.dispatch('revokeToken', id)
-      }
-    }
-  }
-}
-
-export default Security
diff --git a/src/components/settings_modal/tabs/security.vue b/src/components/settings_modal/tabs/security.vue
deleted file mode 100644
index 603c9a04..00000000
--- a/src/components/settings_modal/tabs/security.vue
+++ /dev/null
@@ -1,143 +0,0 @@
-<template>
-<div :label="$t('settings.security_tab')">
-  <div class="setting-item">
-    <h2>{{ $t('settings.change_email') }}</h2>
-    <div>
-      <p>{{ $t('settings.new_email') }}</p>
-      <input
-        v-model="newEmail"
-        type="email"
-        autocomplete="email"
-        >
-    </div>
-    <div>
-      <p>{{ $t('settings.current_password') }}</p>
-      <input
-        v-model="changeEmailPassword"
-        type="password"
-        autocomplete="current-password"
-        >
-    </div>
-    <button
-      class="btn btn-default"
-      @click="changeEmail"
-      >
-      {{ $t('general.submit') }}
-    </button>
-    <p v-if="changedEmail">
-      {{ $t('settings.changed_email') }}
-    </p>
-    <template v-if="changeEmailError !== false">
-      <p>{{ $t('settings.change_email_error') }}</p>
-      <p>{{ changeEmailError }}</p>
-    </template>
-  </div>
-
-  <div class="setting-item">
-    <h2>{{ $t('settings.change_password') }}</h2>
-    <div>
-      <p>{{ $t('settings.current_password') }}</p>
-      <input
-        v-model="changePasswordInputs[0]"
-        type="password"
-        >
-    </div>
-    <div>
-      <p>{{ $t('settings.new_password') }}</p>
-      <input
-        v-model="changePasswordInputs[1]"
-        type="password"
-        >
-    </div>
-    <div>
-      <p>{{ $t('settings.confirm_new_password') }}</p>
-      <input
-        v-model="changePasswordInputs[2]"
-        type="password"
-        >
-    </div>
-    <button
-      class="btn btn-default"
-      @click="changePassword"
-      >
-      {{ $t('general.submit') }}
-    </button>
-    <p v-if="changedPassword">
-      {{ $t('settings.changed_password') }}
-    </p>
-    <p v-else-if="changePasswordError !== false">
-      {{ $t('settings.change_password_error') }}
-    </p>
-    <p v-if="changePasswordError">
-      {{ changePasswordError }}
-    </p>
-  </div>
-
-  <div class="setting-item">
-    <h2>{{ $t('settings.oauth_tokens') }}</h2>
-    <table class="oauth-tokens">
-      <thead>
-        <tr>
-          <th>{{ $t('settings.app_name') }}</th>
-          <th>{{ $t('settings.valid_until') }}</th>
-          <th />
-        </tr>
-      </thead>
-      <tbody>
-        <tr
-          v-for="oauthToken in oauthTokens"
-          :key="oauthToken.id"
-          >
-          <td>{{ oauthToken.appName }}</td>
-          <td>{{ oauthToken.validUntil }}</td>
-          <td class="actions">
-            <button
-              class="btn btn-default"
-              @click="revokeToken(oauthToken.id)"
-              >
-              {{ $t('settings.revoke_token') }}
-            </button>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-  <mfa />
-  <div class="setting-item">
-    <h2>{{ $t('settings.delete_account') }}</h2>
-    <p v-if="!deletingAccount">
-      {{ $t('settings.delete_account_description') }}
-    </p>
-    <div v-if="deletingAccount">
-      <p>{{ $t('settings.delete_account_instructions') }}</p>
-      <p>{{ $t('login.password') }}</p>
-      <input
-        v-model="deleteAccountConfirmPasswordInput"
-        type="password"
-        >
-      <button
-        class="btn btn-default"
-        @click="deleteAccount"
-        >
-        {{ $t('settings.delete_account') }}
-      </button>
-    </div>
-    <p v-if="deleteAccountError !== false">
-      {{ $t('settings.delete_account_error') }}
-    </p>
-    <p v-if="deleteAccountError">
-      {{ deleteAccountError }}
-    </p>
-    <button
-      v-if="!deletingAccount"
-      class="btn btn-default"
-      @click="confirmDelete"
-      >
-      {{ $t('general.submit') }}
-    </button>
-  </div>
-</div>
-</template>
-
-<script src="./security.js"></script>
-<!-- <style lang="scss" src="./profile.scss"></style> -->
diff --git a/src/components/settings_modal/tabs/security_tab/confirm.js b/src/components/settings_modal/tabs/security_tab/confirm.js
new file mode 100644
index 00000000..0f4ddfc9
--- /dev/null
+++ b/src/components/settings_modal/tabs/security_tab/confirm.js
@@ -0,0 +1,9 @@
+const Confirm = {
+  props: ['disabled'],
+  data: () => ({}),
+  methods: {
+    confirm () { this.$emit('confirm') },
+    cancel () { this.$emit('cancel') }
+  }
+}
+export default Confirm
diff --git a/src/components/settings_modal/tabs/security_tab/confirm.vue b/src/components/settings_modal/tabs/security_tab/confirm.vue
new file mode 100644
index 00000000..69b3811b
--- /dev/null
+++ b/src/components/settings_modal/tabs/security_tab/confirm.vue
@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <slot />
+    <button
+      class="btn btn-default"
+      :disabled="disabled"
+      @click="confirm"
+    >
+      {{ $t('general.confirm') }}
+    </button>
+    <button
+      class="btn btn-default"
+      :disabled="disabled"
+      @click="cancel"
+    >
+      {{ $t('general.cancel') }}
+    </button>
+  </div>
+</template>
+
+<script src="./confirm.js">
+</script>
diff --git a/src/components/settings_modal/tabs/security_tab/mfa.js b/src/components/settings_modal/tabs/security_tab/mfa.js
new file mode 100644
index 00000000..abf37062
--- /dev/null
+++ b/src/components/settings_modal/tabs/security_tab/mfa.js
@@ -0,0 +1,155 @@
+import RecoveryCodes from './mfa_backup_codes.vue'
+import TOTP from './mfa_totp.vue'
+import Confirm from './confirm.vue'
+import VueQrcode from '@chenfengyuan/vue-qrcode'
+import { mapState } from 'vuex'
+
+const Mfa = {
+  data: () => ({
+    settings: { // current settings of MFA
+      available: false,
+      enabled: false,
+      totp: false
+    },
+    setupState: { // setup mfa
+      state: '', // state of setup. '' -> 'getBackupCodes' -> 'setupOTP' -> 'complete'
+      setupOTPState: '' // state of setup otp. '' -> 'prepare' -> 'confirm' -> 'complete'
+    },
+    backupCodes: {
+      getNewCodes: false,
+      inProgress: false, //  progress of fetch codes
+      codes: []
+    },
+    otpSettings: { // pre-setup setting of OTP. secret key, qrcode url.
+      provisioning_uri: '',
+      key: ''
+    },
+    currentPassword: null,
+    otpConfirmToken: null,
+    error: null,
+    readyInit: false
+  }),
+  components: {
+    'recovery-codes': RecoveryCodes,
+    'totp-item': TOTP,
+    'qrcode': VueQrcode,
+    'confirm': Confirm
+  },
+  computed: {
+    canSetupOTP () {
+      return (
+        (this.setupInProgress && this.backupCodesPrepared) ||
+          this.settings.enabled
+      ) && !this.settings.totp && !this.setupOTPInProgress
+    },
+    setupInProgress () {
+      return this.setupState.state !== '' && this.setupState.state !== 'complete'
+    },
+    setupOTPInProgress () {
+      return this.setupState.state === 'setupOTP' && !this.completedOTP
+    },
+    prepareOTP () {
+      return this.setupState.setupOTPState === 'prepare'
+    },
+    confirmOTP () {
+      return this.setupState.setupOTPState === 'confirm'
+    },
+    completedOTP () {
+      return this.setupState.setupOTPState === 'completed'
+    },
+    backupCodesPrepared () {
+      return !this.backupCodes.inProgress && this.backupCodes.codes.length > 0
+    },
+    confirmNewBackupCodes () {
+      return this.backupCodes.getNewCodes
+    },
+    ...mapState({
+      backendInteractor: (state) => state.api.backendInteractor
+    })
+  },
+
+  methods: {
+    activateOTP () {
+      if (!this.settings.enabled) {
+        this.setupState.state = 'getBackupcodes'
+        this.fetchBackupCodes()
+      }
+    },
+    fetchBackupCodes () {
+      this.backupCodes.inProgress = true
+      this.backupCodes.codes = []
+
+      return this.backendInteractor.generateMfaBackupCodes()
+        .then((res) => {
+          this.backupCodes.codes = res.codes
+          this.backupCodes.inProgress = false
+        })
+    },
+    getBackupCodes () { // get a new backup codes
+      this.backupCodes.getNewCodes = true
+    },
+    confirmBackupCodes () { // confirm getting new backup codes
+      this.fetchBackupCodes().then((res) => {
+        this.backupCodes.getNewCodes = false
+      })
+    },
+    cancelBackupCodes () { // cancel confirm form of new backup codes
+      this.backupCodes.getNewCodes = false
+    },
+
+    // Setup OTP
+    setupOTP () { // prepare setup OTP
+      this.setupState.state = 'setupOTP'
+      this.setupState.setupOTPState = 'prepare'
+      this.backendInteractor.mfaSetupOTP()
+        .then((res) => {
+          this.otpSettings = res
+          this.setupState.setupOTPState = 'confirm'
+        })
+    },
+    doConfirmOTP () { // handler confirm enable OTP
+      this.error = null
+      this.backendInteractor.mfaConfirmOTP({
+        token: this.otpConfirmToken,
+        password: this.currentPassword
+      })
+        .then((res) => {
+          if (res.error) {
+            this.error = res.error
+            return
+          }
+          this.completeSetup()
+        })
+    },
+
+    completeSetup () {
+      this.setupState.setupOTPState = 'complete'
+      this.setupState.state = 'complete'
+      this.currentPassword = null
+      this.error = null
+      this.fetchSettings()
+    },
+    cancelSetup () { // cancel setup
+      this.setupState.setupOTPState = ''
+      this.setupState.state = ''
+      this.currentPassword = null
+      this.error = null
+    },
+    // end Setup OTP
+
+    // fetch settings from server
+    async fetchSettings () {
+      let result = await this.backendInteractor.settingsMFA()
+      if (result.error) return
+      this.settings = result.settings
+      this.settings.available = true
+      return result
+    }
+  },
+  mounted () {
+    this.fetchSettings().then(() => {
+      this.readyInit = true
+    })
+  }
+}
+export default Mfa
diff --git a/src/components/settings_modal/tabs/security_tab/mfa.vue b/src/components/settings_modal/tabs/security_tab/mfa.vue
new file mode 100644
index 00000000..25c4d1dc
--- /dev/null
+++ b/src/components/settings_modal/tabs/security_tab/mfa.vue
@@ -0,0 +1,174 @@
+<template>
+  <div
+    v-if="readyInit && settings.available"
+    class="setting-item mfa-settings"
+  >
+    <div class="mfa-heading">
+      <h2>{{ $t('settings.mfa.title') }}</h2>
+    </div>
+
+    <div>
+      <div
+        v-if="!setupInProgress"
+        class="setting-item"
+      >
+        <!-- Enabled methods -->
+        <h3>{{ $t('settings.mfa.authentication_methods') }}</h3>
+        <totp-item
+          :settings="settings"
+          @deactivate="fetchSettings"
+          @activate="activateOTP"
+        />
+        <br>
+
+        <div v-if="settings.enabled">
+          <!-- backup codes block-->
+          <recovery-codes
+            v-if="!confirmNewBackupCodes"
+            :backup-codes="backupCodes"
+          />
+          <button
+            v-if="!confirmNewBackupCodes"
+            class="btn btn-default"
+            @click="getBackupCodes"
+          >
+            {{ $t('settings.mfa.generate_new_recovery_codes') }}
+          </button>
+
+          <div v-if="confirmNewBackupCodes">
+            <confirm
+              :disabled="backupCodes.inProgress"
+              @confirm="confirmBackupCodes"
+              @cancel="cancelBackupCodes"
+            >
+              <p class="warning">
+                {{ $t('settings.mfa.warning_of_generate_new_codes') }}
+              </p>
+            </confirm>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="setupInProgress">
+        <!-- setup block-->
+
+        <h3>{{ $t('settings.mfa.setup_otp') }}</h3>
+
+        <recovery-codes
+          v-if="!setupOTPInProgress"
+          :backup-codes="backupCodes"
+        />
+
+        <button
+          v-if="canSetupOTP"
+          class="btn btn-default"
+          @click="cancelSetup"
+        >
+          {{ $t('general.cancel') }}
+        </button>
+
+        <button
+          v-if="canSetupOTP"
+          class="btn btn-default"
+          @click="setupOTP"
+        >
+          {{ $t('settings.mfa.setup_otp') }}
+        </button>
+
+        <template v-if="setupOTPInProgress">
+          <i v-if="prepareOTP">{{ $t('settings.mfa.wait_pre_setup_otp') }}</i>
+
+          <div v-if="confirmOTP">
+            <div class="setup-otp">
+              <div class="qr-code">
+                <h4>{{ $t('settings.mfa.scan.title') }}</h4>
+                <p>{{ $t('settings.mfa.scan.desc') }}</p>
+                <qrcode
+                  :value="otpSettings.provisioning_uri"
+                  :options="{ width: 200 }"
+                />
+                <p>
+                  {{ $t('settings.mfa.scan.secret_code') }}:
+                  {{ otpSettings.key }}
+                </p>
+              </div>
+
+              <div class="verify">
+                <h4>{{ $t('general.verify') }}</h4>
+                <p>{{ $t('settings.mfa.verify.desc') }}</p>
+                <input
+                  v-model="otpConfirmToken"
+                  type="text"
+                >
+
+                <p>{{ $t('settings.enter_current_password_to_confirm') }}:</p>
+                <input
+                  v-model="currentPassword"
+                  type="password"
+                >
+                <div class="confirm-otp-actions">
+                  <button
+                    class="btn btn-default"
+                    @click="doConfirmOTP"
+                  >
+                    {{ $t('settings.mfa.confirm_and_enable') }}
+                  </button>
+                  <button
+                    class="btn btn-default"
+                    @click="cancelSetup"
+                  >
+                    {{ $t('general.cancel') }}
+                  </button>
+                </div>
+                <div
+                  v-if="error"
+                  class="alert error"
+                >
+                  {{ error }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script src="./mfa.js"></script>
+<style lang="scss">
+@import '../../../../_variables.scss';
+.mfa-settings {
+  .mfa-heading, .method-item {
+    overflow: hidden;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: baseline;
+  }
+
+  .warning {
+    color: $fallback--cOrange;
+    color: var(--cOrange, $fallback--cOrange);
+  }
+
+  .setup-otp {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    .qr-code {
+      flex: 1;
+      padding-right: 10px;
+    }
+    .verify { flex: 1; }
+    .error { margin: 4px 0 0 0; }
+    .confirm-otp-actions {
+      button {
+        width: 15em;
+        margin-top: 5px;
+      }
+
+    }
+  }
+}
+</style>
diff --git a/src/components/settings_modal/tabs/security_tab/mfa_backup_codes.js b/src/components/settings_modal/tabs/security_tab/mfa_backup_codes.js
new file mode 100644
index 00000000..f0a984ec
--- /dev/null
+++ b/src/components/settings_modal/tabs/security_tab/mfa_backup_codes.js
@@ -0,0 +1,17 @@
+export default {
+  props: {
+    backupCodes: {
+      type: Object,
+      default: () => ({
+        inProgress: false,
+        codes: []
+      })
+    }
+  },
+  data: () => ({}),
+  computed: {
+    inProgress () { return this.backupCodes.inProgress },
+    ready () { return this.backupCodes.codes.length > 0 },
+    displayTitle () { return this.inProgress || this.ready }
+  }
+}
diff --git a/src/components/settings_modal/tabs/security_tab/mfa_backup_codes.vue b/src/components/settings_modal/tabs/security_tab/mfa_backup_codes.vue
new file mode 100644
index 00000000..d7e98b3c
--- /dev/null
+++ b/src/components/settings_modal/tabs/security_tab/mfa_backup_codes.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="mfa-backup-codes">
+    <h4 v-if="displayTitle">
+      {{ $t('settings.mfa.recovery_codes') }}
+    </h4>
+    <i v-if="inProgress">{{ $t('settings.mfa.waiting_a_recovery_codes') }}</i>
+    <template v-if="ready">
+      <p class="alert warning">
+        {{ $t('settings.mfa.recovery_codes_warning') }}
+      </p>
+      <ul class="backup-codes">
+        <li
+          v-for="code in backupCodes.codes"
+          :key="code"
+        >
+          {{ code }}
+        </li>
+      </ul>
+    </template>
+  </div>
+</template>
+<script src="./mfa_backup_codes.js"></script>
+<style lang="scss">
+@import '../../../../_variables.scss';
+
+.mfa-backup-codes {
+  .warning {
+    color: $fallback--cOrange;
+    color: var(--cOrange, $fallback--cOrange);
+  }
+  .backup-codes {
+    font-family: var(--postCodeFont, monospace);
+  }
+}
+</style>
diff --git a/src/components/settings_modal/tabs/security_tab/mfa_totp.js b/src/components/settings_modal/tabs/security_tab/mfa_totp.js
new file mode 100644
index 00000000..8408d8e9
--- /dev/null
+++ b/src/components/settings_modal/tabs/security_tab/mfa_totp.js
@@ -0,0 +1,49 @@
+import Confirm from './confirm.vue'
+import { mapState } from 'vuex'
+
+export default {
+  props: ['settings'],
+  data: () => ({
+    error: false,
+    currentPassword: '',
+    deactivate: false,
+    inProgress: false // progress peform request to disable otp method
+  }),
+  components: {
+    'confirm': Confirm
+  },
+  computed: {
+    isActivated () {
+      return this.settings.totp
+    },
+    ...mapState({
+      backendInteractor: (state) => state.api.backendInteractor
+    })
+  },
+  methods: {
+    doActivate () {
+      this.$emit('activate')
+    },
+    cancelDeactivate () { this.deactivate = false },
+    doDeactivate () {
+      this.error = null
+      this.deactivate = true
+    },
+    confirmDeactivate () { // confirm deactivate TOTP method
+      this.error = null
+      this.inProgress = true
+      this.backendInteractor.mfaDisableOTP({
+        password: this.currentPassword
+      })
+        .then((res) => {
+          this.inProgress = false
+          if (res.error) {
+            this.error = res.error
+            return
+          }
+          this.deactivate = false
+          this.$emit('deactivate')
+        })
+    }
+  }
+}
diff --git a/src/components/settings_modal/tabs/security_tab/mfa_totp.vue b/src/components/settings_modal/tabs/security_tab/mfa_totp.vue
new file mode 100644
index 00000000..c6f2cc7b
--- /dev/null
+++ b/src/components/settings_modal/tabs/security_tab/mfa_totp.vue
@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <div class="method-item">
+      <strong>{{ $t('settings.mfa.otp') }}</strong>
+      <button
+        v-if="!isActivated"
+        class="btn btn-default"
+        @click="doActivate"
+      >
+        {{ $t('general.enable') }}
+      </button>
+
+      <button
+        v-if="isActivated"
+        class="btn btn-default"
+        :disabled="deactivate"
+        @click="doDeactivate"
+      >
+        {{ $t('general.disable') }}
+      </button>
+    </div>
+
+    <confirm
+      v-if="deactivate"
+      :disabled="inProgress"
+      @confirm="confirmDeactivate"
+      @cancel="cancelDeactivate"
+    >
+      {{ $t('settings.enter_current_password_to_confirm') }}:
+      <input
+        v-model="currentPassword"
+        type="password"
+      >
+    </confirm>
+    <div
+      v-if="error"
+      class="alert error"
+    >
+      {{ error }}
+    </div>
+  </div>
+</template>
+<script src="./mfa_totp.js"></script>
diff --git a/src/components/settings_modal/tabs/security_tab/security_tab.js b/src/components/settings_modal/tabs/security_tab/security_tab.js
new file mode 100644
index 00000000..811161a5
--- /dev/null
+++ b/src/components/settings_modal/tabs/security_tab/security_tab.js
@@ -0,0 +1,106 @@
+import ProgressButton from 'src/components/progress_button/progress_button.vue'
+import Checkbox from 'src/components/checkbox/checkbox.vue'
+import Mfa from './mfa.vue'
+
+const SecurityTab = {
+  data () {
+    return {
+      newEmail: '',
+      changeEmailError: false,
+      changeEmailPassword: '',
+      changedEmail: false,
+      deletingAccount: false,
+      deleteAccountConfirmPasswordInput: '',
+      deleteAccountError: false,
+      changePasswordInputs: [ '', '', '' ],
+      changedPassword: false,
+      changePasswordError: false
+    }
+  },
+  created () {
+    this.$store.dispatch('fetchTokens')
+  },
+  components: {
+    ProgressButton,
+    Mfa,
+    Checkbox
+  },
+  computed: {
+    user () {
+      return this.$store.state.users.currentUser
+    },
+    pleromaBackend () {
+      return this.$store.state.instance.pleromaBackend
+    },
+    oauthTokens () {
+      return this.$store.state.oauthTokens.tokens.map(oauthToken => {
+        return {
+          id: oauthToken.id,
+          appName: oauthToken.app_name,
+          validUntil: new Date(oauthToken.valid_until).toLocaleDateString()
+        }
+      })
+    }
+  },
+  methods: {
+    confirmDelete () {
+      this.deletingAccount = true
+    },
+    deleteAccount () {
+      this.$store.state.api.backendInteractor.deleteAccount({ password: this.deleteAccountConfirmPasswordInput })
+        .then((res) => {
+          if (res.status === 'success') {
+            this.$store.dispatch('logout')
+            this.$router.push({ name: 'root' })
+          } else {
+            this.deleteAccountError = res.error
+          }
+        })
+    },
+    changePassword () {
+      const params = {
+        password: this.changePasswordInputs[0],
+        newPassword: this.changePasswordInputs[1],
+        newPasswordConfirmation: this.changePasswordInputs[2]
+      }
+      this.$store.state.api.backendInteractor.changePassword(params)
+        .then((res) => {
+          if (res.status === 'success') {
+            this.changedPassword = true
+            this.changePasswordError = false
+            this.logout()
+          } else {
+            this.changedPassword = false
+            this.changePasswordError = res.error
+          }
+        })
+    },
+    changeEmail () {
+      const params = {
+        email: this.newEmail,
+        password: this.changeEmailPassword
+      }
+      this.$store.state.api.backendInteractor.changeEmail(params)
+        .then((res) => {
+          if (res.status === 'success') {
+            this.changedEmail = true
+            this.changeEmailError = false
+          } else {
+            this.changedEmail = false
+            this.changeEmailError = res.error
+          }
+        })
+    },
+    logout () {
+      this.$store.dispatch('logout')
+      this.$router.replace('/')
+    },
+    revokeToken (id) {
+      if (window.confirm(`${this.$i18n.t('settings.revoke_token')}?`)) {
+        this.$store.dispatch('revokeToken', id)
+      }
+    }
+  }
+}
+
+export default SecurityTab
diff --git a/src/components/settings_modal/tabs/security_tab/security_tab.vue b/src/components/settings_modal/tabs/security_tab/security_tab.vue
new file mode 100644
index 00000000..45bacec1
--- /dev/null
+++ b/src/components/settings_modal/tabs/security_tab/security_tab.vue
@@ -0,0 +1,143 @@
+<template>
+<div :label="$t('settings.security_tab')">
+  <div class="setting-item">
+    <h2>{{ $t('settings.change_email') }}</h2>
+    <div>
+      <p>{{ $t('settings.new_email') }}</p>
+      <input
+        v-model="newEmail"
+        type="email"
+        autocomplete="email"
+        >
+    </div>
+    <div>
+      <p>{{ $t('settings.current_password') }}</p>
+      <input
+        v-model="changeEmailPassword"
+        type="password"
+        autocomplete="current-password"
+        >
+    </div>
+    <button
+      class="btn btn-default"
+      @click="changeEmail"
+      >
+      {{ $t('general.submit') }}
+    </button>
+    <p v-if="changedEmail">
+      {{ $t('settings.changed_email') }}
+    </p>
+    <template v-if="changeEmailError !== false">
+      <p>{{ $t('settings.change_email_error') }}</p>
+      <p>{{ changeEmailError }}</p>
+    </template>
+  </div>
+
+  <div class="setting-item">
+    <h2>{{ $t('settings.change_password') }}</h2>
+    <div>
+      <p>{{ $t('settings.current_password') }}</p>
+      <input
+        v-model="changePasswordInputs[0]"
+        type="password"
+        >
+    </div>
+    <div>
+      <p>{{ $t('settings.new_password') }}</p>
+      <input
+        v-model="changePasswordInputs[1]"
+        type="password"
+        >
+    </div>
+    <div>
+      <p>{{ $t('settings.confirm_new_password') }}</p>
+      <input
+        v-model="changePasswordInputs[2]"
+        type="password"
+        >
+    </div>
+    <button
+      class="btn btn-default"
+      @click="changePassword"
+      >
+      {{ $t('general.submit') }}
+    </button>
+    <p v-if="changedPassword">
+      {{ $t('settings.changed_password') }}
+    </p>
+    <p v-else-if="changePasswordError !== false">
+      {{ $t('settings.change_password_error') }}
+    </p>
+    <p v-if="changePasswordError">
+      {{ changePasswordError }}
+    </p>
+  </div>
+
+  <div class="setting-item">
+    <h2>{{ $t('settings.oauth_tokens') }}</h2>
+    <table class="oauth-tokens">
+      <thead>
+        <tr>
+          <th>{{ $t('settings.app_name') }}</th>
+          <th>{{ $t('settings.valid_until') }}</th>
+          <th />
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="oauthToken in oauthTokens"
+          :key="oauthToken.id"
+          >
+          <td>{{ oauthToken.appName }}</td>
+          <td>{{ oauthToken.validUntil }}</td>
+          <td class="actions">
+            <button
+              class="btn btn-default"
+              @click="revokeToken(oauthToken.id)"
+              >
+              {{ $t('settings.revoke_token') }}
+            </button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <mfa />
+  <div class="setting-item">
+    <h2>{{ $t('settings.delete_account') }}</h2>
+    <p v-if="!deletingAccount">
+      {{ $t('settings.delete_account_description') }}
+    </p>
+    <div v-if="deletingAccount">
+      <p>{{ $t('settings.delete_account_instructions') }}</p>
+      <p>{{ $t('login.password') }}</p>
+      <input
+        v-model="deleteAccountConfirmPasswordInput"
+        type="password"
+        >
+      <button
+        class="btn btn-default"
+        @click="deleteAccount"
+        >
+        {{ $t('settings.delete_account') }}
+      </button>
+    </div>
+    <p v-if="deleteAccountError !== false">
+      {{ $t('settings.delete_account_error') }}
+    </p>
+    <p v-if="deleteAccountError">
+      {{ deleteAccountError }}
+    </p>
+    <button
+      v-if="!deletingAccount"
+      class="btn btn-default"
+      @click="confirmDelete"
+      >
+      {{ $t('general.submit') }}
+    </button>
+  </div>
+</div>
+</template>
+
+<script src="./security_tab.js"></script>
+<!-- <style lang="scss" src="./profile.scss"></style> -->
diff --git a/src/components/settings_modal/tabs/theme_tab/preview.vue b/src/components/settings_modal/tabs/theme_tab/preview.vue
new file mode 100644
index 00000000..9d984659
--- /dev/null
+++ b/src/components/settings_modal/tabs/theme_tab/preview.vue
@@ -0,0 +1,117 @@
+<template>
+  <div class="preview-container">
+    <div class="underlay underlay-preview" />
+    <div class="panel dummy">
+      <div class="panel-heading">
+        <div class="title">
+          {{ $t('settings.style.preview.header') }}
+          <span class="badge badge-notification">
+            99
+          </span>
+        </div>
+        <span class="faint">
+          {{ $t('settings.style.preview.header_faint') }}
+        </span>
+        <span class="alert error">
+          {{ $t('settings.style.preview.error') }}
+        </span>
+        <button class="btn">
+          {{ $t('settings.style.preview.button') }}
+        </button>
+      </div>
+      <div class="panel-body theme-preview-content">
+        <div class="post">
+          <div class="avatar still-image">
+            ( ͡° ͜ʖ ͡°)
+          </div>
+          <div class="content">
+            <h4>
+              {{ $t('settings.style.preview.content') }}
+            </h4>
+
+            <i18n path="settings.style.preview.text">
+              <code style="font-family: var(--postCodeFont)">
+                {{ $t('settings.style.preview.mono') }}
+              </code>
+              <a style="color: var(--link)">
+                {{ $t('settings.style.preview.link') }}
+              </a>
+            </i18n>
+
+            <div class="icons">
+              <i
+                style="color: var(--cBlue)"
+                class="button-icon icon-reply"
+              />
+              <i
+                style="color: var(--cGreen)"
+                class="button-icon icon-retweet"
+              />
+              <i
+                style="color: var(--cOrange)"
+                class="button-icon icon-star"
+              />
+              <i
+                style="color: var(--cRed)"
+                class="button-icon icon-cancel"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div class="after-post">
+          <div class="avatar-alt">
+            :^)
+          </div>
+          <div class="content">
+            <i18n
+              path="settings.style.preview.fine_print"
+              tag="span"
+              class="faint"
+            >
+              <a style="color: var(--faintLink)">
+                {{ $t('settings.style.preview.faint_link') }}
+              </a>
+            </i18n>
+          </div>
+        </div>
+        <div class="separator" />
+
+        <span class="alert error">
+          {{ $t('settings.style.preview.error') }}
+        </span>
+        <input
+          :value="$t('settings.style.preview.input')"
+          type="text"
+        >
+
+        <div class="actions">
+          <span class="checkbox">
+            <input
+              id="preview_checkbox"
+              checked="very yes"
+              type="checkbox"
+            >
+            <label for="preview_checkbox">{{ $t('settings.style.preview.checkbox') }}</label>
+          </span>
+          <button class="btn">
+            {{ $t('settings.style.preview.button') }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.preview-container {
+  position: relative;
+}
+.underlay-preview {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 10px;
+  right: 10px;
+}
+</style>
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.js b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
new file mode 100644
index 00000000..9d61b0c4
--- /dev/null
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
@@ -0,0 +1,759 @@
+import { set, delete as del } from 'vue'
+import {
+  rgb2hex,
+  hex2rgb,
+  getContrastRatioLayers
+} from 'src/services/color_convert/color_convert.js'
+import {
+  DEFAULT_SHADOWS,
+  generateColors,
+  generateShadows,
+  generateRadii,
+  generateFonts,
+  composePreset,
+  getThemes,
+  shadows2to3,
+  colors2to3
+} from 'src/services/style_setter/style_setter.js'
+import {
+  SLOT_INHERITANCE
+} from 'src/services/theme_data/pleromafe.js'
+import {
+  CURRENT_VERSION,
+  OPACITIES,
+  getLayers,
+  getOpacitySlot
+} from 'src/services/theme_data/theme_data.service.js'
+import ColorInput from 'src/components/color_input/color_input.vue'
+import RangeInput from 'src/components/range_input/range_input.vue'
+import OpacityInput from 'src/components/opacity_input/opacity_input.vue'
+import ShadowControl from 'src/components/shadow_control/shadow_control.vue'
+import FontControl from 'src/components/font_control/font_control.vue'
+import ContrastRatio from 'src/components/contrast_ratio/contrast_ratio.vue'
+import TabSwitcher from 'src/components/tab_switcher/tab_switcher.js'
+import ExportImport from 'src/components/export_import/export_import.vue'
+import Checkbox from 'src/components/checkbox/checkbox.vue'
+
+import Preview from './preview.vue'
+
+// List of color values used in v1
+const v1OnlyNames = [
+  'bg',
+  'fg',
+  'text',
+  'link',
+  'cRed',
+  'cGreen',
+  'cBlue',
+  'cOrange'
+].map(_ => _ + 'ColorLocal')
+
+const colorConvert = (color) => {
+  if (color.startsWith('--') || color === 'transparent') {
+    return color
+  } else {
+    return hex2rgb(color)
+  }
+}
+
+export default {
+  data () {
+    return {
+      availableStyles: [],
+      selected: this.$store.getters.mergedConfig.theme,
+      themeWarning: undefined,
+      tempImportFile: undefined,
+      engineVersion: 0,
+
+      previewShadows: {},
+      previewColors: {},
+      previewRadii: {},
+      previewFonts: {},
+
+      shadowsInvalid: true,
+      colorsInvalid: true,
+      radiiInvalid: true,
+
+      keepColor: false,
+      keepShadows: false,
+      keepOpacity: false,
+      keepRoundness: false,
+      keepFonts: false,
+
+      ...Object.keys(SLOT_INHERITANCE)
+        .map(key => [key, ''])
+        .reduce((acc, [key, val]) => ({ ...acc, [ key + 'ColorLocal' ]: val }), {}),
+
+      ...Object.keys(OPACITIES)
+        .map(key => [key, ''])
+        .reduce((acc, [key, val]) => ({ ...acc, [ key + 'OpacityLocal' ]: val }), {}),
+
+      shadowSelected: undefined,
+      shadowsLocal: {},
+      fontsLocal: {},
+
+      btnRadiusLocal: '',
+      inputRadiusLocal: '',
+      checkboxRadiusLocal: '',
+      panelRadiusLocal: '',
+      avatarRadiusLocal: '',
+      avatarAltRadiusLocal: '',
+      attachmentRadiusLocal: '',
+      tooltipRadiusLocal: ''
+    }
+  },
+  created () {
+    const self = this
+
+    getThemes()
+      .then((promises) => {
+        return Promise.all(
+          Object.entries(promises)
+            .map(([k, v]) => v.then(res => [k, res]))
+        )
+      })
+      .then(themes => themes.reduce((acc, [k, v]) => {
+        if (v) {
+          return {
+            ...acc,
+            [k]: v
+          }
+        } else {
+          return acc
+        }
+      }, {}))
+      .then((themesComplete) => {
+        self.availableStyles = themesComplete
+      })
+  },
+  mounted () {
+    this.loadThemeFromLocalStorage()
+    if (typeof this.shadowSelected === 'undefined') {
+      this.shadowSelected = this.shadowsAvailable[0]
+    }
+  },
+  computed: {
+    themeWarningHelp () {
+      if (!this.themeWarning) return
+      const t = this.$t
+      const pre = 'settings.style.switcher.help.'
+      const {
+        origin,
+        themeEngineVersion,
+        type,
+        noActionsPossible
+      } = this.themeWarning
+      if (origin === 'file') {
+        // Loaded v2 theme from file
+        if (themeEngineVersion === 2 && type === 'wrong_version') {
+          return t(pre + 'v2_imported')
+        }
+        if (themeEngineVersion > CURRENT_VERSION) {
+          return t(pre + 'future_version_imported') + ' ' +
+            (
+              noActionsPossible
+                ? t(pre + 'snapshot_missing')
+                : t(pre + 'snapshot_present')
+            )
+        }
+        if (themeEngineVersion < CURRENT_VERSION) {
+          return t(pre + 'future_version_imported') + ' ' +
+            (
+              noActionsPossible
+                ? t(pre + 'snapshot_missing')
+                : t(pre + 'snapshot_present')
+            )
+        }
+      } else if (origin === 'localStorage') {
+        if (type === 'snapshot_source_mismatch') {
+          return t(pre + 'snapshot_source_mismatch')
+        }
+        // FE upgraded from v2
+        if (themeEngineVersion === 2) {
+          return t(pre + 'upgraded_from_v2')
+        }
+        // Admin downgraded FE
+        if (themeEngineVersion > CURRENT_VERSION) {
+          return t(pre + 'fe_downgraded') + ' ' +
+            (
+              noActionsPossible
+                ? t(pre + 'migration_snapshot_ok')
+                : t(pre + 'migration_snapshot_gone')
+            )
+        }
+        // Admin upgraded FE
+        if (themeEngineVersion < CURRENT_VERSION) {
+          return t(pre + 'fe_upgraded') + ' ' +
+            (
+              noActionsPossible
+                ? t(pre + 'migration_snapshot_ok')
+                : t(pre + 'migration_snapshot_gone')
+            )
+        }
+      }
+    },
+    selectedVersion () {
+      return Array.isArray(this.selected) ? 1 : 2
+    },
+    currentColors () {
+      return Object.keys(SLOT_INHERITANCE)
+        .map(key => [key, this[key + 'ColorLocal']])
+        .reduce((acc, [key, val]) => ({ ...acc, [ key ]: val }), {})
+    },
+    currentOpacity () {
+      return Object.keys(OPACITIES)
+        .map(key => [key, this[key + 'OpacityLocal']])
+        .reduce((acc, [key, val]) => ({ ...acc, [ key ]: val }), {})
+    },
+    currentRadii () {
+      return {
+        btn: this.btnRadiusLocal,
+        input: this.inputRadiusLocal,
+        checkbox: this.checkboxRadiusLocal,
+        panel: this.panelRadiusLocal,
+        avatar: this.avatarRadiusLocal,
+        avatarAlt: this.avatarAltRadiusLocal,
+        tooltip: this.tooltipRadiusLocal,
+        attachment: this.attachmentRadiusLocal
+      }
+    },
+    preview () {
+      return composePreset(this.previewColors, this.previewRadii, this.previewShadows, this.previewFonts)
+    },
+    previewTheme () {
+      if (!this.preview.theme.colors) return { colors: {}, opacity: {}, radii: {}, shadows: {}, fonts: {} }
+      return this.preview.theme
+    },
+    // This needs optimization maybe
+    previewContrast () {
+      try {
+        if (!this.previewTheme.colors.bg) return {}
+        const colors = this.previewTheme.colors
+        const opacity = this.previewTheme.opacity
+        if (!colors.bg) return {}
+        const hints = (ratio) => ({
+          text: ratio.toPrecision(3) + ':1',
+          // AA level, AAA level
+          aa: ratio >= 4.5,
+          aaa: ratio >= 7,
+          // same but for 18pt+ texts
+          laa: ratio >= 3,
+          laaa: ratio >= 4.5
+        })
+        const colorsConverted = Object.entries(colors).reduce((acc, [key, value]) => ({ ...acc, [key]: colorConvert(value) }), {})
+
+        const ratios = Object.entries(SLOT_INHERITANCE).reduce((acc, [key, value]) => {
+          const slotIsBaseText = key === 'text' || key === 'link'
+          const slotIsText = slotIsBaseText || (
+            typeof value === 'object' && value !== null && value.textColor
+          )
+          if (!slotIsText) return acc
+          const { layer, variant } = slotIsBaseText ? { layer: 'bg' } : value
+          const background = variant || layer
+          const opacitySlot = getOpacitySlot(background)
+          const textColors = [
+            key,
+            ...(background === 'bg' ? ['cRed', 'cGreen', 'cBlue', 'cOrange'] : [])
+          ]
+
+          const layers = getLayers(
+            layer,
+            variant || layer,
+            opacitySlot,
+            colorsConverted,
+            opacity
+          )
+
+          return {
+            ...acc,
+            ...textColors.reduce((acc, textColorKey) => {
+              const newKey = slotIsBaseText
+                ? 'bg' + textColorKey[0].toUpperCase() + textColorKey.slice(1)
+                : textColorKey
+              return {
+                ...acc,
+                [newKey]: getContrastRatioLayers(
+                  colorsConverted[textColorKey],
+                  layers,
+                  colorsConverted[textColorKey]
+                )
+              }
+            }, {})
+          }
+        }, {})
+
+        return Object.entries(ratios).reduce((acc, [k, v]) => { acc[k] = hints(v); return acc }, {})
+      } catch (e) {
+        console.warn('Failure computing contrasts', e)
+      }
+    },
+    previewRules () {
+      if (!this.preview.rules) return ''
+      return [
+        ...Object.values(this.preview.rules),
+        'color: var(--text)',
+        'font-family: var(--interfaceFont, sans-serif)'
+      ].join(';')
+    },
+    shadowsAvailable () {
+      return Object.keys(DEFAULT_SHADOWS).sort()
+    },
+    currentShadowOverriden: {
+      get () {
+        return !!this.currentShadow
+      },
+      set (val) {
+        if (val) {
+          set(this.shadowsLocal, this.shadowSelected, this.currentShadowFallback.map(_ => Object.assign({}, _)))
+        } else {
+          del(this.shadowsLocal, this.shadowSelected)
+        }
+      }
+    },
+    currentShadowFallback () {
+      return (this.previewTheme.shadows || {})[this.shadowSelected]
+    },
+    currentShadow: {
+      get () {
+        return this.shadowsLocal[this.shadowSelected]
+      },
+      set (v) {
+        set(this.shadowsLocal, this.shadowSelected, v)
+      }
+    },
+    themeValid () {
+      return !this.shadowsInvalid && !this.colorsInvalid && !this.radiiInvalid
+    },
+    exportedTheme () {
+      const saveEverything = (
+        !this.keepFonts &&
+        !this.keepShadows &&
+        !this.keepOpacity &&
+        !this.keepRoundness &&
+        !this.keepColor
+      )
+
+      const source = {
+        themeEngineVersion: CURRENT_VERSION
+      }
+
+      if (this.keepFonts || saveEverything) {
+        source.fonts = this.fontsLocal
+      }
+      if (this.keepShadows || saveEverything) {
+        source.shadows = this.shadowsLocal
+      }
+      if (this.keepOpacity || saveEverything) {
+        source.opacity = this.currentOpacity
+      }
+      if (this.keepColor || saveEverything) {
+        source.colors = this.currentColors
+      }
+      if (this.keepRoundness || saveEverything) {
+        source.radii = this.currentRadii
+      }
+
+      const theme = {
+        themeEngineVersion: CURRENT_VERSION,
+        ...this.previewTheme
+      }
+
+      return {
+        // To separate from other random JSON files and possible future source formats
+        _pleroma_theme_version: 2, theme, source
+      }
+    }
+  },
+  components: {
+    ColorInput,
+    OpacityInput,
+    RangeInput,
+    ContrastRatio,
+    ShadowControl,
+    FontControl,
+    TabSwitcher,
+    Preview,
+    ExportImport,
+    Checkbox
+  },
+  methods: {
+    loadTheme (
+      {
+        theme,
+        source,
+        _pleroma_theme_version: fileVersion
+      },
+      origin,
+      forceUseSource = false
+    ) {
+      this.dismissWarning()
+      if (!source && !theme) {
+        throw new Error('Can\'t load theme: empty')
+      }
+      const version = (origin === 'localStorage' && !theme.colors)
+        ? 'l1'
+        : fileVersion
+      const snapshotEngineVersion = (theme || {}).themeEngineVersion
+      const themeEngineVersion = (source || {}).themeEngineVersion || 2
+      const versionsMatch = themeEngineVersion === CURRENT_VERSION
+      const sourceSnapshotMismatch = (
+        theme !== undefined &&
+          source !== undefined &&
+          themeEngineVersion !== snapshotEngineVersion
+      )
+      // Force loading of source if user requested it or if snapshot
+      // is unavailable
+      const forcedSourceLoad = (source && forceUseSource) || !theme
+      if (!(versionsMatch && !sourceSnapshotMismatch) &&
+          !forcedSourceLoad &&
+          version !== 'l1' &&
+          origin !== 'defaults'
+      ) {
+        if (sourceSnapshotMismatch && origin === 'localStorage') {
+          this.themeWarning = {
+            origin,
+            themeEngineVersion,
+            type: 'snapshot_source_mismatch'
+          }
+        } else if (!theme) {
+          this.themeWarning = {
+            origin,
+            noActionsPossible: true,
+            themeEngineVersion,
+            type: 'no_snapshot_old_version'
+          }
+        } else if (!versionsMatch) {
+          this.themeWarning = {
+            origin,
+            noActionsPossible: !source,
+            themeEngineVersion,
+            type: 'wrong_version'
+          }
+        }
+      }
+      this.normalizeLocalState(theme, version, source, forcedSourceLoad)
+    },
+    forceLoadLocalStorage () {
+      this.loadThemeFromLocalStorage(true)
+    },
+    dismissWarning () {
+      this.themeWarning = undefined
+      this.tempImportFile = undefined
+    },
+    forceLoad () {
+      const { origin } = this.themeWarning
+      switch (origin) {
+        case 'localStorage':
+          this.loadThemeFromLocalStorage(true)
+          break
+        case 'file':
+          this.onImport(this.tempImportFile, true)
+          break
+      }
+      this.dismissWarning()
+    },
+    forceSnapshot () {
+      const { origin } = this.themeWarning
+      switch (origin) {
+        case 'localStorage':
+          this.loadThemeFromLocalStorage(false, true)
+          break
+        case 'file':
+          console.err('Forcing snapshout from file is not supported yet')
+          break
+      }
+      this.dismissWarning()
+    },
+    loadThemeFromLocalStorage (confirmLoadSource = false, forceSnapshot = false) {
+      const {
+        customTheme: theme,
+        customThemeSource: source
+      } = this.$store.getters.mergedConfig
+      if (!theme && !source) {
+        // Anon user or never touched themes
+        this.loadTheme(
+          this.$store.state.instance.themeData,
+          'defaults',
+          confirmLoadSource
+        )
+      } else {
+        this.loadTheme(
+          {
+            theme,
+            source: forceSnapshot ? theme : source
+          },
+          'localStorage',
+          confirmLoadSource
+        )
+      }
+    },
+    setCustomTheme () {
+      this.$store.dispatch('setOption', {
+        name: 'customTheme',
+        value: {
+          themeEngineVersion: CURRENT_VERSION,
+          ...this.previewTheme
+        }
+      })
+      this.$store.dispatch('setOption', {
+        name: 'customThemeSource',
+        value: {
+          themeEngineVersion: CURRENT_VERSION,
+          shadows: this.shadowsLocal,
+          fonts: this.fontsLocal,
+          opacity: this.currentOpacity,
+          colors: this.currentColors,
+          radii: this.currentRadii
+        }
+      })
+    },
+    updatePreviewColorsAndShadows () {
+      this.previewColors = generateColors({
+        opacity: this.currentOpacity,
+        colors: this.currentColors
+      })
+      this.previewShadows = generateShadows(
+        { shadows: this.shadowsLocal, opacity: this.previewTheme.opacity, themeEngineVersion: this.engineVersion },
+        this.previewColors.theme.colors,
+        this.previewColors.mod
+      )
+    },
+    onImport (parsed, forceSource = false) {
+      this.tempImportFile = parsed
+      this.loadTheme(parsed, 'file', forceSource)
+    },
+    importValidator (parsed) {
+      const version = parsed._pleroma_theme_version
+      return version >= 1 || version <= 2
+    },
+    clearAll () {
+      this.loadThemeFromLocalStorage()
+    },
+
+    // Clears all the extra stuff when loading V1 theme
+    clearV1 () {
+      Object.keys(this.$data)
+        .filter(_ => _.endsWith('ColorLocal') || _.endsWith('OpacityLocal'))
+        .filter(_ => !v1OnlyNames.includes(_))
+        .forEach(key => {
+          set(this.$data, key, undefined)
+        })
+    },
+
+    clearRoundness () {
+      Object.keys(this.$data)
+        .filter(_ => _.endsWith('RadiusLocal'))
+        .forEach(key => {
+          set(this.$data, key, undefined)
+        })
+    },
+
+    clearOpacity () {
+      Object.keys(this.$data)
+        .filter(_ => _.endsWith('OpacityLocal'))
+        .forEach(key => {
+          set(this.$data, key, undefined)
+        })
+    },
+
+    clearShadows () {
+      this.shadowsLocal = {}
+    },
+
+    clearFonts () {
+      this.fontsLocal = {}
+    },
+
+    /**
+     * This applies stored theme data onto form. Supports three versions of data:
+     * v3 (version >= 3) - newest version of themes which supports snapshots for better compatiblity
+     * v2 (version = 2) - newer version of themes.
+     * v1 (version = 1) - older version of themes (import from file)
+     * v1l (version = l1) - older version of theme (load from local storage)
+     * v1 and v1l differ because of way themes were stored/exported.
+     * @param {Object} theme - theme data (snapshot)
+     * @param {Number} version - version of data. 0 means try to guess based on data. "l1" means v1, locastorage type
+     * @param {Object} source - theme source - this will be used if compatible
+     * @param {Boolean} source - by default source won't be used if version doesn't match since it might render differently
+     *                           this allows importing source anyway
+     */
+    normalizeLocalState (theme, version = 0, source, forceSource = false) {
+      let input
+      if (typeof source !== 'undefined') {
+        if (forceSource || source.themeEngineVersion === CURRENT_VERSION) {
+          input = source
+          version = source.themeEngineVersion
+        } else {
+          input = theme
+        }
+      } else {
+        input = theme
+      }
+
+      const radii = input.radii || input
+      const opacity = input.opacity
+      const shadows = input.shadows || {}
+      const fonts = input.fonts || {}
+      const colors = !input.themeEngineVersion
+        ? colors2to3(input.colors || input)
+        : input.colors || input
+
+      if (version === 0) {
+        if (input.version) version = input.version
+        // Old v1 naming: fg is text, btn is foreground
+        if (typeof colors.text === 'undefined' && typeof colors.fg !== 'undefined') {
+          version = 1
+        }
+        // New v2 naming: text is text, fg is foreground
+        if (typeof colors.text !== 'undefined' && typeof colors.fg !== 'undefined') {
+          version = 2
+        }
+      }
+
+      this.engineVersion = version
+
+      // Stuff that differs between V1 and V2
+      if (version === 1) {
+        this.fgColorLocal = rgb2hex(colors.btn)
+        this.textColorLocal = rgb2hex(colors.fg)
+      }
+
+      if (!this.keepColor) {
+        this.clearV1()
+        const keys = new Set(version !== 1 ? Object.keys(SLOT_INHERITANCE) : [])
+        if (version === 1 || version === 'l1') {
+          keys
+            .add('bg')
+            .add('link')
+            .add('cRed')
+            .add('cBlue')
+            .add('cGreen')
+            .add('cOrange')
+        }
+
+        keys.forEach(key => {
+          const color = colors[key]
+          const hex = rgb2hex(colors[key])
+          this[key + 'ColorLocal'] = hex === '#aN' ? color : hex
+        })
+      }
+
+      if (opacity && !this.keepOpacity) {
+        this.clearOpacity()
+        Object.entries(opacity).forEach(([k, v]) => {
+          if (typeof v === 'undefined' || v === null || Number.isNaN(v)) return
+          this[k + 'OpacityLocal'] = v
+        })
+      }
+
+      if (!this.keepRoundness) {
+        this.clearRoundness()
+        Object.entries(radii).forEach(([k, v]) => {
+          // 'Radius' is kept mostly for v1->v2 localstorage transition
+          const key = k.endsWith('Radius') ? k.split('Radius')[0] : k
+          this[key + 'RadiusLocal'] = v
+        })
+      }
+
+      if (!this.keepShadows) {
+        this.clearShadows()
+        if (version === 2) {
+          this.shadowsLocal = shadows2to3(shadows, this.previewTheme.opacity)
+        } else {
+          this.shadowsLocal = shadows
+        }
+        this.shadowSelected = this.shadowsAvailable[0]
+      }
+
+      if (!this.keepFonts) {
+        this.clearFonts()
+        this.fontsLocal = fonts
+      }
+    }
+  },
+  watch: {
+    currentRadii () {
+      try {
+        this.previewRadii = generateRadii({ radii: this.currentRadii })
+        this.radiiInvalid = false
+      } catch (e) {
+        this.radiiInvalid = true
+        console.warn(e)
+      }
+    },
+    shadowsLocal: {
+      handler () {
+        if (Object.getOwnPropertyNames(this.previewColors).length === 1) return
+        try {
+          this.updatePreviewColorsAndShadows()
+          this.shadowsInvalid = false
+        } catch (e) {
+          this.shadowsInvalid = true
+          console.warn(e)
+        }
+      },
+      deep: true
+    },
+    fontsLocal: {
+      handler () {
+        try {
+          this.previewFonts = generateFonts({ fonts: this.fontsLocal })
+          this.fontsInvalid = false
+        } catch (e) {
+          this.fontsInvalid = true
+          console.warn(e)
+        }
+      },
+      deep: true
+    },
+    currentColors () {
+      try {
+        this.updatePreviewColorsAndShadows()
+        this.colorsInvalid = false
+        this.shadowsInvalid = false
+      } catch (e) {
+        this.colorsInvalid = true
+        this.shadowsInvalid = true
+        console.warn(e)
+      }
+    },
+    currentOpacity () {
+      try {
+        this.updatePreviewColorsAndShadows()
+      } catch (e) {
+        console.warn(e)
+      }
+    },
+    selected () {
+      this.dismissWarning()
+      if (this.selectedVersion === 1) {
+        if (!this.keepRoundness) {
+          this.clearRoundness()
+        }
+
+        if (!this.keepShadows) {
+          this.clearShadows()
+        }
+
+        if (!this.keepOpacity) {
+          this.clearOpacity()
+        }
+
+        if (!this.keepColor) {
+          this.clearV1()
+
+          this.bgColorLocal = this.selected[1]
+          this.fgColorLocal = this.selected[2]
+          this.textColorLocal = this.selected[3]
+          this.linkColorLocal = this.selected[4]
+          this.cRedColorLocal = this.selected[5]
+          this.cGreenColorLocal = this.selected[6]
+          this.cBlueColorLocal = this.selected[7]
+          this.cOrangeColorLocal = this.selected[8]
+        }
+      } else if (this.selectedVersion >= 2) {
+        this.normalizeLocalState(this.selected.theme, 2, this.selected.source)
+      }
+    }
+  }
+}
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
new file mode 100644
index 00000000..75b3017d
--- /dev/null
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
@@ -0,0 +1,339 @@
+@import 'src/_variables.scss';
+.theme-tab {
+  .theme-warning {
+    display: flex;
+    align-items: baseline;
+    margin-bottom: .5em;
+    .buttons {
+      .btn {
+        margin-bottom: .5em;
+      }
+    }
+  }
+  .preset-switcher {
+    margin-right: 1em;
+  }
+
+  .style-control {
+    display: flex;
+    align-items: baseline;
+    margin-bottom: 5px;
+
+    .label {
+      flex: 1;
+    }
+
+    &.disabled {
+      input, select {
+        opacity: .5
+      }
+    }
+
+    .opt {
+      margin: .5em;
+    }
+
+    .color-input {
+      flex: 0 0 0;
+    }
+
+    input, select {
+      min-width: 3em;
+      margin: 0;
+      flex: 0;
+
+      &[type=number] {
+        min-width: 5em;
+      }
+
+      &[type=range] {
+        flex: 1;
+        min-width: 3em;
+        align-self: flex-start;
+      }
+    }
+  }
+
+  .reset-container {
+    flex-wrap: wrap;
+  }
+
+  .fonts-container,
+  .reset-container,
+  .apply-container,
+  .radius-container,
+  .color-container,
+  {
+    display: flex;
+  }
+
+  .fonts-container,
+  .radius-container {
+    flex-direction: column;
+  }
+
+  .color-container{
+    > h4 {
+      width: 99%;
+    }
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+
+  .fonts-container,
+  .color-container,
+  .shadow-container,
+  .radius-container,
+  .presets-container {
+    margin: 1em 1em 0;
+  }
+
+  .tab-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    width: 100%;
+    min-height: 30px;
+
+    .btn {
+      min-width: 1px;
+      flex: 0 auto;
+      padding: 0 1em;
+    }
+
+    p {
+      flex: 1;
+      margin: 0;
+      margin-right: .5em;
+    }
+
+    margin-bottom: 1em;
+  }
+
+  .shadow-selector {
+    .override {
+      flex: 1;
+      margin-left: .5em;
+    }
+    .select-container {
+      margin-top: -4px;
+      margin-bottom: -3px;
+    }
+  }
+
+  .save-load,
+  .save-load-options {
+    display: flex;
+    justify-content: center;
+    align-items: baseline;
+    flex-wrap: wrap;
+
+    .presets,
+    .import-export {
+      margin-bottom: .5em;
+    }
+
+    .import-export {
+      display: flex;
+    }
+
+    .override {
+      margin-left: .5em;
+    }
+  }
+
+  .save-load-options {
+    flex-wrap: wrap;
+    margin-top: .5em;
+    justify-content: center;
+    .keep-option {
+      margin: 0 .5em .5em;
+      min-width: 25%;
+    }
+  }
+
+  .preview-container {
+    border-top: 1px dashed;
+    border-bottom: 1px dashed;
+    border-color: $fallback--border;
+    border-color: var(--border, $fallback--border);
+    margin: 1em 0;
+    padding: 1em;
+    background: var(--body-background-image);
+    background-size: cover;
+    background-position: 50% 50%;
+
+    .dummy {
+      .post {
+        font-family: var(--postFont);
+        display: flex;
+
+        .content {
+          flex: 1;
+
+          h4 {
+            margin-bottom: .25em;
+          }
+
+          .icons {
+            margin-top: .5em;
+            display: flex;
+
+            i {
+              margin-right: 1em;
+            }
+          }
+        }
+      }
+
+      .after-post {
+        margin-top: 1em;
+        display: flex;
+        align-items: center;
+      }
+
+      .avatar, .avatar-alt{
+        background: linear-gradient(135deg, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%);
+        color: black;
+        font-family: sans-serif;
+        text-align: center;
+        margin-right: 1em;
+      }
+
+      .avatar-alt {
+        flex: 0 auto;
+        margin-left: 28px;
+        font-size: 12px;
+        min-width: 20px;
+        min-height: 20px;
+        line-height: 20px;
+        border-radius: $fallback--avatarAltRadius;
+        border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+      }
+
+      .avatar {
+        flex: 0 auto;
+        width: 48px;
+        height: 48px;
+        font-size: 14px;
+        line-height: 48px;
+      }
+
+      .actions {
+        display: flex;
+        align-items: baseline;
+
+        .checkbox {
+          display: inline-flex;
+          align-items: baseline;
+          margin-right: 1em;
+          flex: 1;
+        }
+      }
+
+      .separator {
+        margin: 1em;
+        border-bottom: 1px solid;
+        border-color: $fallback--border;
+        border-color: var(--border, $fallback--border);
+      }
+
+      .panel-heading {
+        .badge, .alert, .btn, .faint {
+          margin-left: 1em;
+          white-space: nowrap;
+        }
+        .faint {
+          text-overflow: ellipsis;
+          min-width: 2em;
+          overflow-x: hidden;
+        }
+        .flex-spacer {
+          flex: 1;
+        }
+      }
+      .btn {
+        margin-left: 0;
+        padding: 0 1em;
+        min-width: 3em;
+        min-height: 30px;
+      }
+    }
+  }
+
+  .apply-container {
+    justify-content: center;
+  }
+
+  .radius-item,
+  .color-item {
+    min-width: 20em;
+    margin: 5px 6px 0 0;
+    display:flex;
+    flex-direction: column;
+    flex: 1 1 0;
+
+    &.wide {
+      min-width: 60%
+    }
+
+    &:not(.wide):nth-child(2n+1) {
+      margin-right: 7px;
+
+    }
+
+    .color, .opacity {
+      display:flex;
+      align-items: baseline;
+    }
+  }
+
+  .radius-item {
+    flex-basis: auto;
+  }
+
+  .theme-radius-rn,
+  .theme-color-cl {
+    border: 0;
+    box-shadow: none;
+    background: transparent;
+    color: var(--faint, $fallback--faint);
+    align-self: stretch;
+  }
+
+  .theme-color-cl,
+  .theme-radius-in,
+  .theme-color-in {
+    margin-left: 4px;
+  }
+
+  .theme-radius-in {
+    min-width: 1em;
+  }
+
+  .theme-radius-in {
+    max-width: 7em;
+    flex: 1;
+  }
+
+  .theme-radius-lb{
+    max-width: 50em;
+  }
+
+  .theme-preview-content {
+    padding: 20px;
+  }
+
+  .apply-container {
+    .btn {
+      min-height: 28px;
+      min-width: 10em;
+      padding: 0 2em;
+    }
+  }
+
+  .btn {
+    margin-left: .25em;
+    margin-right: .25em;
+  }
+}
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
new file mode 100644
index 00000000..6f6cf1d6
--- /dev/null
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
@@ -0,0 +1,956 @@
+<template>
+<div class="theme-tab">
+  <div class="presets-container">
+    <div class="save-load">
+      <div
+        v-if="themeWarning"
+        class="theme-warning"
+        >
+        <div class="alert warning">
+          {{ themeWarningHelp }}
+        </div>
+        <div class="buttons">
+          <template v-if="themeWarning.type === 'snapshot_source_mismatch'">
+            <button
+              class="btn"
+              @click="forceLoad"
+              >
+              {{ $t('settings.style.switcher.use_source') }}
+            </button>
+            <button
+              class="btn"
+              @click="forceSnapshot"
+              >
+              {{ $t('settings.style.switcher.use_snapshot') }}
+            </button>
+          </template>
+          <template v-else-if="themeWarning.noActionsPossible">
+            <button
+              class="btn"
+              @click="dismissWarning"
+              >
+              {{ $t('general.dismiss') }}
+            </button>
+          </template>
+          <template v-else>
+            <button
+              class="btn"
+              @click="forceLoad"
+              >
+              {{ $t('settings.style.switcher.load_theme') }}
+            </button>
+            <button
+              class="btn"
+              @click="dismissWarning"
+              >
+              {{ $t('settings.style.switcher.keep_as_is') }}
+            </button>
+          </template>
+        </div>
+      </div>
+      <ExportImport
+        :export-object="exportedTheme"
+        :export-label="$t(&quot;settings.export_theme&quot;)"
+        :import-label="$t(&quot;settings.import_theme&quot;)"
+        :import-failed-text="$t(&quot;settings.invalid_theme_imported&quot;)"
+        :on-import="onImport"
+        :validator="importValidator"
+        >
+        <template slot="before">
+          <div class="presets">
+            {{ $t('settings.presets') }}
+            <label
+              for="preset-switcher"
+              class="select"
+              >
+              <select
+                id="preset-switcher"
+                v-model="selected"
+                class="preset-switcher"
+                >
+                <option
+                  v-for="style in availableStyles"
+                  :key="style.name"
+                  :value="style"
+                  :style="{
+                          backgroundColor: style[1] || (style.theme || style.source).colors.bg,
+                          color: style[3] || (style.theme || style.source).colors.text
+                          }"
+                  >
+                  {{ style[0] || style.name }}
+                </option>
+              </select>
+              <i class="icon-down-open" />
+            </label>
+          </div>
+        </template>
+      </ExportImport>
+      </div>
+      <div class="save-load-options">
+        <span class="keep-option">
+          <Checkbox v-model="keepColor">
+            {{ $t('settings.style.switcher.keep_color') }}
+          </Checkbox>
+        </span>
+        <span class="keep-option">
+          <Checkbox v-model="keepShadows">
+            {{ $t('settings.style.switcher.keep_shadows') }}
+          </Checkbox>
+        </span>
+        <span class="keep-option">
+          <Checkbox v-model="keepOpacity">
+            {{ $t('settings.style.switcher.keep_opacity') }}
+          </Checkbox>
+        </span>
+        <span class="keep-option">
+          <Checkbox v-model="keepRoundness">
+            {{ $t('settings.style.switcher.keep_roundness') }}
+          </Checkbox>
+        </span>
+        <span class="keep-option">
+          <Checkbox v-model="keepFonts">
+            {{ $t('settings.style.switcher.keep_fonts') }}
+          </Checkbox>
+        </span>
+        <p>{{ $t('settings.style.switcher.save_load_hint') }}</p>
+      </div>
+    </div>
+
+    <preview :style="previewRules" />
+
+    <keep-alive>
+      <tab-switcher key="style-tweak">
+        <div
+          :label="$t('settings.style.common_colors._tab_label')"
+          class="color-container"
+        >
+          <div class="tab-header">
+            <p>{{ $t('settings.theme_help') }}</p>
+            <button
+              class="btn"
+              @click="clearOpacity"
+            >
+              {{ $t('settings.style.switcher.clear_opacity') }}
+            </button>
+            <button
+              class="btn"
+              @click="clearV1"
+            >
+              {{ $t('settings.style.switcher.clear_all') }}
+            </button>
+          </div>
+          <p>{{ $t('settings.theme_help_v2_1') }}</p>
+          <h4>{{ $t('settings.style.common_colors.main') }}</h4>
+          <div class="color-item">
+            <ColorInput
+              v-model="bgColorLocal"
+              name="bgColor"
+              :label="$t('settings.background')"
+            />
+            <OpacityInput
+              v-model="bgOpacityLocal"
+              name="bgOpacity"
+              :fallback="previewTheme.opacity.bg"
+            />
+            <ColorInput
+              v-model="textColorLocal"
+              name="textColor"
+              :label="$t('settings.text')"
+            />
+            <ContrastRatio :contrast="previewContrast.bgText" />
+            <ColorInput
+              v-model="accentColorLocal"
+              name="accentColor"
+              :fallback="previewTheme.colors.link"
+              :label="$t('settings.accent')"
+              :show-optional-tickbox="typeof linkColorLocal !== 'undefined'"
+            />
+            <ColorInput
+              v-model="linkColorLocal"
+              name="linkColor"
+              :fallback="previewTheme.colors.accent"
+              :label="$t('settings.links')"
+              :show-optional-tickbox="typeof accentColorLocal !== 'undefined'"
+            />
+            <ContrastRatio :contrast="previewContrast.bgLink" />
+          </div>
+          <div class="color-item">
+            <ColorInput
+              v-model="fgColorLocal"
+              name="fgColor"
+              :label="$t('settings.foreground')"
+            />
+            <ColorInput
+              v-model="fgTextColorLocal"
+              name="fgTextColor"
+              :label="$t('settings.text')"
+              :fallback="previewTheme.colors.fgText"
+            />
+            <ColorInput
+              v-model="fgLinkColorLocal"
+              name="fgLinkColor"
+              :label="$t('settings.links')"
+              :fallback="previewTheme.colors.fgLink"
+            />
+            <p>{{ $t('settings.style.common_colors.foreground_hint') }}</p>
+          </div>
+          <h4>{{ $t('settings.style.common_colors.rgbo') }}</h4>
+          <div class="color-item">
+            <ColorInput
+              v-model="cRedColorLocal"
+              name="cRedColor"
+              :label="$t('settings.cRed')"
+            />
+            <ContrastRatio :contrast="previewContrast.bgCRed" />
+            <ColorInput
+              v-model="cBlueColorLocal"
+              name="cBlueColor"
+              :label="$t('settings.cBlue')"
+            />
+            <ContrastRatio :contrast="previewContrast.bgCBlue" />
+          </div>
+          <div class="color-item">
+            <ColorInput
+              v-model="cGreenColorLocal"
+              name="cGreenColor"
+              :label="$t('settings.cGreen')"
+            />
+            <ContrastRatio :contrast="previewContrast.bgCGreen" />
+            <ColorInput
+              v-model="cOrangeColorLocal"
+              name="cOrangeColor"
+              :label="$t('settings.cOrange')"
+            />
+            <ContrastRatio :contrast="previewContrast.bgCOrange" />
+          </div>
+          <p>{{ $t('settings.theme_help_v2_2') }}</p>
+        </div>
+
+        <div
+          :label="$t('settings.style.advanced_colors._tab_label')"
+          class="color-container"
+        >
+          <div class="tab-header">
+            <p>{{ $t('settings.theme_help') }}</p>
+            <button
+              class="btn"
+              @click="clearOpacity"
+            >
+              {{ $t('settings.style.switcher.clear_opacity') }}
+            </button>
+            <button
+              class="btn"
+              @click="clearV1"
+            >
+              {{ $t('settings.style.switcher.clear_all') }}
+            </button>
+          </div>
+          <div class="color-item">
+            <h4>{{ $t('settings.style.advanced_colors.post') }}</h4>
+            <ColorInput
+              v-model="postLinkColorLocal"
+              name="postLinkColor"
+              :fallback="previewTheme.colors.accent"
+              :label="$t('settings.links')"
+            />
+            <ContrastRatio :contrast="previewContrast.postLink" />
+            <h4>{{ $t('settings.style.advanced_colors.alert') }}</h4>
+            <ColorInput
+              v-model="alertErrorColorLocal"
+              name="alertError"
+              :label="$t('settings.style.advanced_colors.alert_error')"
+              :fallback="previewTheme.colors.alertError"
+            />
+            <ColorInput
+              v-model="alertErrorTextColorLocal"
+              name="alertErrorText"
+              :label="$t('settings.text')"
+              :fallback="previewTheme.colors.alertErrorText"
+            />
+            <ContrastRatio
+              :contrast="previewContrast.alertErrorText"
+              large="true"
+            />
+            <ColorInput
+              v-model="alertWarningColorLocal"
+              name="alertWarning"
+              :label="$t('settings.style.advanced_colors.alert_warning')"
+              :fallback="previewTheme.colors.alertWarning"
+            />
+            <ColorInput
+              v-model="alertWarningTextColorLocal"
+              name="alertWarningText"
+              :label="$t('settings.text')"
+              :fallback="previewTheme.colors.alertWarningText"
+            />
+            <ContrastRatio
+              :contrast="previewContrast.alertWarningText"
+              large="true"
+            />
+            <ColorInput
+              v-model="alertNeutralColorLocal"
+              name="alertNeutral"
+              :label="$t('settings.style.advanced_colors.alert_neutral')"
+              :fallback="previewTheme.colors.alertNeutral"
+            />
+            <ColorInput
+              v-model="alertNeutralTextColorLocal"
+              name="alertNeutralText"
+              :label="$t('settings.text')"
+              :fallback="previewTheme.colors.alertNeutralText"
+            />
+            <ContrastRatio
+              :contrast="previewContrast.alertNeutralText"
+              large="true"
+            />
+            <OpacityInput
+              v-model="alertOpacityLocal"
+              name="alertOpacity"
+              :fallback="previewTheme.opacity.alert"
+            />
+          </div>
+          <div class="color-item">
+            <h4>{{ $t('settings.style.advanced_colors.badge') }}</h4>
+            <ColorInput
+              v-model="badgeNotificationColorLocal"
+              name="badgeNotification"
+              :label="$t('settings.style.advanced_colors.badge_notification')"
+              :fallback="previewTheme.colors.badgeNotification"
+            />
+            <ColorInput
+              v-model="badgeNotificationTextColorLocal"
+              name="badgeNotificationText"
+              :label="$t('settings.text')"
+              :fallback="previewTheme.colors.badgeNotificationText"
+            />
+            <ContrastRatio
+              :contrast="previewContrast.badgeNotificationText"
+              large="true"
+            />
+          </div>
+          <div class="color-item">
+            <h4>{{ $t('settings.style.advanced_colors.panel_header') }}</h4>
+            <ColorInput
+              v-model="panelColorLocal"
+              name="panelColor"
+              :fallback="previewTheme.colors.panel"
+              :label="$t('settings.background')"
+            />
+            <OpacityInput
+              v-model="panelOpacityLocal"
+              name="panelOpacity"
+              :fallback="previewTheme.opacity.panel"
+              :disabled="panelColorLocal === 'transparent'"
+            />
+            <ColorInput
+              v-model="panelTextColorLocal"
+              name="panelTextColor"
+              :fallback="previewTheme.colors.panelText"
+              :label="$t('settings.text')"
+            />
+            <ContrastRatio
+              :contrast="previewContrast.panelText"
+              large="true"
+            />
+            <ColorInput
+              v-model="panelLinkColorLocal"
+              name="panelLinkColor"
+              :fallback="previewTheme.colors.panelLink"
+              :label="$t('settings.links')"
+            />
+            <ContrastRatio
+              :contrast="previewContrast.panelLink"
+              large="true"
+            />
+          </div>
+          <div class="color-item">
+            <h4>{{ $t('settings.style.advanced_colors.top_bar') }}</h4>
+            <ColorInput
+              v-model="topBarColorLocal"
+              name="topBarColor"
+              :fallback="previewTheme.colors.topBar"
+              :label="$t('settings.background')"
+            />
+            <ColorInput
+              v-model="topBarTextColorLocal"
+              name="topBarTextColor"
+              :fallback="previewTheme.colors.topBarText"
+              :label="$t('settings.text')"
+            />
+            <ContrastRatio :contrast="previewContrast.topBarText" />
+            <ColorInput
+              v-model="topBarLinkColorLocal"
+              name="topBarLinkColor"
+              :fallback="previewTheme.colors.topBarLink"
+              :label="$t('settings.links')"
+            />
+            <ContrastRatio :contrast="previewContrast.topBarLink" />
+          </div>
+          <div class="color-item">
+            <h4>{{ $t('settings.style.advanced_colors.inputs') }}</h4>
+            <ColorInput
+              v-model="inputColorLocal"
+              name="inputColor"
+              :fallback="previewTheme.colors.input"
+              :label="$t('settings.background')"
+            />
+            <OpacityInput
+              v-model="inputOpacityLocal"
+              name="inputOpacity"
+              :fallback="previewTheme.opacity.input"
+              :disabled="inputColorLocal === 'transparent'"
+            />
+            <ColorInput
+              v-model="inputTextColorLocal"
+              name="inputTextColor"
+              :fallback="previewTheme.colors.inputText"
+              :label="$t('settings.text')"
+            />
+            <ContrastRatio :contrast="previewContrast.inputText" />
+          </div>
+          <div class="color-item">
+            <h4>{{ $t('settings.style.advanced_colors.buttons') }}</h4>
+            <ColorInput
+              v-model="btnColorLocal"
+              name="btnColor"
+              :fallback="previewTheme.colors.btn"
+              :label="$t('settings.background')"
+            />
+            <OpacityInput
+              v-model="btnOpacityLocal"
+              name="btnOpacity"
+              :fallback="previewTheme.opacity.btn"
+              :disabled="btnColorLocal === 'transparent'"
+            />
+            <ColorInput
+              v-model="btnTextColorLocal"
+              name="btnTextColor"
+              :fallback="previewTheme.colors.btnText"
+              :label="$t('settings.text')"
+            />
+            <ContrastRatio :contrast="previewContrast.btnText" />
+            <ColorInput
+              v-model="btnPanelTextColorLocal"
+              name="btnPanelTextColor"
+              :fallback="previewTheme.colors.btnPanelText"
+              :label="$t('settings.style.advanced_colors.panel_header')"
+            />
+            <ContrastRatio :contrast="previewContrast.btnPanelText" />
+            <ColorInput
+              v-model="btnTopBarTextColorLocal"
+              name="btnTopBarTextColor"
+              :fallback="previewTheme.colors.btnTopBarText"
+              :label="$t('settings.style.advanced_colors.top_bar')"
+            />
+            <ContrastRatio :contrast="previewContrast.btnTopBarText" />
+            <h5>{{ $t('settings.style.advanced_colors.pressed') }}</h5>
+            <ColorInput
+              v-model="btnPressedColorLocal"
+              name="btnPressedColor"
+              :fallback="previewTheme.colors.btnPressed"
+              :label="$t('settings.background')"
+            />
+            <ColorInput
+              v-model="btnPressedTextColorLocal"
+              name="btnPressedTextColor"
+              :fallback="previewTheme.colors.btnPressedText"
+              :label="$t('settings.text')"
+            />
+            <ContrastRatio :contrast="previewContrast.btnPressedText" />
+            <ColorInput
+              v-model="btnPressedPanelTextColorLocal"
+              name="btnPressedPanelTextColor"
+              :fallback="previewTheme.colors.btnPressedPanelText"
+              :label="$t('settings.style.advanced_colors.panel_header')"
+            />
+            <ContrastRatio :contrast="previewContrast.btnPressedPanelText" />
+            <ColorInput
+              v-model="btnPressedTopBarTextColorLocal"
+              name="btnPressedTopBarTextColor"
+              :fallback="previewTheme.colors.btnPressedTopBarText"
+              :label="$t('settings.style.advanced_colors.top_bar')"
+            />
+            <ContrastRatio :contrast="previewContrast.btnPressedTopBarText" />
+            <h5>{{ $t('settings.style.advanced_colors.disabled') }}</h5>
+            <ColorInput
+              v-model="btnDisabledColorLocal"
+              name="btnDisabledColor"
+              :fallback="previewTheme.colors.btnDisabled"
+              :label="$t('settings.background')"
+            />
+            <ColorInput
+              v-model="btnDisabledTextColorLocal"
+              name="btnDisabledTextColor"
+              :fallback="previewTheme.colors.btnDisabledText"
+              :label="$t('settings.text')"
+            />
+            <ColorInput
+              v-model="btnDisabledPanelTextColorLocal"
+              name="btnDisabledPanelTextColor"
+              :fallback="previewTheme.colors.btnDisabledPanelText"
+              :label="$t('settings.style.advanced_colors.panel_header')"
+            />
+            <ColorInput
+              v-model="btnDisabledTopBarTextColorLocal"
+              name="btnDisabledTopBarTextColor"
+              :fallback="previewTheme.colors.btnDisabledTopBarText"
+              :label="$t('settings.style.advanced_colors.top_bar')"
+            />
+            <h5>{{ $t('settings.style.advanced_colors.toggled') }}</h5>
+            <ColorInput
+              v-model="btnToggledColorLocal"
+              name="btnToggledColor"
+              :fallback="previewTheme.colors.btnToggled"
+              :label="$t('settings.background')"
+            />
+            <ColorInput
+              v-model="btnToggledTextColorLocal"
+              name="btnToggledTextColor"
+              :fallback="previewTheme.colors.btnToggledText"
+              :label="$t('settings.text')"
+            />
+            <ContrastRatio :contrast="previewContrast.btnToggledText" />
+            <ColorInput
+              v-model="btnToggledPanelTextColorLocal"
+              name="btnToggledPanelTextColor"
+              :fallback="previewTheme.colors.btnToggledPanelText"
+              :label="$t('settings.style.advanced_colors.panel_header')"
+            />
+            <ContrastRatio :contrast="previewContrast.btnToggledPanelText" />
+            <ColorInput
+              v-model="btnToggledTopBarTextColorLocal"
+              name="btnToggledTopBarTextColor"
+              :fallback="previewTheme.colors.btnToggledTopBarText"
+              :label="$t('settings.style.advanced_colors.top_bar')"
+            />
+            <ContrastRatio :contrast="previewContrast.btnToggledTopBarText" />
+          </div>
+          <div class="color-item">
+            <h4>{{ $t('settings.style.advanced_colors.tabs') }}</h4>
+            <ColorInput
+              v-model="tabColorLocal"
+              name="tabColor"
+              :fallback="previewTheme.colors.tab"
+              :label="$t('settings.background')"
+            />
+            <ColorInput
+              v-model="tabTextColorLocal"
+              name="tabTextColor"
+              :fallback="previewTheme.colors.tabText"
+              :label="$t('settings.text')"
+            />
+            <ContrastRatio :contrast="previewContrast.tabText" />
+            <ColorInput
+              v-model="tabActiveTextColorLocal"
+              name="tabActiveTextColor"
+              :fallback="previewTheme.colors.tabActiveText"
+              :label="$t('settings.text')"
+            />
+            <ContrastRatio :contrast="previewContrast.tabActiveText" />
+          </div>
+          <div class="color-item">
+            <h4>{{ $t('settings.style.advanced_colors.borders') }}</h4>
+            <ColorInput
+              v-model="borderColorLocal"
+              name="borderColor"
+              :fallback="previewTheme.colors.border"
+              :label="$t('settings.style.common.color')"
+            />
+            <OpacityInput
+              v-model="borderOpacityLocal"
+              name="borderOpacity"
+              :fallback="previewTheme.opacity.border"
+              :disabled="borderColorLocal === 'transparent'"
+            />
+          </div>
+          <div class="color-item">
+            <h4>{{ $t('settings.style.advanced_colors.faint_text') }}</h4>
+            <ColorInput
+              v-model="faintColorLocal"
+              name="faintColor"
+              :fallback="previewTheme.colors.faint"
+              :label="$t('settings.text')"
+            />
+            <ColorInput
+              v-model="faintLinkColorLocal"
+              name="faintLinkColor"
+              :fallback="previewTheme.colors.faintLink"
+              :label="$t('settings.links')"
+            />
+            <ColorInput
+              v-model="panelFaintColorLocal"
+              name="panelFaintColor"
+              :fallback="previewTheme.colors.panelFaint"
+              :label="$t('settings.style.advanced_colors.panel_header')"
+            />
+            <OpacityInput
+              v-model="faintOpacityLocal"
+              name="faintOpacity"
+              :fallback="previewTheme.opacity.faint"
+            />
+          </div>
+          <div class="color-item">
+            <h4>{{ $t('settings.style.advanced_colors.underlay') }}</h4>
+            <ColorInput
+              v-model="underlayColorLocal"
+              name="underlay"
+              :label="$t('settings.style.advanced_colors.underlay')"
+              :fallback="previewTheme.colors.underlay"
+            />
+            <OpacityInput
+              v-model="underlayOpacityLocal"
+              name="underlayOpacity"
+              :fallback="previewTheme.opacity.underlay"
+              :disabled="underlayOpacityLocal === 'transparent'"
+            />
+          </div>
+          <div class="color-item">
+            <h4>{{ $t('settings.style.advanced_colors.poll') }}</h4>
+            <ColorInput
+              v-model="pollColorLocal"
+              name="poll"
+              :label="$t('settings.background')"
+              :fallback="previewTheme.colors.poll"
+            />
+            <ColorInput
+              v-model="pollTextColorLocal"
+              name="pollText"
+              :label="$t('settings.text')"
+              :fallback="previewTheme.colors.pollText"
+            />
+          </div>
+          <div class="color-item">
+            <h4>{{ $t('settings.style.advanced_colors.icons') }}</h4>
+            <ColorInput
+              v-model="iconColorLocal"
+              name="icon"
+              :label="$t('settings.style.advanced_colors.icons')"
+              :fallback="previewTheme.colors.icon"
+            />
+          </div>
+          <div class="color-item">
+            <h4>{{ $t('settings.style.advanced_colors.highlight') }}</h4>
+            <ColorInput
+              v-model="highlightColorLocal"
+              name="highlight"
+              :label="$t('settings.background')"
+              :fallback="previewTheme.colors.highlight"
+            />
+            <ColorInput
+              v-model="highlightTextColorLocal"
+              name="highlightText"
+              :label="$t('settings.text')"
+              :fallback="previewTheme.colors.highlightText"
+            />
+            <ContrastRatio :contrast="previewContrast.highlightText" />
+            <ColorInput
+              v-model="highlightLinkColorLocal"
+              name="highlightLink"
+              :label="$t('settings.links')"
+              :fallback="previewTheme.colors.highlightLink"
+            />
+            <ContrastRatio :contrast="previewContrast.highlightLink" />
+          </div>
+          <div class="color-item">
+            <h4>{{ $t('settings.style.advanced_colors.popover') }}</h4>
+            <ColorInput
+              v-model="popoverColorLocal"
+              name="popover"
+              :label="$t('settings.background')"
+              :fallback="previewTheme.colors.popover"
+            />
+            <OpacityInput
+              v-model="popoverOpacityLocal"
+              name="popoverOpacity"
+              :fallback="previewTheme.opacity.popover"
+              :disabled="popoverOpacityLocal === 'transparent'"
+            />
+            <ColorInput
+              v-model="popoverTextColorLocal"
+              name="popoverText"
+              :label="$t('settings.text')"
+              :fallback="previewTheme.colors.popoverText"
+            />
+            <ContrastRatio :contrast="previewContrast.popoverText" />
+            <ColorInput
+              v-model="popoverLinkColorLocal"
+              name="popoverLink"
+              :label="$t('settings.links')"
+              :fallback="previewTheme.colors.popoverLink"
+            />
+            <ContrastRatio :contrast="previewContrast.popoverLink" />
+          </div>
+          <div class="color-item">
+            <h4>{{ $t('settings.style.advanced_colors.selectedPost') }}</h4>
+            <ColorInput
+              v-model="selectedPostColorLocal"
+              name="selectedPost"
+              :label="$t('settings.background')"
+              :fallback="previewTheme.colors.selectedPost"
+            />
+            <ColorInput
+              v-model="selectedPostTextColorLocal"
+              name="selectedPostText"
+              :label="$t('settings.text')"
+              :fallback="previewTheme.colors.selectedPostText"
+            />
+            <ContrastRatio :contrast="previewContrast.selectedPostText" />
+            <ColorInput
+              v-model="selectedPostLinkColorLocal"
+              name="selectedPostLink"
+              :label="$t('settings.links')"
+              :fallback="previewTheme.colors.selectedPostLink"
+            />
+            <ContrastRatio :contrast="previewContrast.selectedPostLink" />
+          </div>
+          <div class="color-item">
+            <h4>{{ $t('settings.style.advanced_colors.selectedMenu') }}</h4>
+            <ColorInput
+              v-model="selectedMenuColorLocal"
+              name="selectedMenu"
+              :label="$t('settings.background')"
+              :fallback="previewTheme.colors.selectedMenu"
+            />
+            <ColorInput
+              v-model="selectedMenuTextColorLocal"
+              name="selectedMenuText"
+              :label="$t('settings.text')"
+              :fallback="previewTheme.colors.selectedMenuText"
+            />
+            <ContrastRatio :contrast="previewContrast.selectedMenuText" />
+            <ColorInput
+              v-model="selectedMenuLinkColorLocal"
+              name="selectedMenuLink"
+              :label="$t('settings.links')"
+              :fallback="previewTheme.colors.selectedMenuLink"
+            />
+            <ContrastRatio :contrast="previewContrast.selectedMenuLink" />
+          </div>
+        </div>
+
+        <div
+          :label="$t('settings.style.radii._tab_label')"
+          class="radius-container"
+        >
+          <div class="tab-header">
+            <p>{{ $t('settings.radii_help') }}</p>
+            <button
+              class="btn"
+              @click="clearRoundness"
+            >
+              {{ $t('settings.style.switcher.clear_all') }}
+            </button>
+          </div>
+          <RangeInput
+            v-model="btnRadiusLocal"
+            name="btnRadius"
+            :label="$t('settings.btnRadius')"
+            :fallback="previewTheme.radii.btn"
+            max="16"
+            hard-min="0"
+          />
+          <RangeInput
+            v-model="inputRadiusLocal"
+            name="inputRadius"
+            :label="$t('settings.inputRadius')"
+            :fallback="previewTheme.radii.input"
+            max="9"
+            hard-min="0"
+          />
+          <RangeInput
+            v-model="checkboxRadiusLocal"
+            name="checkboxRadius"
+            :label="$t('settings.checkboxRadius')"
+            :fallback="previewTheme.radii.checkbox"
+            max="16"
+            hard-min="0"
+          />
+          <RangeInput
+            v-model="panelRadiusLocal"
+            name="panelRadius"
+            :label="$t('settings.panelRadius')"
+            :fallback="previewTheme.radii.panel"
+            max="50"
+            hard-min="0"
+          />
+          <RangeInput
+            v-model="avatarRadiusLocal"
+            name="avatarRadius"
+            :label="$t('settings.avatarRadius')"
+            :fallback="previewTheme.radii.avatar"
+            max="28"
+            hard-min="0"
+          />
+          <RangeInput
+            v-model="avatarAltRadiusLocal"
+            name="avatarAltRadius"
+            :label="$t('settings.avatarAltRadius')"
+            :fallback="previewTheme.radii.avatarAlt"
+            max="28"
+            hard-min="0"
+          />
+          <RangeInput
+            v-model="attachmentRadiusLocal"
+            name="attachmentRadius"
+            :label="$t('settings.attachmentRadius')"
+            :fallback="previewTheme.radii.attachment"
+            max="50"
+            hard-min="0"
+          />
+          <RangeInput
+            v-model="tooltipRadiusLocal"
+            name="tooltipRadius"
+            :label="$t('settings.tooltipRadius')"
+            :fallback="previewTheme.radii.tooltip"
+            max="50"
+            hard-min="0"
+          />
+        </div>
+
+        <div
+          :label="$t('settings.style.shadows._tab_label')"
+          class="shadow-container"
+        >
+          <div class="tab-header shadow-selector">
+            <div class="select-container">
+              {{ $t('settings.style.shadows.component') }}
+              <label
+                for="shadow-switcher"
+                class="select"
+              >
+                <select
+                  id="shadow-switcher"
+                  v-model="shadowSelected"
+                  class="shadow-switcher"
+                >
+                  <option
+                    v-for="shadow in shadowsAvailable"
+                    :key="shadow"
+                    :value="shadow"
+                  >
+                    {{ $t('settings.style.shadows.components.' + shadow) }}
+                  </option>
+                </select>
+                <i class="icon-down-open" />
+              </label>
+            </div>
+            <div class="override">
+              <label
+                for="override"
+                class="label"
+              >
+                {{ $t('settings.style.shadows.override') }}
+              </label>
+              <input
+                id="override"
+                v-model="currentShadowOverriden"
+                name="override"
+                class="input-override"
+                type="checkbox"
+              >
+              <label
+                class="checkbox-label"
+                for="override"
+              />
+            </div>
+            <button
+              class="btn"
+              @click="clearShadows"
+            >
+              {{ $t('settings.style.switcher.clear_all') }}
+            </button>
+          </div>
+          <ShadowControl
+            v-model="currentShadow"
+            :ready="!!currentShadowFallback"
+            :fallback="currentShadowFallback"
+          />
+          <div v-if="shadowSelected === 'avatar' || shadowSelected === 'avatarStatus'">
+            <i18n
+              path="settings.style.shadows.filter_hint.always_drop_shadow"
+              tag="p"
+            >
+              <code>filter: drop-shadow()</code>
+            </i18n>
+            <p>{{ $t('settings.style.shadows.filter_hint.avatar_inset') }}</p>
+            <i18n
+              path="settings.style.shadows.filter_hint.drop_shadow_syntax"
+              tag="p"
+            >
+              <code>drop-shadow</code>
+              <code>spread-radius</code>
+              <code>inset</code>
+            </i18n>
+            <i18n
+              path="settings.style.shadows.filter_hint.inset_classic"
+              tag="p"
+            >
+              <code>box-shadow</code>
+            </i18n>
+            <p>{{ $t('settings.style.shadows.filter_hint.spread_zero') }}</p>
+          </div>
+        </div>
+
+        <div
+          :label="$t('settings.style.fonts._tab_label')"
+          class="fonts-container"
+        >
+          <div class="tab-header">
+            <p>{{ $t('settings.style.fonts.help') }}</p>
+            <button
+              class="btn"
+              @click="clearFonts"
+            >
+              {{ $t('settings.style.switcher.clear_all') }}
+            </button>
+          </div>
+          <FontControl
+            v-model="fontsLocal.interface"
+            name="ui"
+            :label="$t('settings.style.fonts.components.interface')"
+            :fallback="previewTheme.fonts.interface"
+            no-inherit="1"
+          />
+          <FontControl
+            v-model="fontsLocal.input"
+            name="input"
+            :label="$t('settings.style.fonts.components.input')"
+            :fallback="previewTheme.fonts.input"
+          />
+          <FontControl
+            v-model="fontsLocal.post"
+            name="post"
+            :label="$t('settings.style.fonts.components.post')"
+            :fallback="previewTheme.fonts.post"
+          />
+          <FontControl
+            v-model="fontsLocal.postCode"
+            name="postCode"
+            :label="$t('settings.style.fonts.components.postCode')"
+            :fallback="previewTheme.fonts.postCode"
+          />
+        </div>
+      </tab-switcher>
+    </keep-alive>
+
+    <div class="apply-container">
+      <button
+        class="btn submit"
+        :disabled="!themeValid"
+        @click="setCustomTheme"
+      >
+        {{ $t('general.apply') }}
+      </button>
+      <button
+        class="btn"
+        @click="clearAll"
+      >
+        {{ $t('settings.style.switcher.reset') }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script src="./theme_tab.js"></script>
+
+<style src="./theme_tab.scss" lang="scss"></style>
diff --git a/src/components/settings_modal/tabs/version_tab.js b/src/components/settings_modal/tabs/version_tab.js
new file mode 100644
index 00000000..616bdadf
--- /dev/null
+++ b/src/components/settings_modal/tabs/version_tab.js
@@ -0,0 +1,24 @@
+import { extractCommit } from 'src/services/version/version.service'
+
+const pleromaFeCommitUrl = 'https://git.pleroma.social/pleroma/pleroma-fe/commit/'
+const pleromaBeCommitUrl = 'https://git.pleroma.social/pleroma/pleroma/commit/'
+
+const VersionTab = {
+  data () {
+    const instance = this.$store.state.instance
+    return {
+      backendVersion: instance.backendVersion,
+      frontendVersion: instance.frontendVersion
+    }
+  },
+  computed: {
+    frontendVersionLink () {
+      return pleromaFeCommitUrl + this.frontendVersion
+    },
+    backendVersionLink () {
+      return pleromaBeCommitUrl + extractCommit(this.backendVersion)
+    }
+  }
+}
+
+export default VersionTab
diff --git a/src/components/settings_modal/tabs/version_tab.vue b/src/components/settings_modal/tabs/version_tab.vue
new file mode 100644
index 00000000..acc43569
--- /dev/null
+++ b/src/components/settings_modal/tabs/version_tab.vue
@@ -0,0 +1,31 @@
+<template>
+<div :label="$t('settings.version.title')">
+  <div class="setting-item">
+    <ul class="setting-list">
+      <li>
+        <p>{{ $t('settings.version.backend_version') }}</p>
+        <ul class="option-list">
+          <li>
+            <a
+              :href="backendVersionLink"
+              target="_blank"
+              >{{ backendVersion }}</a>
+          </li>
+        </ul>
+      </li>
+      <li>
+        <p>{{ $t('settings.version.frontend_version') }}</p>
+        <ul class="option-list">
+          <li>
+            <a
+              :href="frontendVersionLink"
+              target="_blank"
+              >{{ frontendVersion }}</a>
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </div>
+</div>
+</template>
+<script src="./version_tab.js">
diff --git a/src/components/style_switcher/preview.vue b/src/components/style_switcher/preview.vue
deleted file mode 100644
index 9d984659..00000000
--- a/src/components/style_switcher/preview.vue
+++ /dev/null
@@ -1,117 +0,0 @@
-<template>
-  <div class="preview-container">
-    <div class="underlay underlay-preview" />
-    <div class="panel dummy">
-      <div class="panel-heading">
-        <div class="title">
-          {{ $t('settings.style.preview.header') }}
-          <span class="badge badge-notification">
-            99
-          </span>
-        </div>
-        <span class="faint">
-          {{ $t('settings.style.preview.header_faint') }}
-        </span>
-        <span class="alert error">
-          {{ $t('settings.style.preview.error') }}
-        </span>
-        <button class="btn">
-          {{ $t('settings.style.preview.button') }}
-        </button>
-      </div>
-      <div class="panel-body theme-preview-content">
-        <div class="post">
-          <div class="avatar still-image">
-            ( ͡° ͜ʖ ͡°)
-          </div>
-          <div class="content">
-            <h4>
-              {{ $t('settings.style.preview.content') }}
-            </h4>
-
-            <i18n path="settings.style.preview.text">
-              <code style="font-family: var(--postCodeFont)">
-                {{ $t('settings.style.preview.mono') }}
-              </code>
-              <a style="color: var(--link)">
-                {{ $t('settings.style.preview.link') }}
-              </a>
-            </i18n>
-
-            <div class="icons">
-              <i
-                style="color: var(--cBlue)"
-                class="button-icon icon-reply"
-              />
-              <i
-                style="color: var(--cGreen)"
-                class="button-icon icon-retweet"
-              />
-              <i
-                style="color: var(--cOrange)"
-                class="button-icon icon-star"
-              />
-              <i
-                style="color: var(--cRed)"
-                class="button-icon icon-cancel"
-              />
-            </div>
-          </div>
-        </div>
-
-        <div class="after-post">
-          <div class="avatar-alt">
-            :^)
-          </div>
-          <div class="content">
-            <i18n
-              path="settings.style.preview.fine_print"
-              tag="span"
-              class="faint"
-            >
-              <a style="color: var(--faintLink)">
-                {{ $t('settings.style.preview.faint_link') }}
-              </a>
-            </i18n>
-          </div>
-        </div>
-        <div class="separator" />
-
-        <span class="alert error">
-          {{ $t('settings.style.preview.error') }}
-        </span>
-        <input
-          :value="$t('settings.style.preview.input')"
-          type="text"
-        >
-
-        <div class="actions">
-          <span class="checkbox">
-            <input
-              id="preview_checkbox"
-              checked="very yes"
-              type="checkbox"
-            >
-            <label for="preview_checkbox">{{ $t('settings.style.preview.checkbox') }}</label>
-          </span>
-          <button class="btn">
-            {{ $t('settings.style.preview.button') }}
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss">
-.preview-container {
-  position: relative;
-}
-.underlay-preview {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 10px;
-  right: 10px;
-}
-</style>
diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
deleted file mode 100644
index a7f586f4..00000000
--- a/src/components/style_switcher/style_switcher.js
+++ /dev/null
@@ -1,758 +0,0 @@
-import { set, delete as del } from 'vue'
-import {
-  rgb2hex,
-  hex2rgb,
-  getContrastRatioLayers
-} from '../../services/color_convert/color_convert.js'
-import {
-  DEFAULT_SHADOWS,
-  generateColors,
-  generateShadows,
-  generateRadii,
-  generateFonts,
-  composePreset,
-  getThemes,
-  shadows2to3,
-  colors2to3
-} from '../../services/style_setter/style_setter.js'
-import {
-  SLOT_INHERITANCE
-} from '../../services/theme_data/pleromafe.js'
-import {
-  CURRENT_VERSION,
-  OPACITIES,
-  getLayers,
-  getOpacitySlot
-} from '../../services/theme_data/theme_data.service.js'
-import ColorInput from '../color_input/color_input.vue'
-import RangeInput from '../range_input/range_input.vue'
-import OpacityInput from '../opacity_input/opacity_input.vue'
-import ShadowControl from '../shadow_control/shadow_control.vue'
-import FontControl from '../font_control/font_control.vue'
-import ContrastRatio from '../contrast_ratio/contrast_ratio.vue'
-import TabSwitcher from '../tab_switcher/tab_switcher.js'
-import Preview from './preview.vue'
-import ExportImport from '../export_import/export_import.vue'
-import Checkbox from '../checkbox/checkbox.vue'
-
-// List of color values used in v1
-const v1OnlyNames = [
-  'bg',
-  'fg',
-  'text',
-  'link',
-  'cRed',
-  'cGreen',
-  'cBlue',
-  'cOrange'
-].map(_ => _ + 'ColorLocal')
-
-const colorConvert = (color) => {
-  if (color.startsWith('--') || color === 'transparent') {
-    return color
-  } else {
-    return hex2rgb(color)
-  }
-}
-
-export default {
-  data () {
-    return {
-      availableStyles: [],
-      selected: this.$store.getters.mergedConfig.theme,
-      themeWarning: undefined,
-      tempImportFile: undefined,
-      engineVersion: 0,
-
-      previewShadows: {},
-      previewColors: {},
-      previewRadii: {},
-      previewFonts: {},
-
-      shadowsInvalid: true,
-      colorsInvalid: true,
-      radiiInvalid: true,
-
-      keepColor: false,
-      keepShadows: false,
-      keepOpacity: false,
-      keepRoundness: false,
-      keepFonts: false,
-
-      ...Object.keys(SLOT_INHERITANCE)
-        .map(key => [key, ''])
-        .reduce((acc, [key, val]) => ({ ...acc, [ key + 'ColorLocal' ]: val }), {}),
-
-      ...Object.keys(OPACITIES)
-        .map(key => [key, ''])
-        .reduce((acc, [key, val]) => ({ ...acc, [ key + 'OpacityLocal' ]: val }), {}),
-
-      shadowSelected: undefined,
-      shadowsLocal: {},
-      fontsLocal: {},
-
-      btnRadiusLocal: '',
-      inputRadiusLocal: '',
-      checkboxRadiusLocal: '',
-      panelRadiusLocal: '',
-      avatarRadiusLocal: '',
-      avatarAltRadiusLocal: '',
-      attachmentRadiusLocal: '',
-      tooltipRadiusLocal: ''
-    }
-  },
-  created () {
-    const self = this
-
-    getThemes()
-      .then((promises) => {
-        return Promise.all(
-          Object.entries(promises)
-            .map(([k, v]) => v.then(res => [k, res]))
-        )
-      })
-      .then(themes => themes.reduce((acc, [k, v]) => {
-        if (v) {
-          return {
-            ...acc,
-            [k]: v
-          }
-        } else {
-          return acc
-        }
-      }, {}))
-      .then((themesComplete) => {
-        self.availableStyles = themesComplete
-      })
-  },
-  mounted () {
-    this.loadThemeFromLocalStorage()
-    if (typeof this.shadowSelected === 'undefined') {
-      this.shadowSelected = this.shadowsAvailable[0]
-    }
-  },
-  computed: {
-    themeWarningHelp () {
-      if (!this.themeWarning) return
-      const t = this.$t
-      const pre = 'settings.style.switcher.help.'
-      const {
-        origin,
-        themeEngineVersion,
-        type,
-        noActionsPossible
-      } = this.themeWarning
-      if (origin === 'file') {
-        // Loaded v2 theme from file
-        if (themeEngineVersion === 2 && type === 'wrong_version') {
-          return t(pre + 'v2_imported')
-        }
-        if (themeEngineVersion > CURRENT_VERSION) {
-          return t(pre + 'future_version_imported') + ' ' +
-            (
-              noActionsPossible
-                ? t(pre + 'snapshot_missing')
-                : t(pre + 'snapshot_present')
-            )
-        }
-        if (themeEngineVersion < CURRENT_VERSION) {
-          return t(pre + 'future_version_imported') + ' ' +
-            (
-              noActionsPossible
-                ? t(pre + 'snapshot_missing')
-                : t(pre + 'snapshot_present')
-            )
-        }
-      } else if (origin === 'localStorage') {
-        if (type === 'snapshot_source_mismatch') {
-          return t(pre + 'snapshot_source_mismatch')
-        }
-        // FE upgraded from v2
-        if (themeEngineVersion === 2) {
-          return t(pre + 'upgraded_from_v2')
-        }
-        // Admin downgraded FE
-        if (themeEngineVersion > CURRENT_VERSION) {
-          return t(pre + 'fe_downgraded') + ' ' +
-            (
-              noActionsPossible
-                ? t(pre + 'migration_snapshot_ok')
-                : t(pre + 'migration_snapshot_gone')
-            )
-        }
-        // Admin upgraded FE
-        if (themeEngineVersion < CURRENT_VERSION) {
-          return t(pre + 'fe_upgraded') + ' ' +
-            (
-              noActionsPossible
-                ? t(pre + 'migration_snapshot_ok')
-                : t(pre + 'migration_snapshot_gone')
-            )
-        }
-      }
-    },
-    selectedVersion () {
-      return Array.isArray(this.selected) ? 1 : 2
-    },
-    currentColors () {
-      return Object.keys(SLOT_INHERITANCE)
-        .map(key => [key, this[key + 'ColorLocal']])
-        .reduce((acc, [key, val]) => ({ ...acc, [ key ]: val }), {})
-    },
-    currentOpacity () {
-      return Object.keys(OPACITIES)
-        .map(key => [key, this[key + 'OpacityLocal']])
-        .reduce((acc, [key, val]) => ({ ...acc, [ key ]: val }), {})
-    },
-    currentRadii () {
-      return {
-        btn: this.btnRadiusLocal,
-        input: this.inputRadiusLocal,
-        checkbox: this.checkboxRadiusLocal,
-        panel: this.panelRadiusLocal,
-        avatar: this.avatarRadiusLocal,
-        avatarAlt: this.avatarAltRadiusLocal,
-        tooltip: this.tooltipRadiusLocal,
-        attachment: this.attachmentRadiusLocal
-      }
-    },
-    preview () {
-      return composePreset(this.previewColors, this.previewRadii, this.previewShadows, this.previewFonts)
-    },
-    previewTheme () {
-      if (!this.preview.theme.colors) return { colors: {}, opacity: {}, radii: {}, shadows: {}, fonts: {} }
-      return this.preview.theme
-    },
-    // This needs optimization maybe
-    previewContrast () {
-      try {
-        if (!this.previewTheme.colors.bg) return {}
-        const colors = this.previewTheme.colors
-        const opacity = this.previewTheme.opacity
-        if (!colors.bg) return {}
-        const hints = (ratio) => ({
-          text: ratio.toPrecision(3) + ':1',
-          // AA level, AAA level
-          aa: ratio >= 4.5,
-          aaa: ratio >= 7,
-          // same but for 18pt+ texts
-          laa: ratio >= 3,
-          laaa: ratio >= 4.5
-        })
-        const colorsConverted = Object.entries(colors).reduce((acc, [key, value]) => ({ ...acc, [key]: colorConvert(value) }), {})
-
-        const ratios = Object.entries(SLOT_INHERITANCE).reduce((acc, [key, value]) => {
-          const slotIsBaseText = key === 'text' || key === 'link'
-          const slotIsText = slotIsBaseText || (
-            typeof value === 'object' && value !== null && value.textColor
-          )
-          if (!slotIsText) return acc
-          const { layer, variant } = slotIsBaseText ? { layer: 'bg' } : value
-          const background = variant || layer
-          const opacitySlot = getOpacitySlot(background)
-          const textColors = [
-            key,
-            ...(background === 'bg' ? ['cRed', 'cGreen', 'cBlue', 'cOrange'] : [])
-          ]
-
-          const layers = getLayers(
-            layer,
-            variant || layer,
-            opacitySlot,
-            colorsConverted,
-            opacity
-          )
-
-          return {
-            ...acc,
-            ...textColors.reduce((acc, textColorKey) => {
-              const newKey = slotIsBaseText
-                ? 'bg' + textColorKey[0].toUpperCase() + textColorKey.slice(1)
-                : textColorKey
-              return {
-                ...acc,
-                [newKey]: getContrastRatioLayers(
-                  colorsConverted[textColorKey],
-                  layers,
-                  colorsConverted[textColorKey]
-                )
-              }
-            }, {})
-          }
-        }, {})
-
-        return Object.entries(ratios).reduce((acc, [k, v]) => { acc[k] = hints(v); return acc }, {})
-      } catch (e) {
-        console.warn('Failure computing contrasts', e)
-      }
-    },
-    previewRules () {
-      if (!this.preview.rules) return ''
-      return [
-        ...Object.values(this.preview.rules),
-        'color: var(--text)',
-        'font-family: var(--interfaceFont, sans-serif)'
-      ].join(';')
-    },
-    shadowsAvailable () {
-      return Object.keys(DEFAULT_SHADOWS).sort()
-    },
-    currentShadowOverriden: {
-      get () {
-        return !!this.currentShadow
-      },
-      set (val) {
-        if (val) {
-          set(this.shadowsLocal, this.shadowSelected, this.currentShadowFallback.map(_ => Object.assign({}, _)))
-        } else {
-          del(this.shadowsLocal, this.shadowSelected)
-        }
-      }
-    },
-    currentShadowFallback () {
-      return (this.previewTheme.shadows || {})[this.shadowSelected]
-    },
-    currentShadow: {
-      get () {
-        return this.shadowsLocal[this.shadowSelected]
-      },
-      set (v) {
-        set(this.shadowsLocal, this.shadowSelected, v)
-      }
-    },
-    themeValid () {
-      return !this.shadowsInvalid && !this.colorsInvalid && !this.radiiInvalid
-    },
-    exportedTheme () {
-      const saveEverything = (
-        !this.keepFonts &&
-        !this.keepShadows &&
-        !this.keepOpacity &&
-        !this.keepRoundness &&
-        !this.keepColor
-      )
-
-      const source = {
-        themeEngineVersion: CURRENT_VERSION
-      }
-
-      if (this.keepFonts || saveEverything) {
-        source.fonts = this.fontsLocal
-      }
-      if (this.keepShadows || saveEverything) {
-        source.shadows = this.shadowsLocal
-      }
-      if (this.keepOpacity || saveEverything) {
-        source.opacity = this.currentOpacity
-      }
-      if (this.keepColor || saveEverything) {
-        source.colors = this.currentColors
-      }
-      if (this.keepRoundness || saveEverything) {
-        source.radii = this.currentRadii
-      }
-
-      const theme = {
-        themeEngineVersion: CURRENT_VERSION,
-        ...this.previewTheme
-      }
-
-      return {
-        // To separate from other random JSON files and possible future source formats
-        _pleroma_theme_version: 2, theme, source
-      }
-    }
-  },
-  components: {
-    ColorInput,
-    OpacityInput,
-    RangeInput,
-    ContrastRatio,
-    ShadowControl,
-    FontControl,
-    TabSwitcher,
-    Preview,
-    ExportImport,
-    Checkbox
-  },
-  methods: {
-    loadTheme (
-      {
-        theme,
-        source,
-        _pleroma_theme_version: fileVersion
-      },
-      origin,
-      forceUseSource = false
-    ) {
-      this.dismissWarning()
-      if (!source && !theme) {
-        throw new Error('Can\'t load theme: empty')
-      }
-      const version = (origin === 'localStorage' && !theme.colors)
-        ? 'l1'
-        : fileVersion
-      const snapshotEngineVersion = (theme || {}).themeEngineVersion
-      const themeEngineVersion = (source || {}).themeEngineVersion || 2
-      const versionsMatch = themeEngineVersion === CURRENT_VERSION
-      const sourceSnapshotMismatch = (
-        theme !== undefined &&
-          source !== undefined &&
-          themeEngineVersion !== snapshotEngineVersion
-      )
-      // Force loading of source if user requested it or if snapshot
-      // is unavailable
-      const forcedSourceLoad = (source && forceUseSource) || !theme
-      if (!(versionsMatch && !sourceSnapshotMismatch) &&
-          !forcedSourceLoad &&
-          version !== 'l1' &&
-          origin !== 'defaults'
-      ) {
-        if (sourceSnapshotMismatch && origin === 'localStorage') {
-          this.themeWarning = {
-            origin,
-            themeEngineVersion,
-            type: 'snapshot_source_mismatch'
-          }
-        } else if (!theme) {
-          this.themeWarning = {
-            origin,
-            noActionsPossible: true,
-            themeEngineVersion,
-            type: 'no_snapshot_old_version'
-          }
-        } else if (!versionsMatch) {
-          this.themeWarning = {
-            origin,
-            noActionsPossible: !source,
-            themeEngineVersion,
-            type: 'wrong_version'
-          }
-        }
-      }
-      this.normalizeLocalState(theme, version, source, forcedSourceLoad)
-    },
-    forceLoadLocalStorage () {
-      this.loadThemeFromLocalStorage(true)
-    },
-    dismissWarning () {
-      this.themeWarning = undefined
-      this.tempImportFile = undefined
-    },
-    forceLoad () {
-      const { origin } = this.themeWarning
-      switch (origin) {
-        case 'localStorage':
-          this.loadThemeFromLocalStorage(true)
-          break
-        case 'file':
-          this.onImport(this.tempImportFile, true)
-          break
-      }
-      this.dismissWarning()
-    },
-    forceSnapshot () {
-      const { origin } = this.themeWarning
-      switch (origin) {
-        case 'localStorage':
-          this.loadThemeFromLocalStorage(false, true)
-          break
-        case 'file':
-          console.err('Forcing snapshout from file is not supported yet')
-          break
-      }
-      this.dismissWarning()
-    },
-    loadThemeFromLocalStorage (confirmLoadSource = false, forceSnapshot = false) {
-      const {
-        customTheme: theme,
-        customThemeSource: source
-      } = this.$store.getters.mergedConfig
-      if (!theme && !source) {
-        // Anon user or never touched themes
-        this.loadTheme(
-          this.$store.state.instance.themeData,
-          'defaults',
-          confirmLoadSource
-        )
-      } else {
-        this.loadTheme(
-          {
-            theme,
-            source: forceSnapshot ? theme : source
-          },
-          'localStorage',
-          confirmLoadSource
-        )
-      }
-    },
-    setCustomTheme () {
-      this.$store.dispatch('setOption', {
-        name: 'customTheme',
-        value: {
-          themeEngineVersion: CURRENT_VERSION,
-          ...this.previewTheme
-        }
-      })
-      this.$store.dispatch('setOption', {
-        name: 'customThemeSource',
-        value: {
-          themeEngineVersion: CURRENT_VERSION,
-          shadows: this.shadowsLocal,
-          fonts: this.fontsLocal,
-          opacity: this.currentOpacity,
-          colors: this.currentColors,
-          radii: this.currentRadii
-        }
-      })
-    },
-    updatePreviewColorsAndShadows () {
-      this.previewColors = generateColors({
-        opacity: this.currentOpacity,
-        colors: this.currentColors
-      })
-      this.previewShadows = generateShadows(
-        { shadows: this.shadowsLocal, opacity: this.previewTheme.opacity, themeEngineVersion: this.engineVersion },
-        this.previewColors.theme.colors,
-        this.previewColors.mod
-      )
-    },
-    onImport (parsed, forceSource = false) {
-      this.tempImportFile = parsed
-      this.loadTheme(parsed, 'file', forceSource)
-    },
-    importValidator (parsed) {
-      const version = parsed._pleroma_theme_version
-      return version >= 1 || version <= 2
-    },
-    clearAll () {
-      this.loadThemeFromLocalStorage()
-    },
-
-    // Clears all the extra stuff when loading V1 theme
-    clearV1 () {
-      Object.keys(this.$data)
-        .filter(_ => _.endsWith('ColorLocal') || _.endsWith('OpacityLocal'))
-        .filter(_ => !v1OnlyNames.includes(_))
-        .forEach(key => {
-          set(this.$data, key, undefined)
-        })
-    },
-
-    clearRoundness () {
-      Object.keys(this.$data)
-        .filter(_ => _.endsWith('RadiusLocal'))
-        .forEach(key => {
-          set(this.$data, key, undefined)
-        })
-    },
-
-    clearOpacity () {
-      Object.keys(this.$data)
-        .filter(_ => _.endsWith('OpacityLocal'))
-        .forEach(key => {
-          set(this.$data, key, undefined)
-        })
-    },
-
-    clearShadows () {
-      this.shadowsLocal = {}
-    },
-
-    clearFonts () {
-      this.fontsLocal = {}
-    },
-
-    /**
-     * This applies stored theme data onto form. Supports three versions of data:
-     * v3 (version >= 3) - newest version of themes which supports snapshots for better compatiblity
-     * v2 (version = 2) - newer version of themes.
-     * v1 (version = 1) - older version of themes (import from file)
-     * v1l (version = l1) - older version of theme (load from local storage)
-     * v1 and v1l differ because of way themes were stored/exported.
-     * @param {Object} theme - theme data (snapshot)
-     * @param {Number} version - version of data. 0 means try to guess based on data. "l1" means v1, locastorage type
-     * @param {Object} source - theme source - this will be used if compatible
-     * @param {Boolean} source - by default source won't be used if version doesn't match since it might render differently
-     *                           this allows importing source anyway
-     */
-    normalizeLocalState (theme, version = 0, source, forceSource = false) {
-      let input
-      if (typeof source !== 'undefined') {
-        if (forceSource || source.themeEngineVersion === CURRENT_VERSION) {
-          input = source
-          version = source.themeEngineVersion
-        } else {
-          input = theme
-        }
-      } else {
-        input = theme
-      }
-
-      const radii = input.radii || input
-      const opacity = input.opacity
-      const shadows = input.shadows || {}
-      const fonts = input.fonts || {}
-      const colors = !input.themeEngineVersion
-        ? colors2to3(input.colors || input)
-        : input.colors || input
-
-      if (version === 0) {
-        if (input.version) version = input.version
-        // Old v1 naming: fg is text, btn is foreground
-        if (typeof colors.text === 'undefined' && typeof colors.fg !== 'undefined') {
-          version = 1
-        }
-        // New v2 naming: text is text, fg is foreground
-        if (typeof colors.text !== 'undefined' && typeof colors.fg !== 'undefined') {
-          version = 2
-        }
-      }
-
-      this.engineVersion = version
-
-      // Stuff that differs between V1 and V2
-      if (version === 1) {
-        this.fgColorLocal = rgb2hex(colors.btn)
-        this.textColorLocal = rgb2hex(colors.fg)
-      }
-
-      if (!this.keepColor) {
-        this.clearV1()
-        const keys = new Set(version !== 1 ? Object.keys(SLOT_INHERITANCE) : [])
-        if (version === 1 || version === 'l1') {
-          keys
-            .add('bg')
-            .add('link')
-            .add('cRed')
-            .add('cBlue')
-            .add('cGreen')
-            .add('cOrange')
-        }
-
-        keys.forEach(key => {
-          const color = colors[key]
-          const hex = rgb2hex(colors[key])
-          this[key + 'ColorLocal'] = hex === '#aN' ? color : hex
-        })
-      }
-
-      if (opacity && !this.keepOpacity) {
-        this.clearOpacity()
-        Object.entries(opacity).forEach(([k, v]) => {
-          if (typeof v === 'undefined' || v === null || Number.isNaN(v)) return
-          this[k + 'OpacityLocal'] = v
-        })
-      }
-
-      if (!this.keepRoundness) {
-        this.clearRoundness()
-        Object.entries(radii).forEach(([k, v]) => {
-          // 'Radius' is kept mostly for v1->v2 localstorage transition
-          const key = k.endsWith('Radius') ? k.split('Radius')[0] : k
-          this[key + 'RadiusLocal'] = v
-        })
-      }
-
-      if (!this.keepShadows) {
-        this.clearShadows()
-        if (version === 2) {
-          this.shadowsLocal = shadows2to3(shadows, this.previewTheme.opacity)
-        } else {
-          this.shadowsLocal = shadows
-        }
-        this.shadowSelected = this.shadowsAvailable[0]
-      }
-
-      if (!this.keepFonts) {
-        this.clearFonts()
-        this.fontsLocal = fonts
-      }
-    }
-  },
-  watch: {
-    currentRadii () {
-      try {
-        this.previewRadii = generateRadii({ radii: this.currentRadii })
-        this.radiiInvalid = false
-      } catch (e) {
-        this.radiiInvalid = true
-        console.warn(e)
-      }
-    },
-    shadowsLocal: {
-      handler () {
-        if (Object.getOwnPropertyNames(this.previewColors).length === 1) return
-        try {
-          this.updatePreviewColorsAndShadows()
-          this.shadowsInvalid = false
-        } catch (e) {
-          this.shadowsInvalid = true
-          console.warn(e)
-        }
-      },
-      deep: true
-    },
-    fontsLocal: {
-      handler () {
-        try {
-          this.previewFonts = generateFonts({ fonts: this.fontsLocal })
-          this.fontsInvalid = false
-        } catch (e) {
-          this.fontsInvalid = true
-          console.warn(e)
-        }
-      },
-      deep: true
-    },
-    currentColors () {
-      try {
-        this.updatePreviewColorsAndShadows()
-        this.colorsInvalid = false
-        this.shadowsInvalid = false
-      } catch (e) {
-        this.colorsInvalid = true
-        this.shadowsInvalid = true
-        console.warn(e)
-      }
-    },
-    currentOpacity () {
-      try {
-        this.updatePreviewColorsAndShadows()
-      } catch (e) {
-        console.warn(e)
-      }
-    },
-    selected () {
-      this.dismissWarning()
-      if (this.selectedVersion === 1) {
-        if (!this.keepRoundness) {
-          this.clearRoundness()
-        }
-
-        if (!this.keepShadows) {
-          this.clearShadows()
-        }
-
-        if (!this.keepOpacity) {
-          this.clearOpacity()
-        }
-
-        if (!this.keepColor) {
-          this.clearV1()
-
-          this.bgColorLocal = this.selected[1]
-          this.fgColorLocal = this.selected[2]
-          this.textColorLocal = this.selected[3]
-          this.linkColorLocal = this.selected[4]
-          this.cRedColorLocal = this.selected[5]
-          this.cGreenColorLocal = this.selected[6]
-          this.cBlueColorLocal = this.selected[7]
-          this.cOrangeColorLocal = this.selected[8]
-        }
-      } else if (this.selectedVersion >= 2) {
-        this.normalizeLocalState(this.selected.theme, 2, this.selected.source)
-      }
-    }
-  }
-}
diff --git a/src/components/style_switcher/style_switcher.scss b/src/components/style_switcher/style_switcher.scss
deleted file mode 100644
index d2a40d13..00000000
--- a/src/components/style_switcher/style_switcher.scss
+++ /dev/null
@@ -1,335 +0,0 @@
-@import '../../_variables.scss';
-.style-switcher {
-  .theme-warning {
-    display: flex;
-    align-items: baseline;
-    margin-bottom: .5em;
-    .buttons {
-      .btn {
-        margin-bottom: .5em;
-      }
-    }
-  }
-  .preset-switcher {
-    margin-right: 1em;
-  }
-
-  .style-control {
-    display: flex;
-    align-items: baseline;
-    margin-bottom: 5px;
-
-    .label {
-      flex: 1;
-    }
-
-    &.disabled {
-      input, select {
-        opacity: .5
-      }
-    }
-
-    .opt {
-      margin: .5em;
-    }
-
-    .color-input {
-      flex: 0 0 0;
-    }
-
-    input, select {
-      min-width: 3em;
-      margin: 0;
-      flex: 0;
-
-      &[type=number] {
-        min-width: 5em;
-      }
-
-      &[type=range] {
-        flex: 1;
-        min-width: 3em;
-        align-self: flex-start;
-      }
-    }
-  }
-
-  .tab-switcher {
-    margin: 0 -1em;
-  }
-
-  .reset-container {
-    flex-wrap: wrap;
-  }
-
-  .fonts-container,
-  .reset-container,
-  .apply-container,
-  .radius-container,
-  .color-container,
-  {
-    display: flex;
-  }
-
-  .fonts-container,
-  .radius-container {
-    flex-direction: column;
-  }
-
-  .color-container{
-    > h4 {
-      width: 99%;
-    }
-    flex-wrap: wrap;
-    justify-content: space-between;
-  }
-
-  .fonts-container,
-  .color-container,
-  .shadow-container,
-  .radius-container,
-  .presets-container {
-    margin: 1em 1em 0;
-  }
-
-  .tab-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: baseline;
-    width: 100%;
-    min-height: 30px;
-
-    .btn {
-      min-width: 1px;
-      flex: 0 auto;
-      padding: 0 1em;
-    }
-
-    p {
-      flex: 1;
-      margin: 0;
-      margin-right: .5em;
-    }
-
-    margin-bottom: 1em;
-  }
-
-  .shadow-selector {
-    .override {
-      flex: 1;
-      margin-left: .5em;
-    }
-    .select-container {
-      margin-top: -4px;
-      margin-bottom: -3px;
-    }
-  }
-
-  .save-load,
-  .save-load-options {
-    display: flex;
-    justify-content: center;
-    align-items: baseline;
-    flex-wrap: wrap;
-
-    .presets,
-    .import-export {
-      margin-bottom: .5em;
-    }
-
-    .import-export {
-      display: flex;
-    }
-
-    .override {
-      margin-left: .5em;
-    }
-  }
-
-  .save-load-options {
-    flex-wrap: wrap;
-    margin-top: .5em;
-    justify-content: center;
-    .keep-option {
-      margin: 0 .5em .5em;
-      min-width: 25%;
-    }
-  }
-
-  .preview-container {
-    border-top: 1px dashed;
-    border-bottom: 1px dashed;
-    border-color: $fallback--border;
-    border-color: var(--border, $fallback--border);
-    margin: 1em -1em 0;
-    padding: 1em;
-    background: var(--body-background-image);
-    background-size: cover;
-    background-position: 50% 50%;
-
-    .dummy {
-      .post {
-        font-family: var(--postFont);
-        display: flex;
-
-        .content {
-          flex: 1;
-
-          h4 {
-            margin-bottom: .25em;
-          }
-
-          .icons {
-            margin-top: .5em;
-            display: flex;
-
-            i {
-              margin-right: 1em;
-            }
-          }
-        }
-      }
-
-      .after-post {
-        margin-top: 1em;
-        display: flex;
-        align-items: center;
-      }
-
-      .avatar, .avatar-alt{
-        background: linear-gradient(135deg, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%);
-        color: black;
-        font-family: sans-serif;
-        text-align: center;
-        margin-right: 1em;
-      }
-
-      .avatar-alt {
-        flex: 0 auto;
-        margin-left: 28px;
-        font-size: 12px;
-        min-width: 20px;
-        min-height: 20px;
-        line-height: 20px;
-        border-radius: $fallback--avatarAltRadius;
-        border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
-      }
-
-      .avatar {
-        flex: 0 auto;
-        width: 48px;
-        height: 48px;
-        font-size: 14px;
-        line-height: 48px;
-      }
-
-      .actions {
-        display: flex;
-        align-items: baseline;
-
-        .checkbox {
-          display: inline-flex;
-          align-items: baseline;
-          margin-right: 1em;
-          flex: 1;
-        }
-      }
-
-      .separator {
-        margin: 1em;
-        border-bottom: 1px solid;
-        border-color: $fallback--border;
-        border-color: var(--border, $fallback--border);
-      }
-
-      .panel-heading {
-        .badge, .alert, .btn, .faint {
-          margin-left: 1em;
-          white-space: nowrap;
-        }
-        .faint {
-          text-overflow: ellipsis;
-          min-width: 2em;
-          overflow-x: hidden;
-        }
-        .flex-spacer {
-          flex: 1;
-        }
-      }
-      .btn {
-        margin-left: 0;
-        padding: 0 1em;
-        min-width: 3em;
-        min-height: 30px;
-      }
-    }
-  }
-
-  .apply-container {
-    justify-content: center;
-  }
-
-  .radius-item,
-  .color-item {
-    min-width: 20em;
-    margin: 5px 6px 0 0;
-    display:flex;
-    flex-direction: column;
-    flex: 1 1 0;
-
-    &.wide {
-      min-width: 60%
-    }
-
-    &:not(.wide):nth-child(2n+1) {
-      margin-right: 7px;
-
-    }
-
-    .color, .opacity {
-      display:flex;
-      align-items: baseline;
-    }
-  }
-
-  .radius-item {
-    flex-basis: auto;
-  }
-
-  .theme-radius-rn,
-  .theme-color-cl {
-    border: 0;
-    box-shadow: none;
-    background: transparent;
-    color: var(--faint, $fallback--faint);
-    align-self: stretch;
-  }
-
-  .theme-color-cl,
-  .theme-radius-in,
-  .theme-color-in {
-    margin-left: 4px;
-  }
-
-  .theme-radius-in {
-    min-width: 1em;
-  }
-
-  .theme-radius-in {
-    max-width: 7em;
-    flex: 1;
-  }
-
-  .theme-radius-lb{
-    max-width: 50em;
-  }
-
-  .theme-preview-content {
-    padding: 20px;
-  }
-
-  .btn {
-    margin-left: .25em;
-    margin-right: .25em;
-  }
-}
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
deleted file mode 100644
index 62c8e634..00000000
--- a/src/components/style_switcher/style_switcher.vue
+++ /dev/null
@@ -1,956 +0,0 @@
-<template>
-  <div class="style-switcher">
-    <div class="presets-container">
-      <div class="save-load">
-        <div
-          v-if="themeWarning"
-          class="theme-warning"
-        >
-          <div class="alert warning">
-            {{ themeWarningHelp }}
-          </div>
-          <div class="buttons">
-            <template v-if="themeWarning.type === 'snapshot_source_mismatch'">
-              <button
-                class="btn"
-                @click="forceLoad"
-              >
-                {{ $t('settings.style.switcher.use_source') }}
-              </button>
-              <button
-                class="btn"
-                @click="forceSnapshot"
-              >
-                {{ $t('settings.style.switcher.use_snapshot') }}
-              </button>
-            </template>
-            <template v-else-if="themeWarning.noActionsPossible">
-              <button
-                class="btn"
-                @click="dismissWarning"
-              >
-                {{ $t('general.dismiss') }}
-              </button>
-            </template>
-            <template v-else>
-              <button
-                class="btn"
-                @click="forceLoad"
-              >
-                {{ $t('settings.style.switcher.load_theme') }}
-              </button>
-              <button
-                class="btn"
-                @click="dismissWarning"
-              >
-                {{ $t('settings.style.switcher.keep_as_is') }}
-              </button>
-            </template>
-          </div>
-        </div>
-        <ExportImport
-          :export-object="exportedTheme"
-          :export-label="$t(&quot;settings.export_theme&quot;)"
-          :import-label="$t(&quot;settings.import_theme&quot;)"
-          :import-failed-text="$t(&quot;settings.invalid_theme_imported&quot;)"
-          :on-import="onImport"
-          :validator="importValidator"
-        >
-          <template slot="before">
-            <div class="presets">
-              {{ $t('settings.presets') }}
-              <label
-                for="preset-switcher"
-                class="select"
-              >
-                <select
-                  id="preset-switcher"
-                  v-model="selected"
-                  class="preset-switcher"
-                >
-                  <option
-                    v-for="style in availableStyles"
-                    :key="style.name"
-                    :value="style"
-                    :style="{
-                      backgroundColor: style[1] || (style.theme || style.source).colors.bg,
-                      color: style[3] || (style.theme || style.source).colors.text
-                    }"
-                  >
-                    {{ style[0] || style.name }}
-                  </option>
-                </select>
-                <i class="icon-down-open" />
-              </label>
-            </div>
-          </template>
-        </ExportImport>
-      </div>
-      <div class="save-load-options">
-        <span class="keep-option">
-          <Checkbox v-model="keepColor">
-            {{ $t('settings.style.switcher.keep_color') }}
-          </Checkbox>
-        </span>
-        <span class="keep-option">
-          <Checkbox v-model="keepShadows">
-            {{ $t('settings.style.switcher.keep_shadows') }}
-          </Checkbox>
-        </span>
-        <span class="keep-option">
-          <Checkbox v-model="keepOpacity">
-            {{ $t('settings.style.switcher.keep_opacity') }}
-          </Checkbox>
-        </span>
-        <span class="keep-option">
-          <Checkbox v-model="keepRoundness">
-            {{ $t('settings.style.switcher.keep_roundness') }}
-          </Checkbox>
-        </span>
-        <span class="keep-option">
-          <Checkbox v-model="keepFonts">
-            {{ $t('settings.style.switcher.keep_fonts') }}
-          </Checkbox>
-        </span>
-        <p>{{ $t('settings.style.switcher.save_load_hint') }}</p>
-      </div>
-    </div>
-
-    <preview :style="previewRules" />
-
-    <keep-alive>
-      <tab-switcher key="style-tweak">
-        <div
-          :label="$t('settings.style.common_colors._tab_label')"
-          class="color-container"
-        >
-          <div class="tab-header">
-            <p>{{ $t('settings.theme_help') }}</p>
-            <button
-              class="btn"
-              @click="clearOpacity"
-            >
-              {{ $t('settings.style.switcher.clear_opacity') }}
-            </button>
-            <button
-              class="btn"
-              @click="clearV1"
-            >
-              {{ $t('settings.style.switcher.clear_all') }}
-            </button>
-          </div>
-          <p>{{ $t('settings.theme_help_v2_1') }}</p>
-          <h4>{{ $t('settings.style.common_colors.main') }}</h4>
-          <div class="color-item">
-            <ColorInput
-              v-model="bgColorLocal"
-              name="bgColor"
-              :label="$t('settings.background')"
-            />
-            <OpacityInput
-              v-model="bgOpacityLocal"
-              name="bgOpacity"
-              :fallback="previewTheme.opacity.bg"
-            />
-            <ColorInput
-              v-model="textColorLocal"
-              name="textColor"
-              :label="$t('settings.text')"
-            />
-            <ContrastRatio :contrast="previewContrast.bgText" />
-            <ColorInput
-              v-model="accentColorLocal"
-              name="accentColor"
-              :fallback="previewTheme.colors.link"
-              :label="$t('settings.accent')"
-              :show-optional-tickbox="typeof linkColorLocal !== 'undefined'"
-            />
-            <ColorInput
-              v-model="linkColorLocal"
-              name="linkColor"
-              :fallback="previewTheme.colors.accent"
-              :label="$t('settings.links')"
-              :show-optional-tickbox="typeof accentColorLocal !== 'undefined'"
-            />
-            <ContrastRatio :contrast="previewContrast.bgLink" />
-          </div>
-          <div class="color-item">
-            <ColorInput
-              v-model="fgColorLocal"
-              name="fgColor"
-              :label="$t('settings.foreground')"
-            />
-            <ColorInput
-              v-model="fgTextColorLocal"
-              name="fgTextColor"
-              :label="$t('settings.text')"
-              :fallback="previewTheme.colors.fgText"
-            />
-            <ColorInput
-              v-model="fgLinkColorLocal"
-              name="fgLinkColor"
-              :label="$t('settings.links')"
-              :fallback="previewTheme.colors.fgLink"
-            />
-            <p>{{ $t('settings.style.common_colors.foreground_hint') }}</p>
-          </div>
-          <h4>{{ $t('settings.style.common_colors.rgbo') }}</h4>
-          <div class="color-item">
-            <ColorInput
-              v-model="cRedColorLocal"
-              name="cRedColor"
-              :label="$t('settings.cRed')"
-            />
-            <ContrastRatio :contrast="previewContrast.bgCRed" />
-            <ColorInput
-              v-model="cBlueColorLocal"
-              name="cBlueColor"
-              :label="$t('settings.cBlue')"
-            />
-            <ContrastRatio :contrast="previewContrast.bgCBlue" />
-          </div>
-          <div class="color-item">
-            <ColorInput
-              v-model="cGreenColorLocal"
-              name="cGreenColor"
-              :label="$t('settings.cGreen')"
-            />
-            <ContrastRatio :contrast="previewContrast.bgCGreen" />
-            <ColorInput
-              v-model="cOrangeColorLocal"
-              name="cOrangeColor"
-              :label="$t('settings.cOrange')"
-            />
-            <ContrastRatio :contrast="previewContrast.bgCOrange" />
-          </div>
-          <p>{{ $t('settings.theme_help_v2_2') }}</p>
-        </div>
-
-        <div
-          :label="$t('settings.style.advanced_colors._tab_label')"
-          class="color-container"
-        >
-          <div class="tab-header">
-            <p>{{ $t('settings.theme_help') }}</p>
-            <button
-              class="btn"
-              @click="clearOpacity"
-            >
-              {{ $t('settings.style.switcher.clear_opacity') }}
-            </button>
-            <button
-              class="btn"
-              @click="clearV1"
-            >
-              {{ $t('settings.style.switcher.clear_all') }}
-            </button>
-          </div>
-          <div class="color-item">
-            <h4>{{ $t('settings.style.advanced_colors.post') }}</h4>
-            <ColorInput
-              v-model="postLinkColorLocal"
-              name="postLinkColor"
-              :fallback="previewTheme.colors.accent"
-              :label="$t('settings.links')"
-            />
-            <ContrastRatio :contrast="previewContrast.postLink" />
-            <h4>{{ $t('settings.style.advanced_colors.alert') }}</h4>
-            <ColorInput
-              v-model="alertErrorColorLocal"
-              name="alertError"
-              :label="$t('settings.style.advanced_colors.alert_error')"
-              :fallback="previewTheme.colors.alertError"
-            />
-            <ColorInput
-              v-model="alertErrorTextColorLocal"
-              name="alertErrorText"
-              :label="$t('settings.text')"
-              :fallback="previewTheme.colors.alertErrorText"
-            />
-            <ContrastRatio
-              :contrast="previewContrast.alertErrorText"
-              large="true"
-            />
-            <ColorInput
-              v-model="alertWarningColorLocal"
-              name="alertWarning"
-              :label="$t('settings.style.advanced_colors.alert_warning')"
-              :fallback="previewTheme.colors.alertWarning"
-            />
-            <ColorInput
-              v-model="alertWarningTextColorLocal"
-              name="alertWarningText"
-              :label="$t('settings.text')"
-              :fallback="previewTheme.colors.alertWarningText"
-            />
-            <ContrastRatio
-              :contrast="previewContrast.alertWarningText"
-              large="true"
-            />
-            <ColorInput
-              v-model="alertNeutralColorLocal"
-              name="alertNeutral"
-              :label="$t('settings.style.advanced_colors.alert_neutral')"
-              :fallback="previewTheme.colors.alertNeutral"
-            />
-            <ColorInput
-              v-model="alertNeutralTextColorLocal"
-              name="alertNeutralText"
-              :label="$t('settings.text')"
-              :fallback="previewTheme.colors.alertNeutralText"
-            />
-            <ContrastRatio
-              :contrast="previewContrast.alertNeutralText"
-              large="true"
-            />
-            <OpacityInput
-              v-model="alertOpacityLocal"
-              name="alertOpacity"
-              :fallback="previewTheme.opacity.alert"
-            />
-          </div>
-          <div class="color-item">
-            <h4>{{ $t('settings.style.advanced_colors.badge') }}</h4>
-            <ColorInput
-              v-model="badgeNotificationColorLocal"
-              name="badgeNotification"
-              :label="$t('settings.style.advanced_colors.badge_notification')"
-              :fallback="previewTheme.colors.badgeNotification"
-            />
-            <ColorInput
-              v-model="badgeNotificationTextColorLocal"
-              name="badgeNotificationText"
-              :label="$t('settings.text')"
-              :fallback="previewTheme.colors.badgeNotificationText"
-            />
-            <ContrastRatio
-              :contrast="previewContrast.badgeNotificationText"
-              large="true"
-            />
-          </div>
-          <div class="color-item">
-            <h4>{{ $t('settings.style.advanced_colors.panel_header') }}</h4>
-            <ColorInput
-              v-model="panelColorLocal"
-              name="panelColor"
-              :fallback="previewTheme.colors.panel"
-              :label="$t('settings.background')"
-            />
-            <OpacityInput
-              v-model="panelOpacityLocal"
-              name="panelOpacity"
-              :fallback="previewTheme.opacity.panel"
-              :disabled="panelColorLocal === 'transparent'"
-            />
-            <ColorInput
-              v-model="panelTextColorLocal"
-              name="panelTextColor"
-              :fallback="previewTheme.colors.panelText"
-              :label="$t('settings.text')"
-            />
-            <ContrastRatio
-              :contrast="previewContrast.panelText"
-              large="true"
-            />
-            <ColorInput
-              v-model="panelLinkColorLocal"
-              name="panelLinkColor"
-              :fallback="previewTheme.colors.panelLink"
-              :label="$t('settings.links')"
-            />
-            <ContrastRatio
-              :contrast="previewContrast.panelLink"
-              large="true"
-            />
-          </div>
-          <div class="color-item">
-            <h4>{{ $t('settings.style.advanced_colors.top_bar') }}</h4>
-            <ColorInput
-              v-model="topBarColorLocal"
-              name="topBarColor"
-              :fallback="previewTheme.colors.topBar"
-              :label="$t('settings.background')"
-            />
-            <ColorInput
-              v-model="topBarTextColorLocal"
-              name="topBarTextColor"
-              :fallback="previewTheme.colors.topBarText"
-              :label="$t('settings.text')"
-            />
-            <ContrastRatio :contrast="previewContrast.topBarText" />
-            <ColorInput
-              v-model="topBarLinkColorLocal"
-              name="topBarLinkColor"
-              :fallback="previewTheme.colors.topBarLink"
-              :label="$t('settings.links')"
-            />
-            <ContrastRatio :contrast="previewContrast.topBarLink" />
-          </div>
-          <div class="color-item">
-            <h4>{{ $t('settings.style.advanced_colors.inputs') }}</h4>
-            <ColorInput
-              v-model="inputColorLocal"
-              name="inputColor"
-              :fallback="previewTheme.colors.input"
-              :label="$t('settings.background')"
-            />
-            <OpacityInput
-              v-model="inputOpacityLocal"
-              name="inputOpacity"
-              :fallback="previewTheme.opacity.input"
-              :disabled="inputColorLocal === 'transparent'"
-            />
-            <ColorInput
-              v-model="inputTextColorLocal"
-              name="inputTextColor"
-              :fallback="previewTheme.colors.inputText"
-              :label="$t('settings.text')"
-            />
-            <ContrastRatio :contrast="previewContrast.inputText" />
-          </div>
-          <div class="color-item">
-            <h4>{{ $t('settings.style.advanced_colors.buttons') }}</h4>
-            <ColorInput
-              v-model="btnColorLocal"
-              name="btnColor"
-              :fallback="previewTheme.colors.btn"
-              :label="$t('settings.background')"
-            />
-            <OpacityInput
-              v-model="btnOpacityLocal"
-              name="btnOpacity"
-              :fallback="previewTheme.opacity.btn"
-              :disabled="btnColorLocal === 'transparent'"
-            />
-            <ColorInput
-              v-model="btnTextColorLocal"
-              name="btnTextColor"
-              :fallback="previewTheme.colors.btnText"
-              :label="$t('settings.text')"
-            />
-            <ContrastRatio :contrast="previewContrast.btnText" />
-            <ColorInput
-              v-model="btnPanelTextColorLocal"
-              name="btnPanelTextColor"
-              :fallback="previewTheme.colors.btnPanelText"
-              :label="$t('settings.style.advanced_colors.panel_header')"
-            />
-            <ContrastRatio :contrast="previewContrast.btnPanelText" />
-            <ColorInput
-              v-model="btnTopBarTextColorLocal"
-              name="btnTopBarTextColor"
-              :fallback="previewTheme.colors.btnTopBarText"
-              :label="$t('settings.style.advanced_colors.top_bar')"
-            />
-            <ContrastRatio :contrast="previewContrast.btnTopBarText" />
-            <h5>{{ $t('settings.style.advanced_colors.pressed') }}</h5>
-            <ColorInput
-              v-model="btnPressedColorLocal"
-              name="btnPressedColor"
-              :fallback="previewTheme.colors.btnPressed"
-              :label="$t('settings.background')"
-            />
-            <ColorInput
-              v-model="btnPressedTextColorLocal"
-              name="btnPressedTextColor"
-              :fallback="previewTheme.colors.btnPressedText"
-              :label="$t('settings.text')"
-            />
-            <ContrastRatio :contrast="previewContrast.btnPressedText" />
-            <ColorInput
-              v-model="btnPressedPanelTextColorLocal"
-              name="btnPressedPanelTextColor"
-              :fallback="previewTheme.colors.btnPressedPanelText"
-              :label="$t('settings.style.advanced_colors.panel_header')"
-            />
-            <ContrastRatio :contrast="previewContrast.btnPressedPanelText" />
-            <ColorInput
-              v-model="btnPressedTopBarTextColorLocal"
-              name="btnPressedTopBarTextColor"
-              :fallback="previewTheme.colors.btnPressedTopBarText"
-              :label="$t('settings.style.advanced_colors.top_bar')"
-            />
-            <ContrastRatio :contrast="previewContrast.btnPressedTopBarText" />
-            <h5>{{ $t('settings.style.advanced_colors.disabled') }}</h5>
-            <ColorInput
-              v-model="btnDisabledColorLocal"
-              name="btnDisabledColor"
-              :fallback="previewTheme.colors.btnDisabled"
-              :label="$t('settings.background')"
-            />
-            <ColorInput
-              v-model="btnDisabledTextColorLocal"
-              name="btnDisabledTextColor"
-              :fallback="previewTheme.colors.btnDisabledText"
-              :label="$t('settings.text')"
-            />
-            <ColorInput
-              v-model="btnDisabledPanelTextColorLocal"
-              name="btnDisabledPanelTextColor"
-              :fallback="previewTheme.colors.btnDisabledPanelText"
-              :label="$t('settings.style.advanced_colors.panel_header')"
-            />
-            <ColorInput
-              v-model="btnDisabledTopBarTextColorLocal"
-              name="btnDisabledTopBarTextColor"
-              :fallback="previewTheme.colors.btnDisabledTopBarText"
-              :label="$t('settings.style.advanced_colors.top_bar')"
-            />
-            <h5>{{ $t('settings.style.advanced_colors.toggled') }}</h5>
-            <ColorInput
-              v-model="btnToggledColorLocal"
-              name="btnToggledColor"
-              :fallback="previewTheme.colors.btnToggled"
-              :label="$t('settings.background')"
-            />
-            <ColorInput
-              v-model="btnToggledTextColorLocal"
-              name="btnToggledTextColor"
-              :fallback="previewTheme.colors.btnToggledText"
-              :label="$t('settings.text')"
-            />
-            <ContrastRatio :contrast="previewContrast.btnToggledText" />
-            <ColorInput
-              v-model="btnToggledPanelTextColorLocal"
-              name="btnToggledPanelTextColor"
-              :fallback="previewTheme.colors.btnToggledPanelText"
-              :label="$t('settings.style.advanced_colors.panel_header')"
-            />
-            <ContrastRatio :contrast="previewContrast.btnToggledPanelText" />
-            <ColorInput
-              v-model="btnToggledTopBarTextColorLocal"
-              name="btnToggledTopBarTextColor"
-              :fallback="previewTheme.colors.btnToggledTopBarText"
-              :label="$t('settings.style.advanced_colors.top_bar')"
-            />
-            <ContrastRatio :contrast="previewContrast.btnToggledTopBarText" />
-          </div>
-          <div class="color-item">
-            <h4>{{ $t('settings.style.advanced_colors.tabs') }}</h4>
-            <ColorInput
-              v-model="tabColorLocal"
-              name="tabColor"
-              :fallback="previewTheme.colors.tab"
-              :label="$t('settings.background')"
-            />
-            <ColorInput
-              v-model="tabTextColorLocal"
-              name="tabTextColor"
-              :fallback="previewTheme.colors.tabText"
-              :label="$t('settings.text')"
-            />
-            <ContrastRatio :contrast="previewContrast.tabText" />
-            <ColorInput
-              v-model="tabActiveTextColorLocal"
-              name="tabActiveTextColor"
-              :fallback="previewTheme.colors.tabActiveText"
-              :label="$t('settings.text')"
-            />
-            <ContrastRatio :contrast="previewContrast.tabActiveText" />
-          </div>
-          <div class="color-item">
-            <h4>{{ $t('settings.style.advanced_colors.borders') }}</h4>
-            <ColorInput
-              v-model="borderColorLocal"
-              name="borderColor"
-              :fallback="previewTheme.colors.border"
-              :label="$t('settings.style.common.color')"
-            />
-            <OpacityInput
-              v-model="borderOpacityLocal"
-              name="borderOpacity"
-              :fallback="previewTheme.opacity.border"
-              :disabled="borderColorLocal === 'transparent'"
-            />
-          </div>
-          <div class="color-item">
-            <h4>{{ $t('settings.style.advanced_colors.faint_text') }}</h4>
-            <ColorInput
-              v-model="faintColorLocal"
-              name="faintColor"
-              :fallback="previewTheme.colors.faint"
-              :label="$t('settings.text')"
-            />
-            <ColorInput
-              v-model="faintLinkColorLocal"
-              name="faintLinkColor"
-              :fallback="previewTheme.colors.faintLink"
-              :label="$t('settings.links')"
-            />
-            <ColorInput
-              v-model="panelFaintColorLocal"
-              name="panelFaintColor"
-              :fallback="previewTheme.colors.panelFaint"
-              :label="$t('settings.style.advanced_colors.panel_header')"
-            />
-            <OpacityInput
-              v-model="faintOpacityLocal"
-              name="faintOpacity"
-              :fallback="previewTheme.opacity.faint"
-            />
-          </div>
-          <div class="color-item">
-            <h4>{{ $t('settings.style.advanced_colors.underlay') }}</h4>
-            <ColorInput
-              v-model="underlayColorLocal"
-              name="underlay"
-              :label="$t('settings.style.advanced_colors.underlay')"
-              :fallback="previewTheme.colors.underlay"
-            />
-            <OpacityInput
-              v-model="underlayOpacityLocal"
-              name="underlayOpacity"
-              :fallback="previewTheme.opacity.underlay"
-              :disabled="underlayOpacityLocal === 'transparent'"
-            />
-          </div>
-          <div class="color-item">
-            <h4>{{ $t('settings.style.advanced_colors.poll') }}</h4>
-            <ColorInput
-              v-model="pollColorLocal"
-              name="poll"
-              :label="$t('settings.background')"
-              :fallback="previewTheme.colors.poll"
-            />
-            <ColorInput
-              v-model="pollTextColorLocal"
-              name="pollText"
-              :label="$t('settings.text')"
-              :fallback="previewTheme.colors.pollText"
-            />
-          </div>
-          <div class="color-item">
-            <h4>{{ $t('settings.style.advanced_colors.icons') }}</h4>
-            <ColorInput
-              v-model="iconColorLocal"
-              name="icon"
-              :label="$t('settings.style.advanced_colors.icons')"
-              :fallback="previewTheme.colors.icon"
-            />
-          </div>
-          <div class="color-item">
-            <h4>{{ $t('settings.style.advanced_colors.highlight') }}</h4>
-            <ColorInput
-              v-model="highlightColorLocal"
-              name="highlight"
-              :label="$t('settings.background')"
-              :fallback="previewTheme.colors.highlight"
-            />
-            <ColorInput
-              v-model="highlightTextColorLocal"
-              name="highlightText"
-              :label="$t('settings.text')"
-              :fallback="previewTheme.colors.highlightText"
-            />
-            <ContrastRatio :contrast="previewContrast.highlightText" />
-            <ColorInput
-              v-model="highlightLinkColorLocal"
-              name="highlightLink"
-              :label="$t('settings.links')"
-              :fallback="previewTheme.colors.highlightLink"
-            />
-            <ContrastRatio :contrast="previewContrast.highlightLink" />
-          </div>
-          <div class="color-item">
-            <h4>{{ $t('settings.style.advanced_colors.popover') }}</h4>
-            <ColorInput
-              v-model="popoverColorLocal"
-              name="popover"
-              :label="$t('settings.background')"
-              :fallback="previewTheme.colors.popover"
-            />
-            <OpacityInput
-              v-model="popoverOpacityLocal"
-              name="popoverOpacity"
-              :fallback="previewTheme.opacity.popover"
-              :disabled="popoverOpacityLocal === 'transparent'"
-            />
-            <ColorInput
-              v-model="popoverTextColorLocal"
-              name="popoverText"
-              :label="$t('settings.text')"
-              :fallback="previewTheme.colors.popoverText"
-            />
-            <ContrastRatio :contrast="previewContrast.popoverText" />
-            <ColorInput
-              v-model="popoverLinkColorLocal"
-              name="popoverLink"
-              :label="$t('settings.links')"
-              :fallback="previewTheme.colors.popoverLink"
-            />
-            <ContrastRatio :contrast="previewContrast.popoverLink" />
-          </div>
-          <div class="color-item">
-            <h4>{{ $t('settings.style.advanced_colors.selectedPost') }}</h4>
-            <ColorInput
-              v-model="selectedPostColorLocal"
-              name="selectedPost"
-              :label="$t('settings.background')"
-              :fallback="previewTheme.colors.selectedPost"
-            />
-            <ColorInput
-              v-model="selectedPostTextColorLocal"
-              name="selectedPostText"
-              :label="$t('settings.text')"
-              :fallback="previewTheme.colors.selectedPostText"
-            />
-            <ContrastRatio :contrast="previewContrast.selectedPostText" />
-            <ColorInput
-              v-model="selectedPostLinkColorLocal"
-              name="selectedPostLink"
-              :label="$t('settings.links')"
-              :fallback="previewTheme.colors.selectedPostLink"
-            />
-            <ContrastRatio :contrast="previewContrast.selectedPostLink" />
-          </div>
-          <div class="color-item">
-            <h4>{{ $t('settings.style.advanced_colors.selectedMenu') }}</h4>
-            <ColorInput
-              v-model="selectedMenuColorLocal"
-              name="selectedMenu"
-              :label="$t('settings.background')"
-              :fallback="previewTheme.colors.selectedMenu"
-            />
-            <ColorInput
-              v-model="selectedMenuTextColorLocal"
-              name="selectedMenuText"
-              :label="$t('settings.text')"
-              :fallback="previewTheme.colors.selectedMenuText"
-            />
-            <ContrastRatio :contrast="previewContrast.selectedMenuText" />
-            <ColorInput
-              v-model="selectedMenuLinkColorLocal"
-              name="selectedMenuLink"
-              :label="$t('settings.links')"
-              :fallback="previewTheme.colors.selectedMenuLink"
-            />
-            <ContrastRatio :contrast="previewContrast.selectedMenuLink" />
-          </div>
-        </div>
-
-        <div
-          :label="$t('settings.style.radii._tab_label')"
-          class="radius-container"
-        >
-          <div class="tab-header">
-            <p>{{ $t('settings.radii_help') }}</p>
-            <button
-              class="btn"
-              @click="clearRoundness"
-            >
-              {{ $t('settings.style.switcher.clear_all') }}
-            </button>
-          </div>
-          <RangeInput
-            v-model="btnRadiusLocal"
-            name="btnRadius"
-            :label="$t('settings.btnRadius')"
-            :fallback="previewTheme.radii.btn"
-            max="16"
-            hard-min="0"
-          />
-          <RangeInput
-            v-model="inputRadiusLocal"
-            name="inputRadius"
-            :label="$t('settings.inputRadius')"
-            :fallback="previewTheme.radii.input"
-            max="9"
-            hard-min="0"
-          />
-          <RangeInput
-            v-model="checkboxRadiusLocal"
-            name="checkboxRadius"
-            :label="$t('settings.checkboxRadius')"
-            :fallback="previewTheme.radii.checkbox"
-            max="16"
-            hard-min="0"
-          />
-          <RangeInput
-            v-model="panelRadiusLocal"
-            name="panelRadius"
-            :label="$t('settings.panelRadius')"
-            :fallback="previewTheme.radii.panel"
-            max="50"
-            hard-min="0"
-          />
-          <RangeInput
-            v-model="avatarRadiusLocal"
-            name="avatarRadius"
-            :label="$t('settings.avatarRadius')"
-            :fallback="previewTheme.radii.avatar"
-            max="28"
-            hard-min="0"
-          />
-          <RangeInput
-            v-model="avatarAltRadiusLocal"
-            name="avatarAltRadius"
-            :label="$t('settings.avatarAltRadius')"
-            :fallback="previewTheme.radii.avatarAlt"
-            max="28"
-            hard-min="0"
-          />
-          <RangeInput
-            v-model="attachmentRadiusLocal"
-            name="attachmentRadius"
-            :label="$t('settings.attachmentRadius')"
-            :fallback="previewTheme.radii.attachment"
-            max="50"
-            hard-min="0"
-          />
-          <RangeInput
-            v-model="tooltipRadiusLocal"
-            name="tooltipRadius"
-            :label="$t('settings.tooltipRadius')"
-            :fallback="previewTheme.radii.tooltip"
-            max="50"
-            hard-min="0"
-          />
-        </div>
-
-        <div
-          :label="$t('settings.style.shadows._tab_label')"
-          class="shadow-container"
-        >
-          <div class="tab-header shadow-selector">
-            <div class="select-container">
-              {{ $t('settings.style.shadows.component') }}
-              <label
-                for="shadow-switcher"
-                class="select"
-              >
-                <select
-                  id="shadow-switcher"
-                  v-model="shadowSelected"
-                  class="shadow-switcher"
-                >
-                  <option
-                    v-for="shadow in shadowsAvailable"
-                    :key="shadow"
-                    :value="shadow"
-                  >
-                    {{ $t('settings.style.shadows.components.' + shadow) }}
-                  </option>
-                </select>
-                <i class="icon-down-open" />
-              </label>
-            </div>
-            <div class="override">
-              <label
-                for="override"
-                class="label"
-              >
-                {{ $t('settings.style.shadows.override') }}
-              </label>
-              <input
-                id="override"
-                v-model="currentShadowOverriden"
-                name="override"
-                class="input-override"
-                type="checkbox"
-              >
-              <label
-                class="checkbox-label"
-                for="override"
-              />
-            </div>
-            <button
-              class="btn"
-              @click="clearShadows"
-            >
-              {{ $t('settings.style.switcher.clear_all') }}
-            </button>
-          </div>
-          <ShadowControl
-            v-model="currentShadow"
-            :ready="!!currentShadowFallback"
-            :fallback="currentShadowFallback"
-          />
-          <div v-if="shadowSelected === 'avatar' || shadowSelected === 'avatarStatus'">
-            <i18n
-              path="settings.style.shadows.filter_hint.always_drop_shadow"
-              tag="p"
-            >
-              <code>filter: drop-shadow()</code>
-            </i18n>
-            <p>{{ $t('settings.style.shadows.filter_hint.avatar_inset') }}</p>
-            <i18n
-              path="settings.style.shadows.filter_hint.drop_shadow_syntax"
-              tag="p"
-            >
-              <code>drop-shadow</code>
-              <code>spread-radius</code>
-              <code>inset</code>
-            </i18n>
-            <i18n
-              path="settings.style.shadows.filter_hint.inset_classic"
-              tag="p"
-            >
-              <code>box-shadow</code>
-            </i18n>
-            <p>{{ $t('settings.style.shadows.filter_hint.spread_zero') }}</p>
-          </div>
-        </div>
-
-        <div
-          :label="$t('settings.style.fonts._tab_label')"
-          class="fonts-container"
-        >
-          <div class="tab-header">
-            <p>{{ $t('settings.style.fonts.help') }}</p>
-            <button
-              class="btn"
-              @click="clearFonts"
-            >
-              {{ $t('settings.style.switcher.clear_all') }}
-            </button>
-          </div>
-          <FontControl
-            v-model="fontsLocal.interface"
-            name="ui"
-            :label="$t('settings.style.fonts.components.interface')"
-            :fallback="previewTheme.fonts.interface"
-            no-inherit="1"
-          />
-          <FontControl
-            v-model="fontsLocal.input"
-            name="input"
-            :label="$t('settings.style.fonts.components.input')"
-            :fallback="previewTheme.fonts.input"
-          />
-          <FontControl
-            v-model="fontsLocal.post"
-            name="post"
-            :label="$t('settings.style.fonts.components.post')"
-            :fallback="previewTheme.fonts.post"
-          />
-          <FontControl
-            v-model="fontsLocal.postCode"
-            name="postCode"
-            :label="$t('settings.style.fonts.components.postCode')"
-            :fallback="previewTheme.fonts.postCode"
-          />
-        </div>
-      </tab-switcher>
-    </keep-alive>
-
-    <div class="apply-container">
-      <button
-        class="btn submit"
-        :disabled="!themeValid"
-        @click="setCustomTheme"
-      >
-        {{ $t('general.apply') }}
-      </button>
-      <button
-        class="btn"
-        @click="clearAll"
-      >
-        {{ $t('settings.style.switcher.reset') }}
-      </button>
-    </div>
-  </div>
-</template>
-
-<script src="./style_switcher.js"></script>
-
-<style src="./style_switcher.scss" lang="scss"></style>
diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
index a443531e..a7b790a3 100644
--- a/src/components/tab_switcher/tab_switcher.scss
+++ b/src/components/tab_switcher/tab_switcher.scss
@@ -46,8 +46,14 @@
 
   &.side-tabs {
     flex-direction: row;
+    @media all and (max-width: 800px) {
+      overflow-x: auto;
+    }
     > .contents {
       flex: 0 1 80%;
+      @media all and (max-width: 800px) {
+        min-width: 96vw;
+      }
     }
     > .tabs {
       flex: 1 0 auto;
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 4ee040e8..b4f275d9 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -50,15 +50,6 @@
               >
                 {{ user.name }}
               </div>
-              <router-link
-                v-if="!isOtherUser"
-                :to="{ name: 'user-settings' }"
-              >
-                <i
-                  class="button-icon icon-wrench usersettings"
-                  :title="$t('tool_tip.user_settings')"
-                />
-              </router-link>
               <a
                 v-if="isOtherUser && !user.is_local"
                 :href="user.statusnet_profile_url"
@@ -117,7 +108,7 @@
               type="color"
             >
             <label
-              for="style-switcher"
+              for="theme_tab"
               class="userHighlightSel select"
             >
               <select
diff --git a/src/components/user_settings/confirm.js b/src/components/user_settings/confirm.js
deleted file mode 100644
index 0f4ddfc9..00000000
--- a/src/components/user_settings/confirm.js
+++ /dev/null
@@ -1,9 +0,0 @@
-const Confirm = {
-  props: ['disabled'],
-  data: () => ({}),
-  methods: {
-    confirm () { this.$emit('confirm') },
-    cancel () { this.$emit('cancel') }
-  }
-}
-export default Confirm
diff --git a/src/components/user_settings/confirm.vue b/src/components/user_settings/confirm.vue
deleted file mode 100644
index 69b3811b..00000000
--- a/src/components/user_settings/confirm.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-  <div>
-    <slot />
-    <button
-      class="btn btn-default"
-      :disabled="disabled"
-      @click="confirm"
-    >
-      {{ $t('general.confirm') }}
-    </button>
-    <button
-      class="btn btn-default"
-      :disabled="disabled"
-      @click="cancel"
-    >
-      {{ $t('general.cancel') }}
-    </button>
-  </div>
-</template>
-
-<script src="./confirm.js">
-</script>
diff --git a/src/components/user_settings/mfa.js b/src/components/user_settings/mfa.js
deleted file mode 100644
index abf37062..00000000
--- a/src/components/user_settings/mfa.js
+++ /dev/null
@@ -1,155 +0,0 @@
-import RecoveryCodes from './mfa_backup_codes.vue'
-import TOTP from './mfa_totp.vue'
-import Confirm from './confirm.vue'
-import VueQrcode from '@chenfengyuan/vue-qrcode'
-import { mapState } from 'vuex'
-
-const Mfa = {
-  data: () => ({
-    settings: { // current settings of MFA
-      available: false,
-      enabled: false,
-      totp: false
-    },
-    setupState: { // setup mfa
-      state: '', // state of setup. '' -> 'getBackupCodes' -> 'setupOTP' -> 'complete'
-      setupOTPState: '' // state of setup otp. '' -> 'prepare' -> 'confirm' -> 'complete'
-    },
-    backupCodes: {
-      getNewCodes: false,
-      inProgress: false, //  progress of fetch codes
-      codes: []
-    },
-    otpSettings: { // pre-setup setting of OTP. secret key, qrcode url.
-      provisioning_uri: '',
-      key: ''
-    },
-    currentPassword: null,
-    otpConfirmToken: null,
-    error: null,
-    readyInit: false
-  }),
-  components: {
-    'recovery-codes': RecoveryCodes,
-    'totp-item': TOTP,
-    'qrcode': VueQrcode,
-    'confirm': Confirm
-  },
-  computed: {
-    canSetupOTP () {
-      return (
-        (this.setupInProgress && this.backupCodesPrepared) ||
-          this.settings.enabled
-      ) && !this.settings.totp && !this.setupOTPInProgress
-    },
-    setupInProgress () {
-      return this.setupState.state !== '' && this.setupState.state !== 'complete'
-    },
-    setupOTPInProgress () {
-      return this.setupState.state === 'setupOTP' && !this.completedOTP
-    },
-    prepareOTP () {
-      return this.setupState.setupOTPState === 'prepare'
-    },
-    confirmOTP () {
-      return this.setupState.setupOTPState === 'confirm'
-    },
-    completedOTP () {
-      return this.setupState.setupOTPState === 'completed'
-    },
-    backupCodesPrepared () {
-      return !this.backupCodes.inProgress && this.backupCodes.codes.length > 0
-    },
-    confirmNewBackupCodes () {
-      return this.backupCodes.getNewCodes
-    },
-    ...mapState({
-      backendInteractor: (state) => state.api.backendInteractor
-    })
-  },
-
-  methods: {
-    activateOTP () {
-      if (!this.settings.enabled) {
-        this.setupState.state = 'getBackupcodes'
-        this.fetchBackupCodes()
-      }
-    },
-    fetchBackupCodes () {
-      this.backupCodes.inProgress = true
-      this.backupCodes.codes = []
-
-      return this.backendInteractor.generateMfaBackupCodes()
-        .then((res) => {
-          this.backupCodes.codes = res.codes
-          this.backupCodes.inProgress = false
-        })
-    },
-    getBackupCodes () { // get a new backup codes
-      this.backupCodes.getNewCodes = true
-    },
-    confirmBackupCodes () { // confirm getting new backup codes
-      this.fetchBackupCodes().then((res) => {
-        this.backupCodes.getNewCodes = false
-      })
-    },
-    cancelBackupCodes () { // cancel confirm form of new backup codes
-      this.backupCodes.getNewCodes = false
-    },
-
-    // Setup OTP
-    setupOTP () { // prepare setup OTP
-      this.setupState.state = 'setupOTP'
-      this.setupState.setupOTPState = 'prepare'
-      this.backendInteractor.mfaSetupOTP()
-        .then((res) => {
-          this.otpSettings = res
-          this.setupState.setupOTPState = 'confirm'
-        })
-    },
-    doConfirmOTP () { // handler confirm enable OTP
-      this.error = null
-      this.backendInteractor.mfaConfirmOTP({
-        token: this.otpConfirmToken,
-        password: this.currentPassword
-      })
-        .then((res) => {
-          if (res.error) {
-            this.error = res.error
-            return
-          }
-          this.completeSetup()
-        })
-    },
-
-    completeSetup () {
-      this.setupState.setupOTPState = 'complete'
-      this.setupState.state = 'complete'
-      this.currentPassword = null
-      this.error = null
-      this.fetchSettings()
-    },
-    cancelSetup () { // cancel setup
-      this.setupState.setupOTPState = ''
-      this.setupState.state = ''
-      this.currentPassword = null
-      this.error = null
-    },
-    // end Setup OTP
-
-    // fetch settings from server
-    async fetchSettings () {
-      let result = await this.backendInteractor.settingsMFA()
-      if (result.error) return
-      this.settings = result.settings
-      this.settings.available = true
-      return result
-    }
-  },
-  mounted () {
-    this.fetchSettings().then(() => {
-      this.readyInit = true
-    })
-  }
-}
-export default Mfa
diff --git a/src/components/user_settings/mfa.vue b/src/components/user_settings/mfa.vue
deleted file mode 100644
index 14ea10a1..00000000
--- a/src/components/user_settings/mfa.vue
+++ /dev/null
@@ -1,173 +0,0 @@
-<template>
-  <div
-    v-if="readyInit && settings.available"
-    class="setting-item mfa-settings"
-  >
-    <div class="mfa-heading">
-      <h2>{{ $t('settings.mfa.title') }}</h2>
-    </div>
-
-    <div>
-      <div
-        v-if="!setupInProgress"
-        class="setting-item"
-      >
-        <!-- Enabled methods -->
-        <h3>{{ $t('settings.mfa.authentication_methods') }}</h3>
-        <totp-item
-          :settings="settings"
-          @deactivate="fetchSettings"
-          @activate="activateOTP"
-        />
-        <br>
-
-        <div v-if="settings.enabled">
-          <!-- backup codes block-->
-          <recovery-codes
-            v-if="!confirmNewBackupCodes"
-            :backup-codes="backupCodes"
-          />
-          <button
-            v-if="!confirmNewBackupCodes"
-            class="btn btn-default"
-            @click="getBackupCodes"
-          >
-            {{ $t('settings.mfa.generate_new_recovery_codes') }}
-          </button>
-
-          <div v-if="confirmNewBackupCodes">
-            <confirm
-              :disabled="backupCodes.inProgress"
-              @confirm="confirmBackupCodes"
-              @cancel="cancelBackupCodes"
-            >
-              <p class="warning">
-                {{ $t('settings.mfa.warning_of_generate_new_codes') }}
-              </p>
-            </confirm>
-          </div>
-        </div>
-      </div>
-
-      <div v-if="setupInProgress">
-        <!-- setup block-->
-
-        <h3>{{ $t('settings.mfa.setup_otp') }}</h3>
-
-        <recovery-codes
-          v-if="!setupOTPInProgress"
-          :backup-codes="backupCodes"
-        />
-
-        <button
-          v-if="canSetupOTP"
-          class="btn btn-default"
-          @click="cancelSetup"
-        >
-          {{ $t('general.cancel') }}
-        </button>
-
-        <button
-          v-if="canSetupOTP"
-          class="btn btn-default"
-          @click="setupOTP"
-        >
-          {{ $t('settings.mfa.setup_otp') }}
-        </button>
-
-        <template v-if="setupOTPInProgress">
-          <i v-if="prepareOTP">{{ $t('settings.mfa.wait_pre_setup_otp') }}</i>
-
-          <div v-if="confirmOTP">
-            <div class="setup-otp">
-              <div class="qr-code">
-                <h4>{{ $t('settings.mfa.scan.title') }}</h4>
-                <p>{{ $t('settings.mfa.scan.desc') }}</p>
-                <qrcode
-                  :value="otpSettings.provisioning_uri"
-                  :options="{ width: 200 }"
-                />
-                <p>
-                  {{ $t('settings.mfa.scan.secret_code') }}:
-                  {{ otpSettings.key }}
-                </p>
-              </div>
-
-              <div class="verify">
-                <h4>{{ $t('general.verify') }}</h4>
-                <p>{{ $t('settings.mfa.verify.desc') }}</p>
-                <input
-                  v-model="otpConfirmToken"
-                  type="text"
-                >
-
-                <p>{{ $t('settings.enter_current_password_to_confirm') }}:</p>
-                <input
-                  v-model="currentPassword"
-                  type="password"
-                >
-                <div class="confirm-otp-actions">
-                  <button
-                    class="btn btn-default"
-                    @click="doConfirmOTP"
-                  >
-                    {{ $t('settings.mfa.confirm_and_enable') }}
-                  </button>
-                  <button
-                    class="btn btn-default"
-                    @click="cancelSetup"
-                  >
-                    {{ $t('general.cancel') }}
-                  </button>
-                </div>
-                <div
-                  v-if="error"
-                  class="alert error"
-                >
-                  {{ error }}
-                </div>
-              </div>
-            </div>
-          </div>
-        </template>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script src="./mfa.js"></script>
-<style lang="scss">
-@import '../../_variables.scss';
-.warning {
-  color: $fallback--cOrange;
-  color: var(--cOrange, $fallback--cOrange);
-}
-.mfa-settings {
-  .mfa-heading, .method-item {
-    overflow: hidden;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    align-items: baseline;
-  }
-
-  .setup-otp {
-    display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
-    .qr-code {
-      flex: 1;
-      padding-right: 10px;
-    }
-    .verify { flex: 1; }
-    .error { margin: 4px 0 0 0; }
-    .confirm-otp-actions {
-      button {
-        width: 15em;
-        margin-top: 5px;
-      }
-
-    }
-  }
-}
-</style>
diff --git a/src/components/user_settings/mfa_backup_codes.js b/src/components/user_settings/mfa_backup_codes.js
deleted file mode 100644
index f0a984ec..00000000
--- a/src/components/user_settings/mfa_backup_codes.js
+++ /dev/null
@@ -1,17 +0,0 @@
-export default {
-  props: {
-    backupCodes: {
-      type: Object,
-      default: () => ({
-        inProgress: false,
-        codes: []
-      })
-    }
-  },
-  data: () => ({}),
-  computed: {
-    inProgress () { return this.backupCodes.inProgress },
-    ready () { return this.backupCodes.codes.length > 0 },
-    displayTitle () { return this.inProgress || this.ready }
-  }
-}
diff --git a/src/components/user_settings/mfa_backup_codes.vue b/src/components/user_settings/mfa_backup_codes.vue
deleted file mode 100644
index e6c8ede2..00000000
--- a/src/components/user_settings/mfa_backup_codes.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-  <div>
-    <h4 v-if="displayTitle">
-      {{ $t('settings.mfa.recovery_codes') }}
-    </h4>
-    <i v-if="inProgress">{{ $t('settings.mfa.waiting_a_recovery_codes') }}</i>
-    <template v-if="ready">
-      <p class="alert warning">
-        {{ $t('settings.mfa.recovery_codes_warning') }}
-      </p>
-      <ul class="backup-codes">
-        <li
-          v-for="code in backupCodes.codes"
-          :key="code"
-        >
-          {{ code }}
-        </li>
-      </ul>
-    </template>
-  </div>
-</template>
-<script src="./mfa_backup_codes.js"></script>
-<style lang="scss">
-@import '../../_variables.scss';
-
-.warning {
-  color: $fallback--cOrange;
-  color: var(--cOrange, $fallback--cOrange);
-}
-.backup-codes {
-  font-family: var(--postCodeFont, monospace);
-}
-</style>
diff --git a/src/components/user_settings/mfa_totp.js b/src/components/user_settings/mfa_totp.js
deleted file mode 100644
index 8408d8e9..00000000
--- a/src/components/user_settings/mfa_totp.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import Confirm from './confirm.vue'
-import { mapState } from 'vuex'
-
-export default {
-  props: ['settings'],
-  data: () => ({
-    error: false,
-    currentPassword: '',
-    deactivate: false,
-    inProgress: false // progress peform request to disable otp method
-  }),
-  components: {
-    'confirm': Confirm
-  },
-  computed: {
-    isActivated () {
-      return this.settings.totp
-    },
-    ...mapState({
-      backendInteractor: (state) => state.api.backendInteractor
-    })
-  },
-  methods: {
-    doActivate () {
-      this.$emit('activate')
-    },
-    cancelDeactivate () { this.deactivate = false },
-    doDeactivate () {
-      this.error = null
-      this.deactivate = true
-    },
-    confirmDeactivate () { // confirm deactivate TOTP method
-      this.error = null
-      this.inProgress = true
-      this.backendInteractor.mfaDisableOTP({
-        password: this.currentPassword
-      })
-        .then((res) => {
-          this.inProgress = false
-          if (res.error) {
-            this.error = res.error
-            return
-          }
-          this.deactivate = false
-          this.$emit('deactivate')
-        })
-    }
-  }
-}
diff --git a/src/components/user_settings/mfa_totp.vue b/src/components/user_settings/mfa_totp.vue
deleted file mode 100644
index c6f2cc7b..00000000
--- a/src/components/user_settings/mfa_totp.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-  <div>
-    <div class="method-item">
-      <strong>{{ $t('settings.mfa.otp') }}</strong>
-      <button
-        v-if="!isActivated"
-        class="btn btn-default"
-        @click="doActivate"
-      >
-        {{ $t('general.enable') }}
-      </button>
-
-      <button
-        v-if="isActivated"
-        class="btn btn-default"
-        :disabled="deactivate"
-        @click="doDeactivate"
-      >
-        {{ $t('general.disable') }}
-      </button>
-    </div>
-
-    <confirm
-      v-if="deactivate"
-      :disabled="inProgress"
-      @confirm="confirmDeactivate"
-      @cancel="cancelDeactivate"
-    >
-      {{ $t('settings.enter_current_password_to_confirm') }}:
-      <input
-        v-model="currentPassword"
-        type="password"
-      >
-    </confirm>
-    <div
-      v-if="error"
-      class="alert error"
-    >
-      {{ error }}
-    </div>
-  </div>
-</template>
-<script src="./mfa_totp.js"></script>
diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
deleted file mode 100644
index e07d4e56..00000000
--- a/src/components/user_settings/user_settings.js
+++ /dev/null
@@ -1,140 +0,0 @@
-import get from 'lodash/get'
-import map from 'lodash/map'
-import reject from 'lodash/reject'
-import Autosuggest from '../autosuggest/autosuggest.vue'
-import TabSwitcher from '../tab_switcher/tab_switcher.js'
-import BlockCard from '../block_card/block_card.vue'
-import MuteCard from '../mute_card/mute_card.vue'
-import DomainMuteCard from '../domain_mute_card/domain_mute_card.vue'
-import SelectableList from '../selectable_list/selectable_list.vue'
-import ProgressButton from '../progress_button/progress_button.vue'
-import Importer from '../importer/importer.vue'
-import Exporter from '../exporter/exporter.vue'
-import withSubscription from '../../hocs/with_subscription/with_subscription'
-import Checkbox from '../checkbox/checkbox.vue'
-
-const BlockList = withSubscription({
-  fetch: (props, $store) => $store.dispatch('fetchBlocks'),
-  select: (props, $store) => get($store.state.users.currentUser, 'blockIds', []),
-  childPropName: 'items'
-})(SelectableList)
-
-const MuteList = withSubscription({
-  fetch: (props, $store) => $store.dispatch('fetchMutes'),
-  select: (props, $store) => get($store.state.users.currentUser, 'muteIds', []),
-  childPropName: 'items'
-})(SelectableList)
-
-const DomainMuteList = withSubscription({
-  fetch: (props, $store) => $store.dispatch('fetchDomainMutes'),
-  select: (props, $store) => get($store.state.users.currentUser, 'domainMutes', []),
-  childPropName: 'items'
-})(SelectableList)
-
-const UserSettings = {
-  data () {
-    return {
-      activeTab: 'profile',
-      newDomainToMute: ''
-    }
-  },
-  created () {
-    this.$store.dispatch('fetchTokens')
-  },
-  components: {
-    TabSwitcher,
-    BlockList,
-    MuteList,
-    DomainMuteList,
-    BlockCard,
-    MuteCard,
-    DomainMuteCard,
-    ProgressButton,
-    Autosuggest,
-    Checkbox
-  },
-  computed: {
-    user () {
-      return this.$store.state.users.currentUser
-    },
-    pleromaBackend () {
-      return this.$store.state.instance.pleromaBackend
-    },
-    currentSaveStateNotice () {
-      return this.$store.state.interface.settings.currentSaveStateNotice
-    }
-  },
-  methods: {
-    importFollows (file) {
-      return this.$store.state.api.backendInteractor.importFollows({ file })
-        .then((status) => {
-          if (!status) {
-            throw new Error('failed')
-          }
-        })
-    },
-    importBlocks (file) {
-      return this.$store.state.api.backendInteractor.importBlocks({ file })
-        .then((status) => {
-          if (!status) {
-            throw new Error('failed')
-          }
-        })
-    },
-    generateExportableUsersContent (users) {
-      // Get addresses
-      return users.map((user) => {
-        // check is it's a local user
-        if (user && user.is_local) {
-          // append the instance address
-          // eslint-disable-next-line no-undef
-          return user.screen_name + '@' + location.hostname
-        }
-        return user.screen_name
-      }).join('\n')
-    },
-    activateTab (tabName) {
-      this.activeTab = tabName
-    },
-    filterUnblockedUsers (userIds) {
-      return reject(userIds, (userId) => {
-        const user = this.$store.getters.findUser(userId)
-        return !user || user.statusnet_blocking || user.id === this.$store.state.users.currentUser.id
-      })
-    },
-    filterUnMutedUsers (userIds) {
-      return reject(userIds, (userId) => {
-        const user = this.$store.getters.findUser(userId)
-        return !user || user.muted || user.id === this.$store.state.users.currentUser.id
-      })
-    },
-    queryUserIds (query) {
-      return this.$store.dispatch('searchUsers', query)
-        .then((users) => map(users, 'id'))
-    },
-    blockUsers (ids) {
-      return this.$store.dispatch('blockUsers', ids)
-    },
-    unblockUsers (ids) {
-      return this.$store.dispatch('unblockUsers', ids)
-    },
-    muteUsers (ids) {
-      return this.$store.dispatch('muteUsers', ids)
-    },
-    unmuteUsers (ids) {
-      return this.$store.dispatch('unmuteUsers', ids)
-    },
-    unmuteDomains (domains) {
-      return this.$store.dispatch('unmuteDomains', domains)
-    },
-    muteDomain () {
-      return this.$store.dispatch('muteDomain', this.newDomainToMute)
-        .then(() => { this.newDomainToMute = '' })
-    },
-    identity (value) {
-      return value
-    }
-  }
-}
-
-export default UserSettings
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
deleted file mode 100644
index 2a88714f..00000000
--- a/src/components/user_settings/user_settings.vue
+++ /dev/null
@@ -1,119 +0,0 @@
-<template>
-  <div class="settings panel panel-default">
-    <div class="panel-heading">
-      <div class="title">
-        {{ $t('settings.user_settings') }}
-      </div>
-      <transition name="fade">
-        <template v-if="currentSaveStateNotice">
-          <div
-            v-if="currentSaveStateNotice.error"
-            class="alert error"
-            @click.prevent
-          >
-            {{ $t('settings.saving_err') }}
-          </div>
-
-          <div
-            v-if="!currentSaveStateNotice.error"
-            class="alert transparent"
-            @click.prevent
-          >
-            {{ $t('settings.saving_ok') }}
-          </div>
-        </template>
-      </transition>
-    </div>
-    <div class="panel-body profile-edit">
-    </div>
-  </div>
-</template>
-
-<script src="./user_settings.js">
-</script>
-
-<style lang="scss">
-@import '../../_variables.scss';
-
-.profile-edit {
-  .bio {
-    margin: 0;
-  }
-
-  .visibility-tray {
-    padding-top: 5px;
-  }
-
-  input[type=file] {
-    padding: 5px;
-    height: auto;
-  }
-
-  .banner {
-    max-width: 100%;
-  }
-
-  .uploading {
-    font-size: 1.5em;
-    margin: 0.25em;
-  }
-
-  .name-changer {
-    width: 100%;
-  }
-
-  .bg {
-    max-width: 100%;
-  }
-
-  .current-avatar {
-    display: block;
-    width: 150px;
-    height: 150px;
-    border-radius: $fallback--avatarRadius;
-    border-radius: var(--avatarRadius, $fallback--avatarRadius);
-  }
-
-  .oauth-tokens {
-    width: 100%;
-
-    th {
-      text-align: left;
-    }
-
-    .actions {
-      text-align: right;
-    }
-  }
-
-  &-usersearch-wrapper {
-    padding: 1em;
-  }
-
-  &-bulk-actions {
-    text-align: right;
-    padding: 0 1em;
-    min-height: 28px;
-
-    button {
-      width: 10em;
-    }
-  }
-
-  &-domain-mute-form {
-    padding: 1em;
-    display: flex;
-    flex-direction: column;
-
-    button {
-      align-self: flex-end;
-      margin-top: 1em;
-      width: 10em;
-    }
-  }
-
-  .setting-subitem {
-    margin-left: 1.75em;
-  }
-}
-</style>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 312f7283..d42be00f 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -68,7 +68,9 @@
     "disable": "Disable",
     "enable": "Enable",
     "confirm": "Confirm",
-    "verify": "Verify"
+    "verify": "Verify",
+    "close": "Close",
+    "peek": "Peek"
   },
   "image_cropper": {
     "crop_picture": "Crop picture",
-- 
cgit v1.2.3-70-g09d2


From 8e399710988dd874bd921a9ced76daf90034c29f Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Wed, 13 May 2020 17:48:31 +0300
Subject: add with_relationships where necessary

---
 src/components/post_status_form/post_status_form.js |  2 +-
 src/components/user_settings/user_settings.js       |  4 ++--
 src/modules/users.js                                |  4 ++--
 src/services/api/api.service.js                     | 13 +++++++++----
 4 files changed, 14 insertions(+), 9 deletions(-)

(limited to 'src/components')

diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 74067fef..a98e1e31 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -102,7 +102,7 @@ const PostStatusForm = {
           ...this.$store.state.instance.customEmoji
         ],
         users: this.$store.state.users.users,
-        updateUsersList: (input) => this.$store.dispatch('searchUsers', input)
+        updateUsersList: (query) => this.$store.dispatch('searchUsers', { query })
       })
     },
     emojiSuggestor () {
diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index 5338c974..a1ec2997 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -112,7 +112,7 @@ const UserSettings = {
           ...this.$store.state.instance.customEmoji
         ],
         users: this.$store.state.users.users,
-        updateUsersList: (input) => this.$store.dispatch('searchUsers', input)
+        updateUsersList: (query) => this.$store.dispatch('searchUsers', { query })
       })
     },
     emojiSuggestor () {
@@ -362,7 +362,7 @@ const UserSettings = {
       })
     },
     queryUserIds (query) {
-      return this.$store.dispatch('searchUsers', query)
+      return this.$store.dispatch('searchUsers', { query })
         .then((users) => map(users, 'id'))
     },
     blockUsers (ids) {
diff --git a/src/modules/users.js b/src/modules/users.js
index 1d1b415c..f377da75 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -428,8 +428,8 @@ const users = {
         store.commit('setUserForNotification', notification)
       })
     },
-    searchUsers (store, query) {
-      return store.rootState.api.backendInteractor.searchUsers({ query })
+    searchUsers (store, { query, withRelationships }) {
+      return store.rootState.api.backendInteractor.searchUsers({ query, withRelationships })
         .then((users) => {
           store.commit('addNewUsers', users)
           return users
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 72c8874f..94ff4623 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -324,7 +324,8 @@ const fetchFriends = ({ id, maxId, sinceId, limit = 20, credentials }) => {
   const args = [
     maxId && `max_id=${maxId}`,
     sinceId && `since_id=${sinceId}`,
-    limit && `limit=${limit}`
+    limit && `limit=${limit}`,
+    `with_relationships=true`
   ].filter(_ => _).join('&')
 
   url = url + (args ? '?' + args : '')
@@ -358,7 +359,8 @@ const fetchFollowers = ({ id, maxId, sinceId, limit = 20, credentials }) => {
   const args = [
     maxId && `max_id=${maxId}`,
     sinceId && `since_id=${sinceId}`,
-    limit && `limit=${limit}`
+    limit && `limit=${limit}`,
+    `with_relationships=true`
   ].filter(_ => _).join('&')
 
   url += args ? '?' + args : ''
@@ -935,12 +937,13 @@ const reportUser = ({ credentials, userId, statusIds, comment, forward }) => {
   })
 }
 
-const searchUsers = ({ credentials, query }) => {
+const searchUsers = ({ credentials, query, withRelationships }) => {
   return promisedRequest({
     url: MASTODON_USER_SEARCH_URL,
     params: {
       q: query,
-      resolve: true
+      resolve: true,
+      with_relationships: withRelationships
     },
     credentials
   })
@@ -971,6 +974,8 @@ const search2 = ({ credentials, q, resolve, limit, offset, following }) => {
     params.push(['following', true])
   }
 
+  params.push(['with_relationships', true])
+
   let queryString = map(params, (param) => `${param[0]}=${param[1]}`).join('&')
   url += `?${queryString}`
 
-- 
cgit v1.2.3-70-g09d2


From e50857d0ffecf7639f14c7dba150e55ef9d2fe74 Mon Sep 17 00:00:00 2001
From: Sergey Suprunenko <suprunenko.s@gmail.com>
Date: Wed, 13 May 2020 22:58:08 +0200
Subject: Show "it's you" label and hide follow btn for current user

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

(limited to 'src/components')

diff --git a/src/components/follow_card/follow_card.vue b/src/components/follow_card/follow_card.vue
index 76a70730..fe2d8ab8 100644
--- a/src/components/follow_card/follow_card.vue
+++ b/src/components/follow_card/follow_card.vue
@@ -2,7 +2,7 @@
   <basic-user-card :user="user">
     <div class="follow-card-content-container">
       <span
-        v-if="!noFollowsYou && relationship.followed_by"
+        v-if="isMe || !noFollowsYou && relationship.followed_by"
         class="faint"
       >
         {{ isMe ? $t('user_card.its_you') : $t('user_card.follows_you') }}
@@ -15,7 +15,7 @@
           <RemoteFollow :user="user" />
         </div>
       </template>
-      <template v-else>
+      <template v-else-if="!isMe">
         <FollowButton
           :relationship="relationship"
           :label-following="$t('user_card.follow_unfollow')"
-- 
cgit v1.2.3-70-g09d2


From db8dd1223c124e8461806a219d77817ba495794c Mon Sep 17 00:00:00 2001
From: Sergey Suprunenko <suprunenko.s@gmail.com>
Date: Thu, 14 May 2020 09:27:58 +0200
Subject: Make a condition clear and unambiguous

---
 src/components/follow_card/follow_card.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components')

diff --git a/src/components/follow_card/follow_card.vue b/src/components/follow_card/follow_card.vue
index fe2d8ab8..b503783f 100644
--- a/src/components/follow_card/follow_card.vue
+++ b/src/components/follow_card/follow_card.vue
@@ -2,7 +2,7 @@
   <basic-user-card :user="user">
     <div class="follow-card-content-container">
       <span
-        v-if="isMe || !noFollowsYou && relationship.followed_by"
+        v-if="isMe || (!noFollowsYou && relationship.followed_by)"
         class="faint"
       >
         {{ isMe ? $t('user_card.its_you') : $t('user_card.follows_you') }}
-- 
cgit v1.2.3-70-g09d2


From ab74cd497205d5964db38d56f6f70fb727c60d78 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 24 May 2020 02:06:55 +0300
Subject: Multiple fixes for CSS, added proper auth checking

---
 src/boot/routes.js                                 |   4 -
 src/components/modal/modal.vue                     |  17 +-
 src/components/settings_modal/settings_modal.scss  |  26 +-
 src/components/settings_modal/settings_modal.vue   |  61 +++-
 .../settings_modal/tabs/mutes_and_blocks_tab.vue   | 321 +++++++++++----------
 .../settings_modal/tabs/theme_tab/theme_tab.scss   |   1 +
 src/components/tab_switcher/tab_switcher.js        |  12 +-
 src/components/tab_switcher/tab_switcher.scss      |   8 +-
 8 files changed, 260 insertions(+), 190 deletions(-)

(limited to 'src/components')

diff --git a/src/boot/routes.js b/src/boot/routes.js
index 7400a682..d98a3b50 100644
--- a/src/boot/routes.js
+++ b/src/boot/routes.js
@@ -7,10 +7,8 @@ import Interactions from 'components/interactions/interactions.vue'
 import DMs from 'components/dm_timeline/dm_timeline.vue'
 import UserProfile from 'components/user_profile/user_profile.vue'
 import Search from 'components/search/search.vue'
-import Settings from 'components/settings/settings.vue'
 import Registration from 'components/registration/registration.vue'
 import PasswordReset from 'components/password_reset/password_reset.vue'
-import UserSettings from 'components/user_settings/user_settings.vue'
 import FollowRequests from 'components/follow_requests/follow_requests.vue'
 import OAuthCallback from 'components/oauth_callback/oauth_callback.vue'
 import Notifications from 'components/notifications/notifications.vue'
@@ -56,12 +54,10 @@ export default (store) => {
     { name: 'external-user-profile', path: '/users/:id', component: UserProfile },
     { name: 'interactions', path: '/users/:username/interactions', component: Interactions, beforeEnter: validateAuthenticatedRoute },
     { name: 'dms', path: '/users/:username/dms', component: DMs, beforeEnter: validateAuthenticatedRoute },
-    { name: 'settings', path: '/settings', component: Settings },
     { name: 'registration', path: '/registration', component: Registration },
     { name: 'password-reset', path: '/password-reset', component: PasswordReset, props: true },
     { name: 'registration-token', path: '/registration/:token', component: Registration },
     { name: 'friend-requests', path: '/friend-requests', component: FollowRequests, beforeEnter: validateAuthenticatedRoute },
-    { name: 'user-settings', path: '/user-settings', component: UserSettings, beforeEnter: validateAuthenticatedRoute },
     { name: 'notifications', path: '/:username/notifications', component: Notifications, beforeEnter: validateAuthenticatedRoute },
     { name: 'login', path: '/login', component: AuthForm },
     { name: 'chat', path: '/chat', component: ChatPanel, props: () => ({ floating: false }) },
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index e5ecc0c0..2b58913f 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -1,9 +1,9 @@
 <template>
   <div
     v-show="isOpen"
-    v-body-scroll-lock="isOpen"
+    v-body-scroll-lock="isOpen && !noBackground"
     class="modal-view"
-    :class="{ 'modal-background': !noBackground }"
+    :class="classes"
     @click.self="$emit('backdropClicked')"
   >
     <slot />
@@ -21,6 +21,14 @@ export default {
       type: Boolean,
       default: false
     }
+  },
+  computed: {
+    classes () {
+      return {
+        'modal-background': !this.noBackground,
+        'open': this.isOpen
+      }
+    }
   }
 }
 </script>
@@ -40,6 +48,7 @@ export default {
   pointer-events: none;
   animation-duration: 0.2s;
   animation-name: modal-background-fadein;
+  opacity: 0;
 
   > * {
     pointer-events: initial;
@@ -50,8 +59,8 @@ export default {
     background-color: rgba(0, 0, 0, 0.5);
   }
 
-  body:not(.scroll-locked) & {
-    opacity: 0;
+  &.open {
+    opacity: 1;
   }
 }
 
diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss
index 3efbe205..b82590a7 100644
--- a/src/components/settings_modal/settings_modal.scss
+++ b/src/components/settings_modal/settings_modal.scss
@@ -1,12 +1,21 @@
 @import 'src/_variables.scss';
 .settings-modal {
+  overflow: hidden;
 
   .settings_tab-switcher {
     height: 100%;
   }
   &.peek {
     .settings-modal-panel {
-      transform: translateY(calc(100% - 50px));
+      /* Explanation:
+       * Modal is positioned vertically centered.
+       * 100vh - 100% = Distance between modal's top+bottom boundaries and screen
+       * (100vh - 100%) / 2 = Distance between bottom (or top) boundary and screen
+       * + 100% - we move modal completely off-screen, it's top boundary touches
+       *   bottom of the screen
+       * - 50px - leaving tiny amount of space so that titlebar + tiny amount of modal is visible
+       */
+      transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 50px));
     }
   }
 
@@ -25,17 +34,22 @@
   .panel-body {
     height: 100%;
     overflow-y: hidden;
-  }
-  .setting-item {
-    border-bottom: 2px solid var(--fg, $fallback--fg);
-    margin: 1em 1em 1.4em;
-    padding-bottom: 1.4em;
 
     .btn {
       min-height: 28px;
       min-width: 10em;
       padding: 0 2em;
     }
+  }
+
+  .full-height {
+    height: 100%;
+  }
+
+  .setting-item {
+    border-bottom: 2px solid var(--fg, $fallback--fg);
+    margin: 1em 1em 1.4em;
+    padding-bottom: 1.4em;
 
     > div {
       margin-bottom: .5em;
diff --git a/src/components/settings_modal/settings_modal.vue b/src/components/settings_modal/settings_modal.vue
index 53481bdd..741c15c4 100644
--- a/src/components/settings_modal/settings_modal.vue
+++ b/src/components/settings_modal/settings_modal.vue
@@ -1,6 +1,5 @@
 <template>
 <Modal
-  v-if="isLoggedIn && !resettingForm"
   :is-open="modalActivated"
   class="settings-modal"
   :class="{ peek: modalPeeked }"
@@ -25,15 +24,57 @@
         :scrollableTabs="true"
         ref="tabSwitcher"
         >
-        <div :label="$t('settings.general')"><GeneralTab /></div>
-        <div :label="$t('settings.profile_tab')"><ProfileTab /></div>
-        <div :label="$t('settings.security_tab')"><SecurityTab /></div>
-        <div :label="$t('settings.filtering')"><FilteringTab /></div>
-        <div :label="$t('settings.theme')"><ThemeTab /></div>
-        <div :label="$t('settings.notifications')"><NotificationsTab /></div>
-        <div :label="$t('settings.data_import_export_tab')"><DataImportExportTab /></div>
-        <div :label="$t('settings.mutes_and_blocks')"><MutesAndBlocksTab /></div>
-        <div :label="$t('settings.version.title')"><VersionTab /></div>
+        <div
+          :label="$t('settings.general')"
+          >
+          <GeneralTab />
+        </div>
+        <div v-if="isLoggedIn"
+             :label="$t('settings.profile_tab')"
+             >
+          <ProfileTab />
+        </div>
+        <div
+          v-if="isLoggedIn"
+          :label="$t('settings.security_tab')"
+          >
+          <SecurityTab />
+        </div>
+        <div
+          :label="$t('settings.filtering')"
+          >
+          <FilteringTab />
+        </div>
+        <div
+          :label="$t('settings.theme')"
+          >
+          <ThemeTab />
+        </div>
+        <div
+          v-if="isLoggedIn"
+          :label="$t('settings.notifications')"
+          >
+          <NotificationsTab />
+        </div>
+        <div
+          v-if="isLoggedIn"
+          :label="$t('settings.data_import_export_tab')"
+          >
+          <DataImportExportTab />
+        </div>
+        <div
+          v-if="isLoggedIn"
+          :label="$t('settings.mutes_and_blocks')"
+          :fullHeight="true"
+          class="full-height"
+          >
+          <MutesAndBlocksTab />
+        </div>
+        <div
+          :label="$t('settings.version.title')"
+          >
+          <VersionTab />
+        </div>
       </tab-switcher>
     </div>
   </div>
diff --git a/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue b/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue
index 7fce7b78..04f9c6dd 100644
--- a/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue
+++ b/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue
@@ -1,173 +1,176 @@
 <template>
-  <tab-switcher>
-    <div :label="$t('settings.blocks_tab')">
-      <div class="profile-edit-usersearch-wrapper">
-        <Autosuggest
-          :filter="filterUnblockedUsers"
-          :query="queryUserIds"
-          :placeholder="$t('settings.search_user_to_block')"
-          >
-          <BlockCard
-            slot-scope="row"
-            :user-id="row.item"
-            />
-        </Autosuggest>
-      </div>
-      <BlockList
-        :refresh="true"
-        :get-key="i => i"
+<tab-switcher
+  :scrollableTabs="true"
+  class="mutes-and-blocks-tab"
+  >
+  <div :label="$t('settings.blocks_tab')">
+    <div class="usersearch-wrapper">
+      <Autosuggest
+        :filter="filterUnblockedUsers"
+        :query="queryUserIds"
+        :placeholder="$t('settings.search_user_to_block')"
         >
-        <template
-          slot="header"
-          slot-scope="{selected}"
-          >
-          <div class="profile-edit-bulk-actions">
-            <ProgressButton
-              v-if="selected.length > 0"
-              class="btn btn-default"
-              :click="() => blockUsers(selected)"
-              >
-              {{ $t('user_card.block') }}
-              <template slot="progress">
-                {{ $t('user_card.block_progress') }}
-              </template>
-            </ProgressButton>
-            <ProgressButton
-              v-if="selected.length > 0"
-              class="btn btn-default"
-              :click="() => unblockUsers(selected)"
-              >
-              {{ $t('user_card.unblock') }}
-              <template slot="progress">
-                {{ $t('user_card.unblock_progress') }}
-              </template>
-            </ProgressButton>
-          </div>
-        </template>
-        <template
-          slot="item"
-          slot-scope="{item}"
-          >
-          <BlockCard :user-id="item" />
-        </template>
-        <template slot="empty">
-          {{ $t('settings.no_blocks') }}
-        </template>
-      </BlockList>
+        <BlockCard
+          slot-scope="row"
+          :user-id="row.item"
+          />
+      </Autosuggest>
     </div>
-
-    <div :label="$t('settings.mutes_tab')">
-      <tab-switcher>
-        <div label="Users">
-          <div class="profile-edit-usersearch-wrapper">
-            <Autosuggest
-              :filter="filterUnMutedUsers"
-              :query="queryUserIds"
-              :placeholder="$t('settings.search_user_to_mute')"
-              >
-              <MuteCard
-                slot-scope="row"
-                :user-id="row.item"
-                />
-            </Autosuggest>
-          </div>
-          <MuteList
-            :refresh="true"
-            :get-key="i => i"
+    <BlockList
+      :refresh="true"
+      :get-key="i => i"
+      >
+      <template
+        slot="header"
+        slot-scope="{selected}"
+        >
+        <div class="bulk-actions">
+          <ProgressButton
+            v-if="selected.length > 0"
+            class="btn btn-default bulk-action-button"
+            :click="() => blockUsers(selected)"
             >
-            <template
-              slot="header"
-              slot-scope="{selected}"
-              >
-              <div class="profile-edit-bulk-actions">
-                <ProgressButton
-                  v-if="selected.length > 0"
-                  class="btn btn-default"
-                  :click="() => muteUsers(selected)"
-                  >
-                  {{ $t('user_card.mute') }}
-                  <template slot="progress">
-                    {{ $t('user_card.mute_progress') }}
-                  </template>
-                </ProgressButton>
-                <ProgressButton
-                  v-if="selected.length > 0"
-                  class="btn btn-default"
-                  :click="() => unmuteUsers(selected)"
-                  >
-                  {{ $t('user_card.unmute') }}
-                  <template slot="progress">
-                    {{ $t('user_card.unmute_progress') }}
-                  </template>
-                </ProgressButton>
-              </div>
+            {{ $t('user_card.block') }}
+            <template slot="progress">
+              {{ $t('user_card.block_progress') }}
             </template>
-            <template
-              slot="item"
-              slot-scope="{item}"
-              >
-              <MuteCard :user-id="item" />
-            </template>
-            <template slot="empty">
-              {{ $t('settings.no_mutes') }}
+          </ProgressButton>
+          <ProgressButton
+            v-if="selected.length > 0"
+            class="btn btn-default"
+            :click="() => unblockUsers(selected)"
+            >
+            {{ $t('user_card.unblock') }}
+            <template slot="progress">
+              {{ $t('user_card.unblock_progress') }}
             </template>
-          </MuteList>
+          </ProgressButton>
         </div>
+      </template>
+      <template
+        slot="item"
+        slot-scope="{item}"
+        >
+        <BlockCard :user-id="item" />
+      </template>
+      <template slot="empty">
+        {{ $t('settings.no_blocks') }}
+      </template>
+    </BlockList>
+  </div>
 
-        <div :label="$t('settings.domain_mutes')">
-          <div class="profile-edit-domain-mute-form">
-            <input
-              v-model="newDomainToMute"
-              :placeholder="$t('settings.type_domains_to_mute')"
-              type="text"
-              @keyup.enter="muteDomain"
-              >
-            <ProgressButton
-              class="btn btn-default"
-              :click="muteDomain"
-              >
-              {{ $t('domain_mute_card.mute') }}
-              <template slot="progress">
-                {{ $t('domain_mute_card.mute_progress') }}
-              </template>
-            </ProgressButton>
-          </div>
-          <DomainMuteList
-            :refresh="true"
-            :get-key="i => i"
+  <div :label="$t('settings.mutes_tab')">
+    <tab-switcher>
+      <div label="Users">
+        <div class="usersearch-wrapper">
+          <Autosuggest
+            :filter="filterUnMutedUsers"
+            :query="queryUserIds"
+            :placeholder="$t('settings.search_user_to_mute')"
             >
-            <template
-              slot="header"
-              slot-scope="{selected}"
-              >
-              <div class="profile-edit-bulk-actions">
-                <ProgressButton
-                  v-if="selected.length > 0"
-                  class="btn btn-default"
-                  :click="() => unmuteDomains(selected)"
-                  >
-                  {{ $t('domain_mute_card.unmute') }}
-                  <template slot="progress">
-                    {{ $t('domain_mute_card.unmute_progress') }}
-                  </template>
-                </ProgressButton>
-              </div>
-            </template>
-            <template
-              slot="item"
-              slot-scope="{item}"
-              >
-              <DomainMuteCard :domain="item" />
-            </template>
-            <template slot="empty">
-              {{ $t('settings.no_mutes') }}
+            <MuteCard
+              slot-scope="row"
+              :user-id="row.item"
+              />
+          </Autosuggest>
+        </div>
+        <MuteList
+          :refresh="true"
+          :get-key="i => i"
+          >
+          <template
+            slot="header"
+            slot-scope="{selected}"
+            >
+            <div class="bulk-actions">
+              <ProgressButton
+                v-if="selected.length > 0"
+                class="btn btn-default"
+                :click="() => muteUsers(selected)"
+                >
+                {{ $t('user_card.mute') }}
+                <template slot="progress">
+                  {{ $t('user_card.mute_progress') }}
+                </template>
+              </ProgressButton>
+              <ProgressButton
+                v-if="selected.length > 0"
+                class="btn btn-default"
+                :click="() => unmuteUsers(selected)"
+                >
+                {{ $t('user_card.unmute') }}
+                <template slot="progress">
+                  {{ $t('user_card.unmute_progress') }}
+                </template>
+              </ProgressButton>
+            </div>
+          </template>
+          <template
+            slot="item"
+            slot-scope="{item}"
+            >
+            <MuteCard :user-id="item" />
+          </template>
+          <template slot="empty">
+            {{ $t('settings.no_mutes') }}
+          </template>
+        </MuteList>
+      </div>
+
+      <div :label="$t('settings.domain_mutes')">
+        <div class="domain-mute-form">
+          <input
+            v-model="newDomainToMute"
+            :placeholder="$t('settings.type_domains_to_mute')"
+            type="text"
+            @keyup.enter="muteDomain"
+            >
+          <ProgressButton
+            class="btn btn-default domain-mute-button"
+            :click="muteDomain"
+            >
+            {{ $t('domain_mute_card.mute') }}
+            <template slot="progress">
+              {{ $t('domain_mute_card.mute_progress') }}
             </template>
-          </DomainMuteList>
+          </ProgressButton>
         </div>
-      </tab-switcher>
-    </div>
-  </tab-switcher>
+        <DomainMuteList
+          :refresh="true"
+          :get-key="i => i"
+          >
+          <template
+            slot="header"
+            slot-scope="{selected}"
+            >
+            <div class="bulk-actions">
+              <ProgressButton
+                v-if="selected.length > 0"
+                class="btn btn-default"
+                :click="() => unmuteDomains(selected)"
+                >
+                {{ $t('domain_mute_card.unmute') }}
+                <template slot="progress">
+                  {{ $t('domain_mute_card.unmute_progress') }}
+                </template>
+              </ProgressButton>
+            </div>
+          </template>
+          <template
+            slot="item"
+            slot-scope="{item}"
+            >
+            <DomainMuteCard :domain="item" />
+          </template>
+          <template slot="empty">
+            {{ $t('settings.no_mutes') }}
+          </template>
+        </DomainMuteList>
+      </div>
+    </tab-switcher>
+  </div>
+</tab-switcher>
 </template>
 
 <script src="./mutes_and_blocks_tab.js"></script>
-<!-- <style lang="scss" src="./profile.scss"></style> -->
+<style lang="scss" src="./mutes_and_blocks_tab.scss"></style>
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
index 75b3017d..e0b1a2df 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
@@ -1,5 +1,6 @@
 @import 'src/_variables.scss';
 .theme-tab {
+  padding-bottom: 2em;
   .theme-warning {
     display: flex;
     align-items: baseline;
diff --git a/src/components/tab_switcher/tab_switcher.js b/src/components/tab_switcher/tab_switcher.js
index 97791de3..a54b474f 100644
--- a/src/components/tab_switcher/tab_switcher.js
+++ b/src/components/tab_switcher/tab_switcher.js
@@ -69,7 +69,6 @@ export default Vue.component('tab-switcher', {
         if (!slot.tag) return
         const classesTab = ['tab']
         const classesWrapper = ['tab-wrapper']
-
         if (this.activeIndex === index) {
           classesTab.push('active')
           classesWrapper.push('active')
@@ -101,12 +100,17 @@ export default Vue.component('tab-switcher', {
     const contents = this.$slots.default.map((slot, index) => {
       if (!slot.tag) return
       const active = this.activeIndex === index
+      const classes = [ active ? 'active' : 'hidden' ]
+      if (slot.data.attrs.fullHeight) {
+        classes.push('full-height')
+      }
+
       if (this.renderOnlyFocused) {
         return active
-          ? <div class="active">{slot}</div>
-          : <div class="hidden"></div>
+          ? <div class={classes.join(' ')}>{slot}</div>
+          : <div class={classes.join(' ')}></div>
       }
-      return <div class={active ? 'active' : 'hidden' }>{slot}</div>
+      return <div class={classes.join(' ')}>{slot}</div>
     })
 
     return (
diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
index a7b790a3..c9050781 100644
--- a/src/components/tab_switcher/tab_switcher.scss
+++ b/src/components/tab_switcher/tab_switcher.scss
@@ -59,7 +59,6 @@
       flex: 1 0 auto;
       overflow-y: auto;
       overflow-x: hidden;
-      padding-top: 5px;
       flex-direction: column;
       &::after {
         content: '';
@@ -78,6 +77,9 @@
           border-right-color: $fallback--border;
           border-right-color: var(--border, $fallback--border);
         }
+        &:last-child .tab {
+          margin-bottom: 0;
+        }
       }
       .tab {
         box-sizing: content-box;
@@ -87,8 +89,8 @@
         min-width: 1px;
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
-        // padding-right: 200px;
-        // margin-right: 6px - 200px;
+        padding-right: calc(1em + 200px);
+        margin-right: 6px - 200px;
         margin-left: 6px;
       }
 
-- 
cgit v1.2.3-70-g09d2


From a872c53472a46973a18808254f9d812b074bb0ee Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 24 May 2020 02:29:09 +0300
Subject: misc fixes

---
 .../settings_modal/tabs/mutes_and_blocks_tab.scss  | 29 +++++++++++++++++++
 src/components/tab_switcher/tab_switcher.scss      | 33 ++++++++++++----------
 2 files changed, 47 insertions(+), 15 deletions(-)
 create mode 100644 src/components/settings_modal/tabs/mutes_and_blocks_tab.scss

(limited to 'src/components')

diff --git a/src/components/settings_modal/tabs/mutes_and_blocks_tab.scss b/src/components/settings_modal/tabs/mutes_and_blocks_tab.scss
new file mode 100644
index 00000000..ceb64efb
--- /dev/null
+++ b/src/components/settings_modal/tabs/mutes_and_blocks_tab.scss
@@ -0,0 +1,29 @@
+.mutes-and-blocks-tab {
+    height: 100%;
+
+    .usersearch-wrapper {
+        padding: 1em;
+    }
+
+    .bulk-actions {
+        text-align: right;
+        padding: 0 1em;
+        min-height: 28px;
+    }
+
+    .bulk-action-button {
+        width: 10em
+    }
+
+    .domain-mute-form {
+        padding: 1em;
+        display: flex;
+        flex-direction: column
+    }
+
+    .domain-mute-button {
+        align-self: flex-end;
+        margin-top: 1em;
+        width: 10em
+    }
+}
diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
index c9050781..f994380f 100644
--- a/src/components/tab_switcher/tab_switcher.scss
+++ b/src/components/tab_switcher/tab_switcher.scss
@@ -61,14 +61,22 @@
       overflow-x: hidden;
       flex-direction: column;
       &::after {
-        content: '';
         flex: 1 1 auto;
+      }
+      &::before {
+        flex: 0 0 auto;
+        height: 0.5em;
+      }
+      &::after, &::before {
+        content: '';
         border-right: 1px solid;
         border-right-color: $fallback--border;
         border-right-color: var(--border, $fallback--border);
       }
       .tab-wrapper {
         min-width: 10em;
+        display: flex;
+        flex-direction: column;
         &:not(.active)::after {
           top: 0;
           right: 0;
@@ -77,14 +85,21 @@
           border-right-color: $fallback--border;
           border-right-color: var(--border, $fallback--border);
         }
+        &::before {
+          flex: 0 0 6px;
+          content: '';
+          border-right: 1px solid;
+          border-right-color: $fallback--border;
+          border-right-color: var(--border, $fallback--border);
+        }
         &:last-child .tab {
           margin-bottom: 0;
         }
       }
+
       .tab {
+        flex: 1;
         box-sizing: content-box;
-        width: 100%;
-        margin-bottom: 5px;
         min-width: 10em;
         min-width: 1px;
         border-top-right-radius: 0;
@@ -105,18 +120,6 @@
           border-right-color: var(--border, $fallback--border);
         }
       }
-      .tab {
-        box-sizing: content-box;
-        width: 100%;
-        margin-bottom: 5px;
-        min-width: 10em;
-        min-width: 1px;
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-        // padding-right: 200px;
-        // margin-right: 6px - 200px;
-        margin-left: 6px;
-      }
     }
   }
 
-- 
cgit v1.2.3-70-g09d2


From 1e606d2f268e796a3efd2a995713c70a000daf62 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 25 May 2020 03:14:41 +0300
Subject: split modal's content into another component, add lazy loading

---
 src/components/settings_modal/settings_modal.js    | 33 +--------
 src/components/settings_modal/settings_modal.scss  | 71 +------------------
 src/components/settings_modal/settings_modal.vue   | 77 ++-------------------
 .../settings_modal/settings_modal_content.js       | 42 ++++++++++++
 .../settings_modal/settings_modal_content.scss     | 73 ++++++++++++++++++++
 .../settings_modal/settings_modal_content.vue      | 79 ++++++++++++++++++++++
 6 files changed, 200 insertions(+), 175 deletions(-)
 create mode 100644 src/components/settings_modal/settings_modal_content.js
 create mode 100644 src/components/settings_modal/settings_modal_content.scss
 create mode 100644 src/components/settings_modal/settings_modal_content.vue

(limited to 'src/components')

diff --git a/src/components/settings_modal/settings_modal.js b/src/components/settings_modal/settings_modal.js
index d60babf6..8f55af71 100644
--- a/src/components/settings_modal/settings_modal.js
+++ b/src/components/settings_modal/settings_modal.js
@@ -1,40 +1,11 @@
 import Modal from 'src/components/modal/modal.vue'
-import TabSwitcher from 'src/components/tab_switcher/tab_switcher.js'
-
-import DataImportExportTab from './tabs/data_import_export_tab.vue'
-import MutesAndBlocksTab from './tabs/mutes_and_blocks_tab.vue'
-import NotificationsTab from './tabs/notifications_tab.vue'
-import FilteringTab from './tabs/filtering_tab.vue'
-import SecurityTab from './tabs/security_tab/security_tab.vue'
-import ProfileTab from './tabs/profile_tab.vue'
-import GeneralTab from './tabs/general_tab.vue'
-import VersionTab from './tabs/version_tab.vue'
-import ThemeTab from './tabs/theme_tab/theme_tab.vue'
 
 const SettingsModal = {
   components: {
     Modal,
-    TabSwitcher,
-
-    DataImportExportTab,
-    MutesAndBlocksTab,
-    NotificationsTab,
-    FilteringTab,
-    SecurityTab,
-    ProfileTab,
-    GeneralTab,
-    VersionTab,
-    ThemeTab
-  },
-  data () {
-    return {
-      resettingForm: false
-    }
+    SettingsModalContent: () => import('./settings_modal_content.vue')
   },
   computed: {
-    isLoggedIn () {
-      return !!this.$store.state.users.currentUser
-    },
     modalActivated () {
       return this.$store.state.interface.settingsModalState !== 'hidden'
     },
@@ -42,8 +13,6 @@ const SettingsModal = {
       return this.$store.state.interface.settingsModalState === 'minimized'
     }
   },
-  watch: {
-  },
   methods: {
     closeModal () {
       this.$store.dispatch('closeSettingsModal')
diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss
index b82590a7..ece96364 100644
--- a/src/components/settings_modal/settings_modal.scss
+++ b/src/components/settings_modal/settings_modal.scss
@@ -2,11 +2,8 @@
 .settings-modal {
   overflow: hidden;
 
-  .settings_tab-switcher {
-    height: 100%;
-  }
   &.peek {
-    .settings-modal-panel {
+    .modal-panel {
       /* Explanation:
        * Modal is positioned vertically centered.
        * 100vh - 100% = Distance between modal's top+bottom boundaries and screen
@@ -18,70 +15,4 @@
       transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 50px));
     }
   }
-
-  .settings-modal-panel {
-    transition: transform;
-    transition-timing-function: ease-in-out;
-    transition-duration: 300ms;
-    width: 1000px;
-    max-width: 90vw;
-    height: 90vh;
-    @media all and (max-width: 800px) {
-      max-width: 100vw;
-      height: 100vh;
-    }
-  }
-  .panel-body {
-    height: 100%;
-    overflow-y: hidden;
-
-    .btn {
-      min-height: 28px;
-      min-width: 10em;
-      padding: 0 2em;
-    }
-  }
-
-  .full-height {
-    height: 100%;
-  }
-
-  .setting-item {
-    border-bottom: 2px solid var(--fg, $fallback--fg);
-    margin: 1em 1em 1.4em;
-    padding-bottom: 1.4em;
-
-    > div {
-      margin-bottom: .5em;
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-
-    &:last-child {
-      border-bottom: none;
-      padding-bottom: 0;
-      margin-bottom: 1em;
-    }
-
-    select {
-      min-width: 10em;
-    }
-
-    textarea {
-      width: 100%;
-      max-width: 100%;
-      height: 100px;
-    }
-
-    .unavailable,
-    .unavailable i {
-      color: var(--cRed, $fallback--cRed);
-      color: $fallback--cRed;
-    }
-
-    .number-input {
-      max-width: 6em;
-    }
-  }
 }
diff --git a/src/components/settings_modal/settings_modal.vue b/src/components/settings_modal/settings_modal.vue
index 741c15c4..b9c0689e 100644
--- a/src/components/settings_modal/settings_modal.vue
+++ b/src/components/settings_modal/settings_modal.vue
@@ -5,79 +5,10 @@
   :class="{ peek: modalPeeked }"
   :no-background="modalPeeked"
   >
-  <div class="settings-modal-panel panel">
-    <div class="panel-heading">
-      <span class="title">
-        {{ $t('settings.settings') }}
-      </span>
-      <button class="btn" @click="peekModal">
-        {{ $t('general.peek') }}
-      </button>
-      <button class="btn" @click="closeModal">
-        {{ $t('general.close') }}
-      </button>
-    </div>
-    <div class="panel-body">
-      <tab-switcher
-        class="settings_tab-switcher"
-        :sideTabBar="true"
-        :scrollableTabs="true"
-        ref="tabSwitcher"
-        >
-        <div
-          :label="$t('settings.general')"
-          >
-          <GeneralTab />
-        </div>
-        <div v-if="isLoggedIn"
-             :label="$t('settings.profile_tab')"
-             >
-          <ProfileTab />
-        </div>
-        <div
-          v-if="isLoggedIn"
-          :label="$t('settings.security_tab')"
-          >
-          <SecurityTab />
-        </div>
-        <div
-          :label="$t('settings.filtering')"
-          >
-          <FilteringTab />
-        </div>
-        <div
-          :label="$t('settings.theme')"
-          >
-          <ThemeTab />
-        </div>
-        <div
-          v-if="isLoggedIn"
-          :label="$t('settings.notifications')"
-          >
-          <NotificationsTab />
-        </div>
-        <div
-          v-if="isLoggedIn"
-          :label="$t('settings.data_import_export_tab')"
-          >
-          <DataImportExportTab />
-        </div>
-        <div
-          v-if="isLoggedIn"
-          :label="$t('settings.mutes_and_blocks')"
-          :fullHeight="true"
-          class="full-height"
-          >
-          <MutesAndBlocksTab />
-        </div>
-        <div
-          :label="$t('settings.version.title')"
-          >
-          <VersionTab />
-        </div>
-      </tab-switcher>
-    </div>
-  </div>
+  <SettingsModalContent
+    v-if="modalActivated"
+    class="modal-panel"
+    />
 </Modal>
 </template>
 
diff --git a/src/components/settings_modal/settings_modal_content.js b/src/components/settings_modal/settings_modal_content.js
new file mode 100644
index 00000000..bd8df672
--- /dev/null
+++ b/src/components/settings_modal/settings_modal_content.js
@@ -0,0 +1,42 @@
+import TabSwitcher from 'src/components/tab_switcher/tab_switcher.js'
+
+import DataImportExportTab from './tabs/data_import_export_tab.vue'
+import MutesAndBlocksTab from './tabs/mutes_and_blocks_tab.vue'
+import NotificationsTab from './tabs/notifications_tab.vue'
+import FilteringTab from './tabs/filtering_tab.vue'
+import SecurityTab from './tabs/security_tab/security_tab.vue'
+import ProfileTab from './tabs/profile_tab.vue'
+import GeneralTab from './tabs/general_tab.vue'
+import VersionTab from './tabs/version_tab.vue'
+import ThemeTab from './tabs/theme_tab/theme_tab.vue'
+
+const SettingsModalContent = {
+  components: {
+    TabSwitcher,
+
+    DataImportExportTab,
+    MutesAndBlocksTab,
+    NotificationsTab,
+    FilteringTab,
+    SecurityTab,
+    ProfileTab,
+    GeneralTab,
+    VersionTab,
+    ThemeTab
+  },
+  computed: {
+    isLoggedIn () {
+      return !!this.$store.state.users.currentUser
+    }
+  },
+  methods: {
+    closeModal () {
+      this.$store.dispatch('closeSettingsModal')
+    },
+    peekModal () {
+      this.$store.dispatch('togglePeekSettingsModal')
+    }
+  }
+}
+
+export default SettingsModalContent
diff --git a/src/components/settings_modal/settings_modal_content.scss b/src/components/settings_modal/settings_modal_content.scss
new file mode 100644
index 00000000..92e167a2
--- /dev/null
+++ b/src/components/settings_modal/settings_modal_content.scss
@@ -0,0 +1,73 @@
+@import 'src/_variables.scss';
+
+.settings-modal-panel {
+  overflow: hidden;
+  transition: transform;
+  transition-timing-function: ease-in-out;
+  transition-duration: 300ms;
+  width: 1000px;
+  max-width: 90vw;
+  height: 90vh;
+
+  @media all and (max-width: 800px) {
+    max-width: 100vw;
+    height: 100vh;
+  }
+
+  .settings_tab-switcher {
+    height: 100%;
+  }
+  .panel-body {
+    height: 100%;
+    overflow-y: hidden;
+
+    .btn {
+      min-height: 28px;
+      min-width: 10em;
+      padding: 0 2em;
+    }
+  }
+
+  .full-height {
+    height: 100%;
+  }
+
+  .setting-item {
+    border-bottom: 2px solid var(--fg, $fallback--fg);
+    margin: 1em 1em 1.4em;
+    padding-bottom: 1.4em;
+
+    > div {
+      margin-bottom: .5em;
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    &:last-child {
+      border-bottom: none;
+      padding-bottom: 0;
+      margin-bottom: 1em;
+    }
+
+    select {
+      min-width: 10em;
+    }
+
+    textarea {
+      width: 100%;
+      max-width: 100%;
+      height: 100px;
+    }
+
+    .unavailable,
+    .unavailable i {
+      color: var(--cRed, $fallback--cRed);
+      color: $fallback--cRed;
+    }
+
+    .number-input {
+      max-width: 6em;
+    }
+  }
+}
diff --git a/src/components/settings_modal/settings_modal_content.vue b/src/components/settings_modal/settings_modal_content.vue
new file mode 100644
index 00000000..1778c23b
--- /dev/null
+++ b/src/components/settings_modal/settings_modal_content.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="settings-modal-panel panel">
+    <div class="panel-heading">
+      <span class="title">
+        {{ $t('settings.settings') }}
+      </span>
+      <button class="btn" @click="peekModal">
+        {{ $t('general.peek') }}
+      </button>
+      <button class="btn" @click="closeModal">
+        {{ $t('general.close') }}
+      </button>
+    </div>
+    <div class="panel-body">
+      <tab-switcher
+        class="settings_tab-switcher"
+        :sideTabBar="true"
+        :scrollableTabs="true"
+        ref="tabSwitcher"
+        >
+        <div
+          :label="$t('settings.general')"
+          >
+          <GeneralTab />
+        </div>
+        <div v-if="isLoggedIn"
+             :label="$t('settings.profile_tab')"
+             >
+          <ProfileTab />
+        </div>
+        <div
+          v-if="isLoggedIn"
+          :label="$t('settings.security_tab')"
+          >
+          <SecurityTab />
+        </div>
+        <div
+          :label="$t('settings.filtering')"
+          >
+          <FilteringTab />
+        </div>
+        <div
+          :label="$t('settings.theme')"
+          >
+          <ThemeTab />
+        </div>
+        <div
+          v-if="isLoggedIn"
+          :label="$t('settings.notifications')"
+          >
+          <NotificationsTab />
+        </div>
+        <div
+          v-if="isLoggedIn"
+          :label="$t('settings.data_import_export_tab')"
+          >
+          <DataImportExportTab />
+        </div>
+        <div
+          v-if="isLoggedIn"
+          :label="$t('settings.mutes_and_blocks')"
+          :fullHeight="true"
+          class="full-height"
+          >
+          <MutesAndBlocksTab />
+        </div>
+        <div
+          :label="$t('settings.version.title')"
+          >
+          <VersionTab />
+        </div>
+      </tab-switcher>
+    </div>
+  </div>
+</template>
+
+<script src="./settings_modal_content.js"></script>
+
+<style src="./settings_modal_content.scss" lang="scss"></style>
-- 
cgit v1.2.3-70-g09d2


From bcea2e4d12a2f8a460def340debdff3d0dec7770 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 25 May 2020 03:30:14 +0300
Subject: cleanup

---
 src/components/settings_modal/settings_modal.js | 8 --------
 1 file changed, 8 deletions(-)

(limited to 'src/components')

diff --git a/src/components/settings_modal/settings_modal.js b/src/components/settings_modal/settings_modal.js
index 8f55af71..192ba5d3 100644
--- a/src/components/settings_modal/settings_modal.js
+++ b/src/components/settings_modal/settings_modal.js
@@ -13,14 +13,6 @@ const SettingsModal = {
       return this.$store.state.interface.settingsModalState === 'minimized'
     }
   },
-  methods: {
-    closeModal () {
-      this.$store.dispatch('closeSettingsModal')
-    },
-    peekModal () {
-      this.$store.dispatch('togglePeekSettingsModal')
-    }
-  }
 }
 
 export default SettingsModal
-- 
cgit v1.2.3-70-g09d2


From e7ba4255bbfdc199c513e83007fc6956166b6dc0 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 25 May 2020 03:43:55 +0300
Subject: eslint --fix + small fix

---
 src/components/settings_modal/settings_modal.js    |   2 +-
 src/components/settings_modal/settings_modal.vue   |  18 +-
 .../settings_modal/settings_modal_content.vue      |  41 ++-
 .../settings_modal/tabs/data_import_export_tab.vue |  64 ++--
 .../settings_modal/tabs/filtering_tab.vue          | 152 ++++-----
 src/components/settings_modal/tabs/general_tab.js  |   3 +-
 src/components/settings_modal/tabs/general_tab.vue | 306 +++++++++---------
 .../settings_modal/tabs/mutes_and_blocks_tab.vue   | 296 ++++++++---------
 .../settings_modal/tabs/notifications_tab.vue      |  90 +++---
 src/components/settings_modal/tabs/profile_tab.js  |   2 +-
 src/components/settings_modal/tabs/profile_tab.vue | 358 ++++++++++-----------
 .../tabs/security_tab/security_tab.vue             | 242 +++++++-------
 .../settings_modal/tabs/theme_tab/theme_tab.vue    | 150 ++++-----
 src/components/settings_modal/tabs/version_tab.vue |  50 +--
 14 files changed, 890 insertions(+), 884 deletions(-)

(limited to 'src/components')

diff --git a/src/components/settings_modal/settings_modal.js b/src/components/settings_modal/settings_modal.js
index 192ba5d3..d38c5751 100644
--- a/src/components/settings_modal/settings_modal.js
+++ b/src/components/settings_modal/settings_modal.js
@@ -12,7 +12,7 @@ const SettingsModal = {
     modalPeeked () {
       return this.$store.state.interface.settingsModalState === 'minimized'
     }
-  },
+  }
 }
 
 export default SettingsModal
diff --git a/src/components/settings_modal/settings_modal.vue b/src/components/settings_modal/settings_modal.vue
index b9c0689e..b6ca5c6b 100644
--- a/src/components/settings_modal/settings_modal.vue
+++ b/src/components/settings_modal/settings_modal.vue
@@ -1,15 +1,15 @@
 <template>
-<Modal
-  :is-open="modalActivated"
-  class="settings-modal"
-  :class="{ peek: modalPeeked }"
-  :no-background="modalPeeked"
+  <Modal
+    :is-open="modalActivated"
+    class="settings-modal"
+    :class="{ peek: modalPeeked }"
+    :no-background="modalPeeked"
   >
-  <SettingsModalContent
-    v-if="modalActivated"
-    class="modal-panel"
+    <SettingsModalContent
+      v-if="modalActivated"
+      class="modal-panel"
     />
-</Modal>
+  </Modal>
 </template>
 
 <script src="./settings_modal.js"></script>
diff --git a/src/components/settings_modal/settings_modal_content.vue b/src/components/settings_modal/settings_modal_content.vue
index 1778c23b..013bf34f 100644
--- a/src/components/settings_modal/settings_modal_content.vue
+++ b/src/components/settings_modal/settings_modal_content.vue
@@ -4,56 +4,63 @@
       <span class="title">
         {{ $t('settings.settings') }}
       </span>
-      <button class="btn" @click="peekModal">
+      <button
+        class="btn"
+        @click="peekModal"
+      >
         {{ $t('general.peek') }}
       </button>
-      <button class="btn" @click="closeModal">
+      <button
+        class="btn"
+        @click="closeModal"
+      >
         {{ $t('general.close') }}
       </button>
     </div>
     <div class="panel-body">
       <tab-switcher
-        class="settings_tab-switcher"
-        :sideTabBar="true"
-        :scrollableTabs="true"
         ref="tabSwitcher"
-        >
+        class="settings_tab-switcher"
+        :side-tab-bar="true"
+        :scrollable-tabs="true"
+      >
         <div
           :label="$t('settings.general')"
-          >
+        >
           <GeneralTab />
         </div>
-        <div v-if="isLoggedIn"
-             :label="$t('settings.profile_tab')"
-             >
+        <div
+          v-if="isLoggedIn"
+          :label="$t('settings.profile_tab')"
+        >
           <ProfileTab />
         </div>
         <div
           v-if="isLoggedIn"
           :label="$t('settings.security_tab')"
-          >
+        >
           <SecurityTab />
         </div>
         <div
           :label="$t('settings.filtering')"
-          >
+        >
           <FilteringTab />
         </div>
         <div
           :label="$t('settings.theme')"
-          >
+        >
           <ThemeTab />
         </div>
         <div
           v-if="isLoggedIn"
           :label="$t('settings.notifications')"
-          >
+        >
           <NotificationsTab />
         </div>
         <div
           v-if="isLoggedIn"
           :label="$t('settings.data_import_export_tab')"
-          >
+        >
           <DataImportExportTab />
         </div>
         <div
@@ -61,12 +68,12 @@
           :label="$t('settings.mutes_and_blocks')"
           :fullHeight="true"
           class="full-height"
-          >
+        >
           <MutesAndBlocksTab />
         </div>
         <div
           :label="$t('settings.version.title')"
-          >
+        >
           <VersionTab />
         </div>
       </tab-switcher>
diff --git a/src/components/settings_modal/tabs/data_import_export_tab.vue b/src/components/settings_modal/tabs/data_import_export_tab.vue
index 3ddc8b03..b5d0f5ed 100644
--- a/src/components/settings_modal/tabs/data_import_export_tab.vue
+++ b/src/components/settings_modal/tabs/data_import_export_tab.vue
@@ -1,42 +1,42 @@
 <template>
-<div
-  :label="$t('settings.data_import_export_tab')"
+  <div
+    :label="$t('settings.data_import_export_tab')"
   >
-  <div class="setting-item">
-    <h2>{{ $t('settings.follow_import') }}</h2>
-    <p>{{ $t('settings.import_followers_from_a_csv_file') }}</p>
-    <Importer
-      :submit-handler="importFollows"
-      :success-message="$t('settings.follows_imported')"
-      :error-message="$t('settings.follow_import_error')"
+    <div class="setting-item">
+      <h2>{{ $t('settings.follow_import') }}</h2>
+      <p>{{ $t('settings.import_followers_from_a_csv_file') }}</p>
+      <Importer
+        :submit-handler="importFollows"
+        :success-message="$t('settings.follows_imported')"
+        :error-message="$t('settings.follow_import_error')"
       />
-  </div>
-  <div class="setting-item">
-    <h2>{{ $t('settings.follow_export') }}</h2>
-    <Exporter
-      :get-content="getFollowsContent"
-      filename="friends.csv"
-      :export-button-label="$t('settings.follow_export_button')"
+    </div>
+    <div class="setting-item">
+      <h2>{{ $t('settings.follow_export') }}</h2>
+      <Exporter
+        :get-content="getFollowsContent"
+        filename="friends.csv"
+        :export-button-label="$t('settings.follow_export_button')"
       />
-  </div>
-  <div class="setting-item">
-    <h2>{{ $t('settings.block_import') }}</h2>
-    <p>{{ $t('settings.import_blocks_from_a_csv_file') }}</p>
-    <Importer
-      :submit-handler="importBlocks"
-      :success-message="$t('settings.blocks_imported')"
-      :error-message="$t('settings.block_import_error')"
+    </div>
+    <div class="setting-item">
+      <h2>{{ $t('settings.block_import') }}</h2>
+      <p>{{ $t('settings.import_blocks_from_a_csv_file') }}</p>
+      <Importer
+        :submit-handler="importBlocks"
+        :success-message="$t('settings.blocks_imported')"
+        :error-message="$t('settings.block_import_error')"
       />
-  </div>
-  <div class="setting-item">
-    <h2>{{ $t('settings.block_export') }}</h2>
-    <Exporter
-      :get-content="getBlocksContent"
-      filename="blocks.csv"
-      :export-button-label="$t('settings.block_export_button')"
+    </div>
+    <div class="setting-item">
+      <h2>{{ $t('settings.block_export') }}</h2>
+      <Exporter
+        :get-content="getBlocksContent"
+        filename="blocks.csv"
+        :export-button-label="$t('settings.block_export_button')"
       />
+    </div>
   </div>
-</div>
 </template>
 
 <script src="./data_import_export_tab.js"></script>
diff --git a/src/components/settings_modal/tabs/filtering_tab.vue b/src/components/settings_modal/tabs/filtering_tab.vue
index 647ec7b4..eea41514 100644
--- a/src/components/settings_modal/tabs/filtering_tab.vue
+++ b/src/components/settings_modal/tabs/filtering_tab.vue
@@ -1,86 +1,86 @@
 <template>
-<div :label="$t('settings.filtering')">
-  <div class="setting-item">
-    <div class="select-multiple">
-      <span class="label">{{ $t('settings.notification_visibility') }}</span>
-      <ul class="option-list">
-        <li>
-          <Checkbox v-model="notificationVisibility.likes">
-            {{ $t('settings.notification_visibility_likes') }}
-          </Checkbox>
-        </li>
-        <li>
-          <Checkbox v-model="notificationVisibility.repeats">
-            {{ $t('settings.notification_visibility_repeats') }}
-          </Checkbox>
-        </li>
-        <li>
-          <Checkbox v-model="notificationVisibility.follows">
-            {{ $t('settings.notification_visibility_follows') }}
-          </Checkbox>
-        </li>
-        <li>
-          <Checkbox v-model="notificationVisibility.mentions">
-            {{ $t('settings.notification_visibility_mentions') }}
-          </Checkbox>
-        </li>
-        <li>
-          <Checkbox v-model="notificationVisibility.moves">
-            {{ $t('settings.notification_visibility_moves') }}
-          </Checkbox>
-        </li>
-        <li>
-          <Checkbox v-model="notificationVisibility.emojiReactions">
-            {{ $t('settings.notification_visibility_emoji_reactions') }}
-          </Checkbox>
-        </li>
-      </ul>
-    </div>
-    <div>
-      {{ $t('settings.replies_in_timeline') }}
-      <label
-        for="replyVisibility"
-        class="select"
+  <div :label="$t('settings.filtering')">
+    <div class="setting-item">
+      <div class="select-multiple">
+        <span class="label">{{ $t('settings.notification_visibility') }}</span>
+        <ul class="option-list">
+          <li>
+            <Checkbox v-model="notificationVisibility.likes">
+              {{ $t('settings.notification_visibility_likes') }}
+            </Checkbox>
+          </li>
+          <li>
+            <Checkbox v-model="notificationVisibility.repeats">
+              {{ $t('settings.notification_visibility_repeats') }}
+            </Checkbox>
+          </li>
+          <li>
+            <Checkbox v-model="notificationVisibility.follows">
+              {{ $t('settings.notification_visibility_follows') }}
+            </Checkbox>
+          </li>
+          <li>
+            <Checkbox v-model="notificationVisibility.mentions">
+              {{ $t('settings.notification_visibility_mentions') }}
+            </Checkbox>
+          </li>
+          <li>
+            <Checkbox v-model="notificationVisibility.moves">
+              {{ $t('settings.notification_visibility_moves') }}
+            </Checkbox>
+          </li>
+          <li>
+            <Checkbox v-model="notificationVisibility.emojiReactions">
+              {{ $t('settings.notification_visibility_emoji_reactions') }}
+            </Checkbox>
+          </li>
+        </ul>
+      </div>
+      <div>
+        {{ $t('settings.replies_in_timeline') }}
+        <label
+          for="replyVisibility"
+          class="select"
         >
-        <select
-          id="replyVisibility"
-          v-model="replyVisibility"
+          <select
+            id="replyVisibility"
+            v-model="replyVisibility"
           >
-          <option
-            value="all"
-            selected
+            <option
+              value="all"
+              selected
             >{{ $t('settings.reply_visibility_all') }}</option>
-          <option value="following">{{ $t('settings.reply_visibility_following') }}</option>
-          <option value="self">{{ $t('settings.reply_visibility_self') }}</option>
-        </select>
-        <i class="icon-down-open" />
-      </label>
-    </div>
-    <div>
-      <Checkbox v-model="hidePostStats">
-        {{ $t('settings.hide_post_stats') }} {{ $t('settings.instance_default', { value: hidePostStatsLocalizedValue }) }}
-      </Checkbox>
-    </div>
-    <div>
-      <Checkbox v-model="hideUserStats">
-        {{ $t('settings.hide_user_stats') }} {{ $t('settings.instance_default', { value: hideUserStatsLocalizedValue }) }}
-      </Checkbox>
+            <option value="following">{{ $t('settings.reply_visibility_following') }}</option>
+            <option value="self">{{ $t('settings.reply_visibility_self') }}</option>
+          </select>
+          <i class="icon-down-open" />
+        </label>
+      </div>
+      <div>
+        <Checkbox v-model="hidePostStats">
+          {{ $t('settings.hide_post_stats') }} {{ $t('settings.instance_default', { value: hidePostStatsLocalizedValue }) }}
+        </Checkbox>
+      </div>
+      <div>
+        <Checkbox v-model="hideUserStats">
+          {{ $t('settings.hide_user_stats') }} {{ $t('settings.instance_default', { value: hideUserStatsLocalizedValue }) }}
+        </Checkbox>
+      </div>
     </div>
-  </div>
-  <div class="setting-item">
-    <div>
-      <p>{{ $t('settings.filtering_explanation') }}</p>
-      <textarea
-        id="muteWords"
-        v-model="muteWordsString"
+    <div class="setting-item">
+      <div>
+        <p>{{ $t('settings.filtering_explanation') }}</p>
+        <textarea
+          id="muteWords"
+          v-model="muteWordsString"
         />
-    </div>
-    <div>
-      <Checkbox v-model="hideFilteredStatuses">
-        {{ $t('settings.hide_filtered_statuses') }} {{ $t('settings.instance_default', { value: hideFilteredStatusesLocalizedValue }) }}
-      </Checkbox>
+      </div>
+      <div>
+        <Checkbox v-model="hideFilteredStatuses">
+          {{ $t('settings.hide_filtered_statuses') }} {{ $t('settings.instance_default', { value: hideFilteredStatusesLocalizedValue }) }}
+        </Checkbox>
+      </div>
     </div>
   </div>
-</div>
 </template>
 <script src="./filtering_tab.js"></script>
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index 82bf6862..9df1da79 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -5,7 +5,6 @@ import SharedComputedObject from './helpers/shared_computed_object.js'
 
 const GeneralTab = {
   data () {
-    const instance = this.$store.state.instance
     return {
       loopSilentAvailable:
       // Firefox
@@ -13,7 +12,7 @@ const GeneralTab = {
       // Chrome-likes
       Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'webkitAudioDecodedByteCount') ||
       // Future spec, still not supported in Nightly 63 as of 08/2018
-      Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'audioTracks'),
+      Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'audioTracks')
     }
   },
   components: {
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 0d2da07a..f89c0480 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -1,160 +1,160 @@
 <template>
-<div :label="$t('settings.general')">
-  <div class="setting-item">
-    <h2>{{ $t('settings.interface') }}</h2>
-    <ul class="setting-list">
-      <li>
-        <interface-language-switcher />
-      </li>
-      <li v-if="instanceSpecificPanelPresent">
-        <Checkbox v-model="hideISP">
-          {{ $t('settings.hide_isp') }}
-        </Checkbox>
-      </li>
-    </ul>
-  </div>
-  <div class="setting-item">
-    <h2>{{ $t('nav.timeline') }}</h2>
-    <ul class="setting-list">
-      <li>
-        <Checkbox v-model="hideMutedPosts">
-          {{ $t('settings.hide_muted_posts') }} {{ $t('settings.instance_default', { value: hideMutedPostsLocalizedValue }) }}
-        </Checkbox>
-      </li>
-      <li>
-        <Checkbox v-model="collapseMessageWithSubject">
-          {{ $t('settings.collapse_subject') }} {{ $t('settings.instance_default', { value: collapseMessageWithSubjectLocalizedValue }) }}
-        </Checkbox>
-      </li>
-      <li>
-        <Checkbox v-model="streaming">
-          {{ $t('settings.streaming') }}
-        </Checkbox>
-        <ul
-          class="setting-list suboptions"
-          :class="[{disabled: !streaming}]"
+  <div :label="$t('settings.general')">
+    <div class="setting-item">
+      <h2>{{ $t('settings.interface') }}</h2>
+      <ul class="setting-list">
+        <li>
+          <interface-language-switcher />
+        </li>
+        <li v-if="instanceSpecificPanelPresent">
+          <Checkbox v-model="hideISP">
+            {{ $t('settings.hide_isp') }}
+          </Checkbox>
+        </li>
+      </ul>
+    </div>
+    <div class="setting-item">
+      <h2>{{ $t('nav.timeline') }}</h2>
+      <ul class="setting-list">
+        <li>
+          <Checkbox v-model="hideMutedPosts">
+            {{ $t('settings.hide_muted_posts') }} {{ $t('settings.instance_default', { value: hideMutedPostsLocalizedValue }) }}
+          </Checkbox>
+        </li>
+        <li>
+          <Checkbox v-model="collapseMessageWithSubject">
+            {{ $t('settings.collapse_subject') }} {{ $t('settings.instance_default', { value: collapseMessageWithSubjectLocalizedValue }) }}
+          </Checkbox>
+        </li>
+        <li>
+          <Checkbox v-model="streaming">
+            {{ $t('settings.streaming') }}
+          </Checkbox>
+          <ul
+            class="setting-list suboptions"
+            :class="[{disabled: !streaming}]"
           >
-          <li>
-            <Checkbox
-              v-model="pauseOnUnfocused"
-              :disabled="!streaming"
+            <li>
+              <Checkbox
+                v-model="pauseOnUnfocused"
+                :disabled="!streaming"
               >
-              {{ $t('settings.pause_on_unfocused') }}
-            </Checkbox>
-          </li>
-        </ul>
-      </li>
-      <li>
-        <Checkbox v-model="useStreamingApi">
-          {{ $t('settings.useStreamingApi') }}
-          <br>
-          <small>
-            {{ $t('settings.useStreamingApiWarning') }}
-          </small>
-        </Checkbox>
-      </li>
-      <li>
-        <Checkbox v-model="autoLoad">
-          {{ $t('settings.autoload') }}
-        </Checkbox>
-      </li>
-      <li>
-        <Checkbox v-model="hoverPreview">
-          {{ $t('settings.reply_link_preview') }}
-        </Checkbox>
-      </li>
-      <li>
-        <Checkbox v-model="emojiReactionsOnTimeline">
-          {{ $t('settings.emoji_reactions_on_timeline') }}
-        </Checkbox>
-      </li>
-    </ul>
-  </div>
+                {{ $t('settings.pause_on_unfocused') }}
+              </Checkbox>
+            </li>
+          </ul>
+        </li>
+        <li>
+          <Checkbox v-model="useStreamingApi">
+            {{ $t('settings.useStreamingApi') }}
+            <br>
+            <small>
+              {{ $t('settings.useStreamingApiWarning') }}
+            </small>
+          </Checkbox>
+        </li>
+        <li>
+          <Checkbox v-model="autoLoad">
+            {{ $t('settings.autoload') }}
+          </Checkbox>
+        </li>
+        <li>
+          <Checkbox v-model="hoverPreview">
+            {{ $t('settings.reply_link_preview') }}
+          </Checkbox>
+        </li>
+        <li>
+          <Checkbox v-model="emojiReactionsOnTimeline">
+            {{ $t('settings.emoji_reactions_on_timeline') }}
+          </Checkbox>
+        </li>
+      </ul>
+    </div>
 
-  <div class="setting-item">
-    <h2>{{ $t('settings.composing') }}</h2>
-    <ul class="setting-list">
-      <li>
-        <Checkbox v-model="scopeCopy">
-          {{ $t('settings.scope_copy') }} {{ $t('settings.instance_default', { value: scopeCopyLocalizedValue }) }}
-        </Checkbox>
-      </li>
-      <li>
-        <Checkbox v-model="alwaysShowSubjectInput">
-          {{ $t('settings.subject_input_always_show') }} {{ $t('settings.instance_default', { value: alwaysShowSubjectInputLocalizedValue }) }}
-        </Checkbox>
-      </li>
-      <li>
-        <div>
-          {{ $t('settings.subject_line_behavior') }}
-          <label
-            for="subjectLineBehavior"
-            class="select"
+    <div class="setting-item">
+      <h2>{{ $t('settings.composing') }}</h2>
+      <ul class="setting-list">
+        <li>
+          <Checkbox v-model="scopeCopy">
+            {{ $t('settings.scope_copy') }} {{ $t('settings.instance_default', { value: scopeCopyLocalizedValue }) }}
+          </Checkbox>
+        </li>
+        <li>
+          <Checkbox v-model="alwaysShowSubjectInput">
+            {{ $t('settings.subject_input_always_show') }} {{ $t('settings.instance_default', { value: alwaysShowSubjectInputLocalizedValue }) }}
+          </Checkbox>
+        </li>
+        <li>
+          <div>
+            {{ $t('settings.subject_line_behavior') }}
+            <label
+              for="subjectLineBehavior"
+              class="select"
             >
-            <select
-              id="subjectLineBehavior"
-              v-model="subjectLineBehavior"
+              <select
+                id="subjectLineBehavior"
+                v-model="subjectLineBehavior"
               >
-              <option value="email">
-                {{ $t('settings.subject_line_email') }}
-                {{ subjectLineBehaviorDefaultValue == 'email' ? $t('settings.instance_default_simple') : '' }}
-              </option>
-              <option value="masto">
-                {{ $t('settings.subject_line_mastodon') }}
-                {{ subjectLineBehaviorDefaultValue == 'mastodon' ? $t('settings.instance_default_simple') : '' }}
-              </option>
-              <option value="noop">
-                {{ $t('settings.subject_line_noop') }}
-                {{ subjectLineBehaviorDefaultValue == 'noop' ? $t('settings.instance_default_simple') : '' }}
-              </option>
-            </select>
-            <i class="icon-down-open" />
-          </label>
-        </div>
-      </li>
-      <li v-if="postFormats.length > 0">
-        <div>
-          {{ $t('settings.post_status_content_type') }}
-          <label
-            for="postContentType"
-            class="select"
+                <option value="email">
+                  {{ $t('settings.subject_line_email') }}
+                  {{ subjectLineBehaviorDefaultValue == 'email' ? $t('settings.instance_default_simple') : '' }}
+                </option>
+                <option value="masto">
+                  {{ $t('settings.subject_line_mastodon') }}
+                  {{ subjectLineBehaviorDefaultValue == 'mastodon' ? $t('settings.instance_default_simple') : '' }}
+                </option>
+                <option value="noop">
+                  {{ $t('settings.subject_line_noop') }}
+                  {{ subjectLineBehaviorDefaultValue == 'noop' ? $t('settings.instance_default_simple') : '' }}
+                </option>
+              </select>
+              <i class="icon-down-open" />
+            </label>
+          </div>
+        </li>
+        <li v-if="postFormats.length > 0">
+          <div>
+            {{ $t('settings.post_status_content_type') }}
+            <label
+              for="postContentType"
+              class="select"
             >
-            <select
-              id="postContentType"
-              v-model="postContentType"
+              <select
+                id="postContentType"
+                v-model="postContentType"
               >
-              <option
-                v-for="postFormat in postFormats"
-                :key="postFormat"
-                :value="postFormat"
+                <option
+                  v-for="postFormat in postFormats"
+                  :key="postFormat"
+                  :value="postFormat"
                 >
-                {{ $t(`post_status.content_type["${postFormat}"]`) }}
-                {{ postContentTypeDefaultValue === postFormat ? $t('settings.instance_default_simple') : '' }}
-              </option>
-            </select>
-            <i class="icon-down-open" />
-          </label>
-        </div>
-      </li>
-      <li>
-        <Checkbox v-model="minimalScopesMode">
-          {{ $t('settings.minimal_scopes_mode') }} {{ $t('settings.instance_default', { value: minimalScopesModeLocalizedValue }) }}
-        </Checkbox>
-      </li>
-      <li>
-        <Checkbox v-model="autohideFloatingPostButton">
-          {{ $t('settings.autohide_floating_post_button') }}
-        </Checkbox>
-      </li>
-      <li>
-        <Checkbox v-model="padEmoji">
-          {{ $t('settings.pad_emoji') }}
-        </Checkbox>
-      </li>
-    </ul>
-  </div>
+                  {{ $t(`post_status.content_type["${postFormat}"]`) }}
+                  {{ postContentTypeDefaultValue === postFormat ? $t('settings.instance_default_simple') : '' }}
+                </option>
+              </select>
+              <i class="icon-down-open" />
+            </label>
+          </div>
+        </li>
+        <li>
+          <Checkbox v-model="minimalScopesMode">
+            {{ $t('settings.minimal_scopes_mode') }} {{ $t('settings.instance_default', { value: minimalScopesModeLocalizedValue }) }}
+          </Checkbox>
+        </li>
+        <li>
+          <Checkbox v-model="autohideFloatingPostButton">
+            {{ $t('settings.autohide_floating_post_button') }}
+          </Checkbox>
+        </li>
+        <li>
+          <Checkbox v-model="padEmoji">
+            {{ $t('settings.pad_emoji') }}
+          </Checkbox>
+        </li>
+      </ul>
+    </div>
 
-  <div class="setting-item">
+    <div class="setting-item">
       <h2>{{ $t('settings.attachments') }}</h2>
       <ul class="setting-list">
         <li>
@@ -178,7 +178,7 @@
             type="number"
             min="0"
             step="1"
-            >
+          >
         </li>
         <li>
           <Checkbox v-model="hideNsfw">
@@ -190,7 +190,7 @@
             <Checkbox
               v-model="preloadImage"
               :disabled="!hideNsfw"
-              >
+            >
               {{ $t('settings.preload_images') }}
             </Checkbox>
           </li>
@@ -198,7 +198,7 @@
             <Checkbox
               v-model="useOneClickNsfw"
               :disabled="!hideNsfw"
-              >
+            >
               {{ $t('settings.use_one_click_nsfw') }}
             </Checkbox>
           </li>
@@ -215,18 +215,18 @@
           <ul
             class="setting-list suboptions"
             :class="[{disabled: !streaming}]"
-            >
+          >
             <li>
               <Checkbox
                 v-model="loopVideoSilentOnly"
                 :disabled="!loopVideo || !loopSilentAvailable"
-                >
+              >
                 {{ $t('settings.loop_video_silent_only') }}
               </Checkbox>
               <div
                 v-if="!loopSilentAvailable"
                 class="unavailable"
-                >
+              >
                 <i class="icon-globe" />! {{ $t('settings.limited_availability') }}
               </div>
             </li>
diff --git a/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue b/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue
index 04f9c6dd..6884b7be 100644
--- a/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue
+++ b/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue
@@ -1,175 +1,175 @@
 <template>
-<tab-switcher
-  :scrollableTabs="true"
-  class="mutes-and-blocks-tab"
+  <tab-switcher
+    :scrollable-tabs="true"
+    class="mutes-and-blocks-tab"
   >
-  <div :label="$t('settings.blocks_tab')">
-    <div class="usersearch-wrapper">
-      <Autosuggest
-        :filter="filterUnblockedUsers"
-        :query="queryUserIds"
-        :placeholder="$t('settings.search_user_to_block')"
+    <div :label="$t('settings.blocks_tab')">
+      <div class="usersearch-wrapper">
+        <Autosuggest
+          :filter="filterUnblockedUsers"
+          :query="queryUserIds"
+          :placeholder="$t('settings.search_user_to_block')"
         >
-        <BlockCard
-          slot-scope="row"
-          :user-id="row.item"
+          <BlockCard
+            slot-scope="row"
+            :user-id="row.item"
           />
-      </Autosuggest>
-    </div>
-    <BlockList
-      :refresh="true"
-      :get-key="i => i"
+        </Autosuggest>
+      </div>
+      <BlockList
+        :refresh="true"
+        :get-key="i => i"
       >
-      <template
-        slot="header"
-        slot-scope="{selected}"
+        <template
+          slot="header"
+          slot-scope="{selected}"
         >
-        <div class="bulk-actions">
-          <ProgressButton
-            v-if="selected.length > 0"
-            class="btn btn-default bulk-action-button"
-            :click="() => blockUsers(selected)"
+          <div class="bulk-actions">
+            <ProgressButton
+              v-if="selected.length > 0"
+              class="btn btn-default bulk-action-button"
+              :click="() => blockUsers(selected)"
             >
-            {{ $t('user_card.block') }}
-            <template slot="progress">
-              {{ $t('user_card.block_progress') }}
-            </template>
-          </ProgressButton>
-          <ProgressButton
-            v-if="selected.length > 0"
-            class="btn btn-default"
-            :click="() => unblockUsers(selected)"
+              {{ $t('user_card.block') }}
+              <template slot="progress">
+                {{ $t('user_card.block_progress') }}
+              </template>
+            </ProgressButton>
+            <ProgressButton
+              v-if="selected.length > 0"
+              class="btn btn-default"
+              :click="() => unblockUsers(selected)"
             >
-            {{ $t('user_card.unblock') }}
-            <template slot="progress">
-              {{ $t('user_card.unblock_progress') }}
-            </template>
-          </ProgressButton>
-        </div>
-      </template>
-      <template
-        slot="item"
-        slot-scope="{item}"
+              {{ $t('user_card.unblock') }}
+              <template slot="progress">
+                {{ $t('user_card.unblock_progress') }}
+              </template>
+            </ProgressButton>
+          </div>
+        </template>
+        <template
+          slot="item"
+          slot-scope="{item}"
         >
-        <BlockCard :user-id="item" />
-      </template>
-      <template slot="empty">
-        {{ $t('settings.no_blocks') }}
-      </template>
-    </BlockList>
-  </div>
+          <BlockCard :user-id="item" />
+        </template>
+        <template slot="empty">
+          {{ $t('settings.no_blocks') }}
+        </template>
+      </BlockList>
+    </div>
 
-  <div :label="$t('settings.mutes_tab')">
-    <tab-switcher>
-      <div label="Users">
-        <div class="usersearch-wrapper">
-          <Autosuggest
-            :filter="filterUnMutedUsers"
-            :query="queryUserIds"
-            :placeholder="$t('settings.search_user_to_mute')"
+    <div :label="$t('settings.mutes_tab')">
+      <tab-switcher>
+        <div label="Users">
+          <div class="usersearch-wrapper">
+            <Autosuggest
+              :filter="filterUnMutedUsers"
+              :query="queryUserIds"
+              :placeholder="$t('settings.search_user_to_mute')"
             >
-            <MuteCard
-              slot-scope="row"
-              :user-id="row.item"
+              <MuteCard
+                slot-scope="row"
+                :user-id="row.item"
               />
-          </Autosuggest>
-        </div>
-        <MuteList
-          :refresh="true"
-          :get-key="i => i"
+            </Autosuggest>
+          </div>
+          <MuteList
+            :refresh="true"
+            :get-key="i => i"
           >
-          <template
-            slot="header"
-            slot-scope="{selected}"
+            <template
+              slot="header"
+              slot-scope="{selected}"
             >
-            <div class="bulk-actions">
-              <ProgressButton
-                v-if="selected.length > 0"
-                class="btn btn-default"
-                :click="() => muteUsers(selected)"
+              <div class="bulk-actions">
+                <ProgressButton
+                  v-if="selected.length > 0"
+                  class="btn btn-default"
+                  :click="() => muteUsers(selected)"
                 >
-                {{ $t('user_card.mute') }}
-                <template slot="progress">
-                  {{ $t('user_card.mute_progress') }}
-                </template>
-              </ProgressButton>
-              <ProgressButton
-                v-if="selected.length > 0"
-                class="btn btn-default"
-                :click="() => unmuteUsers(selected)"
+                  {{ $t('user_card.mute') }}
+                  <template slot="progress">
+                    {{ $t('user_card.mute_progress') }}
+                  </template>
+                </ProgressButton>
+                <ProgressButton
+                  v-if="selected.length > 0"
+                  class="btn btn-default"
+                  :click="() => unmuteUsers(selected)"
                 >
-                {{ $t('user_card.unmute') }}
-                <template slot="progress">
-                  {{ $t('user_card.unmute_progress') }}
-                </template>
-              </ProgressButton>
-            </div>
-          </template>
-          <template
-            slot="item"
-            slot-scope="{item}"
+                  {{ $t('user_card.unmute') }}
+                  <template slot="progress">
+                    {{ $t('user_card.unmute_progress') }}
+                  </template>
+                </ProgressButton>
+              </div>
+            </template>
+            <template
+              slot="item"
+              slot-scope="{item}"
             >
-            <MuteCard :user-id="item" />
-          </template>
-          <template slot="empty">
-            {{ $t('settings.no_mutes') }}
-          </template>
-        </MuteList>
-      </div>
+              <MuteCard :user-id="item" />
+            </template>
+            <template slot="empty">
+              {{ $t('settings.no_mutes') }}
+            </template>
+          </MuteList>
+        </div>
 
-      <div :label="$t('settings.domain_mutes')">
-        <div class="domain-mute-form">
-          <input
-            v-model="newDomainToMute"
-            :placeholder="$t('settings.type_domains_to_mute')"
-            type="text"
-            @keyup.enter="muteDomain"
+        <div :label="$t('settings.domain_mutes')">
+          <div class="domain-mute-form">
+            <input
+              v-model="newDomainToMute"
+              :placeholder="$t('settings.type_domains_to_mute')"
+              type="text"
+              @keyup.enter="muteDomain"
             >
-          <ProgressButton
-            class="btn btn-default domain-mute-button"
-            :click="muteDomain"
+            <ProgressButton
+              class="btn btn-default domain-mute-button"
+              :click="muteDomain"
             >
-            {{ $t('domain_mute_card.mute') }}
-            <template slot="progress">
-              {{ $t('domain_mute_card.mute_progress') }}
-            </template>
-          </ProgressButton>
-        </div>
-        <DomainMuteList
-          :refresh="true"
-          :get-key="i => i"
+              {{ $t('domain_mute_card.mute') }}
+              <template slot="progress">
+                {{ $t('domain_mute_card.mute_progress') }}
+              </template>
+            </ProgressButton>
+          </div>
+          <DomainMuteList
+            :refresh="true"
+            :get-key="i => i"
           >
-          <template
-            slot="header"
-            slot-scope="{selected}"
+            <template
+              slot="header"
+              slot-scope="{selected}"
             >
-            <div class="bulk-actions">
-              <ProgressButton
-                v-if="selected.length > 0"
-                class="btn btn-default"
-                :click="() => unmuteDomains(selected)"
+              <div class="bulk-actions">
+                <ProgressButton
+                  v-if="selected.length > 0"
+                  class="btn btn-default"
+                  :click="() => unmuteDomains(selected)"
                 >
-                {{ $t('domain_mute_card.unmute') }}
-                <template slot="progress">
-                  {{ $t('domain_mute_card.unmute_progress') }}
-                </template>
-              </ProgressButton>
-            </div>
-          </template>
-          <template
-            slot="item"
-            slot-scope="{item}"
+                  {{ $t('domain_mute_card.unmute') }}
+                  <template slot="progress">
+                    {{ $t('domain_mute_card.unmute_progress') }}
+                  </template>
+                </ProgressButton>
+              </div>
+            </template>
+            <template
+              slot="item"
+              slot-scope="{item}"
             >
-            <DomainMuteCard :domain="item" />
-          </template>
-          <template slot="empty">
-            {{ $t('settings.no_mutes') }}
-          </template>
-        </DomainMuteList>
-      </div>
-    </tab-switcher>
-  </div>
-</tab-switcher>
+              <DomainMuteCard :domain="item" />
+            </template>
+            <template slot="empty">
+              {{ $t('settings.no_mutes') }}
+            </template>
+          </DomainMuteList>
+        </div>
+      </tab-switcher>
+    </div>
+  </tab-switcher>
 </template>
 
 <script src="./mutes_and_blocks_tab.js"></script>
diff --git a/src/components/settings_modal/tabs/notifications_tab.vue b/src/components/settings_modal/tabs/notifications_tab.vue
index 19181e24..b7a3cb37 100644
--- a/src/components/settings_modal/tabs/notifications_tab.vue
+++ b/src/components/settings_modal/tabs/notifications_tab.vue
@@ -1,53 +1,53 @@
 <template>
-<div :label="$t('settings.notifications')">
-  <div class="setting-item">
-    <h2>{{ $t('settings.notification_setting_filters') }}</h2>
-    <div class="select-multiple">
-      <span class="label">{{ $t('settings.notification_setting') }}</span>
-      <ul class="option-list">
-        <li>
-          <Checkbox v-model="notificationSettings.follows">
-            {{ $t('settings.notification_setting_follows') }}
-          </Checkbox>
-        </li>
-        <li>
-          <Checkbox v-model="notificationSettings.followers">
-            {{ $t('settings.notification_setting_followers') }}
-          </Checkbox>
-        </li>
-        <li>
-          <Checkbox v-model="notificationSettings.non_follows">
-            {{ $t('settings.notification_setting_non_follows') }}
-          </Checkbox>
-        </li>
-        <li>
-          <Checkbox v-model="notificationSettings.non_followers">
-            {{ $t('settings.notification_setting_non_followers') }}
-          </Checkbox>
-        </li>
-      </ul>
+  <div :label="$t('settings.notifications')">
+    <div class="setting-item">
+      <h2>{{ $t('settings.notification_setting_filters') }}</h2>
+      <div class="select-multiple">
+        <span class="label">{{ $t('settings.notification_setting') }}</span>
+        <ul class="option-list">
+          <li>
+            <Checkbox v-model="notificationSettings.follows">
+              {{ $t('settings.notification_setting_follows') }}
+            </Checkbox>
+          </li>
+          <li>
+            <Checkbox v-model="notificationSettings.followers">
+              {{ $t('settings.notification_setting_followers') }}
+            </Checkbox>
+          </li>
+          <li>
+            <Checkbox v-model="notificationSettings.non_follows">
+              {{ $t('settings.notification_setting_non_follows') }}
+            </Checkbox>
+          </li>
+          <li>
+            <Checkbox v-model="notificationSettings.non_followers">
+              {{ $t('settings.notification_setting_non_followers') }}
+            </Checkbox>
+          </li>
+        </ul>
+      </div>
     </div>
-  </div>
 
-  <div class="setting-item">
-    <h2>{{ $t('settings.notification_setting_privacy') }}</h2>
-    <p>
-      <Checkbox v-model="notificationSettings.privacy_option">
-        {{ $t('settings.notification_setting_privacy_option') }}
-      </Checkbox>
-    </p>
-  </div>
-  <div class="setting-item">
-    <p>{{ $t('settings.notification_mutes') }}</p>
-    <p>{{ $t('settings.notification_blocks') }}</p>
-    <button
-      class="btn btn-default"
-      @click="updateNotificationSettings"
+    <div class="setting-item">
+      <h2>{{ $t('settings.notification_setting_privacy') }}</h2>
+      <p>
+        <Checkbox v-model="notificationSettings.privacy_option">
+          {{ $t('settings.notification_setting_privacy_option') }}
+        </Checkbox>
+      </p>
+    </div>
+    <div class="setting-item">
+      <p>{{ $t('settings.notification_mutes') }}</p>
+      <p>{{ $t('settings.notification_blocks') }}</p>
+      <button
+        class="btn btn-default"
+        @click="updateNotificationSettings"
       >
-      {{ $t('general.submit') }}
-    </button>
+        {{ $t('general.submit') }}
+      </button>
+    </div>
   </div>
-</div>
 </template>
 
 <script src="./notifications_tab.js"></script>
diff --git a/src/components/settings_modal/tabs/profile_tab.js b/src/components/settings_modal/tabs/profile_tab.js
index 0b4951d3..8658b097 100644
--- a/src/components/settings_modal/tabs/profile_tab.js
+++ b/src/components/settings_modal/tabs/profile_tab.js
@@ -32,7 +32,7 @@ const ProfileTab = {
       background: null,
       backgroundPreview: null,
       bannerUploadError: null,
-      backgroundUploadError: null,
+      backgroundUploadError: null
     }
   },
   components: {
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index 9dd89b99..fff4f970 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -1,212 +1,212 @@
 <template>
-<div class="profile-tab">
-  <div class="setting-item">
-    <h2>{{ $t('settings.name_bio') }}</h2>
-    <p>{{ $t('settings.name') }}</p>
-    <EmojiInput
-      v-model="newName"
-      enable-emoji-picker
-      :suggest="emojiSuggestor"
-      >
-      <input
-        id="username"
+  <div class="profile-tab">
+    <div class="setting-item">
+      <h2>{{ $t('settings.name_bio') }}</h2>
+      <p>{{ $t('settings.name') }}</p>
+      <EmojiInput
         v-model="newName"
-        classname="name-changer"
-        >
-    </EmojiInput>
-    <p>{{ $t('settings.bio') }}</p>
-    <EmojiInput
-      v-model="newBio"
-      enable-emoji-picker
-      :suggest="emojiUserSuggestor"
+        enable-emoji-picker
+        :suggest="emojiSuggestor"
       >
-      <textarea
+        <input
+          id="username"
+          v-model="newName"
+          classname="name-changer"
+        >
+      </EmojiInput>
+      <p>{{ $t('settings.bio') }}</p>
+      <EmojiInput
         v-model="newBio"
-        classname="bio"
+        enable-emoji-picker
+        :suggest="emojiUserSuggestor"
+      >
+        <textarea
+          v-model="newBio"
+          classname="bio"
         />
-    </EmojiInput>
-    <p>
-      <Checkbox v-model="newLocked">
-        {{ $t('settings.lock_account_description') }}
-      </Checkbox>
-    </p>
-    <div>
-      <label for="default-vis">{{ $t('settings.default_vis') }}</label>
-      <div
-        id="default-vis"
-        class="visibility-tray"
+      </EmojiInput>
+      <p>
+        <Checkbox v-model="newLocked">
+          {{ $t('settings.lock_account_description') }}
+        </Checkbox>
+      </p>
+      <div>
+        <label for="default-vis">{{ $t('settings.default_vis') }}</label>
+        <div
+          id="default-vis"
+          class="visibility-tray"
         >
-        <scope-selector
-          :show-all="true"
-          :user-default="newDefaultScope"
-          :initial-scope="newDefaultScope"
-          :on-scope-change="changeVis"
+          <scope-selector
+            :show-all="true"
+            :user-default="newDefaultScope"
+            :initial-scope="newDefaultScope"
+            :on-scope-change="changeVis"
           />
+        </div>
       </div>
-    </div>
-    <p>
-      <Checkbox v-model="newNoRichText">
-        {{ $t('settings.no_rich_text_description') }}
-      </Checkbox>
-    </p>
-    <p>
-      <Checkbox v-model="hideFollows">
-        {{ $t('settings.hide_follows_description') }}
-      </Checkbox>
-    </p>
-    <p class="setting-subitem">
-      <Checkbox
-        v-model="hideFollowsCount"
-        :disabled="!hideFollows"
+      <p>
+        <Checkbox v-model="newNoRichText">
+          {{ $t('settings.no_rich_text_description') }}
+        </Checkbox>
+      </p>
+      <p>
+        <Checkbox v-model="hideFollows">
+          {{ $t('settings.hide_follows_description') }}
+        </Checkbox>
+      </p>
+      <p class="setting-subitem">
+        <Checkbox
+          v-model="hideFollowsCount"
+          :disabled="!hideFollows"
         >
-        {{ $t('settings.hide_follows_count_description') }}
-      </Checkbox>
-    </p>
-    <p>
-      <Checkbox v-model="hideFollowers">
-        {{ $t('settings.hide_followers_description') }}
-      </Checkbox>
-    </p>
-    <p class="setting-subitem">
-      <Checkbox
-        v-model="hideFollowersCount"
-        :disabled="!hideFollowers"
+          {{ $t('settings.hide_follows_count_description') }}
+        </Checkbox>
+      </p>
+      <p>
+        <Checkbox v-model="hideFollowers">
+          {{ $t('settings.hide_followers_description') }}
+        </Checkbox>
+      </p>
+      <p class="setting-subitem">
+        <Checkbox
+          v-model="hideFollowersCount"
+          :disabled="!hideFollowers"
         >
-        {{ $t('settings.hide_followers_count_description') }}
-      </Checkbox>
-    </p>
-    <p>
-      <Checkbox v-model="allowFollowingMove">
-        {{ $t('settings.allow_following_move') }}
-      </Checkbox>
-    </p>
-    <p v-if="role === 'admin' || role === 'moderator'">
-      <Checkbox v-model="showRole">
-        <template v-if="role === 'admin'">
-          {{ $t('settings.show_admin_badge') }}
-        </template>
-        <template v-if="role === 'moderator'">
-          {{ $t('settings.show_moderator_badge') }}
-        </template>
-      </Checkbox>
-    </p>
-    <p>
-      <Checkbox v-model="discoverable">
-        {{ $t('settings.discoverable') }}
-      </Checkbox>
-    </p>
-    <button
-      :disabled="newName && newName.length === 0"
-      class="btn btn-default"
-      @click="updateProfile"
+          {{ $t('settings.hide_followers_count_description') }}
+        </Checkbox>
+      </p>
+      <p>
+        <Checkbox v-model="allowFollowingMove">
+          {{ $t('settings.allow_following_move') }}
+        </Checkbox>
+      </p>
+      <p v-if="role === 'admin' || role === 'moderator'">
+        <Checkbox v-model="showRole">
+          <template v-if="role === 'admin'">
+            {{ $t('settings.show_admin_badge') }}
+          </template>
+          <template v-if="role === 'moderator'">
+            {{ $t('settings.show_moderator_badge') }}
+          </template>
+        </Checkbox>
+      </p>
+      <p>
+        <Checkbox v-model="discoverable">
+          {{ $t('settings.discoverable') }}
+        </Checkbox>
+      </p>
+      <button
+        :disabled="newName && newName.length === 0"
+        class="btn btn-default"
+        @click="updateProfile"
       >
-      {{ $t('general.submit') }}
-    </button>
-  </div>
-  <div class="setting-item">
-    <h2>{{ $t('settings.avatar') }}</h2>
-    <p class="visibility-notice">
-      {{ $t('settings.avatar_size_instruction') }}
-    </p>
-    <p>{{ $t('settings.current_avatar') }}</p>
-    <img
-      :src="user.profile_image_url_original"
-      class="current-avatar"
+        {{ $t('general.submit') }}
+      </button>
+    </div>
+    <div class="setting-item">
+      <h2>{{ $t('settings.avatar') }}</h2>
+      <p class="visibility-notice">
+        {{ $t('settings.avatar_size_instruction') }}
+      </p>
+      <p>{{ $t('settings.current_avatar') }}</p>
+      <img
+        :src="user.profile_image_url_original"
+        class="current-avatar"
       >
-    <p>{{ $t('settings.set_new_avatar') }}</p>
-    <button
-      v-show="pickAvatarBtnVisible"
-      id="pick-avatar"
-      class="btn"
-      type="button"
+      <p>{{ $t('settings.set_new_avatar') }}</p>
+      <button
+        v-show="pickAvatarBtnVisible"
+        id="pick-avatar"
+        class="btn"
+        type="button"
       >
-      {{ $t('settings.upload_a_photo') }}
-    </button>
-    <image-cropper
-      trigger="#pick-avatar"
-      :submit-handler="submitAvatar"
-      @open="pickAvatarBtnVisible=false"
-      @close="pickAvatarBtnVisible=true"
+        {{ $t('settings.upload_a_photo') }}
+      </button>
+      <image-cropper
+        trigger="#pick-avatar"
+        :submit-handler="submitAvatar"
+        @open="pickAvatarBtnVisible=false"
+        @close="pickAvatarBtnVisible=true"
       />
-  </div>
-  <div class="setting-item">
-    <h2>{{ $t('settings.profile_banner') }}</h2>
-    <p>{{ $t('settings.current_profile_banner') }}</p>
-    <img
-      :src="user.cover_photo"
-      class="banner"
+    </div>
+    <div class="setting-item">
+      <h2>{{ $t('settings.profile_banner') }}</h2>
+      <p>{{ $t('settings.current_profile_banner') }}</p>
+      <img
+        :src="user.cover_photo"
+        class="banner"
       >
-    <p>{{ $t('settings.set_new_profile_banner') }}</p>
-    <img
-      v-if="bannerPreview"
-      class="banner"
-      :src="bannerPreview"
+      <p>{{ $t('settings.set_new_profile_banner') }}</p>
+      <img
+        v-if="bannerPreview"
+        class="banner"
+        :src="bannerPreview"
       >
-    <div>
-      <input
-        type="file"
-        @change="uploadFile('banner', $event)"
+      <div>
+        <input
+          type="file"
+          @change="uploadFile('banner', $event)"
         >
-    </div>
-    <i
-      v-if="bannerUploading"
-      class=" icon-spin4 animate-spin uploading"
+      </div>
+      <i
+        v-if="bannerUploading"
+        class=" icon-spin4 animate-spin uploading"
       />
-    <button
-      v-else-if="bannerPreview"
-      class="btn btn-default"
-      @click="submitBanner"
+      <button
+        v-else-if="bannerPreview"
+        class="btn btn-default"
+        @click="submitBanner"
       >
-      {{ $t('general.submit') }}
-    </button>
-    <div
-      v-if="bannerUploadError"
-      class="alert error"
+        {{ $t('general.submit') }}
+      </button>
+      <div
+        v-if="bannerUploadError"
+        class="alert error"
       >
-      Error: {{ bannerUploadError }}
-      <i
-        class="button-icon icon-cancel"
-        @click="clearUploadError('banner')"
+        Error: {{ bannerUploadError }}
+        <i
+          class="button-icon icon-cancel"
+          @click="clearUploadError('banner')"
         />
+      </div>
     </div>
-  </div>
-  <div class="setting-item">
-    <h2>{{ $t('settings.profile_background') }}</h2>
-    <p>{{ $t('settings.set_new_profile_background') }}</p>
-    <img
-      v-if="backgroundPreview"
-      class="bg"
-      :src="backgroundPreview"
+    <div class="setting-item">
+      <h2>{{ $t('settings.profile_background') }}</h2>
+      <p>{{ $t('settings.set_new_profile_background') }}</p>
+      <img
+        v-if="backgroundPreview"
+        class="bg"
+        :src="backgroundPreview"
       >
-    <div>
-      <input
-        type="file"
-        @change="uploadFile('background', $event)"
+      <div>
+        <input
+          type="file"
+          @change="uploadFile('background', $event)"
         >
-    </div>
-    <i
-      v-if="backgroundUploading"
-      class=" icon-spin4 animate-spin uploading"
+      </div>
+      <i
+        v-if="backgroundUploading"
+        class=" icon-spin4 animate-spin uploading"
       />
-    <button
-      v-else-if="backgroundPreview"
-      class="btn btn-default"
-      @click="submitBg"
+      <button
+        v-else-if="backgroundPreview"
+        class="btn btn-default"
+        @click="submitBg"
       >
-      {{ $t('general.submit') }}
-    </button>
-    <div
-      v-if="backgroundUploadError"
-      class="alert error"
+        {{ $t('general.submit') }}
+      </button>
+      <div
+        v-if="backgroundUploadError"
+        class="alert error"
       >
-      Error: {{ backgroundUploadError }}
-      <i
-        class="button-icon icon-cancel"
-        @click="clearUploadError('background')"
+        Error: {{ backgroundUploadError }}
+        <i
+          class="button-icon icon-cancel"
+          @click="clearUploadError('background')"
         />
+      </div>
     </div>
   </div>
-</div>
 </template>
 
 <script src="./profile_tab.js"></script>
diff --git a/src/components/settings_modal/tabs/security_tab/security_tab.vue b/src/components/settings_modal/tabs/security_tab/security_tab.vue
index 45bacec1..3d32d73d 100644
--- a/src/components/settings_modal/tabs/security_tab/security_tab.vue
+++ b/src/components/settings_modal/tabs/security_tab/security_tab.vue
@@ -1,142 +1,142 @@
 <template>
-<div :label="$t('settings.security_tab')">
-  <div class="setting-item">
-    <h2>{{ $t('settings.change_email') }}</h2>
-    <div>
-      <p>{{ $t('settings.new_email') }}</p>
-      <input
-        v-model="newEmail"
-        type="email"
-        autocomplete="email"
+  <div :label="$t('settings.security_tab')">
+    <div class="setting-item">
+      <h2>{{ $t('settings.change_email') }}</h2>
+      <div>
+        <p>{{ $t('settings.new_email') }}</p>
+        <input
+          v-model="newEmail"
+          type="email"
+          autocomplete="email"
         >
-    </div>
-    <div>
-      <p>{{ $t('settings.current_password') }}</p>
-      <input
-        v-model="changeEmailPassword"
-        type="password"
-        autocomplete="current-password"
+      </div>
+      <div>
+        <p>{{ $t('settings.current_password') }}</p>
+        <input
+          v-model="changeEmailPassword"
+          type="password"
+          autocomplete="current-password"
         >
-    </div>
-    <button
-      class="btn btn-default"
-      @click="changeEmail"
+      </div>
+      <button
+        class="btn btn-default"
+        @click="changeEmail"
       >
-      {{ $t('general.submit') }}
-    </button>
-    <p v-if="changedEmail">
-      {{ $t('settings.changed_email') }}
-    </p>
-    <template v-if="changeEmailError !== false">
-      <p>{{ $t('settings.change_email_error') }}</p>
-      <p>{{ changeEmailError }}</p>
-    </template>
-  </div>
+        {{ $t('general.submit') }}
+      </button>
+      <p v-if="changedEmail">
+        {{ $t('settings.changed_email') }}
+      </p>
+      <template v-if="changeEmailError !== false">
+        <p>{{ $t('settings.change_email_error') }}</p>
+        <p>{{ changeEmailError }}</p>
+      </template>
+    </div>
 
-  <div class="setting-item">
-    <h2>{{ $t('settings.change_password') }}</h2>
-    <div>
-      <p>{{ $t('settings.current_password') }}</p>
-      <input
-        v-model="changePasswordInputs[0]"
-        type="password"
+    <div class="setting-item">
+      <h2>{{ $t('settings.change_password') }}</h2>
+      <div>
+        <p>{{ $t('settings.current_password') }}</p>
+        <input
+          v-model="changePasswordInputs[0]"
+          type="password"
         >
-    </div>
-    <div>
-      <p>{{ $t('settings.new_password') }}</p>
-      <input
-        v-model="changePasswordInputs[1]"
-        type="password"
+      </div>
+      <div>
+        <p>{{ $t('settings.new_password') }}</p>
+        <input
+          v-model="changePasswordInputs[1]"
+          type="password"
         >
-    </div>
-    <div>
-      <p>{{ $t('settings.confirm_new_password') }}</p>
-      <input
-        v-model="changePasswordInputs[2]"
-        type="password"
+      </div>
+      <div>
+        <p>{{ $t('settings.confirm_new_password') }}</p>
+        <input
+          v-model="changePasswordInputs[2]"
+          type="password"
         >
-    </div>
-    <button
-      class="btn btn-default"
-      @click="changePassword"
+      </div>
+      <button
+        class="btn btn-default"
+        @click="changePassword"
       >
-      {{ $t('general.submit') }}
-    </button>
-    <p v-if="changedPassword">
-      {{ $t('settings.changed_password') }}
-    </p>
-    <p v-else-if="changePasswordError !== false">
-      {{ $t('settings.change_password_error') }}
-    </p>
-    <p v-if="changePasswordError">
-      {{ changePasswordError }}
-    </p>
-  </div>
+        {{ $t('general.submit') }}
+      </button>
+      <p v-if="changedPassword">
+        {{ $t('settings.changed_password') }}
+      </p>
+      <p v-else-if="changePasswordError !== false">
+        {{ $t('settings.change_password_error') }}
+      </p>
+      <p v-if="changePasswordError">
+        {{ changePasswordError }}
+      </p>
+    </div>
 
-  <div class="setting-item">
-    <h2>{{ $t('settings.oauth_tokens') }}</h2>
-    <table class="oauth-tokens">
-      <thead>
-        <tr>
-          <th>{{ $t('settings.app_name') }}</th>
-          <th>{{ $t('settings.valid_until') }}</th>
-          <th />
-        </tr>
-      </thead>
-      <tbody>
-        <tr
-          v-for="oauthToken in oauthTokens"
-          :key="oauthToken.id"
+    <div class="setting-item">
+      <h2>{{ $t('settings.oauth_tokens') }}</h2>
+      <table class="oauth-tokens">
+        <thead>
+          <tr>
+            <th>{{ $t('settings.app_name') }}</th>
+            <th>{{ $t('settings.valid_until') }}</th>
+            <th />
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="oauthToken in oauthTokens"
+            :key="oauthToken.id"
           >
-          <td>{{ oauthToken.appName }}</td>
-          <td>{{ oauthToken.validUntil }}</td>
-          <td class="actions">
-            <button
-              class="btn btn-default"
-              @click="revokeToken(oauthToken.id)"
+            <td>{{ oauthToken.appName }}</td>
+            <td>{{ oauthToken.validUntil }}</td>
+            <td class="actions">
+              <button
+                class="btn btn-default"
+                @click="revokeToken(oauthToken.id)"
               >
-              {{ $t('settings.revoke_token') }}
-            </button>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-  <mfa />
-  <div class="setting-item">
-    <h2>{{ $t('settings.delete_account') }}</h2>
-    <p v-if="!deletingAccount">
-      {{ $t('settings.delete_account_description') }}
-    </p>
-    <div v-if="deletingAccount">
-      <p>{{ $t('settings.delete_account_instructions') }}</p>
-      <p>{{ $t('login.password') }}</p>
-      <input
-        v-model="deleteAccountConfirmPasswordInput"
-        type="password"
+                {{ $t('settings.revoke_token') }}
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <mfa />
+    <div class="setting-item">
+      <h2>{{ $t('settings.delete_account') }}</h2>
+      <p v-if="!deletingAccount">
+        {{ $t('settings.delete_account_description') }}
+      </p>
+      <div v-if="deletingAccount">
+        <p>{{ $t('settings.delete_account_instructions') }}</p>
+        <p>{{ $t('login.password') }}</p>
+        <input
+          v-model="deleteAccountConfirmPasswordInput"
+          type="password"
+        >
+        <button
+          class="btn btn-default"
+          @click="deleteAccount"
         >
+          {{ $t('settings.delete_account') }}
+        </button>
+      </div>
+      <p v-if="deleteAccountError !== false">
+        {{ $t('settings.delete_account_error') }}
+      </p>
+      <p v-if="deleteAccountError">
+        {{ deleteAccountError }}
+      </p>
       <button
+        v-if="!deletingAccount"
         class="btn btn-default"
-        @click="deleteAccount"
-        >
-        {{ $t('settings.delete_account') }}
+        @click="confirmDelete"
+      >
+        {{ $t('general.submit') }}
       </button>
     </div>
-    <p v-if="deleteAccountError !== false">
-      {{ $t('settings.delete_account_error') }}
-    </p>
-    <p v-if="deleteAccountError">
-      {{ deleteAccountError }}
-    </p>
-    <button
-      v-if="!deletingAccount"
-      class="btn btn-default"
-      @click="confirmDelete"
-      >
-      {{ $t('general.submit') }}
-    </button>
   </div>
-</div>
 </template>
 
 <script src="./security_tab.js"></script>
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
index 6f6cf1d6..33098498 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
@@ -1,90 +1,90 @@
 <template>
-<div class="theme-tab">
-  <div class="presets-container">
-    <div class="save-load">
-      <div
-        v-if="themeWarning"
-        class="theme-warning"
+  <div class="theme-tab">
+    <div class="presets-container">
+      <div class="save-load">
+        <div
+          v-if="themeWarning"
+          class="theme-warning"
         >
-        <div class="alert warning">
-          {{ themeWarningHelp }}
-        </div>
-        <div class="buttons">
-          <template v-if="themeWarning.type === 'snapshot_source_mismatch'">
-            <button
-              class="btn"
-              @click="forceLoad"
+          <div class="alert warning">
+            {{ themeWarningHelp }}
+          </div>
+          <div class="buttons">
+            <template v-if="themeWarning.type === 'snapshot_source_mismatch'">
+              <button
+                class="btn"
+                @click="forceLoad"
               >
-              {{ $t('settings.style.switcher.use_source') }}
-            </button>
-            <button
-              class="btn"
-              @click="forceSnapshot"
+                {{ $t('settings.style.switcher.use_source') }}
+              </button>
+              <button
+                class="btn"
+                @click="forceSnapshot"
               >
-              {{ $t('settings.style.switcher.use_snapshot') }}
-            </button>
-          </template>
-          <template v-else-if="themeWarning.noActionsPossible">
-            <button
-              class="btn"
-              @click="dismissWarning"
+                {{ $t('settings.style.switcher.use_snapshot') }}
+              </button>
+            </template>
+            <template v-else-if="themeWarning.noActionsPossible">
+              <button
+                class="btn"
+                @click="dismissWarning"
               >
-              {{ $t('general.dismiss') }}
-            </button>
-          </template>
-          <template v-else>
-            <button
-              class="btn"
-              @click="forceLoad"
+                {{ $t('general.dismiss') }}
+              </button>
+            </template>
+            <template v-else>
+              <button
+                class="btn"
+                @click="forceLoad"
               >
-              {{ $t('settings.style.switcher.load_theme') }}
-            </button>
-            <button
-              class="btn"
-              @click="dismissWarning"
+                {{ $t('settings.style.switcher.load_theme') }}
+              </button>
+              <button
+                class="btn"
+                @click="dismissWarning"
               >
-              {{ $t('settings.style.switcher.keep_as_is') }}
-            </button>
-          </template>
+                {{ $t('settings.style.switcher.keep_as_is') }}
+              </button>
+            </template>
+          </div>
         </div>
-      </div>
-      <ExportImport
-        :export-object="exportedTheme"
-        :export-label="$t(&quot;settings.export_theme&quot;)"
-        :import-label="$t(&quot;settings.import_theme&quot;)"
-        :import-failed-text="$t(&quot;settings.invalid_theme_imported&quot;)"
-        :on-import="onImport"
-        :validator="importValidator"
+        <ExportImport
+          :export-object="exportedTheme"
+          :export-label="$t(&quot;settings.export_theme&quot;)"
+          :import-label="$t(&quot;settings.import_theme&quot;)"
+          :import-failed-text="$t(&quot;settings.invalid_theme_imported&quot;)"
+          :on-import="onImport"
+          :validator="importValidator"
         >
-        <template slot="before">
-          <div class="presets">
-            {{ $t('settings.presets') }}
-            <label
-              for="preset-switcher"
-              class="select"
+          <template slot="before">
+            <div class="presets">
+              {{ $t('settings.presets') }}
+              <label
+                for="preset-switcher"
+                class="select"
               >
-              <select
-                id="preset-switcher"
-                v-model="selected"
-                class="preset-switcher"
+                <select
+                  id="preset-switcher"
+                  v-model="selected"
+                  class="preset-switcher"
                 >
-                <option
-                  v-for="style in availableStyles"
-                  :key="style.name"
-                  :value="style"
-                  :style="{
-                          backgroundColor: style[1] || (style.theme || style.source).colors.bg,
-                          color: style[3] || (style.theme || style.source).colors.text
-                          }"
+                  <option
+                    v-for="style in availableStyles"
+                    :key="style.name"
+                    :value="style"
+                    :style="{
+                      backgroundColor: style[1] || (style.theme || style.source).colors.bg,
+                      color: style[3] || (style.theme || style.source).colors.text
+                    }"
                   >
-                  {{ style[0] || style.name }}
-                </option>
-              </select>
-              <i class="icon-down-open" />
-            </label>
-          </div>
-        </template>
-      </ExportImport>
+                    {{ style[0] || style.name }}
+                  </option>
+                </select>
+                <i class="icon-down-open" />
+              </label>
+            </div>
+          </template>
+        </ExportImport>
       </div>
       <div class="save-load-options">
         <span class="keep-option">
diff --git a/src/components/settings_modal/tabs/version_tab.vue b/src/components/settings_modal/tabs/version_tab.vue
index acc43569..d35ff25e 100644
--- a/src/components/settings_modal/tabs/version_tab.vue
+++ b/src/components/settings_modal/tabs/version_tab.vue
@@ -1,31 +1,31 @@
 <template>
-<div :label="$t('settings.version.title')">
-  <div class="setting-item">
-    <ul class="setting-list">
-      <li>
-        <p>{{ $t('settings.version.backend_version') }}</p>
-        <ul class="option-list">
-          <li>
-            <a
-              :href="backendVersionLink"
-              target="_blank"
+  <div :label="$t('settings.version.title')">
+    <div class="setting-item">
+      <ul class="setting-list">
+        <li>
+          <p>{{ $t('settings.version.backend_version') }}</p>
+          <ul class="option-list">
+            <li>
+              <a
+                :href="backendVersionLink"
+                target="_blank"
               >{{ backendVersion }}</a>
-          </li>
-        </ul>
-      </li>
-      <li>
-        <p>{{ $t('settings.version.frontend_version') }}</p>
-        <ul class="option-list">
-          <li>
-            <a
-              :href="frontendVersionLink"
-              target="_blank"
+            </li>
+          </ul>
+        </li>
+        <li>
+          <p>{{ $t('settings.version.frontend_version') }}</p>
+          <ul class="option-list">
+            <li>
+              <a
+                :href="frontendVersionLink"
+                target="_blank"
               >{{ frontendVersion }}</a>
-          </li>
-        </ul>
-      </li>
-    </ul>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </div>
   </div>
-</div>
 </template>
 <script src="./version_tab.js">
-- 
cgit v1.2.3-70-g09d2


From 6a4ad1fe624b2e2da68707ffffcc6a4cbe7e5e03 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 25 May 2020 14:04:36 +0300
Subject: added "settings saved" notice back

---
 .../settings_modal/settings_modal_content.js          |  3 +++
 .../settings_modal/settings_modal_content.vue         | 19 +++++++++++++++++++
 2 files changed, 22 insertions(+)

(limited to 'src/components')

diff --git a/src/components/settings_modal/settings_modal_content.js b/src/components/settings_modal/settings_modal_content.js
index bd8df672..b842ec7d 100644
--- a/src/components/settings_modal/settings_modal_content.js
+++ b/src/components/settings_modal/settings_modal_content.js
@@ -25,6 +25,9 @@ const SettingsModalContent = {
     ThemeTab
   },
   computed: {
+    currentSaveStateNotice () {
+      return this.$store.state.interface.settings.currentSaveStateNotice
+    },
     isLoggedIn () {
       return !!this.$store.state.users.currentUser
     }
diff --git a/src/components/settings_modal/settings_modal_content.vue b/src/components/settings_modal/settings_modal_content.vue
index 013bf34f..737c3637 100644
--- a/src/components/settings_modal/settings_modal_content.vue
+++ b/src/components/settings_modal/settings_modal_content.vue
@@ -4,6 +4,25 @@
       <span class="title">
         {{ $t('settings.settings') }}
       </span>
+      <transition name="fade">
+        <template v-if="currentSaveStateNotice">
+          <div
+            v-if="currentSaveStateNotice.error"
+            class="alert error"
+            @click.prevent
+            >
+            {{ $t('settings.saving_err') }}
+          </div>
+
+          <div
+            v-if="!currentSaveStateNotice.error"
+            class="alert transparent"
+            @click.prevent
+            >
+            {{ $t('settings.saving_ok') }}
+          </div>
+        </template>
+      </transition>
       <button
         class="btn"
         @click="peekModal"
-- 
cgit v1.2.3-70-g09d2


From 79c03984bcf63387863f6979849c39ff5f404186 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 25 May 2020 14:16:03 +0300
Subject: scroll to top when switching tabs

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

(limited to 'src/components')

diff --git a/src/components/tab_switcher/tab_switcher.js b/src/components/tab_switcher/tab_switcher.js
index a54b474f..bd1f51cb 100644
--- a/src/components/tab_switcher/tab_switcher.js
+++ b/src/components/tab_switcher/tab_switcher.js
@@ -60,6 +60,9 @@ export default Vue.component('tab-switcher', {
           this.onSwitch.call(null, this.$slots.default[index].key)
         }
         this.active = index
+        if (this.scrollableTabs) {
+          this.$refs.contents.scrollTop = 0
+        }
       }
     }
   },
@@ -118,7 +121,7 @@ export default Vue.component('tab-switcher', {
         <div class="tabs">
           {tabs}
         </div>
-        <div class={'contents' + (this.scrollableTabs ? ' scrollable-tabs' : '')}>
+        <div ref="contents" class={'contents' + (this.scrollableTabs ? ' scrollable-tabs' : '')}>
           {contents}
         </div>
       </div>
-- 
cgit v1.2.3-70-g09d2


From a6ca923a7695477f57367bf3dd95bdf41a4b64a4 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 25 May 2020 16:10:14 +0300
Subject: icons update

---
 src/components/settings_modal/settings_modal_content.vue |  9 +++++++++
 src/components/tab_switcher/tab_switcher.js              |  7 +++++--
 src/components/tab_switcher/tab_switcher.scss            |  5 +++++
 static/fontello.json                                     | 12 ++++++++++++
 4 files changed, 31 insertions(+), 2 deletions(-)

(limited to 'src/components')

diff --git a/src/components/settings_modal/settings_modal_content.vue b/src/components/settings_modal/settings_modal_content.vue
index 737c3637..847de1da 100644
--- a/src/components/settings_modal/settings_modal_content.vue
+++ b/src/components/settings_modal/settings_modal_content.vue
@@ -45,40 +45,47 @@
       >
         <div
           :label="$t('settings.general')"
+          icon="wrench"
         >
           <GeneralTab />
         </div>
         <div
           v-if="isLoggedIn"
           :label="$t('settings.profile_tab')"
+          icon="user"
         >
           <ProfileTab />
         </div>
         <div
           v-if="isLoggedIn"
           :label="$t('settings.security_tab')"
+          icon="lock"
         >
           <SecurityTab />
         </div>
         <div
           :label="$t('settings.filtering')"
+          icon="filter"
         >
           <FilteringTab />
         </div>
         <div
           :label="$t('settings.theme')"
+          icon="brush"
         >
           <ThemeTab />
         </div>
         <div
           v-if="isLoggedIn"
           :label="$t('settings.notifications')"
+          icon="chat"
         >
           <NotificationsTab />
         </div>
         <div
           v-if="isLoggedIn"
           :label="$t('settings.data_import_export_tab')"
+          icon="download"
         >
           <DataImportExportTab />
         </div>
@@ -87,11 +94,13 @@
           :label="$t('settings.mutes_and_blocks')"
           :fullHeight="true"
           class="full-height"
+          icon="eye-off"
         >
           <MutesAndBlocksTab />
         </div>
         <div
           :label="$t('settings.version.title')"
+          icon="info-circled"
         >
           <VersionTab />
         </div>
diff --git a/src/components/tab_switcher/tab_switcher.js b/src/components/tab_switcher/tab_switcher.js
index bd1f51cb..2d04e15d 100644
--- a/src/components/tab_switcher/tab_switcher.js
+++ b/src/components/tab_switcher/tab_switcher.js
@@ -94,8 +94,11 @@ export default Vue.component('tab-switcher', {
             <button
               disabled={slot.data.attrs.disabled}
               onClick={this.activateTab(index)}
-              class={classesTab.join(' ')}>
-              {slot.data.attrs.label}</button>
+              class={classesTab.join(' ')}
+            >
+              {!slot.data.attrs.icon ? '' : (<i class={'tab-icon icon-' + slot.data.attrs.icon}/>)}
+              {slot.data.attrs.label}
+            </button>
           </div>
         )
       })
diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
index f994380f..129a68b7 100644
--- a/src/components/tab_switcher/tab_switcher.scss
+++ b/src/components/tab_switcher/tab_switcher.scss
@@ -3,6 +3,11 @@
 .tab-switcher {
   display: flex;
 
+  .tab-icon {
+    font-size: 2em;
+    display: block;
+  }
+
   &.top-tabs {
     flex-direction: column;
     > .tabs {
diff --git a/static/fontello.json b/static/fontello.json
index 7f0e7cdd..ac3f0a18 100755
--- a/static/fontello.json
+++ b/static/fontello.json
@@ -363,6 +363,18 @@
       "css": "ok",
       "code": 59431,
       "src": "fontawesome"
+    },
+    {
+      "uid": "4109c474ff99cad28fd5a2c38af2ec6f",
+      "css": "filter",
+      "code": 61616,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "9a76bc135eac17d2c8b8ad4a5774fc87",
+      "css": "download",
+      "code": 59429,
+      "src": "fontawesome"
     }
   ]
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 7951192cd98263a2e5c9e1010f1299c651f82cef Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 25 May 2020 16:11:05 +0300
Subject: Improve settings-modal async loading, update vue to 2.6.11 to be able
 to use Vue.observable, to implmement resettable async component

---
 package.json                                    |  4 +--
 src/components/big_spinner/big_spinner.vue      | 13 ++++++++
 src/components/error_window/error_window.vue    | 41 +++++++++++++++++++++++++
 src/components/settings_modal/settings_modal.js | 13 +++++++-
 src/i18n/en.json                                |  1 +
 src/services/resettable_async_component.js      | 32 +++++++++++++++++++
 yarn.lock                                       | 15 +++++----
 7 files changed, 110 insertions(+), 9 deletions(-)
 create mode 100644 src/components/big_spinner/big_spinner.vue
 create mode 100644 src/components/error_window/error_window.vue
 create mode 100644 src/services/resettable_async_component.js

(limited to 'src/components')

diff --git a/package.json b/package.json
index 542086b4..4d68cc6e 100644
--- a/package.json
+++ b/package.json
@@ -29,11 +29,11 @@
     "portal-vue": "^2.1.4",
     "sanitize-html": "^1.13.0",
     "v-click-outside": "^2.1.1",
-    "vue": "^2.5.13",
+    "vue": "^2.6.11",
     "vue-chat-scroll": "^1.2.1",
     "vue-i18n": "^7.3.2",
     "vue-router": "^3.0.1",
-    "vue-template-compiler": "^2.3.4",
+    "vue-template-compiler": "^2.6.11",
     "vuelidate": "^0.7.4",
     "vuex": "^3.0.1",
     "whatwg-fetch": "^2.0.3"
diff --git a/src/components/big_spinner/big_spinner.vue b/src/components/big_spinner/big_spinner.vue
new file mode 100644
index 00000000..cda28de5
--- /dev/null
+++ b/src/components/big_spinner/big_spinner.vue
@@ -0,0 +1,13 @@
+<template>
+  <div class="big-spinner">
+    <i class="icon-spin4 animate-spin" />
+  </div>
+</template>
+
+<style lang="scss">
+.big-spinner {
+  font-size: 15em;
+  line-height: 0;
+  opacity: .6;
+}
+</style>
diff --git a/src/components/error_window/error_window.vue b/src/components/error_window/error_window.vue
new file mode 100644
index 00000000..ddb4ba00
--- /dev/null
+++ b/src/components/error_window/error_window.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="error-window panel">
+    <div class="panel-heading">
+      <span class="title">
+        {{ $t('general.generic_error') }}
+      </span>
+    </div>
+    <div class="panel-body">
+      <p>
+        {{ $t('general.error_retry') }}
+      </p>
+      <button
+        class="btn"
+        @click="closeAllModals"
+      >
+        {{ $t('general.close') }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    closeAllModals () {
+      // TODO make a global hook to close all modals?
+      this.$store.dispatch('closeSettingsModal')
+      this.$emit('resetAsyncComponent')
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.error-window {
+  .btn {
+    margin: .5em;
+    padding: .5em 2em;
+  }
+}
+</style>
diff --git a/src/components/settings_modal/settings_modal.js b/src/components/settings_modal/settings_modal.js
index d38c5751..60d14649 100644
--- a/src/components/settings_modal/settings_modal.js
+++ b/src/components/settings_modal/settings_modal.js
@@ -1,9 +1,20 @@
 import Modal from 'src/components/modal/modal.vue'
+import BigSpinner from 'src/components/big_spinner/big_spinner.vue'
+import ErrorWindow from 'src/components/error_window/error_window.vue'
+import getResettableAsyncComponent from 'src/services/resettable_async_component.js'
 
 const SettingsModal = {
   components: {
     Modal,
-    SettingsModalContent: () => import('./settings_modal_content.vue')
+    SettingsModalContent: getResettableAsyncComponent(
+      () => import('./settings_modal_content.vue'),
+      {
+        loading: BigSpinner,
+        error: ErrorWindow,
+        delay: 0,
+        timeout: 3000
+      }
+    )
   },
   computed: {
     modalActivated () {
diff --git a/src/i18n/en.json b/src/i18n/en.json
index ad9c22bd..e3dc75d7 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -60,6 +60,7 @@
     "submit": "Submit",
     "more": "More",
     "generic_error": "An error occured",
+    "error_retry": "Please try again",
     "optional": "optional",
     "show_more": "Show more",
     "show_less": "Show less",
diff --git a/src/services/resettable_async_component.js b/src/services/resettable_async_component.js
new file mode 100644
index 00000000..517bbd88
--- /dev/null
+++ b/src/services/resettable_async_component.js
@@ -0,0 +1,32 @@
+import Vue from 'vue'
+
+/* By default async components don't have any way to recover, if component is
+ * failed, it is failed forever. This helper tries to remedy that by recreating
+ * async component when retry is requested (by user). You need to emit the
+ * `resetAsyncComponent` event from child to reset the component. Generally,
+ * this should be done from error component but could be done from loading or
+ * actual target component itself if needs to be.
+ */
+function getResettableAsyncComponent (asyncComponent, options) {
+  const asyncComponentFactory = () => () => ({
+    component: asyncComponent(),
+    ...options
+  })
+
+  const observe = Vue.observable({ c: asyncComponentFactory() })
+
+  return {
+    functional: true,
+    render (createElement, { data, children }) {
+      //  emit event resetAsyncComponent to reloading
+      data.on = {}
+      data.on.resetAsyncComponent = () => {
+        observe.c = asyncComponentFactory()
+        // parent.$forceUpdate()
+      }
+      return createElement(observe.c, data, children)
+    }
+  }
+}
+
+export default getResettableAsyncComponent
diff --git a/yarn.lock b/yarn.lock
index 0defefcb..61afa7ca 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2327,6 +2327,7 @@ dateformat@^1.0.6:
 de-indent@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
+  integrity sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=
 
 debug@2, debug@2.6.9, debug@^2.1.2, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8, debug@^2.6.9:
   version "2.6.9"
@@ -7903,9 +7904,10 @@ vue-style-loader@^4.0.0, vue-style-loader@^4.0.1:
     hash-sum "^1.0.2"
     loader-utils "^1.0.2"
 
-vue-template-compiler@^2.3.4:
-  version "2.5.21"
-  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.5.21.tgz#a57ceb903177e8f643560a8d639a0f8db647054a"
+vue-template-compiler@^2.6.11:
+  version "2.6.11"
+  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.11.tgz#c04704ef8f498b153130018993e56309d4698080"
+  integrity sha512-KIq15bvQDrcCjpGjrAhx4mUlyyHfdmTaoNfeoATHLAiWB+MU3cx4lOzMwrnUh9cCxy0Lt1T11hAFY6TQgroUAA==
   dependencies:
     de-indent "^1.0.2"
     he "^1.1.0"
@@ -7914,9 +7916,10 @@ vue-template-es2015-compiler@^1.6.0:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
 
-vue@^2.5.13:
-  version "2.5.21"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.21.tgz#3d33dcd03bb813912ce894a8303ab553699c4a85"
+vue@^2.6.11:
+  version "2.6.11"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.11.tgz#76594d877d4b12234406e84e35275c6d514125c5"
+  integrity sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ==
 
 vuelidate@^0.7.4:
   version "0.7.4"
-- 
cgit v1.2.3-70-g09d2


From 0286e1024c9e9f9f1794a870bd7a0680aa29cee2 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 25 May 2020 16:16:30 +0300
Subject: fix cursor on desktop, add modal link on mobile

---
 src/App.vue                                | 1 +
 src/components/side_drawer/side_drawer.js  | 5 ++++-
 src/components/side_drawer/side_drawer.vue | 7 +++++--
 3 files changed, 10 insertions(+), 3 deletions(-)

(limited to 'src/components')

diff --git a/src/App.vue b/src/App.vue
index 40278cb4..7b9ad3dc 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -47,6 +47,7 @@
             @click.stop.native
           />
           <a
+            href="#"
             class="mobile-hidden"
             @click.stop="openSettingsModal"
           >
diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js
index 2181ecc7..e0d118a1 100644
--- a/src/components/side_drawer/side_drawer.js
+++ b/src/components/side_drawer/side_drawer.js
@@ -62,7 +62,10 @@ const SideDrawer = {
     },
     touchMove (e) {
       GestureService.updateSwipe(e, this.closeGesture)
-    }
+    },
+    openSettingsModal () {
+      this.$store.dispatch('openSettingsModal')
+    },
   }
 }
 
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 2958a386..aa39bc6f 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -122,9 +122,12 @@
           </router-link>
         </li>
         <li @click="toggleDrawer">
-          <router-link :to="{ name: 'settings' }">
+          <a
+            href="#"
+            @click.stop="openSettingsModal"
+          >
             <i class="button-icon icon-cog" /> {{ $t("settings.settings") }}
-          </router-link>
+          </a>
         </li>
         <li @click="toggleDrawer">
           <router-link :to="{ name: 'about'}">
-- 
cgit v1.2.3-70-g09d2


From bb418bf155dad1c6dc39e88bf4d20f0644d1236d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 25 May 2020 16:23:14 +0300
Subject: fix tests. user-profile didn't have tab-switcher compnent imported!!

---
 src/components/user_profile/user_profile.js | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'src/components')

diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
index 9558a0bd..95760bf8 100644
--- a/src/components/user_profile/user_profile.js
+++ b/src/components/user_profile/user_profile.js
@@ -3,6 +3,7 @@ import UserCard from '../user_card/user_card.vue'
 import FollowCard from '../follow_card/follow_card.vue'
 import Timeline from '../timeline/timeline.vue'
 import Conversation from '../conversation/conversation.vue'
+import TabSwitcher from 'src/components/tab_switcher/tab_switcher.js'
 import List from '../list/list.vue'
 import withLoadMore from '../../hocs/with_load_more/with_load_more'
 
@@ -146,6 +147,7 @@ const UserProfile = {
     FollowerList,
     FriendList,
     FollowCard,
+    TabSwitcher,
     Conversation
   }
 }
-- 
cgit v1.2.3-70-g09d2


From 097216c49eaabf02b7a64308bf2c41bcf58b4c53 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 25 May 2020 16:32:32 +0300
Subject: remove timeout, was meant for testing

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

(limited to 'src/components')

diff --git a/src/components/settings_modal/settings_modal.js b/src/components/settings_modal/settings_modal.js
index 60d14649..84d673a8 100644
--- a/src/components/settings_modal/settings_modal.js
+++ b/src/components/settings_modal/settings_modal.js
@@ -11,8 +11,7 @@ const SettingsModal = {
       {
         loading: BigSpinner,
         error: ErrorWindow,
-        delay: 0,
-        timeout: 3000
+        delay: 0
       }
     )
   },
-- 
cgit v1.2.3-70-g09d2


From 5d1b539da20950f05bf062df1a0904437c204e97 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 25 May 2020 16:48:23 +0300
Subject: lint

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

(limited to 'src/components')

diff --git a/src/components/settings_modal/settings_modal_content.vue b/src/components/settings_modal/settings_modal_content.vue
index 847de1da..865a2adf 100644
--- a/src/components/settings_modal/settings_modal_content.vue
+++ b/src/components/settings_modal/settings_modal_content.vue
@@ -10,7 +10,7 @@
             v-if="currentSaveStateNotice.error"
             class="alert error"
             @click.prevent
-            >
+          >
             {{ $t('settings.saving_err') }}
           </div>
 
@@ -18,7 +18,7 @@
             v-if="!currentSaveStateNotice.error"
             class="alert transparent"
             @click.prevent
-            >
+          >
             {{ $t('settings.saving_ok') }}
           </div>
         </template>
-- 
cgit v1.2.3-70-g09d2


From 534e1fef88862023cd85e29b265319da300b7995 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 25 May 2020 16:56:32 +0300
Subject: lint

---
 src/components/side_drawer/side_drawer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components')

diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js
index e0d118a1..d1f044f6 100644
--- a/src/components/side_drawer/side_drawer.js
+++ b/src/components/side_drawer/side_drawer.js
@@ -65,7 +65,7 @@ const SideDrawer = {
     },
     openSettingsModal () {
       this.$store.dispatch('openSettingsModal')
-    },
+    }
   }
 }
 
-- 
cgit v1.2.3-70-g09d2


From 500511b41534e051803db8731a6e6315447d5854 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 25 May 2020 17:05:30 +0300
Subject: fix sidebar not closing in mobile

---
 src/components/side_drawer/side_drawer.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components')

diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index aa39bc6f..f253742d 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -124,7 +124,7 @@
         <li @click="toggleDrawer">
           <a
             href="#"
-            @click.stop="openSettingsModal"
+            @click="openSettingsModal"
           >
             <i class="button-icon icon-cog" /> {{ $t("settings.settings") }}
           </a>
-- 
cgit v1.2.3-70-g09d2


From 0eea5c6b80c1fcd9f99636599e484bac8845e075 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 25 May 2020 17:11:30 +0300
Subject: fix icon changing color

---
 src/components/tab_switcher/tab_switcher.scss | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

(limited to 'src/components')

diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
index 129a68b7..479fb686 100644
--- a/src/components/tab_switcher/tab_switcher.scss
+++ b/src/components/tab_switcher/tab_switcher.scss
@@ -147,8 +147,10 @@
     white-space: nowrap;
 
     padding: 6px 1em;
-    color: $fallback--text;
-    color: var(--tabText, $fallback--text);
+    &, &:active .tab-icon {
+      color: $fallback--text;
+      color: var(--tabText, $fallback--text);
+    }
     background-color: $fallback--fg;
     background-color: var(--tab, $fallback--fg);
 
-- 
cgit v1.2.3-70-g09d2


From ccdbba23485d90d437b0a3a19594faa25ef8833a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 25 May 2020 17:18:57 +0300
Subject: Change flex for tab switcher lines to always have some small space
 reserved

---
 src/components/tab_switcher/tab_switcher.scss | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

(limited to 'src/components')

diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
index 479fb686..fff6cc21 100644
--- a/src/components/tab_switcher/tab_switcher.scss
+++ b/src/components/tab_switcher/tab_switcher.scss
@@ -65,14 +65,8 @@
       overflow-y: auto;
       overflow-x: hidden;
       flex-direction: column;
-      &::after {
-        flex: 1 1 auto;
-      }
-      &::before {
-        flex: 0 0 auto;
-        height: 0.5em;
-      }
       &::after, &::before {
+        flex: 1 0 .5em;
         content: '';
         border-right: 1px solid;
         border-right-color: $fallback--border;
-- 
cgit v1.2.3-70-g09d2


From 101f657d36275cf575ccbc45b556eb628bc8ad43 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 25 May 2020 17:21:05 +0300
Subject: improve big spinner visibility

---
 src/components/big_spinner/big_spinner.vue | 3 +++
 1 file changed, 3 insertions(+)

(limited to 'src/components')

diff --git a/src/components/big_spinner/big_spinner.vue b/src/components/big_spinner/big_spinner.vue
index cda28de5..64f16e4d 100644
--- a/src/components/big_spinner/big_spinner.vue
+++ b/src/components/big_spinner/big_spinner.vue
@@ -9,5 +9,8 @@
   font-size: 15em;
   line-height: 0;
   opacity: .6;
+  > i {
+    color: white;
+  }
 }
 </style>
-- 
cgit v1.2.3-70-g09d2


From dc8f78e84dc2f125407cecd66cfaa814e131713a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 25 May 2020 17:22:57 +0300
Subject: fix for a previous fix

---
 src/components/tab_switcher/tab_switcher.scss | 3 +++
 1 file changed, 3 insertions(+)

(limited to 'src/components')

diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
index fff6cc21..d60e065b 100644
--- a/src/components/tab_switcher/tab_switcher.scss
+++ b/src/components/tab_switcher/tab_switcher.scss
@@ -72,6 +72,9 @@
         border-right-color: $fallback--border;
         border-right-color: var(--border, $fallback--border);
       }
+      &::before {
+        flex-grow: 0;
+      }
       .tab-wrapper {
         min-width: 10em;
         display: flex;
-- 
cgit v1.2.3-70-g09d2


From a14635f4f2338301d707b6acc0d11a4f9de20068 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 25 May 2020 19:57:32 +0300
Subject: oops

---
 src/components/mobile_post_status_button/mobile_post_status_button.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components')

diff --git a/src/components/mobile_post_status_button/mobile_post_status_button.js b/src/components/mobile_post_status_button/mobile_post_status_button.js
index ff2d4eaa..0ad12bb1 100644
--- a/src/components/mobile_post_status_button/mobile_post_status_button.js
+++ b/src/components/mobile_post_status_button/mobile_post_status_button.js
@@ -52,7 +52,7 @@ const MobilePostStatusButton = {
       window.removeEventListener('scroll', this.handleScrollEnd)
     },
     openPostForm () {
-      this.$store.dispatch('openSettingsModal')
+      this.$store.dispatch('openPostStatusModal')
     },
     handleOSK () {
       // This is a big hack: we're guessing from changed window sizes if the
-- 
cgit v1.2.3-70-g09d2


From b5c1d074f83d08473a19a3885f6ff5eeb95274e5 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 25 May 2020 23:38:31 +0300
Subject: fix reprööted posts not being muted properly. fix muted posts making
 desktop notifications
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/status/status.js             | 57 ++++++++++++++++++++++-------
 src/components/status/status.vue            | 18 ++++++++-
 src/i18n/en.json                            |  4 +-
 src/modules/statuses.js                     | 10 ++++-
 src/services/status_parser/status_parser.js | 11 ++++++
 5 files changed, 83 insertions(+), 17 deletions(-)

(limited to 'src/components')

diff --git a/src/components/status/status.js b/src/components/status/status.js
index 9cd9d61c..95278968 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -12,7 +12,8 @@ import StatusPopover from '../status_popover/status_popover.vue'
 import EmojiReactions from '../emoji_reactions/emoji_reactions.vue'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
-import { filter, unescape, uniqBy } from 'lodash'
+import { muteWordHits } from '../../services/status_parser/status_parser.js'
+import { unescape, uniqBy } from 'lodash'
 import { mapGetters, mapState } from 'vuex'
 
 const Status = {
@@ -44,6 +45,12 @@ const Status = {
     muteWords () {
       return this.mergedConfig.muteWords
     },
+    showReasonMutedThread () {
+      return (
+        this.status.thread_muted ||
+          (this.status.reblog && this.status.reblog.thread_muted)
+      ) && !this.inConversation
+    },
     repeaterClass () {
       const user = this.statusoid.user
       return highlightClass(user)
@@ -93,20 +100,44 @@ const Status = {
       return !!this.currentUser
     },
     muteWordHits () {
-      const statusText = this.status.text.toLowerCase()
-      const statusSummary = this.status.summary.toLowerCase()
-      const hits = filter(this.muteWords, (muteWord) => {
-        return statusText.includes(muteWord.toLowerCase()) || statusSummary.includes(muteWord.toLowerCase())
-      })
-
-      return hits
+      return muteWordHits(this.status, this.muteWords)
     },
     muted () {
-      const relationship = this.$store.getters.relationship(this.status.user.id)
-      return !this.unmuted && (
-        (!(this.inProfile && this.status.user.id === this.profileUserId) && relationship.muting) ||
-        (!this.inConversation && this.status.thread_muted) ||
-        this.muteWordHits.length > 0)
+      const { status } = this
+      const { reblog } = status
+      const relationship = this.$store.getters.relationship(status.user.id)
+      const relationshipReblog = reblog && this.$store.getters.relationship(reblog.user.id)
+      const reasonsToMute = (
+        // Post is muted according to BE
+        status.muted ||
+        // Reprööt of a muted post according to BE
+        (reblog && reblog.muted) ||
+        // Muted user
+        relationship.muting ||
+        // Muted user of a reprööt
+        (relationshipReblog && relationshipReblog.muting) ||
+        // Thread is muted
+        status.thread_muted ||
+        // Wordfiltered
+        this.muteWordHits.length > 0
+      )
+      const excusesNotToMute = (
+        // Currently showing status
+        this.unmuted ||
+        (
+          this.inProfile && (
+            // Don't mute user's posts on user timeline (except reblogs)
+            (!reblog && status.user.id === this.profileUserId) ||
+            // Same as above but also allow self-reblogs
+            (reblog && reblog.user.id === this.profileUserId)
+          )
+        ) ||
+        // Don't mute statuses in muted conversation when said conversation is opened
+        (this.inConversation && status.thread_muted)
+        // No excuses if post has muted words
+      ) && !this.muteWordHits.length > 0
+
+      return !excusesNotToMute && reasonsToMute
     },
     hideFilteredStatuses () {
       return this.mergedConfig.hideFilteredStatuses
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index e4c7545b..1c287aa7 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -18,10 +18,26 @@
     <template v-if="muted && !isPreview">
       <div class="media status container muted">
         <small>
+          <i
+            v-if="muted && retweet"
+            class="button-icon icon-retweet"
+          />
           <router-link :to="userProfileLink">
             {{ status.user.screen_name }}
           </router-link>
         </small>
+        <small
+          v-if="showReasonMutedThread && muteWordHits.length === 0"
+          class="mutedThread"
+        >
+          {{ $t('status.thread_muted') }}
+        </small>
+        <small
+          v-if="showReasonMutedThread && muteWordHits.length > 0"
+          class="mutedThread"
+        >
+          {{ $t('status.thread_muted_and_words') }}
+        </small>
         <small class="muteWords">{{ muteWordHits.join(', ') }}</small>
         <a
           href="#"
@@ -642,7 +658,7 @@ $status-margin: 0.75em;
     margin-left: auto;
   }
 
-  .muteWords {
+  .mutedThread, .muteWords {
     margin-left: 10px;
   }
 }
diff --git a/src/i18n/en.json b/src/i18n/en.json
index f5d1ce7c..61b818a6 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -621,7 +621,9 @@
     "mute_conversation": "Mute conversation",
     "unmute_conversation": "Unmute conversation",
     "status_unavailable": "Status unavailable",
-    "copy_link": "Copy link to status"
+    "copy_link": "Copy link to status",
+    "thread_muted": "Conversation muted",
+    "thread_muted_and_words": "Conversation muted, contains filtered words:"
   },
   "user_card": {
     "approve": "Approve",
diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index cd8c1dba..f73fde25 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -15,7 +15,7 @@ import {
 import { set } from 'vue'
 import { isStatusNotification } from '../services/notification_utils/notification_utils.js'
 import apiService from '../services/api/api.service.js'
-// import parse from '../services/status_parser/status_parser.js'
+import { muteWordHits } from '../services/status_parser/status_parser.js'
 
 const emptyTl = (userId = 0) => ({
   statuses: [],
@@ -381,7 +381,13 @@ const addNewNotifications = (state, { dispatch, notifications, older, visibleNot
           notifObj.image = status.attachments[0].url
         }
 
-        if (!notification.seen && !state.notifications.desktopNotificationSilence && visibleNotificationTypes.includes(notification.type)) {
+        if (
+          !notification.seen &&
+            !state.notifications.desktopNotificationSilence &&
+            visibleNotificationTypes.includes(notification.type) &&
+            !status.muted &&
+            muteWordHits(status, rootGetters.mergedConfig.muteWords).length === 0
+        ) {
           let desktopNotification = new window.Notification(title, notifObj)
           // Chrome is known for not closing notifications automatically
           // according to MDN, anyway.
diff --git a/src/services/status_parser/status_parser.js b/src/services/status_parser/status_parser.js
index 900cd56e..3d517e3c 100644
--- a/src/services/status_parser/status_parser.js
+++ b/src/services/status_parser/status_parser.js
@@ -1,3 +1,4 @@
+import { filter } from 'lodash'
 import sanitize from 'sanitize-html'
 
 export const removeAttachmentLinks = (html) => {
@@ -12,4 +13,14 @@ export const parse = (html) => {
   return removeAttachmentLinks(html)
 }
 
+export const muteWordHits = (status, muteWords) => {
+  const statusText = status.text.toLowerCase()
+  const statusSummary = status.summary.toLowerCase()
+  const hits = filter(muteWords, (muteWord) => {
+    return statusText.includes(muteWord.toLowerCase()) || statusSummary.includes(muteWord.toLowerCase())
+  })
+
+  return hits
+}
+
 export default parse
-- 
cgit v1.2.3-70-g09d2


From 9d09e4090fe37b5cbc775e4e9ae8097610ffd952 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 26 May 2020 01:01:25 +0300
Subject: multiple fixes

---
 src/components/notification/notification.js  | 6 ++++--
 src/components/notification/notification.vue | 6 ++----
 src/components/status/status.js              | 4 +---
 src/modules/statuses.js                      | 2 +-
 4 files changed, 8 insertions(+), 10 deletions(-)

(limited to 'src/components')

diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index 1cf4c9bc..cacdce87 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -1,3 +1,4 @@
+import StatusContent from '../status_content/status_content.vue'
 import Status from '../status/status.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import UserCard from '../user_card/user_card.vue'
@@ -16,10 +17,11 @@ const Notification = {
   },
   props: [ 'notification' ],
   components: {
-    Status,
+    StatusContent,
     UserAvatar,
     UserCard,
-    Timeago
+    Timeago,
+    Status,
   },
   methods: {
     toggleUserExpanded () {
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 0e46a2a7..044ac871 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -157,11 +157,9 @@
           </router-link>
         </div>
         <template v-else>
-          <status
+          <status-content
             class="faint"
-            :compact="true"
-            :statusoid="notification.action"
-            :no-heading="true"
+            :status="notification.action"
           />
         </template>
       </div>
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 95278968..73382521 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -122,8 +122,6 @@ const Status = {
         this.muteWordHits.length > 0
       )
       const excusesNotToMute = (
-        // Currently showing status
-        this.unmuted ||
         (
           this.inProfile && (
             // Don't mute user's posts on user timeline (except reblogs)
@@ -137,7 +135,7 @@ const Status = {
         // No excuses if post has muted words
       ) && !this.muteWordHits.length > 0
 
-      return !excusesNotToMute && reasonsToMute
+      return !this.unmuted && !excusesNotToMute && reasonsToMute
     },
     hideFilteredStatuses () {
       return this.mergedConfig.hideFilteredStatuses
diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index c809cf1c..9a2e0df1 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -386,7 +386,7 @@ const addNewNotifications = (state, { dispatch, notifications, older, visibleNot
             state.notifications.desktopNotificationSilence ||
             !visibleNotificationTypes.includes(notification.type) ||
             (
-              status && (
+              notification.type === 'mention' && status && (
                 status.muted ||
                   muteWordHits(status, rootGetters.mergedConfig.muteWords).length === 0
               )
-- 
cgit v1.2.3-70-g09d2


From 1f205b87ac906f67fa8e72530d18977bca085296 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 26 May 2020 01:06:34 +0300
Subject: lint

---
 src/components/notification/notification.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components')

diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index cacdce87..5aa40e98 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -21,7 +21,7 @@ const Notification = {
     UserAvatar,
     UserCard,
     Timeago,
-    Status,
+    Status
   },
   methods: {
     toggleUserExpanded () {
-- 
cgit v1.2.3-70-g09d2


From 5187b37aca4d6ca177c254f999e6acb637db5532 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 26 May 2020 22:50:37 +0300
Subject: moved multiChoiceProperties where it fits better

---
 .../settings_modal/tabs/helpers/shared_computed_object.js     | 11 +++++------
 src/modules/config.js                                         | 10 ++++++++++
 2 files changed, 15 insertions(+), 6 deletions(-)

(limited to 'src/components')

diff --git a/src/components/settings_modal/tabs/helpers/shared_computed_object.js b/src/components/settings_modal/tabs/helpers/shared_computed_object.js
index 61643e3b..b6a18e9c 100644
--- a/src/components/settings_modal/tabs/helpers/shared_computed_object.js
+++ b/src/components/settings_modal/tabs/helpers/shared_computed_object.js
@@ -1,10 +1,9 @@
 import { filter, trim } from 'lodash'
-import { instanceDefaultProperties, defaultState as configDefaultState } from 'src/modules/config.js'
-
-const multiChoiceProperties = [
-  'postContentType',
-  'subjectLineBehavior'
-]
+import {
+  instanceDefaultProperties,
+  multiChoiceProperties,
+  defaultState as configDefaultState
+} from 'src/modules/config.js'
 
 const SharedComputedObject = () => ({
   user () {
diff --git a/src/modules/config.js b/src/modules/config.js
index 8f4638f5..b6b1b241 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -3,6 +3,16 @@ import { setPreset, applyTheme } from '../services/style_setter/style_setter.js'
 
 const browserLocale = (window.navigator.language || 'en').split('-')[0]
 
+/* TODO this is a bit messy.
+ * We need to declare settings with their types and also deal with
+ * instance-default settings in some way, hopefully try to avoid copy-pasta
+ * in general.
+ */
+export const multiChoiceProperties = [
+  'postContentType',
+  'subjectLineBehavior'
+]
+
 export const defaultState = {
   colors: {},
   theme: undefined,
-- 
cgit v1.2.3-70-g09d2


From a8e013bd6517edb3a81eb5001e6ab948cb87bedb Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 26 May 2020 23:58:55 +0300
Subject: Move modal frame parts away from modal-content into modal, improve
 error handling

---
 .../async_component_error.vue                      |  41 +++++
 src/components/big_spinner/big_spinner.vue         |  16 --
 src/components/error_window/error_window.vue       |  41 -----
 src/components/panel_loading/panel_loading.vue     |  29 ++++
 src/components/settings_modal/settings_modal.js    |  16 +-
 src/components/settings_modal/settings_modal.scss  |  28 +++-
 src/components/settings_modal/settings_modal.vue   |  45 +++++-
 .../settings_modal/settings_modal_content.js       |   8 -
 .../settings_modal/settings_modal_content.scss     |  30 +---
 .../settings_modal/settings_modal_content.vue      | 166 ++++++++-------------
 src/i18n/en.json                                   |   2 +
 11 files changed, 217 insertions(+), 205 deletions(-)
 create mode 100644 src/components/async_component_error/async_component_error.vue
 delete mode 100644 src/components/big_spinner/big_spinner.vue
 delete mode 100644 src/components/error_window/error_window.vue
 create mode 100644 src/components/panel_loading/panel_loading.vue

(limited to 'src/components')

diff --git a/src/components/async_component_error/async_component_error.vue b/src/components/async_component_error/async_component_error.vue
new file mode 100644
index 00000000..66b3fb53
--- /dev/null
+++ b/src/components/async_component_error/async_component_error.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="async-component-error">
+    <div>
+      <h4>
+        {{ $t('general.generic_error') }}
+      </h4>
+      <p>
+        {{ $t('general.error_retry') }}
+      </p>
+      <button
+        class="btn"
+        @click="retry"
+        >
+        {{ $t('general.retry') }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    retry () {
+      this.$emit('resetAsyncComponent')
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.async-component-error {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  .btn {
+    margin: .5em;
+    padding: .5em 2em;
+  }
+}
+</style>
diff --git a/src/components/big_spinner/big_spinner.vue b/src/components/big_spinner/big_spinner.vue
deleted file mode 100644
index 64f16e4d..00000000
--- a/src/components/big_spinner/big_spinner.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-  <div class="big-spinner">
-    <i class="icon-spin4 animate-spin" />
-  </div>
-</template>
-
-<style lang="scss">
-.big-spinner {
-  font-size: 15em;
-  line-height: 0;
-  opacity: .6;
-  > i {
-    color: white;
-  }
-}
-</style>
diff --git a/src/components/error_window/error_window.vue b/src/components/error_window/error_window.vue
deleted file mode 100644
index ddb4ba00..00000000
--- a/src/components/error_window/error_window.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<template>
-  <div class="error-window panel">
-    <div class="panel-heading">
-      <span class="title">
-        {{ $t('general.generic_error') }}
-      </span>
-    </div>
-    <div class="panel-body">
-      <p>
-        {{ $t('general.error_retry') }}
-      </p>
-      <button
-        class="btn"
-        @click="closeAllModals"
-      >
-        {{ $t('general.close') }}
-      </button>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  methods: {
-    closeAllModals () {
-      // TODO make a global hook to close all modals?
-      this.$store.dispatch('closeSettingsModal')
-      this.$emit('resetAsyncComponent')
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-.error-window {
-  .btn {
-    margin: .5em;
-    padding: .5em 2em;
-  }
-}
-</style>
diff --git a/src/components/panel_loading/panel_loading.vue b/src/components/panel_loading/panel_loading.vue
new file mode 100644
index 00000000..4efebb3c
--- /dev/null
+++ b/src/components/panel_loading/panel_loading.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="panel-loading">
+    <span class="loading-text">
+      <i class="icon-spin4 animate-spin" />
+      {{ $t('general.loading') }}
+    </span>
+  </div>
+</template>
+
+<style lang="scss">
+@import 'src/_variables.scss';
+
+.panel-loading {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  font-size: 2em;
+  color: $fallback--text;
+  color: var(--text, $fallback--text);
+  .loading-text i {
+    font-size: 3em;
+    line-height: 0;
+    vertical-align: middle;
+    color: $fallback--text;
+    color: var(--text, $fallback--text);
+  }
+}
+</style>
diff --git a/src/components/settings_modal/settings_modal.js b/src/components/settings_modal/settings_modal.js
index 84d673a8..32ef38d6 100644
--- a/src/components/settings_modal/settings_modal.js
+++ b/src/components/settings_modal/settings_modal.js
@@ -1,6 +1,6 @@
 import Modal from 'src/components/modal/modal.vue'
-import BigSpinner from 'src/components/big_spinner/big_spinner.vue'
-import ErrorWindow from 'src/components/error_window/error_window.vue'
+import PanelLoading from 'src/components/panel_loading/panel_loading.vue'
+import AsyncComponentError from 'src/components/async_component_error/async_component_error.vue'
 import getResettableAsyncComponent from 'src/services/resettable_async_component.js'
 
 const SettingsModal = {
@@ -9,12 +9,20 @@ const SettingsModal = {
     SettingsModalContent: getResettableAsyncComponent(
       () => import('./settings_modal_content.vue'),
       {
-        loading: BigSpinner,
-        error: ErrorWindow,
+        loading: PanelLoading,
+        error: AsyncComponentError,
         delay: 0
       }
     )
   },
+  methods: {
+    closeModal () {
+      this.$store.dispatch('closeSettingsModal')
+    },
+    peekModal () {
+      this.$store.dispatch('togglePeekSettingsModal')
+    }
+  },
   computed: {
     modalActivated () {
       return this.$store.state.interface.settingsModalState !== 'hidden'
diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss
index ece96364..833ff89a 100644
--- a/src/components/settings_modal/settings_modal.scss
+++ b/src/components/settings_modal/settings_modal.scss
@@ -3,7 +3,7 @@
   overflow: hidden;
 
   &.peek {
-    .modal-panel {
+    .settings-modal-panel {
       /* Explanation:
        * Modal is positioned vertically centered.
        * 100vh - 100% = Distance between modal's top+bottom boundaries and screen
@@ -15,4 +15,30 @@
       transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 50px));
     }
   }
+
+  .settings-modal-panel {
+    overflow: hidden;
+    transition: transform;
+    transition-timing-function: ease-in-out;
+    transition-duration: 300ms;
+    width: 1000px;
+    max-width: 90vw;
+    height: 90vh;
+
+    @media all and (max-width: 800px) {
+      max-width: 100vw;
+      height: 100vh;
+    }
+
+    .panel-body {
+      height: 100%;
+      overflow-y: hidden;
+
+      .btn {
+        min-height: 28px;
+        min-width: 10em;
+        padding: 0 2em;
+      }
+    }
+  }
 }
diff --git a/src/components/settings_modal/settings_modal.vue b/src/components/settings_modal/settings_modal.vue
index b6ca5c6b..ded02f4a 100644
--- a/src/components/settings_modal/settings_modal.vue
+++ b/src/components/settings_modal/settings_modal.vue
@@ -5,10 +5,47 @@
     :class="{ peek: modalPeeked }"
     :no-background="modalPeeked"
   >
-    <SettingsModalContent
-      v-if="modalActivated"
-      class="modal-panel"
-    />
+    <div class="settings-modal-panel panel">
+      <div class="panel-heading">
+        <span class="title">
+          {{ $t('settings.settings') }}
+        </span>
+        <transition name="fade">
+          <template v-if="currentSaveStateNotice">
+            <div
+              v-if="currentSaveStateNotice.error"
+              class="alert error"
+              @click.prevent
+            >
+              {{ $t('settings.saving_err') }}
+            </div>
+
+            <div
+              v-if="!currentSaveStateNotice.error"
+              class="alert transparent"
+              @click.prevent
+            >
+              {{ $t('settings.saving_ok') }}
+            </div>
+          </template>
+        </transition>
+        <button
+          class="btn"
+          @click="peekModal"
+        >
+          {{ $t('general.peek') }}
+        </button>
+        <button
+          class="btn"
+          @click="closeModal"
+        >
+          {{ $t('general.close') }}
+        </button>
+      </div>
+      <div class="panel-body">
+        <SettingsModalContent v-if="modalActivated" />
+      </div>
+    </div>
   </Modal>
 </template>
 
diff --git a/src/components/settings_modal/settings_modal_content.js b/src/components/settings_modal/settings_modal_content.js
index b842ec7d..b27fbd28 100644
--- a/src/components/settings_modal/settings_modal_content.js
+++ b/src/components/settings_modal/settings_modal_content.js
@@ -31,14 +31,6 @@ const SettingsModalContent = {
     isLoggedIn () {
       return !!this.$store.state.users.currentUser
     }
-  },
-  methods: {
-    closeModal () {
-      this.$store.dispatch('closeSettingsModal')
-    },
-    peekModal () {
-      this.$store.dispatch('togglePeekSettingsModal')
-    }
   }
 }
 
diff --git a/src/components/settings_modal/settings_modal_content.scss b/src/components/settings_modal/settings_modal_content.scss
index 92e167a2..f80306c6 100644
--- a/src/components/settings_modal/settings_modal_content.scss
+++ b/src/components/settings_modal/settings_modal_content.scss
@@ -1,32 +1,6 @@
 @import 'src/_variables.scss';
-
-.settings-modal-panel {
-  overflow: hidden;
-  transition: transform;
-  transition-timing-function: ease-in-out;
-  transition-duration: 300ms;
-  width: 1000px;
-  max-width: 90vw;
-  height: 90vh;
-
-  @media all and (max-width: 800px) {
-    max-width: 100vw;
-    height: 100vh;
-  }
-
-  .settings_tab-switcher {
-    height: 100%;
-  }
-  .panel-body {
-    height: 100%;
-    overflow-y: hidden;
-
-    .btn {
-      min-height: 28px;
-      min-width: 10em;
-      padding: 0 2em;
-    }
-  }
+.settings_tab-switcher {
+  height: 100%;
 
   .full-height {
     height: 100%;
diff --git a/src/components/settings_modal/settings_modal_content.vue b/src/components/settings_modal/settings_modal_content.vue
index 865a2adf..3e06148f 100644
--- a/src/components/settings_modal/settings_modal_content.vue
+++ b/src/components/settings_modal/settings_modal_content.vue
@@ -1,112 +1,72 @@
 <template>
-  <div class="settings-modal-panel panel">
-    <div class="panel-heading">
-      <span class="title">
-        {{ $t('settings.settings') }}
-      </span>
-      <transition name="fade">
-        <template v-if="currentSaveStateNotice">
-          <div
-            v-if="currentSaveStateNotice.error"
-            class="alert error"
-            @click.prevent
-          >
-            {{ $t('settings.saving_err') }}
-          </div>
-
-          <div
-            v-if="!currentSaveStateNotice.error"
-            class="alert transparent"
-            @click.prevent
-          >
-            {{ $t('settings.saving_ok') }}
-          </div>
-        </template>
-      </transition>
-      <button
-        class="btn"
-        @click="peekModal"
+  <tab-switcher
+    ref="tabSwitcher"
+    class="settings_tab-switcher"
+    :side-tab-bar="true"
+    :scrollable-tabs="true"
+    >
+    <div
+      :label="$t('settings.general')"
+      icon="wrench"
+      >
+      <GeneralTab />
+    </div>
+    <div
+      v-if="isLoggedIn"
+      :label="$t('settings.profile_tab')"
+      icon="user"
+      >
+      <ProfileTab />
+    </div>
+    <div
+      v-if="isLoggedIn"
+      :label="$t('settings.security_tab')"
+      icon="lock"
+      >
+      <SecurityTab />
+    </div>
+    <div
+      :label="$t('settings.filtering')"
+      icon="filter"
       >
-        {{ $t('general.peek') }}
-      </button>
-      <button
-        class="btn"
-        @click="closeModal"
+      <FilteringTab />
+    </div>
+    <div
+      :label="$t('settings.theme')"
+      icon="brush"
+      >
+      <ThemeTab />
+    </div>
+    <div
+      v-if="isLoggedIn"
+      :label="$t('settings.notifications')"
+      icon="chat"
+      >
+      <NotificationsTab />
+    </div>
+    <div
+      v-if="isLoggedIn"
+      :label="$t('settings.data_import_export_tab')"
+      icon="download"
+      >
+      <DataImportExportTab />
+    </div>
+    <div
+      v-if="isLoggedIn"
+      :label="$t('settings.mutes_and_blocks')"
+      :fullHeight="true"
+      class="full-height"
+      icon="eye-off"
       >
-        {{ $t('general.close') }}
-      </button>
+      <MutesAndBlocksTab />
     </div>
-    <div class="panel-body">
-      <tab-switcher
-        ref="tabSwitcher"
-        class="settings_tab-switcher"
-        :side-tab-bar="true"
-        :scrollable-tabs="true"
+    <div
+      :label="$t('settings.version.title')"
+      icon="info-circled"
       >
-        <div
-          :label="$t('settings.general')"
-          icon="wrench"
-        >
-          <GeneralTab />
-        </div>
-        <div
-          v-if="isLoggedIn"
-          :label="$t('settings.profile_tab')"
-          icon="user"
-        >
-          <ProfileTab />
-        </div>
-        <div
-          v-if="isLoggedIn"
-          :label="$t('settings.security_tab')"
-          icon="lock"
-        >
-          <SecurityTab />
-        </div>
-        <div
-          :label="$t('settings.filtering')"
-          icon="filter"
-        >
-          <FilteringTab />
-        </div>
-        <div
-          :label="$t('settings.theme')"
-          icon="brush"
-        >
-          <ThemeTab />
-        </div>
-        <div
-          v-if="isLoggedIn"
-          :label="$t('settings.notifications')"
-          icon="chat"
-        >
-          <NotificationsTab />
-        </div>
-        <div
-          v-if="isLoggedIn"
-          :label="$t('settings.data_import_export_tab')"
-          icon="download"
-        >
-          <DataImportExportTab />
-        </div>
-        <div
-          v-if="isLoggedIn"
-          :label="$t('settings.mutes_and_blocks')"
-          :fullHeight="true"
-          class="full-height"
-          icon="eye-off"
-        >
-          <MutesAndBlocksTab />
-        </div>
-        <div
-          :label="$t('settings.version.title')"
-          icon="info-circled"
-        >
-          <VersionTab />
-        </div>
-      </tab-switcher>
+      <VersionTab />
     </div>
-  </div>
+  </tab-switcher>
 </template>
 
 <script src="./settings_modal_content.js"></script>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index e3dc75d7..062af2c7 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -59,8 +59,10 @@
     "apply": "Apply",
     "submit": "Submit",
     "more": "More",
+    "loading": "Loading…",
     "generic_error": "An error occured",
     "error_retry": "Please try again",
+    "retry": "Try again",
     "optional": "optional",
     "show_more": "Show more",
     "show_less": "Show less",
-- 
cgit v1.2.3-70-g09d2


From 3938ccb8e77afa33ebae2a00b74145399322a060 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 27 May 2020 00:02:36 +0300
Subject: lint

---
 .../async_component_error/async_component_error.vue  |  2 +-
 .../settings_modal/settings_modal_content.vue        | 20 ++++++++++----------
 2 files changed, 11 insertions(+), 11 deletions(-)

(limited to 'src/components')

diff --git a/src/components/async_component_error/async_component_error.vue b/src/components/async_component_error/async_component_error.vue
index 66b3fb53..b68b98f9 100644
--- a/src/components/async_component_error/async_component_error.vue
+++ b/src/components/async_component_error/async_component_error.vue
@@ -10,7 +10,7 @@
       <button
         class="btn"
         @click="retry"
-        >
+      >
         {{ $t('general.retry') }}
       </button>
     </div>
diff --git a/src/components/settings_modal/settings_modal_content.vue b/src/components/settings_modal/settings_modal_content.vue
index 3e06148f..8b83e48c 100644
--- a/src/components/settings_modal/settings_modal_content.vue
+++ b/src/components/settings_modal/settings_modal_content.vue
@@ -4,51 +4,51 @@
     class="settings_tab-switcher"
     :side-tab-bar="true"
     :scrollable-tabs="true"
-    >
+  >
     <div
       :label="$t('settings.general')"
       icon="wrench"
-      >
+    >
       <GeneralTab />
     </div>
     <div
       v-if="isLoggedIn"
       :label="$t('settings.profile_tab')"
       icon="user"
-      >
+    >
       <ProfileTab />
     </div>
     <div
       v-if="isLoggedIn"
       :label="$t('settings.security_tab')"
       icon="lock"
-      >
+    >
       <SecurityTab />
     </div>
     <div
       :label="$t('settings.filtering')"
       icon="filter"
-      >
+    >
       <FilteringTab />
     </div>
     <div
       :label="$t('settings.theme')"
       icon="brush"
-      >
+    >
       <ThemeTab />
     </div>
     <div
       v-if="isLoggedIn"
       :label="$t('settings.notifications')"
       icon="chat"
-      >
+    >
       <NotificationsTab />
     </div>
     <div
       v-if="isLoggedIn"
       :label="$t('settings.data_import_export_tab')"
       icon="download"
-      >
+    >
       <DataImportExportTab />
     </div>
     <div
@@ -57,13 +57,13 @@
       :fullHeight="true"
       class="full-height"
       icon="eye-off"
-      >
+    >
       <MutesAndBlocksTab />
     </div>
     <div
       :label="$t('settings.version.title')"
       icon="info-circled"
-      >
+    >
       <VersionTab />
     </div>
   </tab-switcher>
-- 
cgit v1.2.3-70-g09d2


From 5ffcddd3b9b4b6600e4e51066b9410d7e852df11 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 27 May 2020 03:32:57 +0300
Subject: fixes. sorry for bad commit message i'm tired

---
 src/components/settings_modal/settings_modal.js    |  3 +
 .../settings_modal/settings_modal_content.js       |  3 -
 .../settings_modal/settings_modal_content.vue      |  2 +-
 .../settings_modal/tabs/theme_tab/theme_tab.scss   | 19 ++++--
 .../settings_modal/tabs/theme_tab/theme_tab.vue    | 26 ++++----
 src/components/tab_switcher/tab_switcher.js        | 19 +++++-
 src/components/tab_switcher/tab_switcher.scss      | 74 +++++++++++++++-------
 7 files changed, 96 insertions(+), 50 deletions(-)

(limited to 'src/components')

diff --git a/src/components/settings_modal/settings_modal.js b/src/components/settings_modal/settings_modal.js
index 32ef38d6..caa7c48c 100644
--- a/src/components/settings_modal/settings_modal.js
+++ b/src/components/settings_modal/settings_modal.js
@@ -24,6 +24,9 @@ const SettingsModal = {
     }
   },
   computed: {
+    currentSaveStateNotice () {
+      return this.$store.state.interface.settings.currentSaveStateNotice
+    },
     modalActivated () {
       return this.$store.state.interface.settingsModalState !== 'hidden'
     },
diff --git a/src/components/settings_modal/settings_modal_content.js b/src/components/settings_modal/settings_modal_content.js
index b27fbd28..48101a90 100644
--- a/src/components/settings_modal/settings_modal_content.js
+++ b/src/components/settings_modal/settings_modal_content.js
@@ -25,9 +25,6 @@ const SettingsModalContent = {
     ThemeTab
   },
   computed: {
-    currentSaveStateNotice () {
-      return this.$store.state.interface.settings.currentSaveStateNotice
-    },
     isLoggedIn () {
       return !!this.$store.state.users.currentUser
     }
diff --git a/src/components/settings_modal/settings_modal_content.vue b/src/components/settings_modal/settings_modal_content.vue
index 8b83e48c..283b4ef8 100644
--- a/src/components/settings_modal/settings_modal_content.vue
+++ b/src/components/settings_modal/settings_modal_content.vue
@@ -40,7 +40,7 @@
     <div
       v-if="isLoggedIn"
       :label="$t('settings.notifications')"
-      icon="chat"
+      icon="bell-ringing-o"
     >
       <NotificationsTab />
     </div>
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
index e0b1a2df..926eceff 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
@@ -95,20 +95,25 @@
     align-items: baseline;
     width: 100%;
     min-height: 30px;
-
-    .btn {
-      min-width: 1px;
-      flex: 0 auto;
-      padding: 0 1em;
-    }
+    margin-bottom: 1em;
 
     p {
       flex: 1;
       margin: 0;
       margin-right: .5em;
     }
+  }
 
-    margin-bottom: 1em;
+  .tab-header-buttons {
+    display: flex;
+    flex-direction: column;
+
+    .btn {
+      min-width: 1px;
+      flex: 0 auto;
+      padding: 0 1em;
+      margin-bottom: .5em;
+    }
   }
 
   .shadow-selector {
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
index 33098498..fcfad23b 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
@@ -126,18 +126,20 @@
         >
           <div class="tab-header">
             <p>{{ $t('settings.theme_help') }}</p>
-            <button
-              class="btn"
-              @click="clearOpacity"
-            >
-              {{ $t('settings.style.switcher.clear_opacity') }}
-            </button>
-            <button
-              class="btn"
-              @click="clearV1"
-            >
-              {{ $t('settings.style.switcher.clear_all') }}
-            </button>
+            <div class="tab-header-buttons">
+              <button
+                class="btn"
+                @click="clearOpacity"
+              >
+                {{ $t('settings.style.switcher.clear_opacity') }}
+              </button>
+              <button
+                class="btn"
+                @click="clearV1"
+              >
+                {{ $t('settings.style.switcher.clear_all') }}
+              </button>
+            </div>
           </div>
           <p>{{ $t('settings.theme_help_v2_1') }}</p>
           <h4>{{ $t('settings.style.common_colors.main') }}</h4>
diff --git a/src/components/tab_switcher/tab_switcher.js b/src/components/tab_switcher/tab_switcher.js
index 2d04e15d..616f1a19 100644
--- a/src/components/tab_switcher/tab_switcher.js
+++ b/src/components/tab_switcher/tab_switcher.js
@@ -95,9 +95,12 @@ export default Vue.component('tab-switcher', {
               disabled={slot.data.attrs.disabled}
               onClick={this.activateTab(index)}
               class={classesTab.join(' ')}
+              type="button"
             >
               {!slot.data.attrs.icon ? '' : (<i class={'tab-icon icon-' + slot.data.attrs.icon}/>)}
-              {slot.data.attrs.label}
+              <span class="text">
+                {slot.data.attrs.label}
+              </span>
             </button>
           </div>
         )
@@ -110,13 +113,23 @@ export default Vue.component('tab-switcher', {
       if (slot.data.attrs.fullHeight) {
         classes.push('full-height')
       }
+      const newSlot = (
+        <div class={classes}>
+          {
+            this.sideTabBar
+              ? <h1 class="mobile-label">{slot.data.attrs.label}</h1>
+              : ''
+          }
+          {slot}
+        </div>
+      )
 
       if (this.renderOnlyFocused) {
         return active
-          ? <div class={classes.join(' ')}>{slot}</div>
+          ? <div class={classes.join(' ')}>{newSlot}</div>
           : <div class={classes.join(' ')}></div>
       }
-      return <div class={classes.join(' ')}>{slot}</div>
+      return <div class={classes.join(' ')}>{newSlot}</div>
     })
 
     return (
diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
index d60e065b..db58f4cd 100644
--- a/src/components/tab_switcher/tab_switcher.scss
+++ b/src/components/tab_switcher/tab_switcher.scss
@@ -10,12 +10,14 @@
 
   &.top-tabs {
     flex-direction: column;
+
     > .tabs {
       width: 100%;
       overflow-y: hidden;
       overflow-x: auto;
       padding-top: 5px;
       flex-direction: row;
+
       &::after, &::before {
         content: '';
         flex: 1 1 auto;
@@ -51,34 +53,47 @@
 
   &.side-tabs {
     flex-direction: row;
+
     @media all and (max-width: 800px) {
       overflow-x: auto;
     }
+
     > .contents {
-      flex: 0 1 80%;
-      @media all and (max-width: 800px) {
-        min-width: 96vw;
-      }
+      flex: 1 1 auto;
     }
+
     > .tabs {
-      flex: 1 0 auto;
+      flex: 0 0 auto;
       overflow-y: auto;
       overflow-x: hidden;
       flex-direction: column;
+
       &::after, &::before {
-        flex: 1 0 .5em;
+        flex-shrink: 0;
+        flex-basis: .5em;
         content: '';
         border-right: 1px solid;
         border-right-color: $fallback--border;
         border-right-color: var(--border, $fallback--border);
       }
+
+      &::after {
+        flex-grow: 1;
+      }
+
       &::before {
         flex-grow: 0;
       }
+
       .tab-wrapper {
         min-width: 10em;
         display: flex;
         flex-direction: column;
+
+        @media all and (max-width: 800px) {
+          min-width: 1em;
+        }
+
         &:not(.active)::after {
           top: 0;
           right: 0;
@@ -87,6 +102,7 @@
           border-right-color: $fallback--border;
           border-right-color: var(--border, $fallback--border);
         }
+
         &::before {
           flex: 0 0 6px;
           content: '';
@@ -94,6 +110,7 @@
           border-right-color: $fallback--border;
           border-right-color: var(--border, $fallback--border);
         }
+
         &:last-child .tab {
           margin-bottom: 0;
         }
@@ -106,26 +123,23 @@
         min-width: 1px;
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
+        padding-left: 1em;
         padding-right: calc(1em + 200px);
-        margin-right: 6px - 200px;
-        margin-left: 6px;
-      }
-
-      .tab-wrapper {
-        min-width: 10em;
-        &:not(.active)::after {
-          top: 0;
-          right: 0;
-          bottom: 0;
-          border-right: 1px solid;
-          border-right-color: $fallback--border;
-          border-right-color: var(--border, $fallback--border);
+        margin-right: calc(1em - 200px);
+        margin-left: 1em;
+        @media all and (max-width: 800px) {
+          padding-left: .25em;
+          padding-right: calc(.25em + 200px);
+          margin-right: calc(.25em - 200px);
+          margin-left: .25em;
+          .text {
+            display: none
+          }
         }
       }
     }
   }
 
-
   .contents {
     flex: 1 0 auto;
     min-height: 0px;
@@ -142,14 +156,14 @@
   .tab {
     position: relative;
     white-space: nowrap;
-
     padding: 6px 1em;
+    background-color: $fallback--fg;
+    background-color: var(--tab, $fallback--fg);
+
     &, &:active .tab-icon {
       color: $fallback--text;
       color: var(--tabText, $fallback--text);
     }
-    background-color: $fallback--fg;
-    background-color: var(--tab, $fallback--fg);
 
     &:not(.active) {
       z-index: 4;
@@ -173,7 +187,6 @@
     }
   }
 
-
   .tabs {
     display: flex;
     position: relative;
@@ -198,4 +211,17 @@
       }
     }
   }
+
+  .mobile-label {
+    padding-left: .3em;
+    padding-bottom: .25em;
+    margin-top: .5em;
+    margin-left: .2em;
+    margin-bottom: .25em;
+    border-bottom: 1px solid var(--border, $fallback--border);
+
+    @media all and (min-width: 800px) {
+      display: none;
+    }
+  }
 }
-- 
cgit v1.2.3-70-g09d2


From 9a20a9093287b1835d635398ea900e5dc2ca3484 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 28 May 2020 21:26:33 +0300
Subject: fixed the remaining issues

---
 src/components/settings_modal/settings_modal_content.scss |  4 ----
 src/components/settings_modal/settings_modal_content.vue  |  1 -
 src/components/tab_switcher/tab_switcher.js               | 15 ++++++---------
 src/components/tab_switcher/tab_switcher.scss             | 11 ++++++++++-
 4 files changed, 16 insertions(+), 15 deletions(-)

(limited to 'src/components')

diff --git a/src/components/settings_modal/settings_modal_content.scss b/src/components/settings_modal/settings_modal_content.scss
index f80306c6..a3fef1cf 100644
--- a/src/components/settings_modal/settings_modal_content.scss
+++ b/src/components/settings_modal/settings_modal_content.scss
@@ -2,10 +2,6 @@
 .settings_tab-switcher {
   height: 100%;
 
-  .full-height {
-    height: 100%;
-  }
-
   .setting-item {
     border-bottom: 2px solid var(--fg, $fallback--fg);
     margin: 1em 1em 1.4em;
diff --git a/src/components/settings_modal/settings_modal_content.vue b/src/components/settings_modal/settings_modal_content.vue
index 283b4ef8..2156844f 100644
--- a/src/components/settings_modal/settings_modal_content.vue
+++ b/src/components/settings_modal/settings_modal_content.vue
@@ -55,7 +55,6 @@
       v-if="isLoggedIn"
       :label="$t('settings.mutes_and_blocks')"
       :fullHeight="true"
-      class="full-height"
       icon="eye-off"
     >
       <MutesAndBlocksTab />
diff --git a/src/components/tab_switcher/tab_switcher.js b/src/components/tab_switcher/tab_switcher.js
index 616f1a19..7891cb78 100644
--- a/src/components/tab_switcher/tab_switcher.js
+++ b/src/components/tab_switcher/tab_switcher.js
@@ -113,23 +113,20 @@ export default Vue.component('tab-switcher', {
       if (slot.data.attrs.fullHeight) {
         classes.push('full-height')
       }
-      const newSlot = (
+      const renderSlot = (!this.renderOnlyFocused || active)
+        ? slot
+        : ''
+
+      return (
         <div class={classes}>
           {
             this.sideTabBar
               ? <h1 class="mobile-label">{slot.data.attrs.label}</h1>
               : ''
           }
-          {slot}
+          {renderSlot}
         </div>
       )
-
-      if (this.renderOnlyFocused) {
-        return active
-          ? <div class={classes.join(' ')}>{newSlot}</div>
-          : <div class={classes.join(' ')}></div>
-      }
-      return <div class={classes.join(' ')}>{newSlot}</div>
     })
 
     return (
diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
index db58f4cd..2a364731 100644
--- a/src/components/tab_switcher/tab_switcher.scss
+++ b/src/components/tab_switcher/tab_switcher.scss
@@ -125,8 +125,9 @@
         border-bottom-right-radius: 0;
         padding-left: 1em;
         padding-right: calc(1em + 200px);
-        margin-right: calc(1em - 200px);
+        margin-right: -200px;
         margin-left: 1em;
+
         @media all and (max-width: 800px) {
           padding-left: .25em;
           padding-right: calc(.25em + 200px);
@@ -147,6 +148,14 @@
     .hidden {
       display: none;
     }
+    .full-height {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      > *:not(.mobile-label) {
+        flex: 1;
+      }
+    }
 
     &.scrollable-tabs {
       overflow-y: auto;
-- 
cgit v1.2.3-70-g09d2


From 94436c1f858dc0fcd8a876df202241fb96f029cc Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 29 May 2020 13:39:30 +0300
Subject: fixed tab not hiding

---
 src/components/tab_switcher/tab_switcher.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components')

diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
index 2a364731..d2ef4857 100644
--- a/src/components/tab_switcher/tab_switcher.scss
+++ b/src/components/tab_switcher/tab_switcher.scss
@@ -148,7 +148,7 @@
     .hidden {
       display: none;
     }
-    .full-height {
+    .full-height:not(.hidden) {
       height: 100%;
       display: flex;
       flex-direction: column;
-- 
cgit v1.2.3-70-g09d2


From 4fae2f8ea878bedfce89402f19adffaedec65baf Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 2 Jun 2020 01:10:52 +0300
Subject: track if settings modal has been opened once

---
 src/components/settings_modal/settings_modal.js  | 3 +++
 src/components/settings_modal/settings_modal.vue | 2 +-
 src/modules/interface.js                         | 4 ++++
 3 files changed, 8 insertions(+), 1 deletion(-)

(limited to 'src/components')

diff --git a/src/components/settings_modal/settings_modal.js b/src/components/settings_modal/settings_modal.js
index caa7c48c..f0d49c91 100644
--- a/src/components/settings_modal/settings_modal.js
+++ b/src/components/settings_modal/settings_modal.js
@@ -30,6 +30,9 @@ const SettingsModal = {
     modalActivated () {
       return this.$store.state.interface.settingsModalState !== 'hidden'
     },
+    modalOpenedOnce () {
+      return this.$store.state.interface.settingsModalLoaded
+    },
     modalPeeked () {
       return this.$store.state.interface.settingsModalState === 'minimized'
     }
diff --git a/src/components/settings_modal/settings_modal.vue b/src/components/settings_modal/settings_modal.vue
index ded02f4a..6bc64ed0 100644
--- a/src/components/settings_modal/settings_modal.vue
+++ b/src/components/settings_modal/settings_modal.vue
@@ -43,7 +43,7 @@
         </button>
       </div>
       <div class="panel-body">
-        <SettingsModalContent v-if="modalActivated" />
+        <SettingsModalContent v-if="modalOpenedOnce" />
       </div>
     </div>
   </Modal>
diff --git a/src/modules/interface.js b/src/modules/interface.js
index e55b7290..eeebd65e 100644
--- a/src/modules/interface.js
+++ b/src/modules/interface.js
@@ -2,6 +2,7 @@ import { set, delete as del } from 'vue'
 
 const defaultState = {
   settingsModalState: 'hidden',
+  settingsModalLoaded: false,
   settings: {
     currentSaveStateNotice: null,
     noticeClearTimeout: null,
@@ -54,6 +55,9 @@ const interfaceMod = {
     },
     openSettingsModal (state) {
       state.settingsModalState = 'visible'
+      if (!state.settingsModalLoaded) {
+        state.settingsModalLoaded = true
+      }
     }
   },
   actions: {
-- 
cgit v1.2.3-70-g09d2


From de3a376bebb25fefb1fe513c3491ee6c4e48af0f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 2 Jun 2020 01:16:10 +0300
Subject: fixed case in class name

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

(limited to 'src/components')

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 1c287aa7..3137cb9d 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -28,17 +28,17 @@
         </small>
         <small
           v-if="showReasonMutedThread && muteWordHits.length === 0"
-          class="mutedThread"
+          class="muted-thread"
         >
           {{ $t('status.thread_muted') }}
         </small>
         <small
           v-if="showReasonMutedThread && muteWordHits.length > 0"
-          class="mutedThread"
+          class="muted-Thread"
         >
           {{ $t('status.thread_muted_and_words') }}
         </small>
-        <small class="muteWords">{{ muteWordHits.join(', ') }}</small>
+        <small class="mute-words">{{ muteWordHits.join(', ') }}</small>
         <a
           href="#"
           class="unmute"
@@ -658,7 +658,7 @@ $status-margin: 0.75em;
     margin-left: auto;
   }
 
-  .mutedThread, .muteWords {
+  .muted-thread, .mute-words {
     margin-left: 10px;
   }
 }
-- 
cgit v1.2.3-70-g09d2


From d872d55832cf3af43f698edd28b99f0c3c515f5c Mon Sep 17 00:00:00 2001
From: lain <lain@soykaf.club>
Date: Thu, 4 Jun 2020 15:50:44 +0200
Subject: StatusContent: Try to get hashtag from dataset first.

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

(limited to 'src/components')

diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js
index ccc01b6f..c0a71e8f 100644
--- a/src/components/status_content/status_content.js
+++ b/src/components/status_content/status_content.js
@@ -176,8 +176,8 @@ const StatusContent = {
           }
         }
         if (target.rel.match(/(?:^|\s)tag(?:$|\s)/) || target.className.match(/hashtag/)) {
-          // Extract tag name from link url
-          const tag = extractTagFromUrl(target.href)
+          // Extract tag name from dataset or link url
+          const tag = target.dataset.tag || extractTagFromUrl(target.href)
           if (tag) {
             const link = this.generateTagLink(tag)
             this.$router.push(link)
-- 
cgit v1.2.3-70-g09d2


From cb99dc2b270d2554f7e2fc85707786a74563e0ca Mon Sep 17 00:00:00 2001
From: lain <lain@soykaf.club>
Date: Thu, 4 Jun 2020 16:30:28 +0200
Subject: MediaModal: Close on browser navigation events.

---
 src/components/media_modal/media_modal.js | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'src/components')

diff --git a/src/components/media_modal/media_modal.js b/src/components/media_modal/media_modal.js
index abb18c7d..24764e80 100644
--- a/src/components/media_modal/media_modal.js
+++ b/src/components/media_modal/media_modal.js
@@ -84,10 +84,12 @@ const MediaModal = {
     }
   },
   mounted () {
+    window.addEventListener('popstate', this.hide)
     document.addEventListener('keyup', this.handleKeyupEvent)
     document.addEventListener('keydown', this.handleKeydownEvent)
   },
   destroyed () {
+    window.removeEventListener('popstate', this.hide)
     document.removeEventListener('keyup', this.handleKeyupEvent)
     document.removeEventListener('keydown', this.handleKeydownEvent)
   }
-- 
cgit v1.2.3-70-g09d2


From 282e10e3bec1a76da2d4c2a89152b441a2273fb7 Mon Sep 17 00:00:00 2001
From: lain <lain@soykaf.club>
Date: Fri, 5 Jun 2020 13:42:39 +0200
Subject: Settings: Keep a local version of the mutedWordsString

Without this it was impossible to use newlines
---
 src/components/settings/settings.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

(limited to 'src/components')

diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js
index 31a9e9be..5d01a05f 100644
--- a/src/components/settings/settings.js
+++ b/src/components/settings/settings.js
@@ -30,7 +30,8 @@ const settings = {
         Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'audioTracks'),
 
       backendVersion: instance.backendVersion,
-      frontendVersion: instance.frontendVersion
+      frontendVersion: instance.frontendVersion,
+      muteWordsStringLocal: this.$store.getters.mergedConfig.muteWords.join('\n') 
     }
   },
   components: {
@@ -86,8 +87,11 @@ const settings = {
       .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),
     // Special cases (need to transform values or perform actions first)
     muteWordsString: {
-      get () { return this.$store.getters.mergedConfig.muteWords.join('\n') },
+      get () { 
+        return this.muteWordsStringLocal
+      },
       set (value) {
+        this.muteWordsStringLocal = value
         this.$store.dispatch('setOption', {
           name: 'muteWords',
           value: filter(value.split('\n'), (word) => trim(word).length > 0)
-- 
cgit v1.2.3-70-g09d2


From c4c5568b98802d05b303a38be61e68386e3f7cd0 Mon Sep 17 00:00:00 2001
From: lain <lain@soykaf.club>
Date: Fri, 5 Jun 2020 13:51:47 +0200
Subject: Linting fixes.

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

(limited to 'src/components')

diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js
index 5d01a05f..527b9a8d 100644
--- a/src/components/settings/settings.js
+++ b/src/components/settings/settings.js
@@ -31,7 +31,7 @@ const settings = {
 
       backendVersion: instance.backendVersion,
       frontendVersion: instance.frontendVersion,
-      muteWordsStringLocal: this.$store.getters.mergedConfig.muteWords.join('\n') 
+      muteWordsStringLocal: this.$store.getters.mergedConfig.muteWords.join('\n')
     }
   },
   components: {
@@ -87,7 +87,7 @@ const settings = {
       .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),
     // Special cases (need to transform values or perform actions first)
     muteWordsString: {
-      get () { 
+      get () {
         return this.muteWordsStringLocal
       },
       set (value) {
-- 
cgit v1.2.3-70-g09d2


From ba4c189c53fd6450de7247e55203f18ae65c48e8 Mon Sep 17 00:00:00 2001
From: lain <lain@soykaf.club>
Date: Fri, 5 Jun 2020 17:26:13 +0200
Subject: ReactButton: Change the combined emoji (heart) to a simple one.

---
 src/components/react_button/react_button.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components')

diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js
index abc3bf07..f0931446 100644
--- a/src/components/react_button/react_button.js
+++ b/src/components/react_button/react_button.js
@@ -24,7 +24,7 @@ const ReactButton = {
   },
   computed: {
     commonEmojis () {
-      return ['❤️', '😠', '👀', '😂', '🔥']
+      return ['👍', '😠', '👀', '😂', '🔥']
     },
     emojis () {
       if (this.filterWord !== '') {
-- 
cgit v1.2.3-70-g09d2


From 2aabd8ed1a75be0d4079d23d0bf6702883ff4959 Mon Sep 17 00:00:00 2001
From: lain <lain@soykaf.club>
Date: Fri, 5 Jun 2020 17:55:19 +0200
Subject: StillImage: Make it work properly in both firefox and chrome.

---
 src/components/still-image/still-image.vue | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

(limited to 'src/components')

diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue
index 4137bd59..08af26f6 100644
--- a/src/components/still-image/still-image.vue
+++ b/src/components/still-image/still-image.vue
@@ -23,12 +23,21 @@
 
 <style lang="scss">
 @import '../../_variables.scss';
+.contain-fit {
+  .still-image {
+    img {
+      height: 100%;
+    }
+  }
+}
+
 .still-image {
   position: relative;
   line-height: 0;
   overflow: hidden;
   width: 100%;
   height: 100%;
+  display: flex;
 
   &:hover canvas {
     display: none;
@@ -36,8 +45,8 @@
 
   img {
     width: 100%;
-    height: 100%;
     object-fit: contain;
+    align-self: center;
   }
 
   &.animated {
-- 
cgit v1.2.3-70-g09d2


From ebf2ce84fdd7e175f5715452400ec3bdf789310b Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sat, 6 Jun 2020 23:08:52 +0300
Subject: alignment fixes

---
 src/components/notifications/notifications.scss |  6 +--
 src/components/status/status.vue                | 62 +++++++++++++++++++------
 src/i18n/en.json                                |  4 +-
 3 files changed, 52 insertions(+), 20 deletions(-)

(limited to 'src/components')

diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 9efcfcf8..b675af5a 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -36,6 +36,8 @@
   border-bottom: 1px solid;
   border-color: $fallback--border;
   border-color: var(--border, $fallback--border);
+  word-wrap: break-word;
+  word-break: break-word;
 
   &:hover .animated.avatar {
     canvas {
@@ -46,10 +48,6 @@
     }
   }
 
-  .muted {
-    padding: .25em .6em;
-  }
-
   .non-mention {
     display: flex;
     flex: 1;
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 3137cb9d..336f912a 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -17,7 +17,7 @@
     </div>
     <template v-if="muted && !isPreview">
       <div class="media status container muted">
-        <small>
+        <small class="username">
           <i
             v-if="muted && retweet"
             class="button-icon icon-retweet"
@@ -27,18 +27,23 @@
           </router-link>
         </small>
         <small
-          v-if="showReasonMutedThread && muteWordHits.length === 0"
-          class="muted-thread"
+          v-if="showReasonMutedThread"
+          class="mute-thread"
         >
           {{ $t('status.thread_muted') }}
         </small>
         <small
           v-if="showReasonMutedThread && muteWordHits.length > 0"
-          class="muted-Thread"
+          class="mute-thread"
         >
           {{ $t('status.thread_muted_and_words') }}
         </small>
-        <small class="mute-words">{{ muteWordHits.join(', ') }}</small>
+        <small
+          class="mute-words"
+          :title="muteWordHits.join(', ')"
+        >
+          {{ muteWordHits.join(', ') }}
+        </small>
         <a
           href="#"
           class="unmute"
@@ -653,19 +658,48 @@ $status-margin: 0.75em;
 }
 
 .muted {
-  padding: 0.25em 0.5em;
-  button {
-    margin-left: auto;
+  padding: .25em .6em;
+  height: 1.2em;
+  line-height: 1.2em;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: flex;
+  flex-wrap: nowrap;
+
+  .username, .mute-thread, .mute-words {
+    word-wrap: normal;
+    word-break: normal;
+    white-space: nowrap;
   }
 
-  .muted-thread, .mute-words {
-    margin-left: 10px;
+  .username, .mute-words {
+    text-overflow: ellipsis;
+    overflow: hidden;
   }
-}
 
-a.unmute {
-  display: block;
-  margin-left: auto;
+  .username {
+    flex: 0 1 auto;
+    margin-right: .2em;
+  }
+
+  .mute-thread {
+    flex: 0 0 auto;
+  }
+
+  .mute-words {
+    flex: 1 0 5em;
+    margin-left: .2em;
+    &::before {
+      content: ' '
+    }
+  }
+
+  .unmute {
+    flex: 0 0 auto;
+    margin-left: auto;
+    display: block;
+    margin-left: auto;
+  }
 }
 
 .reply-body {
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 61b818a6..5bcf074b 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -622,8 +622,8 @@
     "unmute_conversation": "Unmute conversation",
     "status_unavailable": "Status unavailable",
     "copy_link": "Copy link to status",
-    "thread_muted": "Conversation muted",
-    "thread_muted_and_words": "Conversation muted, contains filtered words:"
+    "thread_muted": "Thread muted",
+    "thread_muted_and_words": ", has words:"
   },
   "user_card": {
     "approve": "Approve",
-- 
cgit v1.2.3-70-g09d2


From 03952832b4363c651266d14bf14a20a0215e6c3c Mon Sep 17 00:00:00 2001
From: Karol Kosek <krkk@krkk.ct8.pl>
Date: Sat, 6 Jun 2020 22:43:56 +0200
Subject: Fix the cropped button shadow in 2FA settings

---
 src/components/user_settings/mfa.vue | 1 -
 1 file changed, 1 deletion(-)

(limited to 'src/components')

diff --git a/src/components/user_settings/mfa.vue b/src/components/user_settings/mfa.vue
index 14ea10a1..2c1c786c 100644
--- a/src/components/user_settings/mfa.vue
+++ b/src/components/user_settings/mfa.vue
@@ -144,7 +144,6 @@
 }
 .mfa-settings {
   .mfa-heading, .method-item {
-    overflow: hidden;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
-- 
cgit v1.2.3-70-g09d2


From 68482fd3a6870514c7e8bd0fe433f24711e97ce9 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 7 Jun 2020 00:15:10 +0300
Subject: move helpers out of tabs directory

---
 .../helpers/shared_computed_object.js              | 58 ++++++++++++++++++++++
 .../settings_modal/tabs/filtering_tab.js           |  2 +-
 src/components/settings_modal/tabs/general_tab.js  |  2 +-
 .../tabs/helpers/shared_computed_object.js         | 58 ----------------------
 4 files changed, 60 insertions(+), 60 deletions(-)
 create mode 100644 src/components/settings_modal/helpers/shared_computed_object.js
 delete mode 100644 src/components/settings_modal/tabs/helpers/shared_computed_object.js

(limited to 'src/components')

diff --git a/src/components/settings_modal/helpers/shared_computed_object.js b/src/components/settings_modal/helpers/shared_computed_object.js
new file mode 100644
index 00000000..86703697
--- /dev/null
+++ b/src/components/settings_modal/helpers/shared_computed_object.js
@@ -0,0 +1,58 @@
+import {
+  instanceDefaultProperties,
+  multiChoiceProperties,
+  defaultState as configDefaultState
+} from 'src/modules/config.js'
+
+const SharedComputedObject = () => ({
+  user () {
+    return this.$store.state.users.currentUser
+  },
+  // Getting localized values for instance-default properties
+  ...instanceDefaultProperties
+    .filter(key => multiChoiceProperties.includes(key))
+    .map(key => [
+      key + 'DefaultValue',
+      function () {
+        return this.$store.getters.instanceDefaultConfig[key]
+      }
+    ])
+    .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),
+  ...instanceDefaultProperties
+    .filter(key => !multiChoiceProperties.includes(key))
+    .map(key => [
+      key + 'LocalizedValue',
+      function () {
+        return this.$t('settings.values.' + this.$store.getters.instanceDefaultConfig[key])
+      }
+    ])
+    .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),
+  // Generating computed values for vuex properties
+  ...Object.keys(configDefaultState)
+    .map(key => [key, {
+      get () { return this.$store.getters.mergedConfig[key] },
+      set (value) {
+        this.$store.dispatch('setOption', { name: key, value })
+      }
+    }])
+    .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),
+  // Special cases (need to transform values or perform actions first)
+  useStreamingApi: {
+    get () { return this.$store.getters.mergedConfig.useStreamingApi },
+    set (value) {
+      const promise = value
+        ? this.$store.dispatch('enableMastoSockets')
+        : this.$store.dispatch('disableMastoSockets')
+
+      promise.then(() => {
+        this.$store.dispatch('setOption', { name: 'useStreamingApi', value })
+      }).catch((e) => {
+        console.error('Failed starting MastoAPI Streaming socket', e)
+        this.$store.dispatch('disableMastoSockets')
+        this.$store.dispatch('setOption', { name: 'useStreamingApi', value: false })
+      })
+    }
+  }
+})
+
+export default SharedComputedObject
diff --git a/src/components/settings_modal/tabs/filtering_tab.js b/src/components/settings_modal/tabs/filtering_tab.js
index dd7ecaf7..224a7f47 100644
--- a/src/components/settings_modal/tabs/filtering_tab.js
+++ b/src/components/settings_modal/tabs/filtering_tab.js
@@ -1,7 +1,7 @@
 import { filter, trim } from 'lodash'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 
-import SharedComputedObject from './helpers/shared_computed_object.js'
+import SharedComputedObject from '../helpers/shared_computed_object.js'
 
 const FilteringTab = {
   data () {
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index 9df1da79..0eb37e44 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -1,7 +1,7 @@
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
 
-import SharedComputedObject from './helpers/shared_computed_object.js'
+import SharedComputedObject from '../helpers/shared_computed_object.js'
 
 const GeneralTab = {
   data () {
diff --git a/src/components/settings_modal/tabs/helpers/shared_computed_object.js b/src/components/settings_modal/tabs/helpers/shared_computed_object.js
deleted file mode 100644
index 86703697..00000000
--- a/src/components/settings_modal/tabs/helpers/shared_computed_object.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import {
-  instanceDefaultProperties,
-  multiChoiceProperties,
-  defaultState as configDefaultState
-} from 'src/modules/config.js'
-
-const SharedComputedObject = () => ({
-  user () {
-    return this.$store.state.users.currentUser
-  },
-  // Getting localized values for instance-default properties
-  ...instanceDefaultProperties
-    .filter(key => multiChoiceProperties.includes(key))
-    .map(key => [
-      key + 'DefaultValue',
-      function () {
-        return this.$store.getters.instanceDefaultConfig[key]
-      }
-    ])
-    .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),
-  ...instanceDefaultProperties
-    .filter(key => !multiChoiceProperties.includes(key))
-    .map(key => [
-      key + 'LocalizedValue',
-      function () {
-        return this.$t('settings.values.' + this.$store.getters.instanceDefaultConfig[key])
-      }
-    ])
-    .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),
-  // Generating computed values for vuex properties
-  ...Object.keys(configDefaultState)
-    .map(key => [key, {
-      get () { return this.$store.getters.mergedConfig[key] },
-      set (value) {
-        this.$store.dispatch('setOption', { name: key, value })
-      }
-    }])
-    .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}),
-  // Special cases (need to transform values or perform actions first)
-  useStreamingApi: {
-    get () { return this.$store.getters.mergedConfig.useStreamingApi },
-    set (value) {
-      const promise = value
-        ? this.$store.dispatch('enableMastoSockets')
-        : this.$store.dispatch('disableMastoSockets')
-
-      promise.then(() => {
-        this.$store.dispatch('setOption', { name: 'useStreamingApi', value })
-      }).catch((e) => {
-        console.error('Failed starting MastoAPI Streaming socket', e)
-        this.$store.dispatch('disableMastoSockets')
-        this.$store.dispatch('setOption', { name: 'useStreamingApi', value: false })
-      })
-    }
-  }
-})
-
-export default SharedComputedObject
-- 
cgit v1.2.3-70-g09d2


From 10070394780ac79e9ee1e8548500586a1f78f65b Mon Sep 17 00:00:00 2001
From: Sergey Suprunenko <suprunenko.s@gmail.com>
Date: Sun, 10 May 2020 12:54:55 +0200
Subject: Autocomplete domain mutes from list of known instances

---
 CHANGELOG.md                                       |  1 +
 .../domain_mute_card/domain_mute_card.js           | 11 +++++++++
 .../domain_mute_card/domain_mute_card.vue          | 15 ++++++++++++
 .../settings_modal/tabs/mutes_and_blocks_tab.js    | 28 +++++++++++++++-------
 .../settings_modal/tabs/mutes_and_blocks_tab.vue   | 21 +++++++---------
 src/i18n/en.json                                   |  2 +-
 src/modules/instance.js                            | 17 +++++++++++++
 src/services/api/api.service.js                    |  6 +++++
 8 files changed, 79 insertions(+), 22 deletions(-)

(limited to 'src/components')

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3e467bc9..11f539da 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 ### Add
 - Added private notifications option for push notifications
 - 'Copy link' button for statuses (in the ellipsis menu)
+- Autocomplete domains from list of known instances
 
 ### Changed
 - Registration page no longer requires email if the server is configured not to require it
diff --git a/src/components/domain_mute_card/domain_mute_card.js b/src/components/domain_mute_card/domain_mute_card.js
index c8e838ba..f234dcb0 100644
--- a/src/components/domain_mute_card/domain_mute_card.js
+++ b/src/components/domain_mute_card/domain_mute_card.js
@@ -5,9 +5,20 @@ const DomainMuteCard = {
   components: {
     ProgressButton
   },
+  computed: {
+    user () {
+      return this.$store.state.users.currentUser
+    },
+    muted () {
+      return this.user.domainMutes.includes(this.domain)
+    }
+  },
   methods: {
     unmuteDomain () {
       return this.$store.dispatch('unmuteDomain', this.domain)
+    },
+    muteDomain () {
+      return this.$store.dispatch('muteDomain', this.domain)
     }
   }
 }
diff --git a/src/components/domain_mute_card/domain_mute_card.vue b/src/components/domain_mute_card/domain_mute_card.vue
index 567d81c5..97aee243 100644
--- a/src/components/domain_mute_card/domain_mute_card.vue
+++ b/src/components/domain_mute_card/domain_mute_card.vue
@@ -4,6 +4,7 @@
       {{ domain }}
     </div>
     <ProgressButton
+      v-if="muted"
       :click="unmuteDomain"
       class="btn btn-default"
     >
@@ -12,6 +13,16 @@
         {{ $t('domain_mute_card.unmute_progress') }}
       </template>
     </ProgressButton>
+    <ProgressButton
+      v-else
+      :click="muteDomain"
+      class="btn btn-default"
+    >
+      {{ $t('domain_mute_card.mute') }}
+      <template slot="progress">
+        {{ $t('domain_mute_card.mute_progress') }}
+      </template>
+    </ProgressButton>
   </div>
 </template>
 
@@ -34,5 +45,9 @@
   button {
     width: 10em;
   }
+
+  .autosuggest-results & {
+    padding-left: 1em;
+  }
 }
 </style>
diff --git a/src/components/settings_modal/tabs/mutes_and_blocks_tab.js b/src/components/settings_modal/tabs/mutes_and_blocks_tab.js
index b0043dbb..40a87b81 100644
--- a/src/components/settings_modal/tabs/mutes_and_blocks_tab.js
+++ b/src/components/settings_modal/tabs/mutes_and_blocks_tab.js
@@ -32,12 +32,12 @@ const DomainMuteList = withSubscription({
 const MutesAndBlocks = {
   data () {
     return {
-      activeTab: 'profile',
-      newDomainToMute: ''
+      activeTab: 'profile'
     }
   },
   created () {
     this.$store.dispatch('fetchTokens')
+    this.$store.dispatch('getKnownDomains')
   },
   components: {
     TabSwitcher,
@@ -51,6 +51,14 @@ const MutesAndBlocks = {
     Autosuggest,
     Checkbox
   },
+  computed: {
+    knownDomains () {
+      return this.$store.state.instance.knownDomains
+    },
+    user () {
+      return this.$store.state.users.currentUser
+    }
+  },
   methods: {
     importFollows (file) {
       return this.$store.state.api.backendInteractor.importFollows({ file })
@@ -86,13 +94,13 @@ const MutesAndBlocks = {
     filterUnblockedUsers (userIds) {
       return reject(userIds, (userId) => {
         const relationship = this.$store.getters.relationship(this.userId)
-        return relationship.blocking || userId === this.$store.state.users.currentUser.id
+        return relationship.blocking || userId === this.user.id
       })
     },
     filterUnMutedUsers (userIds) {
       return reject(userIds, (userId) => {
         const relationship = this.$store.getters.relationship(this.userId)
-        return relationship.muting || userId === this.$store.state.users.currentUser.id
+        return relationship.muting || userId === this.user.id
       })
     },
     queryUserIds (query) {
@@ -111,12 +119,16 @@ const MutesAndBlocks = {
     unmuteUsers (ids) {
       return this.$store.dispatch('unmuteUsers', ids)
     },
+    filterUnMutedDomains (urls) {
+      return urls.filter(url => !this.user.domainMutes.includes(url))
+    },
+    queryKnownDomains (query) {
+      return new Promise((resolve, reject) => {
+        resolve(this.knownDomains.filter(url => url.toLowerCase().includes(query)))
+      })
+    },
     unmuteDomains (domains) {
       return this.$store.dispatch('unmuteDomains', domains)
-    },
-    muteDomain () {
-      return this.$store.dispatch('muteDomain', this.newDomainToMute)
-        .then(() => { this.newDomainToMute = '' })
     }
   }
 }
diff --git a/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue b/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue
index 6884b7be..5a1cf2c0 100644
--- a/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue
+++ b/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue
@@ -119,21 +119,16 @@
 
         <div :label="$t('settings.domain_mutes')">
           <div class="domain-mute-form">
-            <input
-              v-model="newDomainToMute"
+            <Autosuggest
+              :filter="filterUnMutedDomains"
+              :query="queryKnownDomains"
               :placeholder="$t('settings.type_domains_to_mute')"
-              type="text"
-              @keyup.enter="muteDomain"
-            >
-            <ProgressButton
-              class="btn btn-default domain-mute-button"
-              :click="muteDomain"
             >
-              {{ $t('domain_mute_card.mute') }}
-              <template slot="progress">
-                {{ $t('domain_mute_card.mute_progress') }}
-              </template>
-            </ProgressButton>
+              <DomainMuteCard
+                slot-scope="row"
+                :domain="row.item"
+              />
+            </Autosuggest>
           </div>
           <DomainMuteList
             :refresh="true"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index c322e538..eefe10e5 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -401,7 +401,7 @@
     "theme_help_v2_1": "You can also override certain component's colors and opacity by toggling the checkbox, use \"Clear all\" button to clear all overrides.",
     "theme_help_v2_2": "Icons underneath some entries are background/text contrast indicators, hover over for detailed info. Please keep in mind that when using transparency contrast indicators show the worst possible case.",
     "tooltipRadius": "Tooltips/alerts",
-    "type_domains_to_mute": "Type in domains to mute",
+    "type_domains_to_mute": "Search domains to mute",
     "upload_a_photo": "Upload a photo",
     "user_settings": "User Settings",
     "values": {
diff --git a/src/modules/instance.js b/src/modules/instance.js
index da82eb01..ec5f4e54 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -1,6 +1,7 @@
 import { set } from 'vue'
 import { getPreset, applyTheme } from '../services/style_setter/style_setter.js'
 import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js'
+import apiService from '../services/api/api.service.js'
 import { instanceDefaultProperties } from './config.js'
 
 const defaultState = {
@@ -48,6 +49,7 @@ const defaultState = {
   postFormats: [],
   restrictedNicknames: [],
   safeDM: true,
+  knownDomains: [],
 
   // Feature-set, apparently, not everything here is reported...
   chatAvailable: false,
@@ -80,6 +82,9 @@ const instance = {
       if (typeof value !== 'undefined') {
         set(state, name, value)
       }
+    },
+    setKnownDomains (state, domains) {
+      state.knownDomains = domains
     }
   },
   getters: {
@@ -182,6 +187,18 @@ const instance = {
         state.emojiFetched = true
         dispatch('getStaticEmoji')
       }
+    },
+
+    async getKnownDomains ({ commit, rootState }) {
+      try {
+        const result = await apiService.fetchKnownDomains({
+          credentials: rootState.users.currentUser.credentials
+        })
+        commit('setKnownDomains', result)
+      } catch (e) {
+        console.warn("Can't load known domains")
+        console.warn(e)
+      }
     }
   }
 }
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 9c7530a2..b3082bc5 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -75,6 +75,7 @@ const MASTODON_SEARCH_2 = `/api/v2/search`
 const MASTODON_USER_SEARCH_URL = '/api/v1/accounts/search'
 const MASTODON_DOMAIN_BLOCKS_URL = '/api/v1/domain_blocks'
 const MASTODON_STREAMING = '/api/v1/streaming'
+const MASTODON_KNOWN_DOMAIN_LIST_URL = '/api/v1/instance/peers'
 const PLEROMA_EMOJI_REACTIONS_URL = id => `/api/v1/pleroma/statuses/${id}/reactions`
 const PLEROMA_EMOJI_REACT_URL = (id, emoji) => `/api/v1/pleroma/statuses/${id}/reactions/${emoji}`
 const PLEROMA_EMOJI_UNREACT_URL = (id, emoji) => `/api/v1/pleroma/statuses/${id}/reactions/${emoji}`
@@ -995,6 +996,10 @@ const search2 = ({ credentials, q, resolve, limit, offset, following }) => {
     })
 }
 
+const fetchKnownDomains = ({ credentials }) => {
+  return promisedRequest({ url: MASTODON_KNOWN_DOMAIN_LIST_URL, credentials })
+}
+
 const fetchDomainMutes = ({ credentials }) => {
   return promisedRequest({ url: MASTODON_DOMAIN_BLOCKS_URL, credentials })
 }
@@ -1193,6 +1198,7 @@ const apiService = {
   updateNotificationSettings,
   search2,
   searchUsers,
+  fetchKnownDomains,
   fetchDomainMutes,
   muteDomain,
   unmuteDomain
-- 
cgit v1.2.3-70-g09d2


From e6a27bcaca57c4c6351f7c41c2892c4e5222829e Mon Sep 17 00:00:00 2001
From: lain <lain@soykaf.club>
Date: Mon, 8 Jun 2020 13:30:16 +0200
Subject: MediaUpload: Allow drag-and-drop of multiple files at once

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

(limited to 'src/components')

diff --git a/src/components/media_upload/media_upload.js b/src/components/media_upload/media_upload.js
index f457d022..4568224b 100644
--- a/src/components/media_upload/media_upload.js
+++ b/src/components/media_upload/media_upload.js
@@ -37,7 +37,9 @@ const mediaUpload = {
     fileDrop (e) {
       if (e.dataTransfer.files.length > 0) {
         e.preventDefault() // allow dropping text like before
-        this.uploadFile(e.dataTransfer.files[0])
+        for (const file of e.dataTransfer.files) {
+          this.uploadFile(file)
+        }
       }
     },
     fileDrag (e) {
-- 
cgit v1.2.3-70-g09d2


From 99eaec85478f384ddb0ea45a9d9c95c4dce646f5 Mon Sep 17 00:00:00 2001
From: lain <lain@soykaf.club>
Date: Mon, 8 Jun 2020 17:22:07 +0200
Subject: Messages: Load languages asynchronously.

Reduces the size of the initial app bundle by about half.
---
 src/App.js                                         |  3 +-
 .../interface_language_switcher.vue                |  3 +-
 src/i18n/messages.js                               | 95 ++++++++++++++++------
 src/main.js                                        |  6 +-
 src/modules/config.js                              |  5 ++
 5 files changed, 80 insertions(+), 32 deletions(-)

(limited to 'src/components')

diff --git a/src/App.js b/src/App.js
index 6445335a..040138c9 100644
--- a/src/App.js
+++ b/src/App.js
@@ -47,7 +47,8 @@ export default {
   }),
   created () {
     // Load the locale from the storage
-    this.$i18n.locale = this.$store.getters.mergedConfig.interfaceLanguage
+    const val = this.$store.getters.mergedConfig.interfaceLanguage
+    this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
     window.addEventListener('resize', this.updateMobileState)
   },
   destroyed () {
diff --git a/src/components/interface_language_switcher/interface_language_switcher.vue b/src/components/interface_language_switcher/interface_language_switcher.vue
index f5ace0cc..dd6800a3 100644
--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@@ -32,7 +32,7 @@ import _ from 'lodash'
 export default {
   computed: {
     languageCodes () {
-      return Object.keys(languagesObject)
+      return languagesObject.languages
     },
 
     languageNames () {
@@ -43,7 +43,6 @@ export default {
       get: function () { return this.$store.getters.mergedConfig.interfaceLanguage },
       set: function (val) {
         this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
-        this.$i18n.locale = val
       }
     }
   },
diff --git a/src/i18n/messages.js b/src/i18n/messages.js
index c56ae205..a257486f 100644
--- a/src/i18n/messages.js
+++ b/src/i18n/messages.js
@@ -7,34 +7,75 @@
 // sed -i -e "s/'//gm" -e 's/"/\\"/gm' -re 's/^( +)(.+?): ((.+?))?(,?)(\{?)$/\1"\2": "\4"/gm' -e 's/\"\{\"/{/g' -e 's/,"$/",/g' file.json
 // There's only problem that apostrophe character ' gets replaced by \\ so you have to fix it manually, sorry.
 
+const loaders = {
+  ar: () => import('./ar.json'),
+  ca: () => import('./ca.json'),
+  cs: () => import('./cs.json'),
+  de: () => import('./de.json'),
+  eo: () => import('./eo.json'),
+  es: () => import('./es.json'),
+  et: () => import('./et.json'),
+  eu: () => import('./eu.json'),
+  fi: () => import('./fi.json'),
+  fr: () => import('./fr.json'),
+  ga: () => import('./ga.json'),
+  he: () => import('./he.json'),
+  hu: () => import('./hu.json'),
+  it: () => import('./it.json'),
+  ja: () => import('./ja_pedantic.json'),
+  ja_easy: () => import('./ja_easy.json'),
+  ko: () => import('./ko.json'),
+  nb: () => import('./nb.json'),
+  nl: () => import('./nl.json'),
+  oc: () => import('./oc.json'),
+  pl: () => import('./pl.json'),
+  pt: () => import('./pt.json'),
+  ro: () => import('./ro.json'),
+  ru: () => import('./ru.json'),
+  te: () => import('./te.json'),
+  zh: () => import('./zh.json')
+}
+
 const messages = {
-  ar: require('./ar.json'),
-  ca: require('./ca.json'),
-  cs: require('./cs.json'),
-  de: require('./de.json'),
-  en: require('./en.json'),
-  eo: require('./eo.json'),
-  es: require('./es.json'),
-  et: require('./et.json'),
-  eu: require('./eu.json'),
-  fi: require('./fi.json'),
-  fr: require('./fr.json'),
-  ga: require('./ga.json'),
-  he: require('./he.json'),
-  hu: require('./hu.json'),
-  it: require('./it.json'),
-  ja: require('./ja_pedantic.json'),
-  ja_easy: require('./ja_easy.json'),
-  ko: require('./ko.json'),
-  nb: require('./nb.json'),
-  nl: require('./nl.json'),
-  oc: require('./oc.json'),
-  pl: require('./pl.json'),
-  pt: require('./pt.json'),
-  ro: require('./ro.json'),
-  ru: require('./ru.json'),
-  te: require('./te.json'),
-  zh: require('./zh.json')
+  languages: [
+    'ar',
+    'ca',
+    'cs',
+    'de',
+    'en',
+    'eo',
+    'es',
+    'et',
+    'eu',
+    'fi',
+    'fr',
+    'ga',
+    'he',
+    'hu',
+    'it',
+    'ja',
+    'ja_easy',
+    'ko',
+    'nb',
+    'nl',
+    'oc',
+    'pl',
+    'pt',
+    'ro',
+    'ru',
+    'te',
+    'zh'
+  ],
+  default: {
+    en: require('./en.json')
+  },
+  setLanguage: async (i18n, language) => {
+    if (loaders[language]) {
+      let messages = await loaders[language]()
+      i18n.setLocaleMessage(language, messages)
+    }
+    i18n.locale = language
+  }
 }
 
 export default messages
diff --git a/src/main.js b/src/main.js
index be4213fa..9a201e4f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -46,11 +46,13 @@ Vue.use(VBodyScrollLock)
 
 const i18n = new VueI18n({
   // By default, use the browser locale, we will update it if neccessary
-  locale: currentLocale,
+  locale: 'en',
   fallbackLocale: 'en',
-  messages
+  messages: messages.default
 })
 
+messages.setLanguage(i18n, currentLocale)
+
 const persistedStateOptions = {
   paths: [
     'config',
diff --git a/src/modules/config.js b/src/modules/config.js
index b6b1b241..47b24d77 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -1,5 +1,6 @@
 import { set, delete as del } from 'vue'
 import { setPreset, applyTheme } from '../services/style_setter/style_setter.js'
+import messages from '../i18n/messages'
 
 const browserLocale = (window.navigator.language || 'en').split('-')[0]
 
@@ -115,6 +116,10 @@ const config = {
         case 'customTheme':
         case 'customThemeSource':
           applyTheme(value)
+          break
+        case 'interfaceLanguage':
+          messages.setLanguage(this.getters.i18n, value)
+          break
       }
     }
   }
-- 
cgit v1.2.3-70-g09d2


From e45f7fe8772f538c6824718ec26067849bde34c6 Mon Sep 17 00:00:00 2001
From: lain <lain@soykaf.club>
Date: Mon, 8 Jun 2020 18:22:17 +0200
Subject: MediaUpload: Correctly handle multiple uploads.

---
 src/components/media_upload/media_upload.js        | 33 ++++++++++++++--------
 .../post_status_form/post_status_form.js           |  2 --
 .../post_status_form/post_status_form.vue          |  1 +
 3 files changed, 23 insertions(+), 13 deletions(-)

(limited to 'src/components')

diff --git a/src/components/media_upload/media_upload.js b/src/components/media_upload/media_upload.js
index 4568224b..16e47ef7 100644
--- a/src/components/media_upload/media_upload.js
+++ b/src/components/media_upload/media_upload.js
@@ -5,10 +5,15 @@ import fileSizeFormatService from '../../services/file_size_format/file_size_for
 const mediaUpload = {
   data () {
     return {
-      uploading: false,
+      uploadCount: 0,
       uploadReady: true
     }
   },
+  computed: {
+    uploading () {
+      return this.uploadCount > 0
+    }
+  },
   methods: {
     uploadFile (file) {
       const self = this
@@ -23,23 +28,27 @@ const mediaUpload = {
       formData.append('file', file)
 
       self.$emit('uploading')
-      self.uploading = true
+      self.uploadCount++
 
       statusPosterService.uploadMedia({ store, formData })
         .then((fileData) => {
           self.$emit('uploaded', fileData)
-          self.uploading = false
+          self.decreaseUploadCount()
         }, (error) => { // eslint-disable-line handle-callback-err
           self.$emit('upload-failed', 'default')
-          self.uploading = false
+          self.decreaseUploadCount()
         })
     },
+    decreaseUploadCount() {
+      this.uploadCount--
+      if (this.uploadCount === 0) {
+        this.$emit('all-uploaded')
+      }
+    },
     fileDrop (e) {
       if (e.dataTransfer.files.length > 0) {
         e.preventDefault() // allow dropping text like before
-        for (const file of e.dataTransfer.files) {
-          this.uploadFile(file)
-        }
+        this.multiUpload(e.dataTransfer.files)
       }
     },
     fileDrag (e) {
@@ -56,11 +65,13 @@ const mediaUpload = {
         this.uploadReady = true
       })
     },
-    change ({ target }) {
-      for (var i = 0; i < target.files.length; i++) {
-        let file = target.files[i]
+    multiUpload (files) {
+      for (const file of files) {
         this.uploadFile(file)
       }
+    },
+    change ({ target }) {
+      this.multiUpload(target.files)
     }
   },
   props: [
@@ -69,7 +80,7 @@ const mediaUpload = {
   watch: {
     'dropFiles': function (fileInfos) {
       if (!this.uploading) {
-        this.uploadFile(fileInfos[0])
+        this.multiUpload(fileInfos)
       }
     }
   }
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index a98e1e31..6164caa0 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -218,7 +218,6 @@ const PostStatusForm = {
     },
     addMediaFile (fileInfo) {
       this.newStatus.files.push(fileInfo)
-      this.enableSubmit()
     },
     removeMediaFile (fileInfo) {
       let index = this.newStatus.files.indexOf(fileInfo)
@@ -227,7 +226,6 @@ const PostStatusForm = {
     uploadFailed (errString, templateArgs) {
       templateArgs = templateArgs || {}
       this.error = this.$t('upload.error.base') + ' ' + this.$t('upload.error.' + errString, templateArgs)
-      this.enableSubmit()
     },
     disableSubmit () {
       this.submitDisabled = true
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 9789a481..5629ceac 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -172,6 +172,7 @@
             @uploading="disableSubmit"
             @uploaded="addMediaFile"
             @upload-failed="uploadFailed"
+            @all-uploaded="enableSubmit"
           />
           <div
             class="emoji-icon"
-- 
cgit v1.2.3-70-g09d2


From fbc4889ece185bbe6386493562b89c83d6a89916 Mon Sep 17 00:00:00 2001
From: lain <lain@soykaf.club>
Date: Mon, 8 Jun 2020 18:26:16 +0200
Subject: Linting.

---
 src/components/media_upload/media_upload.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components')

diff --git a/src/components/media_upload/media_upload.js b/src/components/media_upload/media_upload.js
index 16e47ef7..5849b065 100644
--- a/src/components/media_upload/media_upload.js
+++ b/src/components/media_upload/media_upload.js
@@ -39,7 +39,7 @@ const mediaUpload = {
           self.decreaseUploadCount()
         })
     },
-    decreaseUploadCount() {
+    decreaseUploadCount () {
       this.uploadCount--
       if (this.uploadCount === 0) {
         this.$emit('all-uploaded')
-- 
cgit v1.2.3-70-g09d2


From cd9d732afa6d33f5db70161992a20e56ffd1d8cc Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Wed, 10 Jun 2020 11:01:38 +0300
Subject: add better visual indication for dropping files, make dropzone bigger

---
 src/components/media_upload/media_upload.js        | 14 ----------
 src/components/media_upload/media_upload.vue       |  7 +----
 .../post_status_form/post_status_form.js           | 19 +++++++++++--
 .../post_status_form/post_status_form.vue          | 32 ++++++++++++++++++++--
 4 files changed, 47 insertions(+), 25 deletions(-)

(limited to 'src/components')

diff --git a/src/components/media_upload/media_upload.js b/src/components/media_upload/media_upload.js
index 5849b065..fbb2d03d 100644
--- a/src/components/media_upload/media_upload.js
+++ b/src/components/media_upload/media_upload.js
@@ -45,20 +45,6 @@ const mediaUpload = {
         this.$emit('all-uploaded')
       }
     },
-    fileDrop (e) {
-      if (e.dataTransfer.files.length > 0) {
-        e.preventDefault() // allow dropping text like before
-        this.multiUpload(e.dataTransfer.files)
-      }
-    },
-    fileDrag (e) {
-      let types = e.dataTransfer.types
-      if (types.contains('Files')) {
-        e.dataTransfer.dropEffect = 'copy'
-      } else {
-        e.dataTransfer.dropEffect = 'none'
-      }
-    },
     clearFile () {
       this.uploadReady = false
       this.$nextTick(() => {
diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue
index 0fc305ac..5e31730b 100644
--- a/src/components/media_upload/media_upload.vue
+++ b/src/components/media_upload/media_upload.vue
@@ -1,10 +1,5 @@
 <template>
-  <div
-    class="media-upload"
-    @drop.prevent
-    @dragover.prevent="fileDrag"
-    @drop="fileDrop"
-  >
+  <div class="media-upload">
     <label
       class="label"
       :title="$t('tool_tip.media_upload')"
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 6164caa0..3de6f70a 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -82,7 +82,9 @@ const PostStatusForm = {
         contentType
       },
       caret: 0,
-      pollFormVisible: false
+      pollFormVisible: false,
+      showDropIcon: false,
+      dropStopTimeout: null
     }
   },
   computed: {
@@ -248,13 +250,26 @@ const PostStatusForm = {
       }
     },
     fileDrop (e) {
-      if (e.dataTransfer.files.length > 0) {
+      if (e.dataTransfer && e.dataTransfer.types.includes('Files')) {
         e.preventDefault() // allow dropping text like before
         this.dropFiles = e.dataTransfer.files
+        clearTimeout(this.dropStopTimeout)
+        this.showDropIcon = false
       }
     },
+    fileDragStop (e) {
+      // The false-setting is done with delay because just using leave-events
+      // directly caused unwanted flickering, this is not perfect either but
+      // much less noticable.
+      clearTimeout(this.dropStopTimeout)
+      this.dropStopTimeout = setTimeout(() => (this.showDropIcon = false), 100)
+    },
     fileDrag (e) {
       e.dataTransfer.dropEffect = 'copy'
+      if (e.dataTransfer && e.dataTransfer.types.includes('Files')) {
+        clearTimeout(this.dropStopTimeout)
+        this.showDropIcon = true
+      }
     },
     onEmojiInputInput (e) {
       this.$nextTick(() => {
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 5629ceac..8e71d7b4 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -6,7 +6,14 @@
     <form
       autocomplete="off"
       @submit.prevent="postStatus(newStatus)"
+      @dragover.prevent.capture="fileDrag"
     >
+      <div
+        v-show="showDropIcon"
+        class="drop-indicator icon-upload"
+        @dragleave.capture="fileDragStop"
+        @drop.stop="fileDrop"
+      />
       <div class="form-group">
         <i18n
           v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private'"
@@ -97,8 +104,6 @@
             class="form-post-body"
             @keydown.meta.enter="postStatus(newStatus)"
             @keyup.ctrl.enter="postStatus(newStatus)"
-            @drop="fileDrop"
-            @dragover.prevent="fileDrag"
             @input="resize"
             @compositionupdate="resize"
             @paste="paste"
@@ -447,7 +452,8 @@
   form {
     display: flex;
     flex-direction: column;
-    padding: 0.6em;
+    margin: 0.6em;
+    position: relative;
   }
 
   .form-group {
@@ -505,5 +511,25 @@
     cursor: pointer;
     z-index: 4;
   }
+
+  .drop-indicator {
+    position: absolute;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    font-size: 5em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: $fallback--text;
+    color: var(--text, $fallback--text);
+    opacity: 0.6;
+    background-color: $fallback--bg;
+    background-color: var(--bg, $fallback--bg);
+    border-radius: $fallback--tooltipRadius;
+    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+    border: 2px dashed $fallback--text;
+    border: 2px dashed var(--text, $fallback--text);
+  }
 }
 </style>
-- 
cgit v1.2.3-70-g09d2


From 3cfdfec72dfd0fd390152c2bf2e80ee11f8ae525 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 10 Jun 2020 11:18:07 +0300
Subject: attempt to fix that one bug with submitting on copy-pasting

---
 src/components/post_status_form/post_status_form.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components')

diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 5629ceac..6477594c 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -96,7 +96,7 @@
             :disabled="posting"
             class="form-post-body"
             @keydown.meta.enter="postStatus(newStatus)"
-            @keyup.ctrl.enter="postStatus(newStatus)"
+            @keydown.ctrl.enter="postStatus(newStatus)"
             @drop="fileDrop"
             @dragover.prevent="fileDrag"
             @input="resize"
-- 
cgit v1.2.3-70-g09d2


From d3187720c5cb2599b2dc2d83898e3f6d544cb6ae Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Wed, 10 Jun 2020 11:49:04 +0300
Subject: remove useless captures

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

(limited to 'src/components')

diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 8e71d7b4..873328f5 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -6,12 +6,12 @@
     <form
       autocomplete="off"
       @submit.prevent="postStatus(newStatus)"
-      @dragover.prevent.capture="fileDrag"
+      @dragover.prevent="fileDrag"
     >
       <div
         v-show="showDropIcon"
         class="drop-indicator icon-upload"
-        @dragleave.capture="fileDragStop"
+        @dragleave="fileDragStop"
         @drop.stop="fileDrop"
       />
       <div class="form-group">
-- 
cgit v1.2.3-70-g09d2


From ea2b2a35bb5c419970b796ec010085302d8c9bd1 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Wed, 10 Jun 2020 12:41:02 +0300
Subject: add fade-in fade-out

---
 src/components/post_status_form/post_status_form.js  |  9 +++++----
 src/components/post_status_form/post_status_form.vue | 15 +++++++++++++--
 2 files changed, 18 insertions(+), 6 deletions(-)

(limited to 'src/components')

diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 3de6f70a..9027566f 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -83,7 +83,7 @@ const PostStatusForm = {
       },
       caret: 0,
       pollFormVisible: false,
-      showDropIcon: false,
+      showDropIcon: 'hide',
       dropStopTimeout: null
     }
   },
@@ -254,7 +254,7 @@ const PostStatusForm = {
         e.preventDefault() // allow dropping text like before
         this.dropFiles = e.dataTransfer.files
         clearTimeout(this.dropStopTimeout)
-        this.showDropIcon = false
+        this.showDropIcon = 'hide'
       }
     },
     fileDragStop (e) {
@@ -262,13 +262,14 @@ const PostStatusForm = {
       // directly caused unwanted flickering, this is not perfect either but
       // much less noticable.
       clearTimeout(this.dropStopTimeout)
-      this.dropStopTimeout = setTimeout(() => (this.showDropIcon = false), 100)
+      this.showDropIcon = 'fade'
+      this.dropStopTimeout = setTimeout(() => (this.showDropIcon = 'hide'), 500)
     },
     fileDrag (e) {
       e.dataTransfer.dropEffect = 'copy'
       if (e.dataTransfer && e.dataTransfer.types.includes('Files')) {
         clearTimeout(this.dropStopTimeout)
-        this.showDropIcon = true
+        this.showDropIcon = 'show'
       }
     },
     onEmojiInputInput (e) {
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index e23e9e48..c4d7f7e2 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -9,7 +9,8 @@
       @dragover.prevent="fileDrag"
     >
       <div
-        v-show="showDropIcon"
+        v-show="showDropIcon !== 'hide'"
+        :style="{ animation: showDropIcon === 'show' ? 'fade-in 0.25s' : 'fade-out 0.5s' }"
         class="drop-indicator icon-upload"
         @dragleave="fileDragStop"
         @drop.stop="fileDrop"
@@ -512,6 +513,16 @@
     z-index: 4;
   }
 
+  @keyframes fade-in {
+    from { opacity: 0; }
+    to   { opacity: 0.6; }
+  }
+
+  @keyframes fade-out {
+    from { opacity: 0.6; }
+    to   { opacity: 0; }
+  }
+
   .drop-indicator {
     position: absolute;
     z-index: 1;
@@ -521,9 +532,9 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    opacity: 0.6;
     color: $fallback--text;
     color: var(--text, $fallback--text);
-    opacity: 0.6;
     background-color: $fallback--bg;
     background-color: var(--bg, $fallback--bg);
     border-radius: $fallback--tooltipRadius;
-- 
cgit v1.2.3-70-g09d2


From 2b6a6fe7ea31e4e5b77d5ad0ff580f9e29df1849 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Thu, 11 Jun 2020 13:44:32 +0300
Subject: make object-fit cover work like it should

---
 src/components/still-image/still-image.vue | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

(limited to 'src/components')

diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue
index 08af26f6..f2ddeb7b 100644
--- a/src/components/still-image/still-image.vue
+++ b/src/components/still-image/still-image.vue
@@ -23,13 +23,6 @@
 
 <style lang="scss">
 @import '../../_variables.scss';
-.contain-fit {
-  .still-image {
-    img {
-      height: 100%;
-    }
-  }
-}
 
 .still-image {
   position: relative;
@@ -38,6 +31,7 @@
   width: 100%;
   height: 100%;
   display: flex;
+  align-items: center;
 
   &:hover canvas {
     display: none;
@@ -45,8 +39,8 @@
 
   img {
     width: 100%;
+    min-height: 100%;
     object-fit: contain;
-    align-self: center;
   }
 
   &.animated {
-- 
cgit v1.2.3-70-g09d2


From 14348d8ddf15b3a5366de711daf3acf498fb570a Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Thu, 11 Jun 2020 14:27:36 +0300
Subject: fix the contain option

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

(limited to 'src/components')

diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue
index 7abc2161..1ffa7b3c 100644
--- a/src/components/gallery/gallery.vue
+++ b/src/components/gallery/gallery.vue
@@ -78,6 +78,7 @@
     video,
     canvas {
       object-fit: contain;
+      height: 100%;
     }
   }
 
-- 
cgit v1.2.3-70-g09d2


From c13d5b4f1bc102c0ae3603e6316ab6822e830277 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sat, 13 Jun 2020 13:09:55 +0300
Subject: Fix faint links in notifications

---
 src/components/notifications/notifications.scss | 23 +++++++++--------------
 1 file changed, 9 insertions(+), 14 deletions(-)

(limited to 'src/components')

diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index b675af5a..20797cf9 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -54,25 +54,20 @@
     flex-wrap: nowrap;
     padding: 0.6em;
     min-width: 0;
+
     .avatar-container {
       width: 32px;
       height: 32px;
     }
-    .status-el {
-      .status {
-        padding: 0.25em 0;
-        color: $fallback--faint;
-        color: var(--faint, $fallback--faint);
-        a {
-          color: var(--faintLink);
-        }
-        .status-content a {
-          color: var(--postFaintLink);
-        }
+
+    .status-body {
+      color: $fallback--faint;
+      color: var(--faint, $fallback--faint);
+      a {
+        color: var(--faintLink);
       }
-      padding: 0;
-      .media-body {
-        margin: 0;
+      .status-content a {
+        color: var(--postFaintLink);
       }
     }
   }
-- 
cgit v1.2.3-70-g09d2


From 8cd5041663077a2a5dafe9c23d5495339fa31fc6 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sat, 13 Jun 2020 13:23:54 +0300
Subject: add support for defining the greentext

---
 src/components/settings_modal/tabs/theme_tab/theme_tab.vue | 7 +++++++
 src/components/status_content/status_content.vue           | 2 +-
 src/services/theme_data/pleromafe.js                       | 6 ++++++
 3 files changed, 14 insertions(+), 1 deletion(-)

(limited to 'src/components')

diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
index fcfad23b..d14f854c 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
@@ -256,6 +256,13 @@
               :label="$t('settings.links')"
             />
             <ContrastRatio :contrast="previewContrast.postLink" />
+            <ColorInput
+              v-model="postGreentextColorLocal"
+              name="postGreentextColor"
+              :fallback="previewTheme.colors.cGreen"
+              :label="$t('settings.greentext')"
+            />
+            <ContrastRatio :contrast="previewContrast.postGreentext" />
             <h4>{{ $t('settings.style.advanced_colors.alert') }}</h4>
             <ColorInput
               v-model="alertErrorColorLocal"
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index 8c2e8749..7adb67ae 100644
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@@ -226,7 +226,7 @@ $status-margin: 0.75em;
 
 .greentext {
   color: $fallback--cGreen;
-  color: var(--cGreen, $fallback--cGreen);
+  color: var(--postGreentext, $fallback--cGreen);
 }
 
 .timeline :not(.panel-disabled) > {
diff --git a/src/services/theme_data/pleromafe.js b/src/services/theme_data/pleromafe.js
index 0c1fe543..b577cfab 100644
--- a/src/services/theme_data/pleromafe.js
+++ b/src/services/theme_data/pleromafe.js
@@ -356,6 +356,12 @@ export const SLOT_INHERITANCE = {
     textColor: 'preserve'
   },
 
+  postGreentext: {
+    depends: ['cGreen'],
+    layer: 'bg',
+    textColor: 'preserve'
+  },
+
   border: {
     depends: ['fg'],
     opacity: 'border',
-- 
cgit v1.2.3-70-g09d2


From ac270d7060213c0ebb0369ef5ccd2e659d2b5ee9 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sat, 13 Jun 2020 14:42:53 +0300
Subject: fix #866

---
 src/components/post_status_modal/post_status_modal.js  | 3 +++
 src/components/post_status_modal/post_status_modal.vue | 1 +
 2 files changed, 4 insertions(+)

(limited to 'src/components')

diff --git a/src/components/post_status_modal/post_status_modal.js b/src/components/post_status_modal/post_status_modal.js
index be945400..b44354db 100644
--- a/src/components/post_status_modal/post_status_modal.js
+++ b/src/components/post_status_modal/post_status_modal.js
@@ -13,6 +13,9 @@ const PostStatusModal = {
     }
   },
   computed: {
+    isLoggedIn () {
+      return !!this.$store.state.users.currentUser
+    },
     modalActivated () {
       return this.$store.state.postStatus.modalActivated
     },
diff --git a/src/components/post_status_modal/post_status_modal.vue b/src/components/post_status_modal/post_status_modal.vue
index 07c58f74..dbcd321e 100644
--- a/src/components/post_status_modal/post_status_modal.vue
+++ b/src/components/post_status_modal/post_status_modal.vue
@@ -1,5 +1,6 @@
 <template>
   <Modal
+    v-if="isLoggedIn && !resettingForm"
     :is-open="modalActivated"
     class="post-form-modal-view"
     @backdropClicked="closeModal"
-- 
cgit v1.2.3-70-g09d2


From fc6ca20a42ff699ac08e22af4d5f5659d2726115 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Tue, 16 Jun 2020 17:34:22 +0300
Subject: disable subject field when posting

---
 CHANGELOG.md                                         | 1 +
 src/components/post_status_form/post_status_form.vue | 1 +
 2 files changed, 2 insertions(+)

(limited to 'src/components')

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 623c642f..7e3eaf17 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -30,6 +30,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Newlines in the muted words settings work again
 - Clicking on non-latin hashtags won't open a new window
 - Uploading and drag-dropping multiple files works correctly now.
+- Subject field now appears disabled when posting
 
 ## [2.0.3] - 2020-05-02
 ### Fixed
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index c4d7f7e2..e3d8d087 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -81,6 +81,7 @@
             v-model="newStatus.spoilerText"
             type="text"
             :placeholder="$t('post_status.content_warning')"
+            :disabled="posting"
             class="form-post-subject"
           >
         </EmojiInput>
-- 
cgit v1.2.3-70-g09d2