From 50dc9df8a44d408dd83ae4b17c407fa36c85cf8e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 14 Nov 2019 00:18:14 +0200
Subject: adds greentext, also small fixes

---
 .../tiny_post_html_processor.service.js            | 84 ++++++++++++++++++++++
 1 file changed, 84 insertions(+)
 create mode 100644 src/services/tiny_post_html_processor/tiny_post_html_processor.service.js

(limited to 'src/services')

diff --git a/src/services/tiny_post_html_processor/tiny_post_html_processor.service.js b/src/services/tiny_post_html_processor/tiny_post_html_processor.service.js
new file mode 100644
index 00000000..c9ff81e1
--- /dev/null
+++ b/src/services/tiny_post_html_processor/tiny_post_html_processor.service.js
@@ -0,0 +1,84 @@
+/**
+ * This is a tiny purpose-built HTML parser/processor. This basically detects any type of visual newline and
+ * allows it to be processed, useful for greentexting, mostly
+ *
+ * @param {Object} input - input data
+ * @param {(string) => string} processor - function that will be called on every line
+ * @return {string} processed html
+ */
+export const processHtml = (html, processor) => {
+  const handledTags = new Set(['p', 'br', 'div'])
+  const openCloseTags = new Set(['p', 'div'])
+  const tagRegex = /(?:<\/(\w+)>|<(\w+)\s?[^/]*?\/?>)/gi
+
+  let buffer = '' // Current output buffer
+  const level = [] // How deep we are in tags and which tags were there
+  let textBuffer = '' // Current line content
+  let tagBuffer = null // Current tag buffer, if null = we are not currently reading a tag
+
+  // Extracts tagname from tag, i.e. <span a="b"> => span
+  const getTagName = (tag) => {
+    // eslint-disable-next-line no-unused-vars
+    const result = tagRegex.exec(tag)
+    return result && (result[1] || result[2])
+  }
+
+  const flush = () => { // Processes current line buffer, adds it to output buffer and clears line buffer
+    buffer += processor(textBuffer)
+    textBuffer = ''
+  }
+
+  const handleBr = (tag) => { // handles single newlines/linebreaks
+    flush()
+    buffer += tag
+  }
+
+  const handleOpen = (tag) => { // handles opening tags
+    flush()
+    buffer += tag
+    level.push(tag)
+  }
+
+  const handleClose = (tag) => { // handles closing tags
+    flush()
+    buffer += tag
+    if (level[level.length - 1] === tag) {
+      level.pop()
+    }
+  }
+
+  for (let i = 0; i < html.length; i++) {
+    const char = html[i]
+    if (char === '<' && tagBuffer !== null) {
+      tagBuffer = char
+    } else if (char !== '>' && tagBuffer !== null) {
+      tagBuffer += char
+    } else if (char === '>' && tagBuffer !== null) {
+      tagBuffer += char
+      const tagName = getTagName(tagBuffer)
+      if (handledTags.has(tagName)) {
+        if (tagName === 'br') {
+          handleBr(tagBuffer)
+        }
+        if (openCloseTags.has(tagBuffer)) {
+          if (tagBuffer[1] === '/') {
+            handleClose(tagBuffer)
+          } else {
+            handleOpen(tagBuffer)
+          }
+        }
+      } else {
+        textBuffer += tagBuffer
+      }
+      tagBuffer = null
+    } else if (char === '\n') {
+      handleBr(char)
+    } else {
+      textBuffer += char
+    }
+  }
+
+  flush()
+
+  return buffer
+}
-- 
cgit v1.2.3-70-g09d2


From 692ee0e95a852b1f803b7ae92d65cbf4f3ce3445 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 14 Nov 2019 00:41:14 +0200
Subject: Fix regex, tag detector condition

---
 src/components/status/status.js                    |  2 +-
 .../tiny_post_html_processor.service.js            | 25 +++++++++++-----------
 2 files changed, 13 insertions(+), 14 deletions(-)

(limited to 'src/services')

diff --git a/src/components/status/status.js b/src/components/status/status.js
index 6dbb2199..416aa36a 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -43,7 +43,7 @@ const Status = {
       showingTall: this.inConversation && this.focused,
       showingLongSubject: false,
       error: null,
-      // Initial state
+      // not as computed because it sets the initial state which will be changed later
       expandingSubject: !this.$store.getters.mergedConfig.collapseMessageWithSubject,
     }
   },
diff --git a/src/services/tiny_post_html_processor/tiny_post_html_processor.service.js b/src/services/tiny_post_html_processor/tiny_post_html_processor.service.js
index c9ff81e1..b96c1ccf 100644
--- a/src/services/tiny_post_html_processor/tiny_post_html_processor.service.js
+++ b/src/services/tiny_post_html_processor/tiny_post_html_processor.service.js
@@ -9,17 +9,15 @@
 export const processHtml = (html, processor) => {
   const handledTags = new Set(['p', 'br', 'div'])
   const openCloseTags = new Set(['p', 'div'])
-  const tagRegex = /(?:<\/(\w+)>|<(\w+)\s?[^/]*?\/?>)/gi
 
   let buffer = '' // Current output buffer
   const level = [] // How deep we are in tags and which tags were there
   let textBuffer = '' // Current line content
   let tagBuffer = null // Current tag buffer, if null = we are not currently reading a tag
 
-  // Extracts tagname from tag, i.e. <span a="b"> => span
+  // Extracts tag name from tag, i.e. <span a="b"> => span
   const getTagName = (tag) => {
-    // eslint-disable-next-line no-unused-vars
-    const result = tagRegex.exec(tag)
+    const result = /(?:<\/(\w+)>|<(\w+)\s?[^/]*?\/?>)/gi.exec(tag)
     return result && (result[1] || result[2])
   }
 
@@ -49,28 +47,29 @@ export const processHtml = (html, processor) => {
 
   for (let i = 0; i < html.length; i++) {
     const char = html[i]
-    if (char === '<' && tagBuffer !== null) {
+    if (char === '<' && tagBuffer === null) {
       tagBuffer = char
     } else if (char !== '>' && tagBuffer !== null) {
       tagBuffer += char
     } else if (char === '>' && tagBuffer !== null) {
       tagBuffer += char
-      const tagName = getTagName(tagBuffer)
+      const tagFull = tagBuffer
+      tagBuffer = null
+      const tagName = getTagName(tagFull)
       if (handledTags.has(tagName)) {
         if (tagName === 'br') {
-          handleBr(tagBuffer)
+          handleBr(tagFull)
         }
-        if (openCloseTags.has(tagBuffer)) {
-          if (tagBuffer[1] === '/') {
-            handleClose(tagBuffer)
+        if (openCloseTags.has(tagFull)) {
+          if (tagFull[1] === '/') {
+            handleClose(tagFull)
           } else {
-            handleOpen(tagBuffer)
+            handleOpen(tagFull)
           }
         }
       } else {
-        textBuffer += tagBuffer
+        textBuffer += tagFull
       }
-      tagBuffer = null
     } else if (char === '\n') {
       handleBr(char)
     } else {
-- 
cgit v1.2.3-70-g09d2


From bd2a682b83743311645241fe644e853e1a359b67 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 14 Nov 2019 22:40:20 +0200
Subject: tests + updates

---
 .../tiny_post_html_processor.service.js            | 19 ++++-
 .../tiny_post_html_processor.spec.js               | 96 ++++++++++++++++++++++
 2 files changed, 111 insertions(+), 4 deletions(-)
 create mode 100644 test/unit/specs/services/tiny_post_html_processor/tiny_post_html_processor.spec.js

(limited to 'src/services')

diff --git a/src/services/tiny_post_html_processor/tiny_post_html_processor.service.js b/src/services/tiny_post_html_processor/tiny_post_html_processor.service.js
index b96c1ccf..de6f20ef 100644
--- a/src/services/tiny_post_html_processor/tiny_post_html_processor.service.js
+++ b/src/services/tiny_post_html_processor/tiny_post_html_processor.service.js
@@ -2,6 +2,8 @@
  * This is a tiny purpose-built HTML parser/processor. This basically detects any type of visual newline and
  * allows it to be processed, useful for greentexting, mostly
  *
+ * known issue: doesn't handle CDATA so nested CDATA might not work well
+ *
  * @param {Object} input - input data
  * @param {(string) => string} processor - function that will be called on every line
  * @return {string} processed html
@@ -22,11 +24,15 @@ export const processHtml = (html, processor) => {
   }
 
   const flush = () => { // Processes current line buffer, adds it to output buffer and clears line buffer
-    buffer += processor(textBuffer)
+    if (textBuffer.trim().length > 0) {
+      buffer += processor(textBuffer)
+    } else {
+      buffer += textBuffer
+    }
     textBuffer = ''
   }
 
-  const handleBr = (tag) => { // handles single newlines/linebreaks
+  const handleBr = (tag) => { // handles single newlines/linebreaks/selfclosing
     flush()
     buffer += tag
   }
@@ -59,10 +65,12 @@ export const processHtml = (html, processor) => {
       if (handledTags.has(tagName)) {
         if (tagName === 'br') {
           handleBr(tagFull)
-        }
-        if (openCloseTags.has(tagFull)) {
+        } else if (openCloseTags.has(tagName)) {
           if (tagFull[1] === '/') {
             handleClose(tagFull)
+          } else if (tagFull[tagFull.length - 2] === '/') {
+            // self-closing
+            handleBr(tagFull)
           } else {
             handleOpen(tagFull)
           }
@@ -76,6 +84,9 @@ export const processHtml = (html, processor) => {
       textBuffer += char
     }
   }
+  if (tagBuffer) {
+    textBuffer += tagBuffer
+  }
 
   flush()
 
diff --git a/test/unit/specs/services/tiny_post_html_processor/tiny_post_html_processor.spec.js b/test/unit/specs/services/tiny_post_html_processor/tiny_post_html_processor.spec.js
new file mode 100644
index 00000000..f301429d
--- /dev/null
+++ b/test/unit/specs/services/tiny_post_html_processor/tiny_post_html_processor.spec.js
@@ -0,0 +1,96 @@
+import { processHtml } from 'src/services/tiny_post_html_processor/tiny_post_html_processor.service.js'
+
+describe('TinyPostHTMLProcessor', () => {
+  describe('with processor that keeps original line should not make any changes to HTML when', () => {
+    const processorKeep = (line) => line
+    it('fed with regular HTML with newlines', () => {
+      const inputOutput = '1<br/>2<p class="lol">3 4</p> 5 \n 6 <p > 7 <br> 8 </p> <br>\n<br/>'
+      expect(processHtml(inputOutput, processorKeep)).to.eql(inputOutput)
+    })
+
+    it('fed with possibly broken HTML with invalid tags/composition', () => {
+      const inputOutput = '<feeee dwdwddddddw> <i>ayy<b>lm</i>ao</b> </section>'
+      expect(processHtml(inputOutput, processorKeep)).to.eql(inputOutput)
+    })
+
+    it('fed with very broken HTML with broken composition', () => {
+      const inputOutput = '</p> lmao what </div> whats going on <div> wha <p>'
+      expect(processHtml(inputOutput, processorKeep)).to.eql(inputOutput)
+    })
+
+    it('fed with sorta valid HTML but tags aren\'t closed', () => {
+      const inputOutput = 'just leaving a <div> hanging'
+      expect(processHtml(inputOutput, processorKeep)).to.eql(inputOutput)
+    })
+
+    it('fed with not really HTML at this point... tags that aren\'t finished', () => {
+      const inputOutput = 'do you expect me to finish this <div class='
+      expect(processHtml(inputOutput, processorKeep)).to.eql(inputOutput)
+    })
+
+    it('fed with dubiously valid HTML (p within p and also div inside p)', () => {
+      const inputOutput = 'look ma <p> p \nwithin <p> p! </p> and a <br/><div>div!</div></p>'
+      expect(processHtml(inputOutput, processorKeep)).to.eql(inputOutput)
+    })
+
+    it('fed with maybe valid HTML? self-closing divs and ps', () => {
+      const inputOutput = 'a <div class="what"/> what now <p aria-label="wtf"/> ?'
+      expect(processHtml(inputOutput, processorKeep)).to.eql(inputOutput)
+    })
+
+    it('fed with valid XHTML containing a CDATA', () => {
+      const inputOutput = 'Yes, it is me, <![CDATA[DIO]]>'
+      expect(processHtml(inputOutput, processorKeep)).to.eql(inputOutput)
+    })
+  })
+  describe('with processor that replaces lines with word "_" should match expected line when', () => {
+    const processorReplace = (line) => '_'
+    it('fed with regular HTML with newlines', () => {
+      const input = '1<br/>2<p class="lol">3 4</p> 5 \n 6 <p > 7 <br> 8 </p> <br>\n<br/>'
+      const output = '_<br/>_<p class="lol">_</p>_\n_<p >_<br>_</p> <br>\n<br/>'
+      expect(processHtml(input, processorReplace)).to.eql(output)
+    })
+
+    it('fed with possibly broken HTML with invalid tags/composition', () => {
+      const input = '<feeee dwdwddddddw> <i>ayy<b>lm</i>ao</b> </section>'
+      const output = '_'
+      expect(processHtml(input, processorReplace)).to.eql(output)
+    })
+
+    it('fed with very broken HTML with broken composition', () => {
+      const input = '</p> lmao what </div> whats going on <div> wha <p>'
+      const output = '</p>_</div>_<div>_<p>'
+      expect(processHtml(input, processorReplace)).to.eql(output)
+    })
+
+    it('fed with sorta valid HTML but tags aren\'t closed', () => {
+      const input = 'just leaving a <div> hanging'
+      const output = '_<div>_'
+      expect(processHtml(input, processorReplace)).to.eql(output)
+    })
+
+    it('fed with not really HTML at this point... tags that aren\'t finished', () => {
+      const input = 'do you expect me to finish this <div class='
+      const output = '_'
+      expect(processHtml(input, processorReplace)).to.eql(output)
+    })
+
+    it('fed with dubiously valid HTML (p within p and also div inside p)', () => {
+      const input = 'look ma <p> p \nwithin <p> p! </p> and a <br/><div>div!</div></p>'
+      const output = '_<p>_\n_<p>_</p>_<br/><div>_</div></p>'
+      expect(processHtml(input, processorReplace)).to.eql(output)
+    })
+
+    it('fed with maybe valid HTML? self-closing divs and ps', () => {
+      const input = 'a <div class="what"/> what now <p aria-label="wtf"/> ?'
+      const output = '_<div class="what"/>_<p aria-label="wtf"/>_'
+      expect(processHtml(input, processorReplace)).to.eql(output)
+    })
+
+    it('fed with valid XHTML containing a CDATA', () => {
+      const input = 'Yes, it is me, <![CDATA[DIO]]>'
+      const output = '_'
+      expect(processHtml(input, processorReplace)).to.eql(output)
+    })
+  })
+})
-- 
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/services')

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 0995658757b89eeb38b78e997bec2d85b96296af Mon Sep 17 00:00:00 2001
From: kPherox <admin@mail.kr-kp.com>
Date: Tue, 19 Nov 2019 14:07:15 +0000
Subject: backend interactor service: implement startFetchingFollowRequest

backend interactor service: remove unused fetchFollowRequests
---
 src/components/nav_panel/nav_panel.js                             | 7 +------
 src/components/side_drawer/side_drawer.js                         | 4 ++++
 src/modules/api.js                                                | 7 +++++++
 src/modules/users.js                                              | 1 +
 .../backend_interactor_service/backend_interactor_service.js      | 8 ++++++--
 5 files changed, 19 insertions(+), 8 deletions(-)

(limited to 'src/services')

diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js
index aa3f7605..7f783acb 100644
--- a/src/components/nav_panel/nav_panel.js
+++ b/src/components/nav_panel/nav_panel.js
@@ -1,12 +1,7 @@
-import followRequestFetcher from '../../services/follow_request_fetcher/follow_request_fetcher.service'
-
 const NavPanel = {
   created () {
     if (this.currentUser && this.currentUser.locked) {
-      const store = this.$store
-      const credentials = store.state.users.currentUser.credentials
-
-      followRequestFetcher.startFetching({ store, credentials })
+      this.$store.dispatch('startFetchingFollowRequest')
     }
   },
   computed: {
diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js
index 567d2e5e..0188cf3e 100644
--- a/src/components/side_drawer/side_drawer.js
+++ b/src/components/side_drawer/side_drawer.js
@@ -10,6 +10,10 @@ const SideDrawer = {
   }),
   created () {
     this.closeGesture = GestureService.swipeGesture(GestureService.DIRECTION_LEFT, this.toggleDrawer)
+
+    if (this.currentUser && this.currentUser.locked) {
+      this.$store.dispatch('startFetchingFollowRequest')
+    }
   },
   components: { UserCard },
   computed: {
diff --git a/src/modules/api.js b/src/modules/api.js
index eb6a7980..1293e3c8 100644
--- a/src/modules/api.js
+++ b/src/modules/api.js
@@ -43,6 +43,13 @@ const api = {
       const fetcher = store.state.backendInteractor.startFetchingNotifications({ store })
       store.commit('addFetcher', { fetcherName: 'notifications', fetcher })
     },
+    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 })
+    },
     stopFetching (store, fetcherName) {
       const fetcher = store.state.fetchers[fetcherName]
       window.clearInterval(fetcher)
diff --git a/src/modules/users.js b/src/modules/users.js
index 1c9ff5e8..14b2d8b5 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -434,6 +434,7 @@ const users = {
           store.dispatch('stopFetching', 'friends')
           store.commit('setBackendInteractor', backendInteractorService(store.getters.getToken()))
           store.dispatch('stopFetching', 'notifications')
+          store.dispatch('stopFetching', 'followRequest')
           store.commit('clearNotifications')
           store.commit('resetStatuses')
         })
diff --git a/src/services/backend_interactor_service/backend_interactor_service.js b/src/services/backend_interactor_service/backend_interactor_service.js
index d6617276..c16bd1f1 100644
--- a/src/services/backend_interactor_service/backend_interactor_service.js
+++ b/src/services/backend_interactor_service/backend_interactor_service.js
@@ -1,6 +1,7 @@
 import apiService from '../api/api.service.js'
 import timelineFetcherService from '../timeline_fetcher/timeline_fetcher.service.js'
 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 }) => {
@@ -63,6 +64,10 @@ const backendInteractorService = credentials => {
     return notificationsFetcher.startFetching({ store, credentials })
   }
 
+  const startFetchingFollowRequest = ({ store }) => {
+    return followRequestFetcher.startFetching({ store, credentials })
+  }
+
   // eslint-disable-next-line camelcase
   const tagUser = ({ screen_name }, tag) => {
     return apiService.tagUser({ screen_name, tag, credentials })
@@ -111,7 +116,6 @@ const backendInteractorService = credentials => {
   const subscribeUser = (id) => apiService.subscribeUser({ credentials, id })
   const unsubscribeUser = (id) => apiService.unsubscribeUser({ credentials, id })
   const fetchBlocks = () => apiService.fetchBlocks({ credentials })
-  const fetchFollowRequests = () => apiService.fetchFollowRequests({ credentials })
   const fetchOAuthTokens = () => apiService.fetchOAuthTokens({ credentials })
   const revokeOAuthToken = (id) => apiService.revokeOAuthToken({ id, credentials })
   const fetchPinnedStatuses = (id) => apiService.fetchPinnedStatuses({ credentials, id })
@@ -168,6 +172,7 @@ const backendInteractorService = credentials => {
     verifyCredentials: apiService.verifyCredentials,
     startFetchingTimeline,
     startFetchingNotifications,
+    startFetchingFollowRequest,
     fetchMutes,
     muteUser,
     unmuteUser,
@@ -203,7 +208,6 @@ const backendInteractorService = credentials => {
     mfaSetupOTP,
     mfaConfirmOTP,
     mfaDisableOTP,
-    fetchFollowRequests,
     approveUser,
     denyUser,
     vote,
-- 
cgit v1.2.3-70-g09d2


From a55486f8d78161166e84b2b69709a49b3845c14e Mon Sep 17 00:00:00 2001
From: kPherox <admin@mail.kr-kp.com>
Date: Tue, 19 Nov 2019 14:15:41 +0000
Subject: Normalize profile fields

---
 src/services/entity_normalizer/entity_normalizer.service.js |  9 +++++++++
 .../services/entity_normalizer/entity_normalizer.spec.js    | 13 +++++++++++++
 2 files changed, 22 insertions(+)

(limited to 'src/services')

diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index 5f45660d..ca79df6f 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -46,6 +46,14 @@ export const parseUser = (data) => {
     output.description = data.note
     output.description_html = addEmojis(data.note, data.emojis)
 
+    output.fields = data.fields
+    output.fields_html = data.fields.map(field => {
+      return {
+        name: addEmojis(field.name, data.emojis),
+        value: addEmojis(field.value, data.emojis)
+      }
+    })
+
     // Utilize avatar_static for gif avatars?
     output.profile_image_url = data.avatar
     output.profile_image_url_original = data.avatar
@@ -95,6 +103,7 @@ export const parseUser = (data) => {
     if (data.source) {
       output.description = data.source.note
       output.default_scope = data.source.privacy
+      output.fields = data.source.fields
       if (data.source.pleroma) {
         output.no_rich_text = data.source.pleroma.no_rich_text
         output.show_role = data.source.pleroma.show_role
diff --git a/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js b/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
index 49f378e2..cfb380ba 100644
--- a/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
+++ b/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
@@ -277,6 +277,19 @@ describe('API Entities normalizer', () => {
       expect(parsedUser).to.have.property('description_html').that.contains('<img')
     })
 
+    it('adds emojis to user profile fields', () => {
+      const user = makeMockUserMasto({ emojis: makeMockEmojiMasto(), fields: [{ name: ':thinking:', value: ':image:' }] })
+
+      const parsedUser = parseUser(user)
+
+      expect(parsedUser).to.have.property('fields_html').to.be.an('array')
+
+      const field = parsedUser.fields_html[0]
+
+      expect(field).to.have.property('name').that.contains('<img')
+      expect(field).to.have.property('value').that.contains('<img')
+    })
+
     it('adds hide_follows and hide_followers user settings', () => {
       const user = makeMockUserMasto({ pleroma: { hide_followers: true, hide_follows: false, hide_followers_count: false, hide_follows_count: true } })
 
-- 
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/services')

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 319bb4ac2895b8eb62da42e3f95addc9bb67b1a0 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 24 Nov 2019 18:50:28 +0200
Subject: initial streaming work

---
 src/modules/api.js                                 | 15 ++++++++
 src/modules/users.js                               | 13 ++++---
 src/services/api/api.service.js                    | 40 ++++++++++++++++++++++
 .../backend_interactor_service.js                  | 15 +++++++-
 4 files changed, 77 insertions(+), 6 deletions(-)

(limited to 'src/services')

diff --git a/src/modules/api.js b/src/modules/api.js
index 1293e3c8..1bf65db5 100644
--- a/src/modules/api.js
+++ b/src/modules/api.js
@@ -6,6 +6,7 @@ const api = {
     backendInteractor: backendInteractorService(),
     fetchers: {},
     socket: null,
+    mastoSocket: null,
     followRequests: []
   },
   mutations: {
@@ -29,6 +30,20 @@ const api = {
     }
   },
   actions: {
+    startMastoSocket (store) {
+      store.state.mastoSocket = store.state.backendInteractor
+        .startUserSocket({
+          store,
+          onMessage: (message) => {
+            if (!message) return
+            if (message.event === 'notification') {
+              store.dispatch('addNewNotifications', { notifications: [message.notification], older: false })
+            } else if (message.event === 'update') {
+              store.dispatch('addNewStatuses', { statuses: [message.status], userId: false, showImmediately: false, timeline: 'friends' })
+            }
+          }
+        })
+    },
     startFetchingTimeline (store, { timeline = 'friends', tag = false, userId = false }) {
       // Don't start fetching if we already are.
       if (store.state.fetchers[timeline]) return
diff --git a/src/modules/users.js b/src/modules/users.js
index e1373220..861a2f4f 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -469,11 +469,14 @@ const users = {
                 store.dispatch('initializeSocket')
               }
 
-              // Start getting fresh posts.
-              store.dispatch('startFetchingTimeline', { timeline: 'friends' })
-
-              // Start fetching notifications
-              store.dispatch('startFetchingNotifications')
+              store.dispatch('startMastoSocket').catch((error) => {
+                console.error(error)
+                // Start getting fresh posts.
+                store.dispatch('startFetchingTimeline', { timeline: 'friends' })
+
+                // Start fetching notifications
+                store.dispatch('startFetchingNotifications')
+              })
 
               // Get user mutes
               store.dispatch('fetchMutes')
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 8f5eb416..7f27564f 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 MASTODON_STREAMING = '/api/v1/streaming'
 
 const oldfetch = window.fetch
 
@@ -932,6 +933,45 @@ const search2 = ({ credentials, q, resolve, limit, offset, following }) => {
     })
 }
 
+export const getMastodonSocketURI = ({ credentials, stream, args = {} }) => {
+  return Object.entries({
+    ...(credentials
+      ? { access_token: credentials }
+      : {}
+    ),
+    stream,
+    ...args
+  }).reduce((acc, [key, val]) => {
+    return acc + `${key}=${val}&`
+  }, MASTODON_STREAMING + '?')
+}
+
+const MASTODON_STREAMING_EVENTS = new Set([
+  'update',
+  'notification',
+  'delete',
+  'filters_changed'
+])
+
+export const handleMastoWS = (wsEvent) => {
+  console.debug('Event', wsEvent)
+  const { data } = wsEvent
+  if (!data) return
+  const parsedEvent = JSON.parse(data)
+  const { event, payload } = parsedEvent
+  if (MASTODON_STREAMING_EVENTS.has(event)) {
+    const data = payload ? JSON.parse(payload) : null
+    if (event === 'update') {
+      return { event, status: parseStatus(data) }
+    } else if (event === 'notification') {
+      return { event, notification: parseNotification(data) }
+    }
+  } else {
+    console.warn('Unknown event', wsEvent)
+    return null
+  }
+}
+
 const apiService = {
   verifyCredentials,
   fetchTimeline,
diff --git a/src/services/backend_interactor_service/backend_interactor_service.js b/src/services/backend_interactor_service/backend_interactor_service.js
index 57fdccde..0cef4640 100644
--- a/src/services/backend_interactor_service/backend_interactor_service.js
+++ b/src/services/backend_interactor_service/backend_interactor_service.js
@@ -1,4 +1,4 @@
-import apiService from '../api/api.service.js'
+import apiService, { getMastodonSocketURI, handleMastoWS } from '../api/api.service.js'
 import timelineFetcherService from '../timeline_fetcher/timeline_fetcher.service.js'
 import notificationsFetcher from '../notifications_fetcher/notifications_fetcher.service.js'
 import followRequestFetcher from '../../services/follow_request_fetcher/follow_request_fetcher.service'
@@ -16,6 +16,19 @@ const backendInteractorService = credentials => ({
     return followRequestFetcher.startFetching({ store, credentials })
   },
 
+  startUserSocket ({ store, onMessage }) {
+    const serv = store.rootState.instance.server.replace('https', 'wss')
+    // const serb = 'ws://localhost:8080/'
+    const url = serv + getMastodonSocketURI({ credentials, stream: 'user' })
+    const socket = new WebSocket(url)
+    console.log(socket)
+    if (socket) {
+      socket.addEventListener('message', (wsEvent) => onMessage(handleMastoWS(wsEvent)))
+    } else {
+      throw new Error('failed to connect to socket')
+    }
+  },
+
   ...Object.entries(apiService).reduce((acc, [key, func]) => {
     return {
       ...acc,
-- 
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/services')

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 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/services')

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/services')

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 a06705d9390b738ccace9fb6a0c213306f753f42 Mon Sep 17 00:00:00 2001
From: Ivan Tashkinov <ivantashkinov@gmail.com>
Date: Sun, 8 Dec 2019 13:52:26 +0300
Subject: Added OAuth 'push' and 'admin' scopes.

---
 src/services/new_api/oauth.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/services')

diff --git a/src/services/new_api/oauth.js b/src/services/new_api/oauth.js
index d0d18c03..3c8e64bd 100644
--- a/src/services/new_api/oauth.js
+++ b/src/services/new_api/oauth.js
@@ -12,7 +12,7 @@ export const getOrCreateApp = ({ clientId, clientSecret, instance, commit }) =>
 
   form.append('client_name', `PleromaFE_${window.___pleromafe_commit_hash}_${(new Date()).toISOString()}`)
   form.append('redirect_uris', REDIRECT_URI)
-  form.append('scopes', 'read write follow')
+  form.append('scopes', 'read write follow push admin')
 
   return window.fetch(url, {
     method: 'POST',
@@ -28,7 +28,7 @@ const login = ({ instance, clientId }) => {
     response_type: 'code',
     client_id: clientId,
     redirect_uri: REDIRECT_URI,
-    scope: 'read write follow'
+    scope: 'read write follow push admin'
   }
 
   const dataString = reduce(data, (acc, v, k) => {
-- 
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/services')

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 505fb260610e557e27bbc5d27515337ea07e0e3e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 8 Dec 2019 19:18:38 +0200
Subject: better wrapper for websocket

---
 src/modules/api.js                                 | 43 ++++++++++----------
 src/services/api/api.service.js                    | 46 +++++++++++++++++++++-
 .../backend_interactor_service.js                  | 15 ++-----
 3 files changed, 69 insertions(+), 35 deletions(-)

(limited to 'src/services')

diff --git a/src/modules/api.js b/src/modules/api.js
index 185c9db6..593f8498 100644
--- a/src/modules/api.js
+++ b/src/modules/api.js
@@ -34,36 +34,35 @@ const api = {
     // MastoAPI 'User' sockets
     startMastoUserSocket (store) {
       const { state, dispatch } = store
-      state.mastoUserSocket = state.backendInteractor
-        .startUserSocket({
-          store,
-          onMessage: (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 = 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', error => {
+        }
+      )
+      state.mastoUserSocket.addEventListener('error', ({ detail: error }) => {
         console.error('Error in MastoAPI websocket:', error)
       })
-      state.mastoUserSocket.addEventListener('close', closeEvent => {
+      state.mastoUserSocket.addEventListener('close', ({ detail: 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 {
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 7f27564f..c6818df4 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -953,8 +953,52 @@ const MASTODON_STREAMING_EVENTS = new Set([
   'filters_changed'
 ])
 
+// A thin wrapper around WebSocket API that allows adding a pre-processor to it
+// Uses EventTarget and a CustomEvent to proxy events
+export const ProcessedWS = ({
+  url,
+  preprocessor = handleMastoWS,
+  id = 'Unknown'
+}) => {
+  const eventTarget = new EventTarget()
+  const socket = new WebSocket(url)
+  if (!socket) throw new Error(`Failed to create socket ${id}`)
+  const proxy = (original, eventName, processor = a => a) => {
+    original.addEventListener(eventName, (eventData) => {
+      eventTarget.dispatchEvent(new CustomEvent(
+        eventName,
+        { detail: processor(eventData) }
+      ))
+    })
+  }
+  socket.addEventListener('open', (wsEvent) => {
+    console.debug(`[WS][${id}] Socket connected`, wsEvent)
+  })
+  socket.addEventListener('error', (wsEvent) => {
+    console.debug(`[WS][${id}] Socket errored`, wsEvent)
+  })
+  socket.addEventListener('close', (wsEvent) => {
+    console.debug(
+      `[WS][${id}] Socket disconnected with code ${wsEvent.code}`,
+      wsEvent
+    )
+  })
+  socket.addEventListener('message', (wsEvent) => {
+    console.debug(
+      `[WS][${id}] Message received`,
+      wsEvent
+    )
+  })
+
+  proxy(socket, 'open')
+  proxy(socket, 'close')
+  proxy(socket, 'message', preprocessor)
+  proxy(socket, 'error')
+
+  return eventTarget
+}
+
 export const handleMastoWS = (wsEvent) => {
-  console.debug('Event', wsEvent)
   const { data } = wsEvent
   if (!data) return
   const parsedEvent = JSON.parse(data)
diff --git a/src/services/backend_interactor_service/backend_interactor_service.js b/src/services/backend_interactor_service/backend_interactor_service.js
index 33b79a40..b7372ed0 100644
--- a/src/services/backend_interactor_service/backend_interactor_service.js
+++ b/src/services/backend_interactor_service/backend_interactor_service.js
@@ -1,4 +1,4 @@
-import apiService, { getMastodonSocketURI, handleMastoWS } from '../api/api.service.js'
+import apiService, { getMastodonSocketURI, ProcessedWS } from '../api/api.service.js'
 import timelineFetcherService from '../timeline_fetcher/timeline_fetcher.service.js'
 import notificationsFetcher from '../notifications_fetcher/notifications_fetcher.service.js'
 import followRequestFetcher from '../../services/follow_request_fetcher/follow_request_fetcher.service'
@@ -20,19 +20,10 @@ const backendInteractorService = credentials => ({
     return followRequestFetcher.startFetching({ store, credentials })
   },
 
-  startUserSocket ({ store, onMessage }) {
+  startUserSocket ({ store }) {
     const serv = store.rootState.instance.server.replace('http', 'ws')
     const url = serv + getMastodonSocketURI({ credentials, stream: 'user' })
-    const socket = new WebSocket(url)
-    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('MastoApi User WebSocket Error:', error))
-      return socket
-    } else {
-      throw new Error('failed to connect to socket')
-    }
+    return ProcessedWS({ url, id: 'User' })
   },
 
   ...Object.entries(apiService).reduce((acc, [key, func]) => {
-- 
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/services')

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 1a043d4350c1cab2a56c5197ee8fb31e68593567 Mon Sep 17 00:00:00 2001
From: Wyatt Benno <wyattbenno@gmail.com>
Date: Mon, 9 Dec 2019 09:11:31 +0900
Subject: remove console

---
 src/services/timeline_fetcher/timeline_fetcher.service.js | 1 -
 1 file changed, 1 deletion(-)

(limited to 'src/services')

diff --git a/src/services/timeline_fetcher/timeline_fetcher.service.js b/src/services/timeline_fetcher/timeline_fetcher.service.js
index 1aaae563..68644261 100644
--- a/src/services/timeline_fetcher/timeline_fetcher.service.js
+++ b/src/services/timeline_fetcher/timeline_fetcher.service.js
@@ -47,7 +47,6 @@ const fetchAndUpdate = ({
   return apiService.fetchTimeline(args)
     .then((statuses) => {
       if (statuses.error) {
-        console.log(statuses)
         store.dispatch('setErrorData', { value: statuses.error })
         return
       }
-- 
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/services')

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 2bc63720a5f9da740fa8082d587b6cfdd0c652ee Mon Sep 17 00:00:00 2001
From: kPherox <admin@mail.kr-kp.com>
Date: Tue, 10 Dec 2019 23:54:28 +0900
Subject: fix parse for move type notifications

---
 src/i18n/en.json                                            | 3 ++-
 src/modules/statuses.js                                     | 5 ++++-
 src/services/entity_normalizer/entity_normalizer.service.js | 5 ++++-
 3 files changed, 10 insertions(+), 3 deletions(-)

(limited to 'src/services')

diff --git a/src/i18n/en.json b/src/i18n/en.json
index 85146ef5..f46d5b3d 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -110,7 +110,8 @@
     "notifications": "Notifications",
     "read": "Read!",
     "repeated_you": "repeated your status",
-    "no_more_notifications": "No more notifications"
+    "no_more_notifications": "No more notifications",
+    "moved_to": "moved to"
   },
   "polls": {
     "add_poll": "Add Poll",
diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index f11ffdcd..3cf74a43 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -305,7 +305,7 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
 
 const addNewNotifications = (state, { dispatch, notifications, older, visibleNotificationTypes, rootGetters }) => {
   each(notifications, (notification) => {
-    if (notification.type !== 'follow') {
+    if (notification.type !== 'follow' && notification.type !== 'move') {
       notification.action = addStatusToGlobalStorage(state, notification.action).item
       notification.status = notification.status && addStatusToGlobalStorage(state, notification.status).item
     }
@@ -338,6 +338,9 @@ const addNewNotifications = (state, { dispatch, notifications, older, visibleNot
           case 'follow':
             i18nString = 'followed_you'
             break
+          case 'move':
+            i18nString = 'moved_to'
+            break
         }
 
         if (i18nString) {
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index ca79df6f..ee007bee 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -341,10 +341,13 @@ 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.status = output.type === 'follow' || output.type === 'move'
       ? null
       : parseStatus(data.status)
     output.action = output.status // TODO: Refactor, this is unneeded
+    output.target = output.type !== 'move'
+      ? null
+      : parseUser(data.target)
     output.from_profile = parseUser(data.account)
   } else {
     const parsedNotice = parseStatus(data.notice)
-- 
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/services')

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 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/services')

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 d6dc2bad1f2175f9a9eb0dfd4c04fafab410632b Mon Sep 17 00:00:00 2001
From: Maksim Pechnikov <parallel588@gmail.com>
Date: Wed, 11 Dec 2019 15:59:29 +0300
Subject: fixed typo

---
 src/services/api/api.service.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/services')

diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 8f5eb416..68be0d50 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -22,7 +22,7 @@ const MFA_BACKUP_CODES_URL = '/api/pleroma/accounts/mfa/backup_codes'
 
 const MFA_SETUP_OTP_URL = '/api/pleroma/accounts/mfa/setup/totp'
 const MFA_CONFIRM_OTP_URL = '/api/pleroma/accounts/mfa/confirm/totp'
-const MFA_DISABLE_OTP_URL = '/api/pleroma/account/mfa/totp'
+const MFA_DISABLE_OTP_URL = '/api/pleroma/accounts/mfa/totp'
 
 const MASTODON_LOGIN_URL = '/api/v1/accounts/verify_credentials'
 const MASTODON_REGISTRATION_URL = '/api/v1/accounts'
-- 
cgit v1.2.3-70-g09d2


From 63a5f50e7c4acfc7676a1093990d0377dcb1a39f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 11 Dec 2019 18:20:43 +0200
Subject: fix deletes causing errors

---
 src/services/api/api.service.js | 4 ++++
 1 file changed, 4 insertions(+)

(limited to 'src/services')

diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 517b953e..5f706dc0 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -1010,6 +1010,10 @@ export const handleMastoWS = (wsEvent) => {
   const parsedEvent = JSON.parse(data)
   const { event, payload } = parsedEvent
   if (MASTODON_STREAMING_EVENTS.has(event)) {
+    // MastoBE and PleromaBE both send payload for delete as a PLAIN string
+    if (event === 'delete') {
+      return { event, id: payload }
+    }
     const data = payload ? JSON.parse(payload) : null
     if (event === 'update') {
       return { event, status: parseStatus(data) }
-- 
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/services')

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 b3992358487d5afa7499759a90d6447a2b0bfe20 Mon Sep 17 00:00:00 2001
From: lain <lain@soykaf.club>
Date: Thu, 12 Dec 2019 09:38:24 +0000
Subject: Revert "Merge branch 'oauth-extra-scopes' into 'develop'"

This reverts merge request !1024
---
 src/services/new_api/oauth.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/services')

diff --git a/src/services/new_api/oauth.js b/src/services/new_api/oauth.js
index 3c8e64bd..d0d18c03 100644
--- a/src/services/new_api/oauth.js
+++ b/src/services/new_api/oauth.js
@@ -12,7 +12,7 @@ export const getOrCreateApp = ({ clientId, clientSecret, instance, commit }) =>
 
   form.append('client_name', `PleromaFE_${window.___pleromafe_commit_hash}_${(new Date()).toISOString()}`)
   form.append('redirect_uris', REDIRECT_URI)
-  form.append('scopes', 'read write follow push admin')
+  form.append('scopes', 'read write follow')
 
   return window.fetch(url, {
     method: 'POST',
@@ -28,7 +28,7 @@ const login = ({ instance, clientId }) => {
     response_type: 'code',
     client_id: clientId,
     redirect_uri: REDIRECT_URI,
-    scope: 'read write follow push admin'
+    scope: 'read write follow'
   }
 
   const dataString = reduce(data, (acc, v, k) => {
-- 
cgit v1.2.3-70-g09d2


From 341416b0e0102b20d9b8ee317218ee55d0402452 Mon Sep 17 00:00:00 2001
From: Ivan Tashkinov <ivantbusiness@gmail.com>
Date: Thu, 12 Dec 2019 14:43:48 +0000
Subject: Revert "Merge branch 'revert-96cab6d8' into 'develop'"

This reverts merge request !1032
---
 src/services/new_api/oauth.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/services')

diff --git a/src/services/new_api/oauth.js b/src/services/new_api/oauth.js
index d0d18c03..3c8e64bd 100644
--- a/src/services/new_api/oauth.js
+++ b/src/services/new_api/oauth.js
@@ -12,7 +12,7 @@ export const getOrCreateApp = ({ clientId, clientSecret, instance, commit }) =>
 
   form.append('client_name', `PleromaFE_${window.___pleromafe_commit_hash}_${(new Date()).toISOString()}`)
   form.append('redirect_uris', REDIRECT_URI)
-  form.append('scopes', 'read write follow')
+  form.append('scopes', 'read write follow push admin')
 
   return window.fetch(url, {
     method: 'POST',
@@ -28,7 +28,7 @@ const login = ({ instance, clientId }) => {
     response_type: 'code',
     client_id: clientId,
     redirect_uri: REDIRECT_URI,
-    scope: 'read write follow'
+    scope: 'read write follow push admin'
   }
 
   const dataString = reduce(data, (acc, v, k) => {
-- 
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/services')

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 45e7f93c49042c365badf0043ebd0480ecbb9c49 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Mon, 18 Nov 2019 20:33:07 -0500
Subject: refactor toggleActivationStatus

---
 src/services/api/api.service.js | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

(limited to 'src/services')

diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index dbc8320e..b739ec1f 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -452,13 +452,7 @@ const deleteRight = ({ right, credentials, ...user }) => {
 
 // eslint-disable-next-line camelcase
 const toggleActivationStatus = ({ credentials, screen_name }) => {
-  const headers = authHeaders(credentials)
-  headers['Content-Type'] = 'application/json'
-
-  return fetch(TOGGLE_ACTIVATION_URL(screen_name), {
-    method: 'PATCH',
-    headers: headers
-  })
+  return promisedRequest({ url: TOGGLE_ACTIVATION_URL(screen_name), method: 'PATCH', credentials })
 }
 
 const deleteUser = ({ credentials, ...user }) => {
-- 
cgit v1.2.3-70-g09d2


From 4e4c4af422c400d016e4605f8bcf699f7154a8b4 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Tue, 19 Nov 2019 14:41:39 -0500
Subject: toggle_activation api is also deprecated

---
 src/modules/users.js                               |  7 +++--
 src/services/api/api.service.js                    | 31 +++++++++++++++++-----
 .../backend_interactor_service.js                  | 12 ++++++---
 3 files changed, 37 insertions(+), 13 deletions(-)

(limited to 'src/services')

diff --git a/src/modules/users.js b/src/modules/users.js
index ec2ef608..82d3c4e8 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -332,10 +332,9 @@ const users = {
         .then((relationship) => commit('updateUserRelationship', [relationship]))
     },
     toggleActivationStatus ({ rootState, commit }, user) {
-      rootState.api.backendInteractor.toggleActivationStatus(user)
-        .then(response => {
-          commit('updateActivationStatus', { user, deactivated: response.deactivated })
-        })
+      const api = user.deactivated ? rootState.api.backendInteractor.activateUser : rootState.api.backendInteractor.deactivateUser
+      api(user)
+        .then(({ deactivated }) => commit('updateActivationStatus', { user, deactivated }))
     },
     registerPushNotifications (store) {
       const token = store.state.currentUser.credentials
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index b739ec1f..a69fa53c 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -1,4 +1,4 @@
-import { each, map, concat, last } from 'lodash'
+import { each, map, concat, last, get } from 'lodash'
 import { parseStatus, parseUser, parseNotification, parseAttachment } from '../entity_normalizer/entity_normalizer.service.js'
 import 'whatwg-fetch'
 import { RegistrationError, StatusCodeError } from '../errors/errors'
@@ -12,7 +12,8 @@ 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 TOGGLE_ACTIVATION_URL = screenName => `/api/pleroma/admin/users/${screenName}/toggle_activation`
+const ACTIVATE_USER_URL = '/api/pleroma/admin/users/activate'
+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'
@@ -450,9 +451,26 @@ const deleteRight = ({ right, credentials, ...user }) => {
   })
 }
 
-// eslint-disable-next-line camelcase
-const toggleActivationStatus = ({ credentials, screen_name }) => {
-  return promisedRequest({ url: TOGGLE_ACTIVATION_URL(screen_name), method: 'PATCH', credentials })
+const activateUser = ({ credentials, screen_name: nickname }) => {
+  return promisedRequest({
+    url: ACTIVATE_USER_URL,
+    method: 'PATCH',
+    credentials,
+    payload: {
+      nicknames: [nickname]
+    }
+  }).then(response => get(response, 'users.0'))
+}
+
+const deactivateUser = ({ credentials, screen_name: nickname }) => {
+  return promisedRequest({
+    url: DEACTIVATE_USER_URL,
+    method: 'PATCH',
+    credentials,
+    payload: {
+      nicknames: [nickname]
+    }
+  }).then(response => get(response, 'users.0'))
 }
 
 const deleteUser = ({ credentials, ...user }) => {
@@ -968,7 +986,8 @@ const apiService = {
   deleteUser,
   addRight,
   deleteRight,
-  toggleActivationStatus,
+  activateUser,
+  deactivateUser,
   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 e0a15d3b..3d4ec6ac 100644
--- a/src/services/backend_interactor_service/backend_interactor_service.js
+++ b/src/services/backend_interactor_service/backend_interactor_service.js
@@ -89,8 +89,13 @@ const backendInteractorService = credentials => {
   }
 
   // eslint-disable-next-line camelcase
-  const toggleActivationStatus = ({ screen_name }) => {
-    return apiService.toggleActivationStatus({ screen_name, credentials })
+  const activateUser = ({ screen_name }) => {
+    return apiService.activateUser({ screen_name, credentials })
+  }
+
+  // eslint-disable-next-line camelcase
+  const deactivateUser = ({ screen_name }) => {
+    return apiService.deactivateUser({ screen_name, credentials })
   }
 
   // eslint-disable-next-line camelcase
@@ -191,7 +196,8 @@ const backendInteractorService = credentials => {
     addRight,
     deleteRight,
     deleteUser,
-    toggleActivationStatus,
+    activateUser,
+    deactivateUser,
     register,
     getCaptcha,
     updateAvatar,
-- 
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/services')

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/services')

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/services')

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/services')

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 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/services')

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 cce64077b54ae57fd5a8f5b5c520ee3274c5a61e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 6 Jan 2020 22:55:14 +0200
Subject: Refactored style_setter to be more declarative instead of walls of
 copypasted code

---
 src/services/style_setter/style_setter.js | 382 ++++++++++++++++++++++++------
 1 file changed, 306 insertions(+), 76 deletions(-)

(limited to 'src/services')

diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index e8a64517..40a552a1 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -3,6 +3,262 @@ 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', 'fg', 'underlay', 'bg'],
+    layer: 'fg',
+    textColor: true
+  },
+  fgLink: {
+    depends: ['link', 'fg', 'underlay', 'bg'],
+    layer: 'fg',
+    textColor: 'preserve'
+  },
+
+  // Panel header
+  panel: '--fg',
+  panelText: {
+    depends: ['fgText', 'panel'],
+    layer: 'panel',
+    textColor: true
+  },
+  panelFaint: {
+    depends: ['fgText', 'panel'],
+    layer: 'panel',
+    textColor: true
+  },
+  panelLink: {
+    depends: ['fgLink', 'panel'],
+    layer: 'panel',
+    textColor: 'preserve'
+  },
+
+  // Top bar
+  topBar: '--fg',
+  topBarText: {
+    depends: ['fgText', 'topBar'],
+    layer: 'topBar',
+    textColor: true
+  },
+  topBarLink: {
+    depends: ['fgLink', 'topBar'],
+    layer: 'topBar',
+    textColor: 'preserve'
+  },
+
+  // Buttons
+  btn: '--fg',
+  btnText: {
+    depends: ['fgText', 'btn'],
+    layer: 'btn'
+  },
+  btnPanelText: {
+    depends: ['panelText', 'btn', 'panel'],
+    layer: 'btnPanel',
+    variant: 'btn',
+    textColor: true
+  },
+  btnTopBarText: {
+    depends: ['topBarText', 'btn', 'topBar'],
+    layer: 'btnTopBar',
+    variant: 'btn',
+    textColor: true
+  },
+
+  // Input fields
+  input: '--fg',
+  inputText: {
+    depends: ['text', 'input'],
+    layer: 'input',
+    textColor: true
+  },
+  inputPanelText: {
+    depends: ['panelText', 'input', 'panel'],
+    layer: 'inputPanel',
+    variant: 'input',
+    textColor: true
+  },
+  inputTopbarText: {
+    depends: ['topBarText', 'input', 'topBar'],
+    layer: 'inputTopBar',
+    variant: 'input',
+    textColor: true
+  },
+
+  alertError: '--cRed',
+  alertErrorText: {
+    depends: ['text', 'alertError'],
+    layer: 'alert',
+    variant: 'alertError',
+    textColor: true
+  },
+  alertErrorPanelText: {
+    depends: ['panelText', 'alertError', 'panel'],
+    layer: 'alertPanel',
+    variant: 'alertError',
+    textColor: true
+  },
+
+  alertWarning: '--cOrange',
+  alertWarningText: {
+    depends: ['text', 'alertWarning'],
+    layer: 'alert',
+    variant: 'alertWarning',
+    textColor: true
+  },
+  alertWarningPanelText: {
+    depends: ['panelText', 'alertWarning', 'panel'],
+    layer: 'alertPanel',
+    variant: 'alertWarning',
+    textColor: true
+  },
+
+  badgeNotification: '--cRed',
+  badgeNotificationText: {
+    depends: ['text', 'badgeNotification'],
+    layer: 'badge',
+    variant: 'badgeNotification',
+    textColor: true
+  }
+}
+
+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 } = data
+    if (Array.isArray(depends)) {
+      return depends
+    } else if (typeof depends === 'object') {
+      return [depends]
+    } else {
+      return []
+    }
+  }
+}
+
+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 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]
+  ]))
+}
 
 // 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
@@ -153,12 +409,13 @@ const getCssColor = (input, a) => {
 }
 
 const generateColors = (themeData) => {
-  const colors = {}
   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,
@@ -171,7 +428,6 @@ const generateColors = (themeData) => {
   }, {}))
 
   const inputColors = themeData.colors || themeData
-
   const transparentsOpacity = Object.entries(inputColors).reduce((acc, [k, v]) => {
     if (v === 'transparent') {
       acc[k] = 0
@@ -181,13 +437,8 @@ const generateColors = (themeData) => {
 
   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 }
-  }, {})
-
-  const col = Object.entries({ ...inputColors, ...compatColors }).reduce((acc, [k, v]) => {
+  // Cycle one: just whatever we have
+  const sourceColors = Object.entries(inputColors).reduce((acc, [k, v]) => {
     if (typeof v === 'object') {
       acc[k] = v
     } else {
@@ -201,77 +452,53 @@ const generateColors = (themeData) => {
     return acc
   }, {})
 
-  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 isLightOnDark = convert(sourceColors.bg).hsl.l < convert(sourceColors.text).hsl.l
   const mod = isLightOnDark ? 1 : -1
 
-  colors.lightText = col.lightText || brightness(20 * mod, colors.text).rgb
-
-  colors.accent = col.accent || col.link
-  colors.link = col.link || col.accent
-
-  colors.faint = col.faint || Object.assign({}, col.text)
-
-  colors.lightBg = col.lightBg || brightness(5 * mod, colors.bg).rgb
-
-  const underlay = [colors.underlay, opacity.underlay]
-  // 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
-  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.border = col.border || brightness(2 * mod, colors.fg).rgb
-
-  colors.btn = col.btn || Object.assign({}, col.fg)
-  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)
-  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]
-  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)
-  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)
-
-  colors.icon = mixrgb(colors.bg, colors.text)
-
-  colors.cBlue = col.cBlue || hex2rgb('#0000FF')
-  colors.cRed = col.cRed || hex2rgb('#FF0000')
-  colors.cGreen = col.cGreen || hex2rgb('#00FF00')
-  colors.cOrange = col.cOrange || hex2rgb('#E3FF00')
-
-  colors.alertError = col.alertError || Object.assign({}, colors.cRed)
-  const alertError = [colors.alertError, opacity.alert]
-  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 = 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 = colors.badgeNotificationText || contrastRatio(colors.badgeNotification).rgb
+  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) {
+        return {
+          ...acc,
+          [key]: getTextColor(
+            alphaBlendLayers(
+              { ...acc[deps[0]] },
+              getLayers(
+                value.layer,
+                value.variant || value.layer,
+                acc,
+                opacity
+              )
+            ),
+            { ...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] }))
+          )
+        }
+      }
+    }
+  }, {})
 
+  // Inheriting opacities
   Object.entries(opacity).forEach(([ k, v ]) => {
-    console.log(k)
     if (typeof v === 'undefined') return
     if (k === 'alert') {
       colors.alertError.a = v
@@ -285,6 +512,9 @@ const generateColors = (themeData) => {
     if (k === 'bg') {
       colors['lightBg'].a = v
     }
+    if (k === 'badge') {
+      colors['badgeNotification'].a = v
+    }
     if (colors[k]) {
       colors[k].a = v
     } else {
-- 
cgit v1.2.3-70-g09d2


From 38f2b969e467d1cf47597dc4cc2b958e5df99828 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sat, 11 Jan 2020 23:07:41 +0200
Subject: simplified definition for text color by accounting for layers
 automatically, fixed badge notification text color by adding 'bw' option for
 textColor

---
 src/services/style_setter/style_setter.js | 123 +++++++++++++++++-------------
 1 file changed, 69 insertions(+), 54 deletions(-)

(limited to 'src/services')

diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 40a552a1..992b3194 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -65,12 +65,12 @@ export const SLOT_INHERITANCE = {
 
   // Foreground
   fgText: {
-    depends: ['text', 'fg', 'underlay', 'bg'],
+    depends: ['text'],
     layer: 'fg',
     textColor: true
   },
   fgLink: {
-    depends: ['link', 'fg', 'underlay', 'bg'],
+    depends: ['link'],
     layer: 'fg',
     textColor: 'preserve'
   },
@@ -78,17 +78,17 @@ export const SLOT_INHERITANCE = {
   // Panel header
   panel: '--fg',
   panelText: {
-    depends: ['fgText', 'panel'],
+    depends: ['fgText'],
     layer: 'panel',
     textColor: true
   },
   panelFaint: {
-    depends: ['fgText', 'panel'],
+    depends: ['fgText'],
     layer: 'panel',
     textColor: true
   },
   panelLink: {
-    depends: ['fgLink', 'panel'],
+    depends: ['fgLink'],
     layer: 'panel',
     textColor: 'preserve'
   },
@@ -96,12 +96,12 @@ export const SLOT_INHERITANCE = {
   // Top bar
   topBar: '--fg',
   topBarText: {
-    depends: ['fgText', 'topBar'],
+    depends: ['fgText'],
     layer: 'topBar',
     textColor: true
   },
   topBarLink: {
-    depends: ['fgLink', 'topBar'],
+    depends: ['fgLink'],
     layer: 'topBar',
     textColor: 'preserve'
   },
@@ -109,17 +109,17 @@ export const SLOT_INHERITANCE = {
   // Buttons
   btn: '--fg',
   btnText: {
-    depends: ['fgText', 'btn'],
+    depends: ['fgText'],
     layer: 'btn'
   },
   btnPanelText: {
-    depends: ['panelText', 'btn', 'panel'],
+    depends: ['panelText'],
     layer: 'btnPanel',
     variant: 'btn',
     textColor: true
   },
   btnTopBarText: {
-    depends: ['topBarText', 'btn', 'topBar'],
+    depends: ['topBarText'],
     layer: 'btnTopBar',
     variant: 'btn',
     textColor: true
@@ -128,18 +128,18 @@ export const SLOT_INHERITANCE = {
   // Input fields
   input: '--fg',
   inputText: {
-    depends: ['text', 'input'],
+    depends: ['text'],
     layer: 'input',
     textColor: true
   },
   inputPanelText: {
-    depends: ['panelText', 'input', 'panel'],
+    depends: ['panelText'],
     layer: 'inputPanel',
     variant: 'input',
     textColor: true
   },
   inputTopbarText: {
-    depends: ['topBarText', 'input', 'topBar'],
+    depends: ['topBarText'],
     layer: 'inputTopBar',
     variant: 'input',
     textColor: true
@@ -153,7 +153,7 @@ export const SLOT_INHERITANCE = {
     textColor: true
   },
   alertErrorPanelText: {
-    depends: ['panelText', 'alertError', 'panel'],
+    depends: ['panelText', 'alertError'],
     layer: 'alertPanel',
     variant: 'alertError',
     textColor: true
@@ -167,7 +167,7 @@ export const SLOT_INHERITANCE = {
     textColor: true
   },
   alertWarningPanelText: {
-    depends: ['panelText', 'alertWarning', 'panel'],
+    depends: ['panelText', 'alertWarning'],
     layer: 'alertPanel',
     variant: 'alertWarning',
     textColor: true
@@ -178,23 +178,47 @@ export const SLOT_INHERITANCE = {
     depends: ['text', 'badgeNotification'],
     layer: 'badge',
     variant: 'badgeNotification',
-    textColor: true
+    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 } = data
+    const { depends, layer, variant } = data
+    const layerDeps = layer
+      ? getLayersArray(layer).map(currentLayer => {
+        return currentLayer === layer
+          ? variant || layer
+          : currentLayer
+      })
+      : []
     if (Array.isArray(depends)) {
-      return depends
-    } else if (typeof depends === 'object') {
-      return [depends]
+      return [...depends, ...layerDeps]
     } else {
-      return []
+      return [...layerDeps]
     }
   }
 }
@@ -241,25 +265,6 @@ export const topoSort = (
 
 export const SLOT_ORDERED = topoSort(SLOT_INHERITANCE)
 
-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]
-  ]))
-}
-
 // 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.
@@ -318,6 +323,8 @@ 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)
@@ -468,21 +475,29 @@ const generateColors = (themeData) => {
       const colorFunc = (isObject && value.color) || defaultColorFunc
 
       if (value.textColor) {
-        return {
-          ...acc,
-          [key]: getTextColor(
-            alphaBlendLayers(
-              { ...acc[deps[0]] },
-              getLayers(
-                value.layer,
-                value.variant || value.layer,
-                acc,
-                opacity
-              )
-            ),
-            { ...acc[deps[0]] },
-            value.textColor === 'preserve'
+        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] })))
-- 
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/services')

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/services')

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 1aea1f217e150f36020ab1902ee959c15775d299 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 12 Jan 2020 04:01:31 +0200
Subject: remove debug

---
 src/services/theme_data/theme_data.service.js | 1 -
 1 file changed, 1 deletion(-)

(limited to 'src/services')

diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
index c9c80727..a4df97c2 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@@ -302,7 +302,6 @@ export const getColors = (sourceColors, sourceOpacity, mod) => SLOT_ORDERED.redu
         }
       }
     } else {
-      console.log('BENIS', key, deps, deps.map((dep) => ({ ...acc[dep] })))
       return {
         ...acc,
         [key]: colorFunc(
-- 
cgit v1.2.3-70-g09d2


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

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

(limited to 'src/services')

diff --git a/src/services/color_convert/color_convert.js b/src/services/color_convert/color_convert.js
index 464f6495..576bf902 100644
--- a/src/services/color_convert/color_convert.js
+++ b/src/services/color_convert/color_convert.js
@@ -82,7 +82,7 @@ const relativeLuminance = (srgb) => {
  * @param {Object} b - sRGB color
  * @returns {Number} color ratio
  */
-const getContrastRatio = (a, b) => {
+export const getContrastRatio = (a, b) => {
   const la = relativeLuminance(a)
   const lb = relativeLuminance(b)
   const [l1, l2] = la > lb ? [la, lb] : [lb, la]
-- 
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/services')

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/services')

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/services')

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 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/services')

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/services')

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 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/services')

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 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/services')

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/services')

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/services')

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/services')

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/services')

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 910b82e231fd3a6fe2e53990d87972066fe1a23c Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shpuld@shpposter.club>
Date: Tue, 14 Jan 2020 11:13:59 +0200
Subject: Use last seen notif instead of first unseen notif for sinceId

---
 .../notifications_fetcher/notifications_fetcher.service.js         | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

(limited to 'src/services')

diff --git a/src/services/notifications_fetcher/notifications_fetcher.service.js b/src/services/notifications_fetcher/notifications_fetcher.service.js
index 47008026..64499a1b 100644
--- a/src/services/notifications_fetcher/notifications_fetcher.service.js
+++ b/src/services/notifications_fetcher/notifications_fetcher.service.js
@@ -2,7 +2,6 @@ import apiService from '../api/api.service.js'
 
 const update = ({ store, notifications, older }) => {
   store.dispatch('setNotificationsError', { value: false })
-
   store.dispatch('addNewNotifications', { notifications, older })
 }
 
@@ -30,9 +29,9 @@ const fetchAndUpdate = ({ store, credentials, older = false }) => {
 
     // load unread notifications repeatedly to provide consistency between browser tabs
     const notifications = timelineData.data
-    const unread = notifications.filter(n => !n.seen).map(n => n.id)
-    if (unread.length) {
-      args['since'] = Math.min(...unread)
+    const readNotifsIds = notifications.filter(n => n.seen).map(n => n.id)
+    if (readNotifsIds.length) {
+      args['since'] = Math.max(...readNotifsIds)
       fetchNotifications({ store, args, older })
     }
 
-- 
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/services')

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/services')

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/services')

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/services')

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/services')

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 552d13a060fe680d1f0800e311f69be8ba25057b Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 16 Jan 2020 23:09:46 +0200
Subject: better fallback for transparent colors

---
 src/services/theme_data/theme_data.service.js | 65 ++++++++++++++++++++++++---
 1 file changed, 58 insertions(+), 7 deletions(-)

(limited to 'src/services')

diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
index 5dbef554..b885c56c 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@@ -35,8 +35,8 @@ export const DEFAULT_OPACITY = {
 export const SLOT_INHERITANCE = {
   bg: {
     depends: [],
-    priority: 1,
-    opacity: 'bg'
+    opacity: 'bg',
+    priority: 1
   },
   fg: {
     depends: [],
@@ -272,6 +272,9 @@ export const SLOT_INHERITANCE = {
     variant: 'btnPressed',
     textColor: true
   },
+  btnPressedPanel: {
+    depends: ['btnPressed']
+  },
   btnPressedPanelText: {
     depends: ['btnPanelText'],
     layer: 'btnPanel',
@@ -490,8 +493,13 @@ export const getOpacitySlot = (
   inheritance = SLOT_INHERITANCE,
   getDeps = getDependencies
 ) => {
-  if (v.opacity === null) return
-  if (v.opacity) return v.opacity
+  const value = typeof v === 'string'
+    ? {
+      depends: v.startsWith('--') ? [v.substring(2)] : []
+    }
+    : v
+  if (value.opacity === null) return
+  if (value.opacity) return v.opacity
   const findInheritedOpacity = (val) => {
     const depSlot = val.depends[0]
     if (depSlot === undefined) return
@@ -505,8 +513,40 @@ export const getOpacitySlot = (
       return null
     }
   }
-  if (v.depends) {
-    return findInheritedOpacity(v)
+  if (value.depends) {
+    return findInheritedOpacity(value)
+  }
+}
+
+export const getLayerSlot = (
+  k,
+  v,
+  inheritance = SLOT_INHERITANCE,
+  getDeps = getDependencies
+) => {
+  const value = typeof v === 'string'
+    ? {
+      depends: v.startsWith('--') ? [v.substring(2)] : []
+    }
+    : v
+  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 (depSlot === undefined) return
+    const dependency = getDeps(depSlot, inheritance)[0]
+    if (dependency === undefined) return
+    if (dependency.layer || dependency === null) {
+      return dependency.layer
+    } else if (dependency.depends) {
+      return findInheritedLayer(dependency)
+    } else {
+      return null
+    }
+  }
+  if (value.depends) {
+    return findInheritedLayer(value)
   }
 }
 
@@ -550,9 +590,20 @@ export const getColors = (sourceColors, sourceOpacity, mod) => SLOT_ORDERED.redu
     // Color is defined in source color
     let targetColor = sourceColor
     if (targetColor === 'transparent') {
+      // We take only layers below current one
+      const layers = getLayers(
+        getLayerSlot(key, value),
+        key,
+        value.opacity || key,
+        colors,
+        opacity
+      ).slice(0, -1)
       targetColor = {
         // TODO: try to use alpha-blended background here
-        ...convert('#FF00FF').rgb,
+        ...alphaBlendLayers(
+          convert('#FF00FF').rgb,
+          layers
+        ),
         a: 0
       }
     } else if (typeof sourceColor === 'string' && sourceColor.startsWith('--')) {
-- 
cgit v1.2.3-70-g09d2


From c351e5124c41be994a85c1562aed72d6f48bc273 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 16 Jan 2020 23:28:42 +0200
Subject: fix selectedPost/selectedMenu

---
 src/services/theme_data/theme_data.service.js | 8 ++++++++
 1 file changed, 8 insertions(+)

(limited to 'src/services')

diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
index b885c56c..a0448eb3 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@@ -105,21 +105,25 @@ export const SLOT_INHERITANCE = {
   selectedPostFaintText: {
     depends: ['lightBgFaintText'],
     layer: 'lightBg',
+    variant: 'selectedPost',
     textColor: true
   },
   selectedPostFaintLink: {
     depends: ['lightBgFaintLink'],
     layer: 'lightBg',
+    variant: 'selectedPost',
     textColor: 'preserve'
   },
   selectedPostText: {
     depends: ['lightBgText'],
     layer: 'lightBg',
+    variant: 'selectedPost',
     textColor: true
   },
   selectedPostLink: {
     depends: ['lightBgLink'],
     layer: 'lightBg',
+    variant: 'selectedPost',
     textColor: 'preserve'
   },
   selectedPostIcon: {
@@ -131,21 +135,25 @@ export const SLOT_INHERITANCE = {
   selectedMenuFaintText: {
     depends: ['lightBgFaintText'],
     layer: 'lightBg',
+    variant: 'selectedMenu',
     textColor: true
   },
   selectedMenuFaintLink: {
     depends: ['lightBgFaintLink'],
     layer: 'lightBg',
+    variant: 'selectedMenu',
     textColor: 'preserve'
   },
   selectedMenuText: {
     depends: ['lightBgText'],
     layer: 'lightBg',
+    variant: 'selectedMenu',
     textColor: true
   },
   selectedMenuLink: {
     depends: ['lightBgLink'],
     layer: 'lightBg',
+    variant: 'selectedMenu',
     textColor: 'preserve'
   },
   selectedMenuIcon: {
-- 
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/services')

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 62343f6099ca06449a6755487930ea80706e1335 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 19 Jan 2020 20:59:54 +0200
Subject: documentation

---
 src/services/theme_data/theme_data.service.js | 113 ++++++++++++++++++++++++++
 1 file changed, 113 insertions(+)

(limited to 'src/services')

diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
index a0448eb3..9f010fdf 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@@ -1,7 +1,42 @@
 import { convert, brightness, contrastRatio } from 'chromatism'
 import { alphaBlend, alphaBlendLayers, getTextColor, mixrgb } from '../color_convert/color_convert.js'
 
+/*
+ * # What's all this?
+ * Here be theme engine for pleromafe. All of this supposed to ease look
+ * and feel customization, making widget styles and make developer's life
+ * easier when it comes to supporting themes. Like many other theme systems
+ * it operates on color definitions, or "slots" - for example you define
+ * "button" color slot and then in UI component Button's CSS you refer to
+ * it as a CSS3 Variable.
+ *
+ * Some applications allow you to customize colors for certain things.
+ * Some UI toolkits allow you to define colors for each type of widget.
+ * Most of them are pretty barebones and have no assistance for common
+ * problems and cases, and in general themes themselves are very hard to
+ * maintain in all aspects. This theme engine tries to solve all of the
+ * common problems with themes.
+ *
+ * You don't have redefine several similar colors if you just want to
+ * change one color - all color slots are derived from other ones, so you
+ * can have at least one or two "basic" colors defined and have all other
+ * components inherit and modify basic ones.
+ *
+ * You don't have to test contrast ratio for colors or pick text color for
+ * each element even if you have light-on-dark elements in dark-on-light
+ * theme.
+ *
+ * You don't have to maintain order of code for inheriting slots from othet
+ * slots - dependency graph resolving does it for you.
+ */
+
+/* This indicates that this version of code outputs similar theme data and
+ * should be incremented if output changes - for instance if getTextColor
+ * function changes and older themes no longer render text colors as
+ * author intended previously.
+ */
 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
@@ -25,6 +60,9 @@ export const LAYERS = {
   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,
@@ -32,6 +70,44 @@ export const DEFAULT_OPACITY = {
   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: [],
@@ -456,6 +532,16 @@ const getDependencies = (key, inheritance) => {
   }
 }
 
+/**
+ * Sorts inheritance object topologically - dependant slots come after
+ * dependencies
+ *
+ * @property {Object} inheritance - object defining the nodes
+ * @property {Function} getDeps - function that returns dependencies for
+ *   given value and inheritance object.
+ * @returns {String[]} keys of inheritance object, sorted in topological
+ *   order
+ */
 export const topoSort = (
   inheritance = SLOT_INHERITANCE,
   getDeps = getDependencies
@@ -496,6 +582,11 @@ export const topoSort = (
   return output
 }
 
+/**
+ * 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,
   inheritance = SLOT_INHERITANCE,
@@ -526,6 +617,13 @@ export const getOpacitySlot = (
   }
 }
 
+/**
+ * retrieves layer slot for given slot. This goes up the depenency graph
+ * to find which parent has opacity slot defined for it.
+ * this is basically copypaste of getOpacitySlot except it checks if key is
+ * in LAYERS
+ * TODO refactor this
+ */
 export const getLayerSlot = (
   k,
   v,
@@ -558,12 +656,19 @@ export const getLayerSlot = (
   }
 }
 
+/**
+ * topologically sorted SLOT_INHERITANCE + additional priority sort
+ */
 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 }), {})
 )
 
+/**
+ * Dictionary where keys are color slots and values are opacity associated
+ * with them
+ */
 export const SLOTS_OPACITIES_DICT = Object.entries(SLOT_INHERITANCE).reduce((acc, [k, v]) => {
   const opacity = getOpacitySlot(v, SLOT_INHERITANCE, getDependencies)
   if (opacity) {
@@ -573,6 +678,10 @@ export const SLOTS_OPACITIES_DICT = Object.entries(SLOT_INHERITANCE).reduce((acc
   }
 }, {})
 
+/**
+ * All opacity slots used in color slots, their default values and affected
+ * color slots.
+ */
 export const OPACITIES = Object.entries(SLOT_INHERITANCE).reduce((acc, [k, v]) => {
   const opacity = getOpacitySlot(v, SLOT_INHERITANCE, getDependencies)
   if (opacity) {
@@ -588,6 +697,10 @@ export const OPACITIES = Object.entries(SLOT_INHERITANCE).reduce((acc, [k, v]) =
   }
 }, {})
 
+/**
+ * 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.
+ */
 export const getColors = (sourceColors, sourceOpacity, mod) => SLOT_ORDERED.reduce(({ colors, opacity }, key) => {
   const value = SLOT_INHERITANCE[key]
   const isObject = typeof value === 'object'
-- 
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/services')

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 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/services')

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 2b36a62c5600738737e0fda4e0fc92e6e1f59c33 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 20 Jan 2020 01:44:11 +0200
Subject: fix tests, integrate depenentless sorting into toposort for easier
 testing and better guarantees

---
 src/services/theme_data/theme_data.service.js      | 22 +++++++++++-----------
 .../specs/services/theme_data/theme_data.spec.js   | 10 +++++++++-
 2 files changed, 20 insertions(+), 12 deletions(-)

(limited to 'src/services')

diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
index 36837b44..63bfb5af 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@@ -540,7 +540,7 @@ const getDependencies = (key, inheritance) => {
  * @property {Function} getDeps - function that returns dependencies for
  *   given value and inheritance object.
  * @returns {String[]} keys of inheritance object, sorted in topological
- *   order
+ *   order. Additionally, dependency-less nodes will always be first in line
  */
 export const topoSort = (
   inheritance = SLOT_INHERITANCE,
@@ -579,7 +579,14 @@ export const topoSort = (
   while (unprocessed.length > 0) {
     step(unprocessed.pop())
   }
-  return output
+  return output.sort((a, b) => {
+    const depsA = getDeps(a, inheritance).length
+    const depsB = getDeps(b, 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
+  })
 }
 
 /**
@@ -657,20 +664,13 @@ export const getLayerSlot = (
 }
 
 /**
- * topologically sorted SLOT_INHERITANCE + additional priority sort
+ * topologically sorted 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 }), {})
-).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/test/unit/specs/services/theme_data/theme_data.spec.js b/test/unit/specs/services/theme_data/theme_data.spec.js
index 507905eb..d8a04ba7 100644
--- a/test/unit/specs/services/theme_data/theme_data.spec.js
+++ b/test/unit/specs/services/theme_data/theme_data.spec.js
@@ -72,8 +72,16 @@ describe('topoSort', () => {
     expect(out.indexOf('layer2A')).to.be.below(out.indexOf('layer3AB'))
     expect(out.indexOf('layer2B')).to.be.below(out.indexOf('layer3AB'))
   })
+
+  it('dependentless nodes should be first', () => {
+    const out = topoSort(fixture2, (node, inheritance) => inheritance[node])
+    // This basically checks all ordering that matters
+    expect(out.indexOf('layerA')).to.eql(0)
+    expect(out.indexOf('layerB')).to.eql(1)
+  })
+
   it('ignores cyclic dependencies', () => {
-    const out = topoSort({ a: 'b', b: 'a', c: 'a' }, (node, inheritance) => inheritance[node])
+    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 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/services')

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/services')

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 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/services')

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 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/services')

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/services')

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 64fc07f080635c83f27b9a5541be32013f1d9a26 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 23 Jan 2020 00:36:38 +0200
Subject: removed unused constant, using getOpacitySlot now

---
 src/services/theme_data/theme_data.service.js | 13 -------------
 1 file changed, 13 deletions(-)

(limited to 'src/services')

diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
index 5e49fa17..bbabd175 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@@ -672,19 +672,6 @@ export const SLOT_ORDERED = topoSort(
     .reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {})
 )
 
-/**
- * Dictionary where keys are color slots and values are opacity associated
- * with them
- */
-export const SLOTS_OPACITIES_DICT = Object.entries(SLOT_INHERITANCE).reduce((acc, [k, v]) => {
-  const opacity = getOpacitySlot(k, SLOT_INHERITANCE, getDependencies)
-  if (opacity) {
-    return { ...acc, [k]: opacity }
-  } else {
-    return acc
-  }
-}, {})
-
 /**
  * All opacity slots used in color slots, their default values and affected
  * color slots.
-- 
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/services')

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 c1f2457112c38e680f8fb9050cbc44b2dea3a113 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 23 Jan 2020 22:48:32 +0200
Subject: revert fgText -> text after some consideration. case was fixed
 already in other way

---
 src/services/theme_data/theme_data.service.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'src/services')

diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
index bbabd175..d88bb9ea 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@@ -288,7 +288,7 @@ export const SLOT_INHERITANCE = {
     textColor: true
   },
   panelFaint: {
-    depends: ['text'],
+    depends: ['fgText'],
     layer: 'panel',
     opacity: 'faint',
     textColor: true
@@ -302,7 +302,7 @@ export const SLOT_INHERITANCE = {
   // Top bar
   topBar: '--fg',
   topBarText: {
-    depends: ['text'],
+    depends: ['fgText'],
     layer: 'topBar',
     textColor: true
   },
@@ -333,7 +333,7 @@ export const SLOT_INHERITANCE = {
     opacity: 'btn'
   },
   btnText: {
-    depends: ['text'],
+    depends: ['fgText'],
     layer: 'btn',
     textColor: true
   },
-- 
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/services')

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/services')

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/services')

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 d7e7f47b66de160b351e4e836de08ac188fc3079 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 24 Jan 2020 00:56:47 +0200
Subject: fix transparent color not affecting downstream slots

---
 src/services/theme_data/theme_data.service.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

(limited to 'src/services')

diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
index c0861a4a..0a6733a9 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@@ -326,7 +326,7 @@ export const getColors = (sourceColors, sourceOpacity, mod) => SLOT_ORDERED.redu
       } else {
         let color = { ...colors[deps[0]] }
         if (value.color) {
-          color = value.color(mod, ...deps.map((dep) => ({ ...colors[dep] })))
+          color = colorFunc(mod, ...deps.map((dep) => ({ ...colors[dep] })))
         }
 
         outputColor = getTextColor(
@@ -348,7 +348,13 @@ export const getColors = (sourceColors, sourceOpacity, mod) => SLOT_ORDERED.redu
   }
   const opacitySlot = getOpacitySlot(key)
   if (opacitySlot && outputColor.a === undefined) {
-    outputColor.a = sourceOpacity[opacitySlot] || OPACITIES[opacitySlot].defaultValue || 1
+    const deps = getDependencies(key, SLOT_INHERITANCE)
+    const dependencySlot = deps && deps[0]
+    if (dependencySlot && sourceColors[dependencySlot] === 'transparent') {
+      outputColor.a = 0
+    } else {
+      outputColor.a = sourceOpacity[opacitySlot] || OPACITIES[opacitySlot].defaultValue || 1
+    }
   }
   if (opacitySlot) {
     return {
-- 
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/services')

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 7cfe1b05e8d16fcbb6eab3b42f19e464d57ea35b Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shpuld@shpposter.club>
Date: Sun, 26 Jan 2020 15:57:40 +0200
Subject: remove mock data

---
 src/services/entity_normalizer/entity_normalizer.service.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/services')

diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index 03eaa5d7..f66d09ac 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -233,7 +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
+    output.emoji_reactions = data.pleroma.emoji_reactions
 
     if (data.pleroma) {
       const { pleroma } = data
-- 
cgit v1.2.3-70-g09d2


From 7c074b87418602effac03c4bae34afffcfca283f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 27 Jan 2020 04:20:13 +0200
Subject: fix rgba css generation, add some tests to automatically verify that
 themes are generated properly

---
 build/webpack.base.conf.js                         |   1 +
 src/services/color_convert/color_convert.js        |   2 +-
 src/services/theme_data/theme_data.service.js      |   2 +-
 static/themes/redmond-xx-se.json                   |   2 +-
 static/themes/redmond-xx.json                      |   2 +-
 static/themes/redmond-xxi.json                     |   2 +-
 .../services/theme_data/sanity_checks.spec.js      |  28 ++++
 .../specs/services/theme_data/theme_data.spec.js   | 147 +++++++++++----------
 8 files changed, 109 insertions(+), 77 deletions(-)
 create mode 100644 test/unit/specs/services/theme_data/sanity_checks.spec.js

(limited to 'src/services')

diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js
index 5cc0135e..dfef37a6 100644
--- a/build/webpack.base.conf.js
+++ b/build/webpack.base.conf.js
@@ -35,6 +35,7 @@ module.exports = {
     ],
     alias: {
       'vue$': 'vue/dist/vue.runtime.common',
+      'static': path.resolve(__dirname, '../static'),
       'src': path.resolve(__dirname, '../src'),
       'assets': path.resolve(__dirname, '../src/assets'),
       'components': path.resolve(__dirname, '../src/components')
diff --git a/src/services/color_convert/color_convert.js b/src/services/color_convert/color_convert.js
index 0bf8f646..b5461038 100644
--- a/src/services/color_convert/color_convert.js
+++ b/src/services/color_convert/color_convert.js
@@ -171,7 +171,7 @@ export const mixrgb = (a, b) => {
  * @returns {String} CSS rgba() color
  */
 export const rgba2css = function (rgba) {
-  return `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`
+  return `rgba(${Math.floor(rgba.r)}, ${Math.floor(rgba.g)}, ${Math.floor(rgba.b)}, .5)`
 }
 
 /**
diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
index 0a6733a9..49b99148 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@@ -353,7 +353,7 @@ export const getColors = (sourceColors, sourceOpacity, mod) => SLOT_ORDERED.redu
     if (dependencySlot && sourceColors[dependencySlot] === 'transparent') {
       outputColor.a = 0
     } else {
-      outputColor.a = sourceOpacity[opacitySlot] || OPACITIES[opacitySlot].defaultValue || 1
+      outputColor.a = Number(sourceOpacity[opacitySlot]) || OPACITIES[opacitySlot].defaultValue || 1
     }
   }
   if (opacitySlot) {
diff --git a/static/themes/redmond-xx-se.json b/static/themes/redmond-xx-se.json
index 1a867fcc..8deab7b7 100644
--- a/static/themes/redmond-xx-se.json
+++ b/static/themes/redmond-xx-se.json
@@ -1,7 +1,7 @@
 {
   "_pleroma_theme_version": 2,
   "name": "Redmond XX SE",
-  "theme": {
+  "source": {
     "shadows": {
       "panel": [
         {
diff --git a/static/themes/redmond-xx.json b/static/themes/redmond-xx.json
index 78c92f10..cdb89fe3 100644
--- a/static/themes/redmond-xx.json
+++ b/static/themes/redmond-xx.json
@@ -1,7 +1,7 @@
 {
   "_pleroma_theme_version": 2,
   "name": "Redmond XX",
-  "theme": {
+  "source": {
     "shadows": {
       "panel": [
         {
diff --git a/static/themes/redmond-xxi.json b/static/themes/redmond-xxi.json
index 28f68351..79a2cb26 100644
--- a/static/themes/redmond-xxi.json
+++ b/static/themes/redmond-xxi.json
@@ -1,7 +1,7 @@
 {
   "_pleroma_theme_version": 2,
   "name": "Redmond XXI",
-  "theme": {
+  "source": {
     "shadows": {
       "panel": [
         {
diff --git a/test/unit/specs/services/theme_data/sanity_checks.spec.js b/test/unit/specs/services/theme_data/sanity_checks.spec.js
new file mode 100644
index 00000000..f0072e7d
--- /dev/null
+++ b/test/unit/specs/services/theme_data/sanity_checks.spec.js
@@ -0,0 +1,28 @@
+import { getColors } from 'src/services/theme_data/theme_data.service.js'
+
+const checkColors = (output) => {
+  expect(output).to.have.property('colors')
+  Object.entries(output.colors).forEach(([key, v]) => {
+    expect(v, key).to.be.an('object')
+    expect(v, key).to.include.all.keys('r', 'g', 'b')
+    'rgba'.split('').forEach(k => {
+      if ((k === 'a' && v.hasOwnProperty('a')) || k !== 'a') {
+        expect(v[k], key + '.' + k).to.be.a('number')
+        expect(v[k], key + '.' + k).to.be.least(0)
+        expect(v[k], key + '.' + k).to.be.most(k === 'a' ? 1 : 255)
+      }
+    })
+  })
+}
+
+describe('Theme Data utility functions', () => {
+  const context = require.context('static/themes/', false, /\.json$/)
+  context.keys().forEach((key) => {
+    it(`Should render all colors for ${key} properly`, () => {
+      const { theme, source } = context(key)
+      const data = source || theme
+      const colors = getColors(data.colors, data.opacity, 1)
+      checkColors(colors)
+    })
+  })
+})
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 d8a04ba7..67f4fd5a 100644
--- a/test/unit/specs/services/theme_data/theme_data.spec.js
+++ b/test/unit/specs/services/theme_data/theme_data.spec.js
@@ -1,87 +1,90 @@
 import { getLayersArray, topoSort } from 'src/services/theme_data/theme_data.service.js'
 
-describe('getLayersArray', () => {
-  const fixture = {
-    layer1: null,
-    layer2: 'layer1',
-    layer3a: 'layer2',
-    layer3b: 'layer2'
-  }
+describe('Theme Data utility functions', () => {
+  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 (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 (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 (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'])
+    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']
-  }
+  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: []
-  }
+    // 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('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('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('dependentless nodes should be first', () => {
-    const out = topoSort(fixture2, (node, inheritance) => inheritance[node])
-    // This basically checks all ordering that matters
-    expect(out.indexOf('layerA')).to.eql(0)
-    expect(out.indexOf('layerB')).to.eql(1)
-  })
+    it('dependentless nodes should be first', () => {
+      const out = topoSort(fixture2, (node, inheritance) => inheritance[node])
+      // This basically checks all ordering that matters
+      expect(out.indexOf('layerA')).to.eql(0)
+      expect(out.indexOf('layerB')).to.eql(1)
+    })
 
-  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'))
+    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 e6291e4ee179ab85f212b1eef7d9e03565e6a8f8 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shpuld@shpposter.club>
Date: Mon, 27 Jan 2020 18:43:26 +0200
Subject: remove unnecessary anonymous function

---
 src/services/api/api.service.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/services')

diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index aa31f123..11aa0675 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -894,7 +894,7 @@ const reactWithEmoji = ({ id, emoji, credentials }) => {
     method: 'POST',
     credentials,
     payload: { emoji }
-  }).then(status => parseStatus(status))
+  }).then(parseStatus)
 }
 
 const unreactWithEmoji = ({ id, emoji, credentials }) => {
-- 
cgit v1.2.3-70-g09d2


From 18ca2a035bc9107288e35f11be8dac83c7539503 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 28 Jan 2020 00:25:05 +0200
Subject: fix rgba function, whoops

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

(limited to 'src/services')

diff --git a/src/services/color_convert/color_convert.js b/src/services/color_convert/color_convert.js
index b5461038..3b6fdcc7 100644
--- a/src/services/color_convert/color_convert.js
+++ b/src/services/color_convert/color_convert.js
@@ -171,7 +171,7 @@ export const mixrgb = (a, b) => {
  * @returns {String} CSS rgba() color
  */
 export const rgba2css = function (rgba) {
-  return `rgba(${Math.floor(rgba.r)}, ${Math.floor(rgba.g)}, ${Math.floor(rgba.b)}, .5)`
+  return `rgba(${Math.floor(rgba.r)}, ${Math.floor(rgba.g)}, ${Math.floor(rgba.b)}, ${rgba.a})`
 }
 
 /**
-- 
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/services')

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/services')

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 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/services')

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 746416207bd15f7883af18e359b84f0c4444a12a Mon Sep 17 00:00:00 2001
From: rinpatch <rinpatch@sdf.org>
Date: Thu, 30 Jan 2020 19:55:01 +0300
Subject: Escape HTML from display name and subject fields

Closes #724
---
 package.json                                                | 1 +
 src/services/entity_normalizer/entity_normalizer.service.js | 6 ++++--
 yarn.lock                                                   | 3 ++-
 3 files changed, 7 insertions(+), 3 deletions(-)

(limited to 'src/services')

diff --git a/package.json b/package.json
index 9ec8c1eb..5c7fa31e 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "chromatism": "^3.0.0",
     "cropperjs": "^1.4.3",
     "diff": "^3.0.1",
+    "escape-html": "^1.0.3",
     "karma-mocha-reporter": "^2.2.1",
     "localforage": "^1.5.0",
     "object-path": "^0.11.3",
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index a3d0b782..3116d211 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -1,3 +1,5 @@
+import escape from 'escape-html'
+
 const qvitterStatusType = (status) => {
   if (status.is_post_verb) {
     return 'status'
@@ -41,7 +43,7 @@ export const parseUser = (data) => {
     }
 
     output.name = data.display_name
-    output.name_html = addEmojis(data.display_name, data.emojis)
+    output.name_html = addEmojis(escape(data.display_name), data.emojis)
 
     output.description = data.note
     output.description_html = addEmojis(data.note, data.emojis)
@@ -256,7 +258,7 @@ export const parseStatus = (data) => {
       output.retweeted_status = parseStatus(data.reblog)
     }
 
-    output.summary_html = addEmojis(data.spoiler_text, data.emojis)
+    output.summary_html = addEmojis(escape(data.spoiler_text), data.emojis)
     output.external_url = data.url
     output.poll = data.poll
     output.pinned = data.pinned
diff --git a/yarn.lock b/yarn.lock
index 1a5d4cef..b794042f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2757,9 +2757,10 @@ es6-promisify@^5.0.0:
   dependencies:
     es6-promise "^4.0.3"
 
-escape-html@~1.0.3:
+escape-html@^1.0.3, escape-html@~1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
+  integrity sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=
 
 escape-string-regexp@1.0.5, escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
   version "1.0.5"
-- 
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/services')

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 a06f3a7fbc40cd51df3c2d04406494cf60b0cf8a Mon Sep 17 00:00:00 2001
From: kPherox <admin@mail.kr-kp.com>
Date: Tue, 4 Feb 2020 04:37:29 +0900
Subject: Add `with_move` param for fetching notification

---
 src/services/api/api.service.js                                     | 6 +++++-
 src/services/notifications_fetcher/notifications_fetcher.service.js | 3 +++
 2 files changed, 8 insertions(+), 1 deletion(-)

(limited to 'src/services')

diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 11aa0675..b794fd58 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -495,7 +495,8 @@ const fetchTimeline = ({
   until = false,
   userId = false,
   tag = false,
-  withMuted = false
+  withMuted = false,
+  withMove = false
 }) => {
   const timelineUrls = {
     public: MASTODON_PUBLIC_TIMELINE,
@@ -535,6 +536,9 @@ const fetchTimeline = ({
   if (timeline === 'public' || timeline === 'publicAndExternal') {
     params.push(['only_media', false])
   }
+  if (timeline === 'notifications') {
+    params.push(['with_move', withMove])
+  }
 
   params.push(['count', 20])
   params.push(['with_muted', withMuted])
diff --git a/src/services/notifications_fetcher/notifications_fetcher.service.js b/src/services/notifications_fetcher/notifications_fetcher.service.js
index 64499a1b..864e32f8 100644
--- a/src/services/notifications_fetcher/notifications_fetcher.service.js
+++ b/src/services/notifications_fetcher/notifications_fetcher.service.js
@@ -11,9 +11,12 @@ const fetchAndUpdate = ({ store, credentials, older = false }) => {
   const rootState = store.rootState || store.state
   const timelineData = rootState.statuses.notifications
   const hideMutedPosts = getters.mergedConfig.hideMutedPosts
+  const allowFollowingMove = rootState.users.currentUser.allow_following_move
 
   args['withMuted'] = !hideMutedPosts
 
+  args['withMove'] = !allowFollowingMove
+
   args['timeline'] = 'notifications'
   if (older) {
     if (timelineData.minId !== Number.POSITIVE_INFINITY) {
-- 
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/services')

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 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/services')

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 e6f148b8a306bc24a2fa47da468c4e29b1fcb018 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 11 Feb 2020 00:56:51 +0200
Subject: removed base16-related code

---
 src/services/style_setter/style_setter.js | 51 ------------------------
 static/css/base16-3024.css                | 33 ----------------
 static/css/base16-apathy.css              | 33 ----------------
 static/css/base16-ashes.css               | 33 ----------------
 static/css/base16-atelier-cave.css        | 33 ----------------
 static/css/base16-atelier-dune.css        | 33 ----------------
 static/css/base16-atelier-estuary.css     | 33 ----------------
 static/css/base16-atelier-forest.css      | 33 ----------------
 static/css/base16-atelier-heath.css       | 33 ----------------
 static/css/base16-atelier-lakeside.css    | 33 ----------------
 static/css/base16-atelier-plateau.css     | 33 ----------------
 static/css/base16-atelier-savanna.css     | 33 ----------------
 static/css/base16-atelier-seaside.css     | 33 ----------------
 static/css/base16-atelier-sulphurpool.css | 33 ----------------
 static/css/base16-bespin.css              | 33 ----------------
 static/css/base16-brewer.css              | 33 ----------------
 static/css/base16-bright.css              | 33 ----------------
 static/css/base16-chalk.css               | 33 ----------------
 static/css/base16-codeschool.css          | 33 ----------------
 static/css/base16-darktooth.css           | 33 ----------------
 static/css/base16-default-dark.css        | 33 ----------------
 static/css/base16-default-light.css       | 33 ----------------
 static/css/base16-eighties.css            | 33 ----------------
 static/css/base16-embers.css              | 33 ----------------
 static/css/base16-flat.css                | 33 ----------------
 static/css/base16-github.css              | 33 ----------------
 static/css/base16-google-dark.css         | 33 ----------------
 static/css/base16-google-light.css        | 33 ----------------
 static/css/base16-grayscale-dark.css      | 33 ----------------
 static/css/base16-grayscale-light.css     | 33 ----------------
 static/css/base16-green-screen.css        | 33 ----------------
 static/css/base16-harmonic16-dark.css     | 33 ----------------
 static/css/base16-harmonic16-light.css    | 33 ----------------
 static/css/base16-hopscotch.css           | 33 ----------------
 static/css/base16-ir-black.css            | 33 ----------------
 static/css/base16-isotope.css             | 33 ----------------
 static/css/base16-london-tube.css         | 33 ----------------
 static/css/base16-macintosh.css           | 33 ----------------
 static/css/base16-marrakesh.css           | 33 ----------------
 static/css/base16-materia.css             | 33 ----------------
 static/css/base16-mexico-light.css        | 33 ----------------
 static/css/base16-mocha.css               | 33 ----------------
 static/css/base16-monokai.css             | 33 ----------------
 static/css/base16-ocean.css               | 33 ----------------
 static/css/base16-oceanicnext.css         | 33 ----------------
 static/css/base16-paraiso.css             | 33 ----------------
 static/css/base16-phd.css                 | 33 ----------------
 static/css/base16-pico.css                | 33 ----------------
 static/css/base16-pleroma-dark.css        | 33 ----------------
 static/css/base16-pleroma-light.css       | 33 ----------------
 static/css/base16-pop.css                 | 33 ----------------
 static/css/base16-railscasts.css          | 33 ----------------
 static/css/base16-seti-ui.css             | 33 ----------------
 static/css/base16-shapeshifter.css        | 33 ----------------
 static/css/base16-solar-flare.css         | 33 ----------------
 static/css/base16-solarized-dark.css      | 33 ----------------
 static/css/base16-solarized-light.css     | 33 ----------------
 static/css/base16-spacemacs.css           | 33 ----------------
 static/css/base16-summerfruit-dark.css    | 33 ----------------
 static/css/base16-summerfruit-light.css   | 33 ----------------
 static/css/base16-tomorrow-night.css      | 33 ----------------
 static/css/base16-tomorrow.css            | 33 ----------------
 static/css/base16-twilight.css            | 33 ----------------
 static/css/base16-unikitty-dark.css       | 33 ----------------
 static/css/base16-unikitty-light.css      | 33 ----------------
 static/css/themes.json                    | 66 -------------------------------
 66 files changed, 2229 deletions(-)
 delete mode 100644 static/css/base16-3024.css
 delete mode 100644 static/css/base16-apathy.css
 delete mode 100644 static/css/base16-ashes.css
 delete mode 100644 static/css/base16-atelier-cave.css
 delete mode 100644 static/css/base16-atelier-dune.css
 delete mode 100644 static/css/base16-atelier-estuary.css
 delete mode 100644 static/css/base16-atelier-forest.css
 delete mode 100644 static/css/base16-atelier-heath.css
 delete mode 100644 static/css/base16-atelier-lakeside.css
 delete mode 100644 static/css/base16-atelier-plateau.css
 delete mode 100644 static/css/base16-atelier-savanna.css
 delete mode 100644 static/css/base16-atelier-seaside.css
 delete mode 100644 static/css/base16-atelier-sulphurpool.css
 delete mode 100644 static/css/base16-bespin.css
 delete mode 100644 static/css/base16-brewer.css
 delete mode 100644 static/css/base16-bright.css
 delete mode 100644 static/css/base16-chalk.css
 delete mode 100644 static/css/base16-codeschool.css
 delete mode 100644 static/css/base16-darktooth.css
 delete mode 100644 static/css/base16-default-dark.css
 delete mode 100644 static/css/base16-default-light.css
 delete mode 100644 static/css/base16-eighties.css
 delete mode 100644 static/css/base16-embers.css
 delete mode 100644 static/css/base16-flat.css
 delete mode 100644 static/css/base16-github.css
 delete mode 100644 static/css/base16-google-dark.css
 delete mode 100644 static/css/base16-google-light.css
 delete mode 100644 static/css/base16-grayscale-dark.css
 delete mode 100644 static/css/base16-grayscale-light.css
 delete mode 100644 static/css/base16-green-screen.css
 delete mode 100644 static/css/base16-harmonic16-dark.css
 delete mode 100644 static/css/base16-harmonic16-light.css
 delete mode 100644 static/css/base16-hopscotch.css
 delete mode 100644 static/css/base16-ir-black.css
 delete mode 100644 static/css/base16-isotope.css
 delete mode 100644 static/css/base16-london-tube.css
 delete mode 100644 static/css/base16-macintosh.css
 delete mode 100644 static/css/base16-marrakesh.css
 delete mode 100644 static/css/base16-materia.css
 delete mode 100644 static/css/base16-mexico-light.css
 delete mode 100644 static/css/base16-mocha.css
 delete mode 100644 static/css/base16-monokai.css
 delete mode 100644 static/css/base16-ocean.css
 delete mode 100644 static/css/base16-oceanicnext.css
 delete mode 100644 static/css/base16-paraiso.css
 delete mode 100644 static/css/base16-phd.css
 delete mode 100644 static/css/base16-pico.css
 delete mode 100644 static/css/base16-pleroma-dark.css
 delete mode 100644 static/css/base16-pleroma-light.css
 delete mode 100644 static/css/base16-pop.css
 delete mode 100644 static/css/base16-railscasts.css
 delete mode 100644 static/css/base16-seti-ui.css
 delete mode 100644 static/css/base16-shapeshifter.css
 delete mode 100644 static/css/base16-solar-flare.css
 delete mode 100644 static/css/base16-solarized-dark.css
 delete mode 100644 static/css/base16-solarized-light.css
 delete mode 100644 static/css/base16-spacemacs.css
 delete mode 100644 static/css/base16-summerfruit-dark.css
 delete mode 100644 static/css/base16-summerfruit-light.css
 delete mode 100644 static/css/base16-tomorrow-night.css
 delete mode 100644 static/css/base16-tomorrow.css
 delete mode 100644 static/css/base16-twilight.css
 delete mode 100644 static/css/base16-unikitty-dark.css
 delete mode 100644 static/css/base16-unikitty-light.css
 delete mode 100644 static/css/themes.json

(limited to 'src/services')

diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 32102152..57e3057a 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -1,58 +1,7 @@
-import { times } from 'lodash'
 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'
 
-// 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.
-
-export const setStyle = (href) => {
-  /***
-      What's going on here?
-      I want to make it easy for admins to style this application. To have
-      a good set of default themes, I chose the system from base16
-      (https://chriskempson.github.io/base16/) to style all elements. They
-      all have the base00..0F classes. So the only thing an admin needs to
-      do to style Pleroma is to change these colors in that one css file.
-      Some default things (body text color, link color) need to be set dy-
-      namically, so this is done here by waiting for the stylesheet to be
-      loaded and then creating an element with the respective classes.
-
-      It is a bit weird, but should make life for admins somewhat easier.
-  ***/
-  const head = document.head
-  const body = document.body
-  body.classList.add('hidden')
-  const cssEl = document.createElement('link')
-  cssEl.setAttribute('rel', 'stylesheet')
-  cssEl.setAttribute('href', href)
-  head.appendChild(cssEl)
-
-  const setDynamic = () => {
-    const baseEl = document.createElement('div')
-    body.appendChild(baseEl)
-
-    let colors = {}
-    times(16, (n) => {
-      const name = `base0${n.toString(16).toUpperCase()}`
-      baseEl.setAttribute('class', name)
-      const color = window.getComputedStyle(baseEl).getPropertyValue('color')
-      colors[name] = color
-    })
-
-    body.removeChild(baseEl)
-
-    const styleEl = document.createElement('style')
-    head.appendChild(styleEl)
-    // const styleSheet = styleEl.sheet
-
-    body.classList.remove('hidden')
-  }
-
-  cssEl.addEventListener('load', setDynamic)
-}
-
 export const applyTheme = (input) => {
   const { rules } = generatePreset(input)
   const head = document.head
diff --git a/static/css/base16-3024.css b/static/css/base16-3024.css
deleted file mode 100644
index 91859e27..00000000
--- a/static/css/base16-3024.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #090300; }
-.base01-background { background-color: #3a3432; }
-.base02-background { background-color: #4a4543; }
-.base03-background { background-color: #5c5855; }
-.base04-background { background-color: #807d7c; }
-.base05-background { background-color: #a5a2a2; }
-.base06-background { background-color: #d6d5d4; }
-.base07-background { background-color: #f7f7f7; }
-.base08-background { background-color: #db2d20; }
-.base09-background { background-color: #e8bbd0; }
-.base0A-background { background-color: #fded02; }
-.base0B-background { background-color: #01a252; }
-.base0C-background { background-color: #b5e4f4; }
-.base0D-background { background-color: #01a0e4; }
-.base0E-background { background-color: #a16a94; }
-.base0F-background { background-color: #cdab53; }
-
-.base00 { color: #090300; }
-.base01 { color: #3a3432; }
-.base02 { color: #4a4543; }
-.base03 { color: #5c5855; }
-.base04 { color: #807d7c; }
-.base05 { color: #a5a2a2; }
-.base06 { color: #d6d5d4; }
-.base07 { color: #f7f7f7; }
-.base08 { color: #db2d20; }
-.base09 { color: #e8bbd0; }
-.base0A { color: #fded02; }
-.base0B { color: #01a252; }
-.base0C { color: #b5e4f4; }
-.base0D { color: #01a0e4; }
-.base0E { color: #a16a94; }
-.base0F { color: #cdab53; }
diff --git a/static/css/base16-apathy.css b/static/css/base16-apathy.css
deleted file mode 100644
index 2e99ba1f..00000000
--- a/static/css/base16-apathy.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #031A16; }
-.base01-background { background-color: #0B342D; }
-.base02-background { background-color: #184E45; }
-.base03-background { background-color: #2B685E; }
-.base04-background { background-color: #5F9C92; }
-.base05-background { background-color: #81B5AC; }
-.base06-background { background-color: #A7CEC8; }
-.base07-background { background-color: #D2E7E4; }
-.base08-background { background-color: #3E9688; }
-.base09-background { background-color: #3E7996; }
-.base0A-background { background-color: #3E4C96; }
-.base0B-background { background-color: #883E96; }
-.base0C-background { background-color: #963E4C; }
-.base0D-background { background-color: #96883E; }
-.base0E-background { background-color: #4C963E; }
-.base0F-background { background-color: #3E965B; }
-
-.base00 { color: #031A16; }
-.base01 { color: #0B342D; }
-.base02 { color: #184E45; }
-.base03 { color: #2B685E; }
-.base04 { color: #5F9C92; }
-.base05 { color: #81B5AC; }
-.base06 { color: #A7CEC8; }
-.base07 { color: #D2E7E4; }
-.base08 { color: #3E9688; }
-.base09 { color: #3E7996; }
-.base0A { color: #3E4C96; }
-.base0B { color: #883E96; }
-.base0C { color: #963E4C; }
-.base0D { color: #96883E; }
-.base0E { color: #4C963E; }
-.base0F { color: #3E965B; }
diff --git a/static/css/base16-ashes.css b/static/css/base16-ashes.css
deleted file mode 100644
index d10e1918..00000000
--- a/static/css/base16-ashes.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #1C2023; }
-.base01-background { background-color: #393F45; }
-.base02-background { background-color: #565E65; }
-.base03-background { background-color: #747C84; }
-.base04-background { background-color: #ADB3BA; }
-.base05-background { background-color: #C7CCD1; }
-.base06-background { background-color: #DFE2E5; }
-.base07-background { background-color: #F3F4F5; }
-.base08-background { background-color: #C7AE95; }
-.base09-background { background-color: #C7C795; }
-.base0A-background { background-color: #AEC795; }
-.base0B-background { background-color: #95C7AE; }
-.base0C-background { background-color: #95AEC7; }
-.base0D-background { background-color: #AE95C7; }
-.base0E-background { background-color: #C795AE; }
-.base0F-background { background-color: #C79595; }
-
-.base00 { color: #1C2023; }
-.base01 { color: #393F45; }
-.base02 { color: #565E65; }
-.base03 { color: #747C84; }
-.base04 { color: #ADB3BA; }
-.base05 { color: #C7CCD1; }
-.base06 { color: #DFE2E5; }
-.base07 { color: #F3F4F5; }
-.base08 { color: #C7AE95; }
-.base09 { color: #C7C795; }
-.base0A { color: #AEC795; }
-.base0B { color: #95C7AE; }
-.base0C { color: #95AEC7; }
-.base0D { color: #AE95C7; }
-.base0E { color: #C795AE; }
-.base0F { color: #C79595; }
diff --git a/static/css/base16-atelier-cave.css b/static/css/base16-atelier-cave.css
deleted file mode 100644
index 5ac17f97..00000000
--- a/static/css/base16-atelier-cave.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #19171c; }
-.base01-background { background-color: #26232a; }
-.base02-background { background-color: #585260; }
-.base03-background { background-color: #655f6d; }
-.base04-background { background-color: #7e7887; }
-.base05-background { background-color: #8b8792; }
-.base06-background { background-color: #e2dfe7; }
-.base07-background { background-color: #efecf4; }
-.base08-background { background-color: #be4678; }
-.base09-background { background-color: #aa573c; }
-.base0A-background { background-color: #a06e3b; }
-.base0B-background { background-color: #2a9292; }
-.base0C-background { background-color: #398bc6; }
-.base0D-background { background-color: #576ddb; }
-.base0E-background { background-color: #955ae7; }
-.base0F-background { background-color: #bf40bf; }
-
-.base00 { color: #19171c; }
-.base01 { color: #26232a; }
-.base02 { color: #585260; }
-.base03 { color: #655f6d; }
-.base04 { color: #7e7887; }
-.base05 { color: #8b8792; }
-.base06 { color: #e2dfe7; }
-.base07 { color: #efecf4; }
-.base08 { color: #be4678; }
-.base09 { color: #aa573c; }
-.base0A { color: #a06e3b; }
-.base0B { color: #2a9292; }
-.base0C { color: #398bc6; }
-.base0D { color: #576ddb; }
-.base0E { color: #955ae7; }
-.base0F { color: #bf40bf; }
diff --git a/static/css/base16-atelier-dune.css b/static/css/base16-atelier-dune.css
deleted file mode 100644
index cfb2d9a1..00000000
--- a/static/css/base16-atelier-dune.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #20201d; }
-.base01-background { background-color: #292824; }
-.base02-background { background-color: #6e6b5e; }
-.base03-background { background-color: #7d7a68; }
-.base04-background { background-color: #999580; }
-.base05-background { background-color: #a6a28c; }
-.base06-background { background-color: #e8e4cf; }
-.base07-background { background-color: #fefbec; }
-.base08-background { background-color: #d73737; }
-.base09-background { background-color: #b65611; }
-.base0A-background { background-color: #ae9513; }
-.base0B-background { background-color: #60ac39; }
-.base0C-background { background-color: #1fad83; }
-.base0D-background { background-color: #6684e1; }
-.base0E-background { background-color: #b854d4; }
-.base0F-background { background-color: #d43552; }
-
-.base00 { color: #20201d; }
-.base01 { color: #292824; }
-.base02 { color: #6e6b5e; }
-.base03 { color: #7d7a68; }
-.base04 { color: #999580; }
-.base05 { color: #a6a28c; }
-.base06 { color: #e8e4cf; }
-.base07 { color: #fefbec; }
-.base08 { color: #d73737; }
-.base09 { color: #b65611; }
-.base0A { color: #ae9513; }
-.base0B { color: #60ac39; }
-.base0C { color: #1fad83; }
-.base0D { color: #6684e1; }
-.base0E { color: #b854d4; }
-.base0F { color: #d43552; }
diff --git a/static/css/base16-atelier-estuary.css b/static/css/base16-atelier-estuary.css
deleted file mode 100644
index 76d82c75..00000000
--- a/static/css/base16-atelier-estuary.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #22221b; }
-.base01-background { background-color: #302f27; }
-.base02-background { background-color: #5f5e4e; }
-.base03-background { background-color: #6c6b5a; }
-.base04-background { background-color: #878573; }
-.base05-background { background-color: #929181; }
-.base06-background { background-color: #e7e6df; }
-.base07-background { background-color: #f4f3ec; }
-.base08-background { background-color: #ba6236; }
-.base09-background { background-color: #ae7313; }
-.base0A-background { background-color: #a5980d; }
-.base0B-background { background-color: #7d9726; }
-.base0C-background { background-color: #5b9d48; }
-.base0D-background { background-color: #36a166; }
-.base0E-background { background-color: #5f9182; }
-.base0F-background { background-color: #9d6c7c; }
-
-.base00 { color: #22221b; }
-.base01 { color: #302f27; }
-.base02 { color: #5f5e4e; }
-.base03 { color: #6c6b5a; }
-.base04 { color: #878573; }
-.base05 { color: #929181; }
-.base06 { color: #e7e6df; }
-.base07 { color: #f4f3ec; }
-.base08 { color: #ba6236; }
-.base09 { color: #ae7313; }
-.base0A { color: #a5980d; }
-.base0B { color: #7d9726; }
-.base0C { color: #5b9d48; }
-.base0D { color: #36a166; }
-.base0E { color: #5f9182; }
-.base0F { color: #9d6c7c; }
diff --git a/static/css/base16-atelier-forest.css b/static/css/base16-atelier-forest.css
deleted file mode 100644
index 8108ed8f..00000000
--- a/static/css/base16-atelier-forest.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #1b1918; }
-.base01-background { background-color: #2c2421; }
-.base02-background { background-color: #68615e; }
-.base03-background { background-color: #766e6b; }
-.base04-background { background-color: #9c9491; }
-.base05-background { background-color: #a8a19f; }
-.base06-background { background-color: #e6e2e0; }
-.base07-background { background-color: #f1efee; }
-.base08-background { background-color: #f22c40; }
-.base09-background { background-color: #df5320; }
-.base0A-background { background-color: #c38418; }
-.base0B-background { background-color: #7b9726; }
-.base0C-background { background-color: #3d97b8; }
-.base0D-background { background-color: #407ee7; }
-.base0E-background { background-color: #6666ea; }
-.base0F-background { background-color: #c33ff3; }
-
-.base00 { color: #1b1918; }
-.base01 { color: #2c2421; }
-.base02 { color: #68615e; }
-.base03 { color: #766e6b; }
-.base04 { color: #9c9491; }
-.base05 { color: #a8a19f; }
-.base06 { color: #e6e2e0; }
-.base07 { color: #f1efee; }
-.base08 { color: #f22c40; }
-.base09 { color: #df5320; }
-.base0A { color: #c38418; }
-.base0B { color: #7b9726; }
-.base0C { color: #3d97b8; }
-.base0D { color: #407ee7; }
-.base0E { color: #6666ea; }
-.base0F { color: #c33ff3; }
diff --git a/static/css/base16-atelier-heath.css b/static/css/base16-atelier-heath.css
deleted file mode 100644
index 8858cb80..00000000
--- a/static/css/base16-atelier-heath.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #1b181b; }
-.base01-background { background-color: #292329; }
-.base02-background { background-color: #695d69; }
-.base03-background { background-color: #776977; }
-.base04-background { background-color: #9e8f9e; }
-.base05-background { background-color: #ab9bab; }
-.base06-background { background-color: #d8cad8; }
-.base07-background { background-color: #f7f3f7; }
-.base08-background { background-color: #ca402b; }
-.base09-background { background-color: #a65926; }
-.base0A-background { background-color: #bb8a35; }
-.base0B-background { background-color: #918b3b; }
-.base0C-background { background-color: #159393; }
-.base0D-background { background-color: #516aec; }
-.base0E-background { background-color: #7b59c0; }
-.base0F-background { background-color: #cc33cc; }
-
-.base00 { color: #1b181b; }
-.base01 { color: #292329; }
-.base02 { color: #695d69; }
-.base03 { color: #776977; }
-.base04 { color: #9e8f9e; }
-.base05 { color: #ab9bab; }
-.base06 { color: #d8cad8; }
-.base07 { color: #f7f3f7; }
-.base08 { color: #ca402b; }
-.base09 { color: #a65926; }
-.base0A { color: #bb8a35; }
-.base0B { color: #918b3b; }
-.base0C { color: #159393; }
-.base0D { color: #516aec; }
-.base0E { color: #7b59c0; }
-.base0F { color: #cc33cc; }
diff --git a/static/css/base16-atelier-lakeside.css b/static/css/base16-atelier-lakeside.css
deleted file mode 100644
index 77d44c5f..00000000
--- a/static/css/base16-atelier-lakeside.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #161b1d; }
-.base01-background { background-color: #1f292e; }
-.base02-background { background-color: #516d7b; }
-.base03-background { background-color: #5a7b8c; }
-.base04-background { background-color: #7195a8; }
-.base05-background { background-color: #7ea2b4; }
-.base06-background { background-color: #c1e4f6; }
-.base07-background { background-color: #ebf8ff; }
-.base08-background { background-color: #d22d72; }
-.base09-background { background-color: #935c25; }
-.base0A-background { background-color: #8a8a0f; }
-.base0B-background { background-color: #568c3b; }
-.base0C-background { background-color: #2d8f6f; }
-.base0D-background { background-color: #257fad; }
-.base0E-background { background-color: #6b6bb8; }
-.base0F-background { background-color: #b72dd2; }
-
-.base00 { color: #161b1d; }
-.base01 { color: #1f292e; }
-.base02 { color: #516d7b; }
-.base03 { color: #5a7b8c; }
-.base04 { color: #7195a8; }
-.base05 { color: #7ea2b4; }
-.base06 { color: #c1e4f6; }
-.base07 { color: #ebf8ff; }
-.base08 { color: #d22d72; }
-.base09 { color: #935c25; }
-.base0A { color: #8a8a0f; }
-.base0B { color: #568c3b; }
-.base0C { color: #2d8f6f; }
-.base0D { color: #257fad; }
-.base0E { color: #6b6bb8; }
-.base0F { color: #b72dd2; }
diff --git a/static/css/base16-atelier-plateau.css b/static/css/base16-atelier-plateau.css
deleted file mode 100644
index a7445030..00000000
--- a/static/css/base16-atelier-plateau.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #1b1818; }
-.base01-background { background-color: #292424; }
-.base02-background { background-color: #585050; }
-.base03-background { background-color: #655d5d; }
-.base04-background { background-color: #7e7777; }
-.base05-background { background-color: #8a8585; }
-.base06-background { background-color: #e7dfdf; }
-.base07-background { background-color: #f4ecec; }
-.base08-background { background-color: #ca4949; }
-.base09-background { background-color: #b45a3c; }
-.base0A-background { background-color: #a06e3b; }
-.base0B-background { background-color: #4b8b8b; }
-.base0C-background { background-color: #5485b6; }
-.base0D-background { background-color: #7272ca; }
-.base0E-background { background-color: #8464c4; }
-.base0F-background { background-color: #bd5187; }
-
-.base00 { color: #1b1818; }
-.base01 { color: #292424; }
-.base02 { color: #585050; }
-.base03 { color: #655d5d; }
-.base04 { color: #7e7777; }
-.base05 { color: #8a8585; }
-.base06 { color: #e7dfdf; }
-.base07 { color: #f4ecec; }
-.base08 { color: #ca4949; }
-.base09 { color: #b45a3c; }
-.base0A { color: #a06e3b; }
-.base0B { color: #4b8b8b; }
-.base0C { color: #5485b6; }
-.base0D { color: #7272ca; }
-.base0E { color: #8464c4; }
-.base0F { color: #bd5187; }
diff --git a/static/css/base16-atelier-savanna.css b/static/css/base16-atelier-savanna.css
deleted file mode 100644
index be728d07..00000000
--- a/static/css/base16-atelier-savanna.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #171c19; }
-.base01-background { background-color: #232a25; }
-.base02-background { background-color: #526057; }
-.base03-background { background-color: #5f6d64; }
-.base04-background { background-color: #78877d; }
-.base05-background { background-color: #87928a; }
-.base06-background { background-color: #dfe7e2; }
-.base07-background { background-color: #ecf4ee; }
-.base08-background { background-color: #b16139; }
-.base09-background { background-color: #9f713c; }
-.base0A-background { background-color: #a07e3b; }
-.base0B-background { background-color: #489963; }
-.base0C-background { background-color: #1c9aa0; }
-.base0D-background { background-color: #478c90; }
-.base0E-background { background-color: #55859b; }
-.base0F-background { background-color: #867469; }
-
-.base00 { color: #171c19; }
-.base01 { color: #232a25; }
-.base02 { color: #526057; }
-.base03 { color: #5f6d64; }
-.base04 { color: #78877d; }
-.base05 { color: #87928a; }
-.base06 { color: #dfe7e2; }
-.base07 { color: #ecf4ee; }
-.base08 { color: #b16139; }
-.base09 { color: #9f713c; }
-.base0A { color: #a07e3b; }
-.base0B { color: #489963; }
-.base0C { color: #1c9aa0; }
-.base0D { color: #478c90; }
-.base0E { color: #55859b; }
-.base0F { color: #867469; }
diff --git a/static/css/base16-atelier-seaside.css b/static/css/base16-atelier-seaside.css
deleted file mode 100644
index 8b391466..00000000
--- a/static/css/base16-atelier-seaside.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #131513; }
-.base01-background { background-color: #242924; }
-.base02-background { background-color: #5e6e5e; }
-.base03-background { background-color: #687d68; }
-.base04-background { background-color: #809980; }
-.base05-background { background-color: #8ca68c; }
-.base06-background { background-color: #cfe8cf; }
-.base07-background { background-color: #f4fbf4; }
-.base08-background { background-color: #e6193c; }
-.base09-background { background-color: #87711d; }
-.base0A-background { background-color: #98981b; }
-.base0B-background { background-color: #29a329; }
-.base0C-background { background-color: #1999b3; }
-.base0D-background { background-color: #3d62f5; }
-.base0E-background { background-color: #ad2bee; }
-.base0F-background { background-color: #e619c3; }
-
-.base00 { color: #131513; }
-.base01 { color: #242924; }
-.base02 { color: #5e6e5e; }
-.base03 { color: #687d68; }
-.base04 { color: #809980; }
-.base05 { color: #8ca68c; }
-.base06 { color: #cfe8cf; }
-.base07 { color: #f4fbf4; }
-.base08 { color: #e6193c; }
-.base09 { color: #87711d; }
-.base0A { color: #98981b; }
-.base0B { color: #29a329; }
-.base0C { color: #1999b3; }
-.base0D { color: #3d62f5; }
-.base0E { color: #ad2bee; }
-.base0F { color: #e619c3; }
diff --git a/static/css/base16-atelier-sulphurpool.css b/static/css/base16-atelier-sulphurpool.css
deleted file mode 100644
index fb44d6e0..00000000
--- a/static/css/base16-atelier-sulphurpool.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #202746; }
-.base01-background { background-color: #293256; }
-.base02-background { background-color: #5e6687; }
-.base03-background { background-color: #6b7394; }
-.base04-background { background-color: #898ea4; }
-.base05-background { background-color: #979db4; }
-.base06-background { background-color: #dfe2f1; }
-.base07-background { background-color: #f5f7ff; }
-.base08-background { background-color: #c94922; }
-.base09-background { background-color: #c76b29; }
-.base0A-background { background-color: #c08b30; }
-.base0B-background { background-color: #ac9739; }
-.base0C-background { background-color: #22a2c9; }
-.base0D-background { background-color: #3d8fd1; }
-.base0E-background { background-color: #6679cc; }
-.base0F-background { background-color: #9c637a; }
-
-.base00 { color: #202746; }
-.base01 { color: #293256; }
-.base02 { color: #5e6687; }
-.base03 { color: #6b7394; }
-.base04 { color: #898ea4; }
-.base05 { color: #979db4; }
-.base06 { color: #dfe2f1; }
-.base07 { color: #f5f7ff; }
-.base08 { color: #c94922; }
-.base09 { color: #c76b29; }
-.base0A { color: #c08b30; }
-.base0B { color: #ac9739; }
-.base0C { color: #22a2c9; }
-.base0D { color: #3d8fd1; }
-.base0E { color: #6679cc; }
-.base0F { color: #9c637a; }
diff --git a/static/css/base16-bespin.css b/static/css/base16-bespin.css
deleted file mode 100644
index 48a9dcf7..00000000
--- a/static/css/base16-bespin.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #28211c; }
-.base01-background { background-color: #36312e; }
-.base02-background { background-color: #5e5d5c; }
-.base03-background { background-color: #666666; }
-.base04-background { background-color: #797977; }
-.base05-background { background-color: #8a8986; }
-.base06-background { background-color: #9d9b97; }
-.base07-background { background-color: #baae9e; }
-.base08-background { background-color: #cf6a4c; }
-.base09-background { background-color: #cf7d34; }
-.base0A-background { background-color: #f9ee98; }
-.base0B-background { background-color: #54be0d; }
-.base0C-background { background-color: #afc4db; }
-.base0D-background { background-color: #5ea6ea; }
-.base0E-background { background-color: #9b859d; }
-.base0F-background { background-color: #937121; }
-
-.base00 { color: #28211c; }
-.base01 { color: #36312e; }
-.base02 { color: #5e5d5c; }
-.base03 { color: #666666; }
-.base04 { color: #797977; }
-.base05 { color: #8a8986; }
-.base06 { color: #9d9b97; }
-.base07 { color: #baae9e; }
-.base08 { color: #cf6a4c; }
-.base09 { color: #cf7d34; }
-.base0A { color: #f9ee98; }
-.base0B { color: #54be0d; }
-.base0C { color: #afc4db; }
-.base0D { color: #5ea6ea; }
-.base0E { color: #9b859d; }
-.base0F { color: #937121; }
diff --git a/static/css/base16-brewer.css b/static/css/base16-brewer.css
deleted file mode 100644
index c88f219b..00000000
--- a/static/css/base16-brewer.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #0c0d0e; }
-.base01-background { background-color: #2e2f30; }
-.base02-background { background-color: #515253; }
-.base03-background { background-color: #737475; }
-.base04-background { background-color: #959697; }
-.base05-background { background-color: #b7b8b9; }
-.base06-background { background-color: #dadbdc; }
-.base07-background { background-color: #fcfdfe; }
-.base08-background { background-color: #e31a1c; }
-.base09-background { background-color: #e6550d; }
-.base0A-background { background-color: #dca060; }
-.base0B-background { background-color: #31a354; }
-.base0C-background { background-color: #80b1d3; }
-.base0D-background { background-color: #3182bd; }
-.base0E-background { background-color: #756bb1; }
-.base0F-background { background-color: #b15928; }
-
-.base00 { color: #0c0d0e; }
-.base01 { color: #2e2f30; }
-.base02 { color: #515253; }
-.base03 { color: #737475; }
-.base04 { color: #959697; }
-.base05 { color: #b7b8b9; }
-.base06 { color: #dadbdc; }
-.base07 { color: #fcfdfe; }
-.base08 { color: #e31a1c; }
-.base09 { color: #e6550d; }
-.base0A { color: #dca060; }
-.base0B { color: #31a354; }
-.base0C { color: #80b1d3; }
-.base0D { color: #3182bd; }
-.base0E { color: #756bb1; }
-.base0F { color: #b15928; }
diff --git a/static/css/base16-bright.css b/static/css/base16-bright.css
deleted file mode 100644
index c2333b8d..00000000
--- a/static/css/base16-bright.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #000000; }
-.base01-background { background-color: #303030; }
-.base02-background { background-color: #505050; }
-.base03-background { background-color: #b0b0b0; }
-.base04-background { background-color: #d0d0d0; }
-.base05-background { background-color: #e0e0e0; }
-.base06-background { background-color: #f5f5f5; }
-.base07-background { background-color: #ffffff; }
-.base08-background { background-color: #fb0120; }
-.base09-background { background-color: #fc6d24; }
-.base0A-background { background-color: #fda331; }
-.base0B-background { background-color: #a1c659; }
-.base0C-background { background-color: #76c7b7; }
-.base0D-background { background-color: #6fb3d2; }
-.base0E-background { background-color: #d381c3; }
-.base0F-background { background-color: #be643c; }
-
-.base00 { color: #000000; }
-.base01 { color: #303030; }
-.base02 { color: #505050; }
-.base03 { color: #b0b0b0; }
-.base04 { color: #d0d0d0; }
-.base05 { color: #e0e0e0; }
-.base06 { color: #f5f5f5; }
-.base07 { color: #ffffff; }
-.base08 { color: #fb0120; }
-.base09 { color: #fc6d24; }
-.base0A { color: #fda331; }
-.base0B { color: #a1c659; }
-.base0C { color: #76c7b7; }
-.base0D { color: #6fb3d2; }
-.base0E { color: #d381c3; }
-.base0F { color: #be643c; }
diff --git a/static/css/base16-chalk.css b/static/css/base16-chalk.css
deleted file mode 100644
index e3cb3c20..00000000
--- a/static/css/base16-chalk.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #151515; }
-.base01-background { background-color: #202020; }
-.base02-background { background-color: #303030; }
-.base03-background { background-color: #505050; }
-.base04-background { background-color: #b0b0b0; }
-.base05-background { background-color: #d0d0d0; }
-.base06-background { background-color: #e0e0e0; }
-.base07-background { background-color: #f5f5f5; }
-.base08-background { background-color: #fb9fb1; }
-.base09-background { background-color: #eda987; }
-.base0A-background { background-color: #ddb26f; }
-.base0B-background { background-color: #acc267; }
-.base0C-background { background-color: #12cfc0; }
-.base0D-background { background-color: #6fc2ef; }
-.base0E-background { background-color: #e1a3ee; }
-.base0F-background { background-color: #deaf8f; }
-
-.base00 { color: #151515; }
-.base01 { color: #202020; }
-.base02 { color: #303030; }
-.base03 { color: #505050; }
-.base04 { color: #b0b0b0; }
-.base05 { color: #d0d0d0; }
-.base06 { color: #e0e0e0; }
-.base07 { color: #f5f5f5; }
-.base08 { color: #fb9fb1; }
-.base09 { color: #eda987; }
-.base0A { color: #ddb26f; }
-.base0B { color: #acc267; }
-.base0C { color: #12cfc0; }
-.base0D { color: #6fc2ef; }
-.base0E { color: #e1a3ee; }
-.base0F { color: #deaf8f; }
diff --git a/static/css/base16-codeschool.css b/static/css/base16-codeschool.css
deleted file mode 100644
index 00194bbf..00000000
--- a/static/css/base16-codeschool.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #232c31; }
-.base01-background { background-color: #1c3657; }
-.base02-background { background-color: #2a343a; }
-.base03-background { background-color: #3f4944; }
-.base04-background { background-color: #84898c; }
-.base05-background { background-color: #9ea7a6; }
-.base06-background { background-color: #a7cfa3; }
-.base07-background { background-color: #b5d8f6; }
-.base08-background { background-color: #2a5491; }
-.base09-background { background-color: #43820d; }
-.base0A-background { background-color: #a03b1e; }
-.base0B-background { background-color: #237986; }
-.base0C-background { background-color: #b02f30; }
-.base0D-background { background-color: #484d79; }
-.base0E-background { background-color: #c59820; }
-.base0F-background { background-color: #c98344; }
-
-.base00 { color: #232c31; }
-.base01 { color: #1c3657; }
-.base02 { color: #2a343a; }
-.base03 { color: #3f4944; }
-.base04 { color: #84898c; }
-.base05 { color: #9ea7a6; }
-.base06 { color: #a7cfa3; }
-.base07 { color: #b5d8f6; }
-.base08 { color: #2a5491; }
-.base09 { color: #43820d; }
-.base0A { color: #a03b1e; }
-.base0B { color: #237986; }
-.base0C { color: #b02f30; }
-.base0D { color: #484d79; }
-.base0E { color: #c59820; }
-.base0F { color: #c98344; }
diff --git a/static/css/base16-darktooth.css b/static/css/base16-darktooth.css
deleted file mode 100644
index 53448706..00000000
--- a/static/css/base16-darktooth.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #1D2021; }
-.base01-background { background-color: #32302F; }
-.base02-background { background-color: #504945; }
-.base03-background { background-color: #665C54; }
-.base04-background { background-color: #928374; }
-.base05-background { background-color: #A89984; }
-.base06-background { background-color: #D5C4A1; }
-.base07-background { background-color: #FDF4C1; }
-.base08-background { background-color: #FB543F; }
-.base09-background { background-color: #FE8625; }
-.base0A-background { background-color: #FAC03B; }
-.base0B-background { background-color: #95C085; }
-.base0C-background { background-color: #8BA59B; }
-.base0D-background { background-color: #0D6678; }
-.base0E-background { background-color: #8F4673; }
-.base0F-background { background-color: #A87322; }
-
-.base00 { color: #1D2021; }
-.base01 { color: #32302F; }
-.base02 { color: #504945; }
-.base03 { color: #665C54; }
-.base04 { color: #928374; }
-.base05 { color: #A89984; }
-.base06 { color: #D5C4A1; }
-.base07 { color: #FDF4C1; }
-.base08 { color: #FB543F; }
-.base09 { color: #FE8625; }
-.base0A { color: #FAC03B; }
-.base0B { color: #95C085; }
-.base0C { color: #8BA59B; }
-.base0D { color: #0D6678; }
-.base0E { color: #8F4673; }
-.base0F { color: #A87322; }
diff --git a/static/css/base16-default-dark.css b/static/css/base16-default-dark.css
deleted file mode 100644
index 3cd7e860..00000000
--- a/static/css/base16-default-dark.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #181818; }
-.base01-background { background-color: #282828; }
-.base02-background { background-color: #383838; }
-.base03-background { background-color: #585858; }
-.base04-background { background-color: #b8b8b8; }
-.base05-background { background-color: #d8d8d8; }
-.base06-background { background-color: #e8e8e8; }
-.base07-background { background-color: #f8f8f8; }
-.base08-background { background-color: #ab4642; }
-.base09-background { background-color: #dc9656; }
-.base0A-background { background-color: #f7ca88; }
-.base0B-background { background-color: #a1b56c; }
-.base0C-background { background-color: #86c1b9; }
-.base0D-background { background-color: #7cafc2; }
-.base0E-background { background-color: #ba8baf; }
-.base0F-background { background-color: #a16946; }
-
-.base00 { color: #181818; }
-.base01 { color: #282828; }
-.base02 { color: #383838; }
-.base03 { color: #585858; }
-.base04 { color: #b8b8b8; }
-.base05 { color: #d8d8d8; }
-.base06 { color: #e8e8e8; }
-.base07 { color: #f8f8f8; }
-.base08 { color: #ab4642; }
-.base09 { color: #dc9656; }
-.base0A { color: #f7ca88; }
-.base0B { color: #a1b56c; }
-.base0C { color: #86c1b9; }
-.base0D { color: #7cafc2; }
-.base0E { color: #ba8baf; }
-.base0F { color: #a16946; }
diff --git a/static/css/base16-default-light.css b/static/css/base16-default-light.css
deleted file mode 100644
index 7e660c30..00000000
--- a/static/css/base16-default-light.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #f8f8f8; }
-.base01-background { background-color: #e8e8e8; }
-.base02-background { background-color: #d8d8d8; }
-.base03-background { background-color: #b8b8b8; }
-.base04-background { background-color: #585858; }
-.base05-background { background-color: #383838; }
-.base06-background { background-color: #282828; }
-.base07-background { background-color: #181818; }
-.base08-background { background-color: #ab4642; }
-.base09-background { background-color: #dc9656; }
-.base0A-background { background-color: #f7ca88; }
-.base0B-background { background-color: #a1b56c; }
-.base0C-background { background-color: #86c1b9; }
-.base0D-background { background-color: #7cafc2; }
-.base0E-background { background-color: #ba8baf; }
-.base0F-background { background-color: #a16946; }
-
-.base00 { color: #f8f8f8; }
-.base01 { color: #e8e8e8; }
-.base02 { color: #d8d8d8; }
-.base03 { color: #b8b8b8; }
-.base04 { color: #585858; }
-.base05 { color: #383838; }
-.base06 { color: #282828; }
-.base07 { color: #181818; }
-.base08 { color: #ab4642; }
-.base09 { color: #dc9656; }
-.base0A { color: #f7ca88; }
-.base0B { color: #a1b56c; }
-.base0C { color: #86c1b9; }
-.base0D { color: #7cafc2; }
-.base0E { color: #ba8baf; }
-.base0F { color: #a16946; }
diff --git a/static/css/base16-eighties.css b/static/css/base16-eighties.css
deleted file mode 100644
index 8ffcf04d..00000000
--- a/static/css/base16-eighties.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #2d2d2d; }
-.base01-background { background-color: #393939; }
-.base02-background { background-color: #515151; }
-.base03-background { background-color: #747369; }
-.base04-background { background-color: #a09f93; }
-.base05-background { background-color: #d3d0c8; }
-.base06-background { background-color: #e8e6df; }
-.base07-background { background-color: #f2f0ec; }
-.base08-background { background-color: #f2777a; }
-.base09-background { background-color: #f99157; }
-.base0A-background { background-color: #ffcc66; }
-.base0B-background { background-color: #99cc99; }
-.base0C-background { background-color: #66cccc; }
-.base0D-background { background-color: #6699cc; }
-.base0E-background { background-color: #cc99cc; }
-.base0F-background { background-color: #d27b53; }
-
-.base00 { color: #2d2d2d; }
-.base01 { color: #393939; }
-.base02 { color: #515151; }
-.base03 { color: #747369; }
-.base04 { color: #a09f93; }
-.base05 { color: #d3d0c8; }
-.base06 { color: #e8e6df; }
-.base07 { color: #f2f0ec; }
-.base08 { color: #f2777a; }
-.base09 { color: #f99157; }
-.base0A { color: #ffcc66; }
-.base0B { color: #99cc99; }
-.base0C { color: #66cccc; }
-.base0D { color: #6699cc; }
-.base0E { color: #cc99cc; }
-.base0F { color: #d27b53; }
diff --git a/static/css/base16-embers.css b/static/css/base16-embers.css
deleted file mode 100644
index 74e9b769..00000000
--- a/static/css/base16-embers.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #16130F; }
-.base01-background { background-color: #2C2620; }
-.base02-background { background-color: #433B32; }
-.base03-background { background-color: #5A5047; }
-.base04-background { background-color: #8A8075; }
-.base05-background { background-color: #A39A90; }
-.base06-background { background-color: #BEB6AE; }
-.base07-background { background-color: #DBD6D1; }
-.base08-background { background-color: #826D57; }
-.base09-background { background-color: #828257; }
-.base0A-background { background-color: #6D8257; }
-.base0B-background { background-color: #57826D; }
-.base0C-background { background-color: #576D82; }
-.base0D-background { background-color: #6D5782; }
-.base0E-background { background-color: #82576D; }
-.base0F-background { background-color: #825757; }
-
-.base00 { color: #16130F; }
-.base01 { color: #2C2620; }
-.base02 { color: #433B32; }
-.base03 { color: #5A5047; }
-.base04 { color: #8A8075; }
-.base05 { color: #A39A90; }
-.base06 { color: #BEB6AE; }
-.base07 { color: #DBD6D1; }
-.base08 { color: #826D57; }
-.base09 { color: #828257; }
-.base0A { color: #6D8257; }
-.base0B { color: #57826D; }
-.base0C { color: #576D82; }
-.base0D { color: #6D5782; }
-.base0E { color: #82576D; }
-.base0F { color: #825757; }
diff --git a/static/css/base16-flat.css b/static/css/base16-flat.css
deleted file mode 100644
index 72918a5d..00000000
--- a/static/css/base16-flat.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #2C3E50; }
-.base01-background { background-color: #34495E; }
-.base02-background { background-color: #7F8C8D; }
-.base03-background { background-color: #95A5A6; }
-.base04-background { background-color: #BDC3C7; }
-.base05-background { background-color: #e0e0e0; }
-.base06-background { background-color: #f5f5f5; }
-.base07-background { background-color: #ECF0F1; }
-.base08-background { background-color: #E74C3C; }
-.base09-background { background-color: #E67E22; }
-.base0A-background { background-color: #F1C40F; }
-.base0B-background { background-color: #2ECC71; }
-.base0C-background { background-color: #1ABC9C; }
-.base0D-background { background-color: #3498DB; }
-.base0E-background { background-color: #9B59B6; }
-.base0F-background { background-color: #be643c; }
-
-.base00 { color: #2C3E50; }
-.base01 { color: #34495E; }
-.base02 { color: #7F8C8D; }
-.base03 { color: #95A5A6; }
-.base04 { color: #BDC3C7; }
-.base05 { color: #e0e0e0; }
-.base06 { color: #f5f5f5; }
-.base07 { color: #ECF0F1; }
-.base08 { color: #E74C3C; }
-.base09 { color: #E67E22; }
-.base0A { color: #F1C40F; }
-.base0B { color: #2ECC71; }
-.base0C { color: #1ABC9C; }
-.base0D { color: #3498DB; }
-.base0E { color: #9B59B6; }
-.base0F { color: #be643c; }
diff --git a/static/css/base16-github.css b/static/css/base16-github.css
deleted file mode 100644
index 080ed34c..00000000
--- a/static/css/base16-github.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #ffffff; }
-.base01-background { background-color: #f5f5f5; }
-.base02-background { background-color: #c8c8fa; }
-.base03-background { background-color: #969896; }
-.base04-background { background-color: #e8e8e8; }
-.base05-background { background-color: #333333; }
-.base06-background { background-color: #ffffff; }
-.base07-background { background-color: #ffffff; }
-.base08-background { background-color: #ed6a43; }
-.base09-background { background-color: #0086b3; }
-.base0A-background { background-color: #795da3; }
-.base0B-background { background-color: #183691; }
-.base0C-background { background-color: #183691; }
-.base0D-background { background-color: #795da3; }
-.base0E-background { background-color: #a71d5d; }
-.base0F-background { background-color: #333333; }
-
-.base00 { color: #ffffff; }
-.base01 { color: #f5f5f5; }
-.base02 { color: #c8c8fa; }
-.base03 { color: #969896; }
-.base04 { color: #e8e8e8; }
-.base05 { color: #333333; }
-.base06 { color: #ffffff; }
-.base07 { color: #ffffff; }
-.base08 { color: #ed6a43; }
-.base09 { color: #0086b3; }
-.base0A { color: #795da3; }
-.base0B { color: #183691; }
-.base0C { color: #183691; }
-.base0D { color: #795da3; }
-.base0E { color: #a71d5d; }
-.base0F { color: #333333; }
diff --git a/static/css/base16-google-dark.css b/static/css/base16-google-dark.css
deleted file mode 100644
index 988eac51..00000000
--- a/static/css/base16-google-dark.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #1d1f21; }
-.base01-background { background-color: #282a2e; }
-.base02-background { background-color: #373b41; }
-.base03-background { background-color: #969896; }
-.base04-background { background-color: #b4b7b4; }
-.base05-background { background-color: #c5c8c6; }
-.base06-background { background-color: #e0e0e0; }
-.base07-background { background-color: #ffffff; }
-.base08-background { background-color: #CC342B; }
-.base09-background { background-color: #F96A38; }
-.base0A-background { background-color: #FBA922; }
-.base0B-background { background-color: #198844; }
-.base0C-background { background-color: #3971ED; }
-.base0D-background { background-color: #3971ED; }
-.base0E-background { background-color: #A36AC7; }
-.base0F-background { background-color: #3971ED; }
-
-.base00 { color: #1d1f21; }
-.base01 { color: #282a2e; }
-.base02 { color: #373b41; }
-.base03 { color: #969896; }
-.base04 { color: #b4b7b4; }
-.base05 { color: #c5c8c6; }
-.base06 { color: #e0e0e0; }
-.base07 { color: #ffffff; }
-.base08 { color: #CC342B; }
-.base09 { color: #F96A38; }
-.base0A { color: #FBA922; }
-.base0B { color: #198844; }
-.base0C { color: #3971ED; }
-.base0D { color: #3971ED; }
-.base0E { color: #A36AC7; }
-.base0F { color: #3971ED; }
diff --git a/static/css/base16-google-light.css b/static/css/base16-google-light.css
deleted file mode 100644
index 2ee2a606..00000000
--- a/static/css/base16-google-light.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #ffffff; }
-.base01-background { background-color: #e0e0e0; }
-.base02-background { background-color: #c5c8c6; }
-.base03-background { background-color: #b4b7b4; }
-.base04-background { background-color: #969896; }
-.base05-background { background-color: #373b41; }
-.base06-background { background-color: #282a2e; }
-.base07-background { background-color: #1d1f21; }
-.base08-background { background-color: #CC342B; }
-.base09-background { background-color: #F96A38; }
-.base0A-background { background-color: #FBA922; }
-.base0B-background { background-color: #198844; }
-.base0C-background { background-color: #3971ED; }
-.base0D-background { background-color: #3971ED; }
-.base0E-background { background-color: #A36AC7; }
-.base0F-background { background-color: #3971ED; }
-
-.base00 { color: #ffffff; }
-.base01 { color: #e0e0e0; }
-.base02 { color: #c5c8c6; }
-.base03 { color: #b4b7b4; }
-.base04 { color: #969896; }
-.base05 { color: #373b41; }
-.base06 { color: #282a2e; }
-.base07 { color: #1d1f21; }
-.base08 { color: #CC342B; }
-.base09 { color: #F96A38; }
-.base0A { color: #FBA922; }
-.base0B { color: #198844; }
-.base0C { color: #3971ED; }
-.base0D { color: #3971ED; }
-.base0E { color: #A36AC7; }
-.base0F { color: #3971ED; }
diff --git a/static/css/base16-grayscale-dark.css b/static/css/base16-grayscale-dark.css
deleted file mode 100644
index dc0dd03a..00000000
--- a/static/css/base16-grayscale-dark.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #101010; }
-.base01-background { background-color: #252525; }
-.base02-background { background-color: #464646; }
-.base03-background { background-color: #525252; }
-.base04-background { background-color: #ababab; }
-.base05-background { background-color: #b9b9b9; }
-.base06-background { background-color: #e3e3e3; }
-.base07-background { background-color: #f7f7f7; }
-.base08-background { background-color: #7c7c7c; }
-.base09-background { background-color: #999999; }
-.base0A-background { background-color: #a0a0a0; }
-.base0B-background { background-color: #8e8e8e; }
-.base0C-background { background-color: #868686; }
-.base0D-background { background-color: #686868; }
-.base0E-background { background-color: #747474; }
-.base0F-background { background-color: #5e5e5e; }
-
-.base00 { color: #101010; }
-.base01 { color: #252525; }
-.base02 { color: #464646; }
-.base03 { color: #525252; }
-.base04 { color: #ababab; }
-.base05 { color: #b9b9b9; }
-.base06 { color: #e3e3e3; }
-.base07 { color: #f7f7f7; }
-.base08 { color: #7c7c7c; }
-.base09 { color: #999999; }
-.base0A { color: #a0a0a0; }
-.base0B { color: #8e8e8e; }
-.base0C { color: #868686; }
-.base0D { color: #686868; }
-.base0E { color: #747474; }
-.base0F { color: #5e5e5e; }
diff --git a/static/css/base16-grayscale-light.css b/static/css/base16-grayscale-light.css
deleted file mode 100644
index f9fd213a..00000000
--- a/static/css/base16-grayscale-light.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #f7f7f7; }
-.base01-background { background-color: #e3e3e3; }
-.base02-background { background-color: #b9b9b9; }
-.base03-background { background-color: #ababab; }
-.base04-background { background-color: #525252; }
-.base05-background { background-color: #464646; }
-.base06-background { background-color: #252525; }
-.base07-background { background-color: #101010; }
-.base08-background { background-color: #7c7c7c; }
-.base09-background { background-color: #999999; }
-.base0A-background { background-color: #a0a0a0; }
-.base0B-background { background-color: #8e8e8e; }
-.base0C-background { background-color: #868686; }
-.base0D-background { background-color: #686868; }
-.base0E-background { background-color: #747474; }
-.base0F-background { background-color: #5e5e5e; }
-
-.base00 { color: #f7f7f7; }
-.base01 { color: #e3e3e3; }
-.base02 { color: #b9b9b9; }
-.base03 { color: #ababab; }
-.base04 { color: #525252; }
-.base05 { color: #464646; }
-.base06 { color: #252525; }
-.base07 { color: #101010; }
-.base08 { color: #7c7c7c; }
-.base09 { color: #999999; }
-.base0A { color: #a0a0a0; }
-.base0B { color: #8e8e8e; }
-.base0C { color: #868686; }
-.base0D { color: #686868; }
-.base0E { color: #747474; }
-.base0F { color: #5e5e5e; }
diff --git a/static/css/base16-green-screen.css b/static/css/base16-green-screen.css
deleted file mode 100644
index 205efeae..00000000
--- a/static/css/base16-green-screen.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #001100; }
-.base01-background { background-color: #003300; }
-.base02-background { background-color: #005500; }
-.base03-background { background-color: #007700; }
-.base04-background { background-color: #009900; }
-.base05-background { background-color: #00bb00; }
-.base06-background { background-color: #00dd00; }
-.base07-background { background-color: #00ff00; }
-.base08-background { background-color: #007700; }
-.base09-background { background-color: #009900; }
-.base0A-background { background-color: #007700; }
-.base0B-background { background-color: #00bb00; }
-.base0C-background { background-color: #005500; }
-.base0D-background { background-color: #009900; }
-.base0E-background { background-color: #00bb00; }
-.base0F-background { background-color: #005500; }
-
-.base00 { color: #001100; }
-.base01 { color: #003300; }
-.base02 { color: #005500; }
-.base03 { color: #007700; }
-.base04 { color: #009900; }
-.base05 { color: #00bb00; }
-.base06 { color: #00dd00; }
-.base07 { color: #00ff00; }
-.base08 { color: #007700; }
-.base09 { color: #009900; }
-.base0A { color: #007700; }
-.base0B { color: #00bb00; }
-.base0C { color: #005500; }
-.base0D { color: #009900; }
-.base0E { color: #00bb00; }
-.base0F { color: #005500; }
diff --git a/static/css/base16-harmonic16-dark.css b/static/css/base16-harmonic16-dark.css
deleted file mode 100644
index 0c2c7ce4..00000000
--- a/static/css/base16-harmonic16-dark.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #0b1c2c; }
-.base01-background { background-color: #223b54; }
-.base02-background { background-color: #405c79; }
-.base03-background { background-color: #627e99; }
-.base04-background { background-color: #aabcce; }
-.base05-background { background-color: #cbd6e2; }
-.base06-background { background-color: #e5ebf1; }
-.base07-background { background-color: #f7f9fb; }
-.base08-background { background-color: #bf8b56; }
-.base09-background { background-color: #bfbf56; }
-.base0A-background { background-color: #8bbf56; }
-.base0B-background { background-color: #56bf8b; }
-.base0C-background { background-color: #568bbf; }
-.base0D-background { background-color: #8b56bf; }
-.base0E-background { background-color: #bf568b; }
-.base0F-background { background-color: #bf5656; }
-
-.base00 { color: #0b1c2c; }
-.base01 { color: #223b54; }
-.base02 { color: #405c79; }
-.base03 { color: #627e99; }
-.base04 { color: #aabcce; }
-.base05 { color: #cbd6e2; }
-.base06 { color: #e5ebf1; }
-.base07 { color: #f7f9fb; }
-.base08 { color: #bf8b56; }
-.base09 { color: #bfbf56; }
-.base0A { color: #8bbf56; }
-.base0B { color: #56bf8b; }
-.base0C { color: #568bbf; }
-.base0D { color: #8b56bf; }
-.base0E { color: #bf568b; }
-.base0F { color: #bf5656; }
diff --git a/static/css/base16-harmonic16-light.css b/static/css/base16-harmonic16-light.css
deleted file mode 100644
index 37bb7679..00000000
--- a/static/css/base16-harmonic16-light.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #f7f9fb; }
-.base01-background { background-color: #e5ebf1; }
-.base02-background { background-color: #cbd6e2; }
-.base03-background { background-color: #aabcce; }
-.base04-background { background-color: #627e99; }
-.base05-background { background-color: #405c79; }
-.base06-background { background-color: #223b54; }
-.base07-background { background-color: #0b1c2c; }
-.base08-background { background-color: #bf8b56; }
-.base09-background { background-color: #bfbf56; }
-.base0A-background { background-color: #8bbf56; }
-.base0B-background { background-color: #56bf8b; }
-.base0C-background { background-color: #568bbf; }
-.base0D-background { background-color: #8b56bf; }
-.base0E-background { background-color: #bf568b; }
-.base0F-background { background-color: #bf5656; }
-
-.base00 { color: #f7f9fb; }
-.base01 { color: #e5ebf1; }
-.base02 { color: #cbd6e2; }
-.base03 { color: #aabcce; }
-.base04 { color: #627e99; }
-.base05 { color: #405c79; }
-.base06 { color: #223b54; }
-.base07 { color: #0b1c2c; }
-.base08 { color: #bf8b56; }
-.base09 { color: #bfbf56; }
-.base0A { color: #8bbf56; }
-.base0B { color: #56bf8b; }
-.base0C { color: #568bbf; }
-.base0D { color: #8b56bf; }
-.base0E { color: #bf568b; }
-.base0F { color: #bf5656; }
diff --git a/static/css/base16-hopscotch.css b/static/css/base16-hopscotch.css
deleted file mode 100644
index f2ad232c..00000000
--- a/static/css/base16-hopscotch.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #322931; }
-.base01-background { background-color: #433b42; }
-.base02-background { background-color: #5c545b; }
-.base03-background { background-color: #797379; }
-.base04-background { background-color: #989498; }
-.base05-background { background-color: #b9b5b8; }
-.base06-background { background-color: #d5d3d5; }
-.base07-background { background-color: #ffffff; }
-.base08-background { background-color: #dd464c; }
-.base09-background { background-color: #fd8b19; }
-.base0A-background { background-color: #fdcc59; }
-.base0B-background { background-color: #8fc13e; }
-.base0C-background { background-color: #149b93; }
-.base0D-background { background-color: #1290bf; }
-.base0E-background { background-color: #c85e7c; }
-.base0F-background { background-color: #b33508; }
-
-.base00 { color: #322931; }
-.base01 { color: #433b42; }
-.base02 { color: #5c545b; }
-.base03 { color: #797379; }
-.base04 { color: #989498; }
-.base05 { color: #b9b5b8; }
-.base06 { color: #d5d3d5; }
-.base07 { color: #ffffff; }
-.base08 { color: #dd464c; }
-.base09 { color: #fd8b19; }
-.base0A { color: #fdcc59; }
-.base0B { color: #8fc13e; }
-.base0C { color: #149b93; }
-.base0D { color: #1290bf; }
-.base0E { color: #c85e7c; }
-.base0F { color: #b33508; }
diff --git a/static/css/base16-ir-black.css b/static/css/base16-ir-black.css
deleted file mode 100644
index 8d14ab9b..00000000
--- a/static/css/base16-ir-black.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #000000; }
-.base01-background { background-color: #242422; }
-.base02-background { background-color: #484844; }
-.base03-background { background-color: #6c6c66; }
-.base04-background { background-color: #918f88; }
-.base05-background { background-color: #b5b3aa; }
-.base06-background { background-color: #d9d7cc; }
-.base07-background { background-color: #fdfbee; }
-.base08-background { background-color: #ff6c60; }
-.base09-background { background-color: #e9c062; }
-.base0A-background { background-color: #ffffb6; }
-.base0B-background { background-color: #a8ff60; }
-.base0C-background { background-color: #c6c5fe; }
-.base0D-background { background-color: #96cbfe; }
-.base0E-background { background-color: #ff73fd; }
-.base0F-background { background-color: #b18a3d; }
-
-.base00 { color: #000000; }
-.base01 { color: #242422; }
-.base02 { color: #484844; }
-.base03 { color: #6c6c66; }
-.base04 { color: #918f88; }
-.base05 { color: #b5b3aa; }
-.base06 { color: #d9d7cc; }
-.base07 { color: #fdfbee; }
-.base08 { color: #ff6c60; }
-.base09 { color: #e9c062; }
-.base0A { color: #ffffb6; }
-.base0B { color: #a8ff60; }
-.base0C { color: #c6c5fe; }
-.base0D { color: #96cbfe; }
-.base0E { color: #ff73fd; }
-.base0F { color: #b18a3d; }
diff --git a/static/css/base16-isotope.css b/static/css/base16-isotope.css
deleted file mode 100644
index f7a4a0b4..00000000
--- a/static/css/base16-isotope.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #000000; }
-.base01-background { background-color: #404040; }
-.base02-background { background-color: #606060; }
-.base03-background { background-color: #808080; }
-.base04-background { background-color: #c0c0c0; }
-.base05-background { background-color: #d0d0d0; }
-.base06-background { background-color: #e0e0e0; }
-.base07-background { background-color: #ffffff; }
-.base08-background { background-color: #ff0000; }
-.base09-background { background-color: #ff9900; }
-.base0A-background { background-color: #ff0099; }
-.base0B-background { background-color: #33ff00; }
-.base0C-background { background-color: #00ffff; }
-.base0D-background { background-color: #0066ff; }
-.base0E-background { background-color: #cc00ff; }
-.base0F-background { background-color: #3300ff; }
-
-.base00 { color: #000000; }
-.base01 { color: #404040; }
-.base02 { color: #606060; }
-.base03 { color: #808080; }
-.base04 { color: #c0c0c0; }
-.base05 { color: #d0d0d0; }
-.base06 { color: #e0e0e0; }
-.base07 { color: #ffffff; }
-.base08 { color: #ff0000; }
-.base09 { color: #ff9900; }
-.base0A { color: #ff0099; }
-.base0B { color: #33ff00; }
-.base0C { color: #00ffff; }
-.base0D { color: #0066ff; }
-.base0E { color: #cc00ff; }
-.base0F { color: #3300ff; }
diff --git a/static/css/base16-london-tube.css b/static/css/base16-london-tube.css
deleted file mode 100644
index 0537d1ad..00000000
--- a/static/css/base16-london-tube.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #231f20; }
-.base01-background { background-color: #1c3f95; }
-.base02-background { background-color: #5a5758; }
-.base03-background { background-color: #737171; }
-.base04-background { background-color: #959ca1; }
-.base05-background { background-color: #d9d8d8; }
-.base06-background { background-color: #e7e7e8; }
-.base07-background { background-color: #ffffff; }
-.base08-background { background-color: #ee2e24; }
-.base09-background { background-color: #f386a1; }
-.base0A-background { background-color: #ffd204; }
-.base0B-background { background-color: #00853e; }
-.base0C-background { background-color: #85cebc; }
-.base0D-background { background-color: #009ddc; }
-.base0E-background { background-color: #98005d; }
-.base0F-background { background-color: #b06110; }
-
-.base00 { color: #231f20; }
-.base01 { color: #1c3f95; }
-.base02 { color: #5a5758; }
-.base03 { color: #737171; }
-.base04 { color: #959ca1; }
-.base05 { color: #d9d8d8; }
-.base06 { color: #e7e7e8; }
-.base07 { color: #ffffff; }
-.base08 { color: #ee2e24; }
-.base09 { color: #f386a1; }
-.base0A { color: #ffd204; }
-.base0B { color: #00853e; }
-.base0C { color: #85cebc; }
-.base0D { color: #009ddc; }
-.base0E { color: #98005d; }
-.base0F { color: #b06110; }
diff --git a/static/css/base16-macintosh.css b/static/css/base16-macintosh.css
deleted file mode 100644
index d5969fec..00000000
--- a/static/css/base16-macintosh.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #000000; }
-.base01-background { background-color: #404040; }
-.base02-background { background-color: #404040; }
-.base03-background { background-color: #808080; }
-.base04-background { background-color: #808080; }
-.base05-background { background-color: #c0c0c0; }
-.base06-background { background-color: #c0c0c0; }
-.base07-background { background-color: #ffffff; }
-.base08-background { background-color: #dd0907; }
-.base09-background { background-color: #ff6403; }
-.base0A-background { background-color: #fbf305; }
-.base0B-background { background-color: #1fb714; }
-.base0C-background { background-color: #02abea; }
-.base0D-background { background-color: #0000d3; }
-.base0E-background { background-color: #4700a5; }
-.base0F-background { background-color: #90713a; }
-
-.base00 { color: #000000; }
-.base01 { color: #404040; }
-.base02 { color: #404040; }
-.base03 { color: #808080; }
-.base04 { color: #808080; }
-.base05 { color: #c0c0c0; }
-.base06 { color: #c0c0c0; }
-.base07 { color: #ffffff; }
-.base08 { color: #dd0907; }
-.base09 { color: #ff6403; }
-.base0A { color: #fbf305; }
-.base0B { color: #1fb714; }
-.base0C { color: #02abea; }
-.base0D { color: #0000d3; }
-.base0E { color: #4700a5; }
-.base0F { color: #90713a; }
diff --git a/static/css/base16-marrakesh.css b/static/css/base16-marrakesh.css
deleted file mode 100644
index 91f0471f..00000000
--- a/static/css/base16-marrakesh.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #201602; }
-.base01-background { background-color: #302e00; }
-.base02-background { background-color: #5f5b17; }
-.base03-background { background-color: #6c6823; }
-.base04-background { background-color: #86813b; }
-.base05-background { background-color: #948e48; }
-.base06-background { background-color: #ccc37a; }
-.base07-background { background-color: #faf0a5; }
-.base08-background { background-color: #c35359; }
-.base09-background { background-color: #b36144; }
-.base0A-background { background-color: #a88339; }
-.base0B-background { background-color: #18974e; }
-.base0C-background { background-color: #75a738; }
-.base0D-background { background-color: #477ca1; }
-.base0E-background { background-color: #8868b3; }
-.base0F-background { background-color: #b3588e; }
-
-.base00 { color: #201602; }
-.base01 { color: #302e00; }
-.base02 { color: #5f5b17; }
-.base03 { color: #6c6823; }
-.base04 { color: #86813b; }
-.base05 { color: #948e48; }
-.base06 { color: #ccc37a; }
-.base07 { color: #faf0a5; }
-.base08 { color: #c35359; }
-.base09 { color: #b36144; }
-.base0A { color: #a88339; }
-.base0B { color: #18974e; }
-.base0C { color: #75a738; }
-.base0D { color: #477ca1; }
-.base0E { color: #8868b3; }
-.base0F { color: #b3588e; }
diff --git a/static/css/base16-materia.css b/static/css/base16-materia.css
deleted file mode 100644
index 41d935dd..00000000
--- a/static/css/base16-materia.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #263238; }
-.base01-background { background-color: #2C393F; }
-.base02-background { background-color: #37474F; }
-.base03-background { background-color: #707880; }
-.base04-background { background-color: #C9CCD3; }
-.base05-background { background-color: #CDD3DE; }
-.base06-background { background-color: #D5DBE5; }
-.base07-background { background-color: #FFFFFF; }
-.base08-background { background-color: #EC5F67; }
-.base09-background { background-color: #EA9560; }
-.base0A-background { background-color: #FFCC00; }
-.base0B-background { background-color: #8BD649; }
-.base0C-background { background-color: #80CBC4; }
-.base0D-background { background-color: #89DDFF; }
-.base0E-background { background-color: #82AAFF; }
-.base0F-background { background-color: #EC5F67; }
-
-.base00 { color: #263238; }
-.base01 { color: #2C393F; }
-.base02 { color: #37474F; }
-.base03 { color: #707880; }
-.base04 { color: #C9CCD3; }
-.base05 { color: #CDD3DE; }
-.base06 { color: #D5DBE5; }
-.base07 { color: #FFFFFF; }
-.base08 { color: #EC5F67; }
-.base09 { color: #EA9560; }
-.base0A { color: #FFCC00; }
-.base0B { color: #8BD649; }
-.base0C { color: #80CBC4; }
-.base0D { color: #89DDFF; }
-.base0E { color: #82AAFF; }
-.base0F { color: #EC5F67; }
diff --git a/static/css/base16-mexico-light.css b/static/css/base16-mexico-light.css
deleted file mode 100644
index 1916c67b..00000000
--- a/static/css/base16-mexico-light.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #f8f8f8; }
-.base01-background { background-color: #e8e8e8; }
-.base02-background { background-color: #d8d8d8; }
-.base03-background { background-color: #b8b8b8; }
-.base04-background { background-color: #585858; }
-.base05-background { background-color: #383838; }
-.base06-background { background-color: #282828; }
-.base07-background { background-color: #181818; }
-.base08-background { background-color: #ab4642; }
-.base09-background { background-color: #dc9656; }
-.base0A-background { background-color: #f79a0e; }
-.base0B-background { background-color: #538947; }
-.base0C-background { background-color: #4b8093; }
-.base0D-background { background-color: #7cafc2; }
-.base0E-background { background-color: #96609e; }
-.base0F-background { background-color: #a16946; }
-
-.base00 { color: #f8f8f8; }
-.base01 { color: #e8e8e8; }
-.base02 { color: #d8d8d8; }
-.base03 { color: #b8b8b8; }
-.base04 { color: #585858; }
-.base05 { color: #383838; }
-.base06 { color: #282828; }
-.base07 { color: #181818; }
-.base08 { color: #ab4642; }
-.base09 { color: #dc9656; }
-.base0A { color: #f79a0e; }
-.base0B { color: #538947; }
-.base0C { color: #4b8093; }
-.base0D { color: #7cafc2; }
-.base0E { color: #96609e; }
-.base0F { color: #a16946; }
diff --git a/static/css/base16-mocha.css b/static/css/base16-mocha.css
deleted file mode 100644
index 6cb2fb58..00000000
--- a/static/css/base16-mocha.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #3B3228; }
-.base01-background { background-color: #534636; }
-.base02-background { background-color: #645240; }
-.base03-background { background-color: #7e705a; }
-.base04-background { background-color: #b8afad; }
-.base05-background { background-color: #d0c8c6; }
-.base06-background { background-color: #e9e1dd; }
-.base07-background { background-color: #f5eeeb; }
-.base08-background { background-color: #cb6077; }
-.base09-background { background-color: #d28b71; }
-.base0A-background { background-color: #f4bc87; }
-.base0B-background { background-color: #beb55b; }
-.base0C-background { background-color: #7bbda4; }
-.base0D-background { background-color: #8ab3b5; }
-.base0E-background { background-color: #a89bb9; }
-.base0F-background { background-color: #bb9584; }
-
-.base00 { color: #3B3228; }
-.base01 { color: #534636; }
-.base02 { color: #645240; }
-.base03 { color: #7e705a; }
-.base04 { color: #b8afad; }
-.base05 { color: #d0c8c6; }
-.base06 { color: #e9e1dd; }
-.base07 { color: #f5eeeb; }
-.base08 { color: #cb6077; }
-.base09 { color: #d28b71; }
-.base0A { color: #f4bc87; }
-.base0B { color: #beb55b; }
-.base0C { color: #7bbda4; }
-.base0D { color: #8ab3b5; }
-.base0E { color: #a89bb9; }
-.base0F { color: #bb9584; }
diff --git a/static/css/base16-monokai.css b/static/css/base16-monokai.css
deleted file mode 100644
index fc7ccf47..00000000
--- a/static/css/base16-monokai.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #272822; }
-.base01-background { background-color: #383830; }
-.base02-background { background-color: #49483e; }
-.base03-background { background-color: #75715e; }
-.base04-background { background-color: #a59f85; }
-.base05-background { background-color: #f8f8f2; }
-.base06-background { background-color: #f5f4f1; }
-.base07-background { background-color: #f9f8f5; }
-.base08-background { background-color: #f92672; }
-.base09-background { background-color: #fd971f; }
-.base0A-background { background-color: #f4bf75; }
-.base0B-background { background-color: #a6e22e; }
-.base0C-background { background-color: #a1efe4; }
-.base0D-background { background-color: #66d9ef; }
-.base0E-background { background-color: #ae81ff; }
-.base0F-background { background-color: #cc6633; }
-
-.base00 { color: #272822; }
-.base01 { color: #383830; }
-.base02 { color: #49483e; }
-.base03 { color: #75715e; }
-.base04 { color: #a59f85; }
-.base05 { color: #f8f8f2; }
-.base06 { color: #f5f4f1; }
-.base07 { color: #f9f8f5; }
-.base08 { color: #f92672; }
-.base09 { color: #fd971f; }
-.base0A { color: #f4bf75; }
-.base0B { color: #a6e22e; }
-.base0C { color: #a1efe4; }
-.base0D { color: #66d9ef; }
-.base0E { color: #ae81ff; }
-.base0F { color: #cc6633; }
diff --git a/static/css/base16-ocean.css b/static/css/base16-ocean.css
deleted file mode 100644
index 8622d17e..00000000
--- a/static/css/base16-ocean.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #2b303b; }
-.base01-background { background-color: #343d46; }
-.base02-background { background-color: #4f5b66; }
-.base03-background { background-color: #65737e; }
-.base04-background { background-color: #a7adba; }
-.base05-background { background-color: #c0c5ce; }
-.base06-background { background-color: #dfe1e8; }
-.base07-background { background-color: #eff1f5; }
-.base08-background { background-color: #bf616a; }
-.base09-background { background-color: #d08770; }
-.base0A-background { background-color: #ebcb8b; }
-.base0B-background { background-color: #a3be8c; }
-.base0C-background { background-color: #96b5b4; }
-.base0D-background { background-color: #8fa1b3; }
-.base0E-background { background-color: #b48ead; }
-.base0F-background { background-color: #ab7967; }
-
-.base00 { color: #2b303b; }
-.base01 { color: #343d46; }
-.base02 { color: #4f5b66; }
-.base03 { color: #65737e; }
-.base04 { color: #a7adba; }
-.base05 { color: #c0c5ce; }
-.base06 { color: #dfe1e8; }
-.base07 { color: #eff1f5; }
-.base08 { color: #bf616a; }
-.base09 { color: #d08770; }
-.base0A { color: #ebcb8b; }
-.base0B { color: #a3be8c; }
-.base0C { color: #96b5b4; }
-.base0D { color: #8fa1b3; }
-.base0E { color: #b48ead; }
-.base0F { color: #ab7967; }
diff --git a/static/css/base16-oceanicnext.css b/static/css/base16-oceanicnext.css
deleted file mode 100644
index df4d9ef5..00000000
--- a/static/css/base16-oceanicnext.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #1B2B34; }
-.base01-background { background-color: #343D46; }
-.base02-background { background-color: #4F5B66; }
-.base03-background { background-color: #65737E; }
-.base04-background { background-color: #A7ADBA; }
-.base05-background { background-color: #C0C5CE; }
-.base06-background { background-color: #CDD3DE; }
-.base07-background { background-color: #D8DEE9; }
-.base08-background { background-color: #EC5f67; }
-.base09-background { background-color: #F99157; }
-.base0A-background { background-color: #FAC863; }
-.base0B-background { background-color: #99C794; }
-.base0C-background { background-color: #5FB3B3; }
-.base0D-background { background-color: #6699CC; }
-.base0E-background { background-color: #C594C5; }
-.base0F-background { background-color: #AB7967; }
-
-.base00 { color: #1B2B34; }
-.base01 { color: #343D46; }
-.base02 { color: #4F5B66; }
-.base03 { color: #65737E; }
-.base04 { color: #A7ADBA; }
-.base05 { color: #C0C5CE; }
-.base06 { color: #CDD3DE; }
-.base07 { color: #D8DEE9; }
-.base08 { color: #EC5f67; }
-.base09 { color: #F99157; }
-.base0A { color: #FAC863; }
-.base0B { color: #99C794; }
-.base0C { color: #5FB3B3; }
-.base0D { color: #6699CC; }
-.base0E { color: #C594C5; }
-.base0F { color: #AB7967; }
diff --git a/static/css/base16-paraiso.css b/static/css/base16-paraiso.css
deleted file mode 100644
index b68c9407..00000000
--- a/static/css/base16-paraiso.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #2f1e2e; }
-.base01-background { background-color: #41323f; }
-.base02-background { background-color: #4f424c; }
-.base03-background { background-color: #776e71; }
-.base04-background { background-color: #8d8687; }
-.base05-background { background-color: #a39e9b; }
-.base06-background { background-color: #b9b6b0; }
-.base07-background { background-color: #e7e9db; }
-.base08-background { background-color: #ef6155; }
-.base09-background { background-color: #f99b15; }
-.base0A-background { background-color: #fec418; }
-.base0B-background { background-color: #48b685; }
-.base0C-background { background-color: #5bc4bf; }
-.base0D-background { background-color: #06b6ef; }
-.base0E-background { background-color: #815ba4; }
-.base0F-background { background-color: #e96ba8; }
-
-.base00 { color: #2f1e2e; }
-.base01 { color: #41323f; }
-.base02 { color: #4f424c; }
-.base03 { color: #776e71; }
-.base04 { color: #8d8687; }
-.base05 { color: #a39e9b; }
-.base06 { color: #b9b6b0; }
-.base07 { color: #e7e9db; }
-.base08 { color: #ef6155; }
-.base09 { color: #f99b15; }
-.base0A { color: #fec418; }
-.base0B { color: #48b685; }
-.base0C { color: #5bc4bf; }
-.base0D { color: #06b6ef; }
-.base0E { color: #815ba4; }
-.base0F { color: #e96ba8; }
diff --git a/static/css/base16-phd.css b/static/css/base16-phd.css
deleted file mode 100644
index 54276ab1..00000000
--- a/static/css/base16-phd.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #061229; }
-.base01-background { background-color: #2a3448; }
-.base02-background { background-color: #4d5666; }
-.base03-background { background-color: #717885; }
-.base04-background { background-color: #9a99a3; }
-.base05-background { background-color: #b8bbc2; }
-.base06-background { background-color: #dbdde0; }
-.base07-background { background-color: #ffffff; }
-.base08-background { background-color: #d07346; }
-.base09-background { background-color: #f0a000; }
-.base0A-background { background-color: #fbd461; }
-.base0B-background { background-color: #99bf52; }
-.base0C-background { background-color: #72b9bf; }
-.base0D-background { background-color: #5299bf; }
-.base0E-background { background-color: #9989cc; }
-.base0F-background { background-color: #b08060; }
-
-.base00 { color: #061229; }
-.base01 { color: #2a3448; }
-.base02 { color: #4d5666; }
-.base03 { color: #717885; }
-.base04 { color: #9a99a3; }
-.base05 { color: #b8bbc2; }
-.base06 { color: #dbdde0; }
-.base07 { color: #ffffff; }
-.base08 { color: #d07346; }
-.base09 { color: #f0a000; }
-.base0A { color: #fbd461; }
-.base0B { color: #99bf52; }
-.base0C { color: #72b9bf; }
-.base0D { color: #5299bf; }
-.base0E { color: #9989cc; }
-.base0F { color: #b08060; }
diff --git a/static/css/base16-pico.css b/static/css/base16-pico.css
deleted file mode 100644
index 86482b72..00000000
--- a/static/css/base16-pico.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #000000; }
-.base01-background { background-color: #1d2b53; }
-.base02-background { background-color: #7e2553; }
-.base03-background { background-color: #008751; }
-.base04-background { background-color: #ab5236; }
-.base05-background { background-color: #5f574f; }
-.base06-background { background-color: #c2c3c7; }
-.base07-background { background-color: #fff1e8; }
-.base08-background { background-color: #ff004d; }
-.base09-background { background-color: #ffa300; }
-.base0A-background { background-color: #fff024; }
-.base0B-background { background-color: #00e756; }
-.base0C-background { background-color: #29adff; }
-.base0D-background { background-color: #83769c; }
-.base0E-background { background-color: #ff77a8; }
-.base0F-background { background-color: #ffccaa; }
-
-.base00 { color: #000000; }
-.base01 { color: #1d2b53; }
-.base02 { color: #7e2553; }
-.base03 { color: #008751; }
-.base04 { color: #ab5236; }
-.base05 { color: #5f574f; }
-.base06 { color: #c2c3c7; }
-.base07 { color: #fff1e8; }
-.base08 { color: #ff004d; }
-.base09 { color: #ffa300; }
-.base0A { color: #fff024; }
-.base0B { color: #00e756; }
-.base0C { color: #29adff; }
-.base0D { color: #83769c; }
-.base0E { color: #ff77a8; }
-.base0F { color: #ffccaa; }
diff --git a/static/css/base16-pleroma-dark.css b/static/css/base16-pleroma-dark.css
deleted file mode 100644
index e1d46f92..00000000
--- a/static/css/base16-pleroma-dark.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #161c20; }
-.base01-background { background-color: #282e32; }
-.base02-background { background-color: #343a3f; }
-.base03-background { background-color: #4e5256; }
-.base04-background { background-color: #ababab; }
-.base05-background { background-color: #b9b9b9; }
-.base06-background { background-color: #d0d0d0; }
-.base07-background { background-color: #e7e7e7; }
-.base08-background { background-color: #baaa9c; }
-.base09-background { background-color: #999999; }
-.base0A-background { background-color: #a0a0a0; }
-.base0B-background { background-color: #8e8e8e; }
-.base0C-background { background-color: #868686; }
-.base0D-background { background-color: #686868; }
-.base0E-background { background-color: #747474; }
-.base0F-background { background-color: #5e5e5e; }
-
-.base00 { color: #161c20; }
-.base01 { color: #282e32; }
-.base02 { color: #343a3f; }
-.base03 { color: #4e5256; }
-.base04 { color: #ababab; }
-.base05 { color: #b9b9b9; }
-.base06 { color: #d0d0d0; }
-.base07 { color: #e7e7e7; }
-.base08 { color: #baaa9c; }
-.base09 { color: #999999; }
-.base0A { color: #a0a0a0; }
-.base0B { color: #8e8e8e; }
-.base0C { color: #868686; }
-.base0D { color: #686868; }
-.base0E { color: #747474; }
-.base0F { color: #5e5e5e; }
diff --git a/static/css/base16-pleroma-light.css b/static/css/base16-pleroma-light.css
deleted file mode 100644
index 1a85689a..00000000
--- a/static/css/base16-pleroma-light.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #f2f4f6; }
-.base01-background { background-color: #dde2e6; }
-.base02-background { background-color: #c0c6cb; }
-.base03-background { background-color: #a4a4a4; }
-.base04-background { background-color: #545454; }
-.base05-background { background-color: #304055; }
-.base06-background { background-color: #040404; }
-.base07-background { background-color: #000000; }
-.base08-background { background-color: #e92f2f; }
-.base09-background { background-color: #e09448; }
-.base0A-background { background-color: #dddd13; }
-.base0B-background { background-color: #0ed839; }
-.base0C-background { background-color: #23edda; }
-.base0D-background { background-color: #3b48e3; }
-.base0E-background { background-color: #f996e2; }
-.base0F-background { background-color: #69542d; }
-
-.base00 { color: #f2f4f6; }
-.base01 { color: #dde2e6; }
-.base02 { color: #c0c6cb; }
-.base03 { color: #a4a4a4; }
-.base04 { color: #545454; }
-.base05 { color: #304055; }
-.base06 { color: #040404; }
-.base07 { color: #000000; }
-.base08 { color: #e46f0f; }
-.base09 { color: #e09448; }
-.base0A { color: #dddd13; }
-.base0B { color: #0ed839; }
-.base0C { color: #23edda; }
-.base0D { color: #3b48e3; }
-.base0E { color: #f996e2; }
-.base0F { color: #69542d; }
diff --git a/static/css/base16-pop.css b/static/css/base16-pop.css
deleted file mode 100644
index 14acac17..00000000
--- a/static/css/base16-pop.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #000000; }
-.base01-background { background-color: #202020; }
-.base02-background { background-color: #303030; }
-.base03-background { background-color: #505050; }
-.base04-background { background-color: #b0b0b0; }
-.base05-background { background-color: #d0d0d0; }
-.base06-background { background-color: #e0e0e0; }
-.base07-background { background-color: #ffffff; }
-.base08-background { background-color: #eb008a; }
-.base09-background { background-color: #f29333; }
-.base0A-background { background-color: #f8ca12; }
-.base0B-background { background-color: #37b349; }
-.base0C-background { background-color: #00aabb; }
-.base0D-background { background-color: #0e5a94; }
-.base0E-background { background-color: #b31e8d; }
-.base0F-background { background-color: #7a2d00; }
-
-.base00 { color: #000000; }
-.base01 { color: #202020; }
-.base02 { color: #303030; }
-.base03 { color: #505050; }
-.base04 { color: #b0b0b0; }
-.base05 { color: #d0d0d0; }
-.base06 { color: #e0e0e0; }
-.base07 { color: #ffffff; }
-.base08 { color: #eb008a; }
-.base09 { color: #f29333; }
-.base0A { color: #f8ca12; }
-.base0B { color: #37b349; }
-.base0C { color: #00aabb; }
-.base0D { color: #0e5a94; }
-.base0E { color: #b31e8d; }
-.base0F { color: #7a2d00; }
diff --git a/static/css/base16-railscasts.css b/static/css/base16-railscasts.css
deleted file mode 100644
index 18f43bfd..00000000
--- a/static/css/base16-railscasts.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #2b2b2b; }
-.base01-background { background-color: #272935; }
-.base02-background { background-color: #3a4055; }
-.base03-background { background-color: #5a647e; }
-.base04-background { background-color: #d4cfc9; }
-.base05-background { background-color: #e6e1dc; }
-.base06-background { background-color: #f4f1ed; }
-.base07-background { background-color: #f9f7f3; }
-.base08-background { background-color: #da4939; }
-.base09-background { background-color: #cc7833; }
-.base0A-background { background-color: #ffc66d; }
-.base0B-background { background-color: #a5c261; }
-.base0C-background { background-color: #519f50; }
-.base0D-background { background-color: #6d9cbe; }
-.base0E-background { background-color: #b6b3eb; }
-.base0F-background { background-color: #bc9458; }
-
-.base00 { color: #2b2b2b; }
-.base01 { color: #272935; }
-.base02 { color: #3a4055; }
-.base03 { color: #5a647e; }
-.base04 { color: #d4cfc9; }
-.base05 { color: #e6e1dc; }
-.base06 { color: #f4f1ed; }
-.base07 { color: #f9f7f3; }
-.base08 { color: #da4939; }
-.base09 { color: #cc7833; }
-.base0A { color: #ffc66d; }
-.base0B { color: #a5c261; }
-.base0C { color: #519f50; }
-.base0D { color: #6d9cbe; }
-.base0E { color: #b6b3eb; }
-.base0F { color: #bc9458; }
diff --git a/static/css/base16-seti-ui.css b/static/css/base16-seti-ui.css
deleted file mode 100644
index bd4f9cc4..00000000
--- a/static/css/base16-seti-ui.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #151718; }
-.base01-background { background-color: #8ec43d; }
-.base02-background { background-color: #3B758C; }
-.base03-background { background-color: #41535B; }
-.base04-background { background-color: #43a5d5; }
-.base05-background { background-color: #d6d6d6; }
-.base06-background { background-color: #eeeeee; }
-.base07-background { background-color: #ffffff; }
-.base08-background { background-color: #Cd3f45; }
-.base09-background { background-color: #db7b55; }
-.base0A-background { background-color: #e6cd69; }
-.base0B-background { background-color: #9fca56; }
-.base0C-background { background-color: #55dbbe; }
-.base0D-background { background-color: #55b5db; }
-.base0E-background { background-color: #a074c4; }
-.base0F-background { background-color: #8a553f; }
-
-.base00 { color: #151718; }
-.base01 { color: #8ec43d; }
-.base02 { color: #3B758C; }
-.base03 { color: #41535B; }
-.base04 { color: #43a5d5; }
-.base05 { color: #d6d6d6; }
-.base06 { color: #eeeeee; }
-.base07 { color: #ffffff; }
-.base08 { color: #Cd3f45; }
-.base09 { color: #db7b55; }
-.base0A { color: #e6cd69; }
-.base0B { color: #9fca56; }
-.base0C { color: #55dbbe; }
-.base0D { color: #55b5db; }
-.base0E { color: #a074c4; }
-.base0F { color: #8a553f; }
diff --git a/static/css/base16-shapeshifter.css b/static/css/base16-shapeshifter.css
deleted file mode 100644
index ded18069..00000000
--- a/static/css/base16-shapeshifter.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #f9f9f9; }
-.base01-background { background-color: #e0e0e0; }
-.base02-background { background-color: #ababab; }
-.base03-background { background-color: #555555; }
-.base04-background { background-color: #343434; }
-.base05-background { background-color: #102015; }
-.base06-background { background-color: #040404; }
-.base07-background { background-color: #000000; }
-.base08-background { background-color: #e92f2f; }
-.base09-background { background-color: #e09448; }
-.base0A-background { background-color: #dddd13; }
-.base0B-background { background-color: #0ed839; }
-.base0C-background { background-color: #23edda; }
-.base0D-background { background-color: #3b48e3; }
-.base0E-background { background-color: #f996e2; }
-.base0F-background { background-color: #69542d; }
-
-.base00 { color: #f9f9f9; }
-.base01 { color: #e0e0e0; }
-.base02 { color: #ababab; }
-.base03 { color: #555555; }
-.base04 { color: #343434; }
-.base05 { color: #102015; }
-.base06 { color: #040404; }
-.base07 { color: #000000; }
-.base08 { color: #e92f2f; }
-.base09 { color: #e09448; }
-.base0A { color: #dddd13; }
-.base0B { color: #0ed839; }
-.base0C { color: #23edda; }
-.base0D { color: #3b48e3; }
-.base0E { color: #f996e2; }
-.base0F { color: #69542d; }
diff --git a/static/css/base16-solar-flare.css b/static/css/base16-solar-flare.css
deleted file mode 100644
index 7d1d3862..00000000
--- a/static/css/base16-solar-flare.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #18262F; }
-.base01-background { background-color: #222E38; }
-.base02-background { background-color: #586875; }
-.base03-background { background-color: #667581; }
-.base04-background { background-color: #85939E; }
-.base05-background { background-color: #A6AFB8; }
-.base06-background { background-color: #E8E9ED; }
-.base07-background { background-color: #F5F7FA; }
-.base08-background { background-color: #EF5253; }
-.base09-background { background-color: #E66B2B; }
-.base0A-background { background-color: #E4B51C; }
-.base0B-background { background-color: #7CC844; }
-.base0C-background { background-color: #52CBB0; }
-.base0D-background { background-color: #33B5E1; }
-.base0E-background { background-color: #A363D5; }
-.base0F-background { background-color: #D73C9A; }
-
-.base00 { color: #18262F; }
-.base01 { color: #222E38; }
-.base02 { color: #586875; }
-.base03 { color: #667581; }
-.base04 { color: #85939E; }
-.base05 { color: #A6AFB8; }
-.base06 { color: #E8E9ED; }
-.base07 { color: #F5F7FA; }
-.base08 { color: #EF5253; }
-.base09 { color: #E66B2B; }
-.base0A { color: #E4B51C; }
-.base0B { color: #7CC844; }
-.base0C { color: #52CBB0; }
-.base0D { color: #33B5E1; }
-.base0E { color: #A363D5; }
-.base0F { color: #D73C9A; }
diff --git a/static/css/base16-solarized-dark.css b/static/css/base16-solarized-dark.css
deleted file mode 100644
index ac16f12c..00000000
--- a/static/css/base16-solarized-dark.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #002b36; }
-.base01-background { background-color: #073642; }
-.base02-background { background-color: #586e75; }
-.base03-background { background-color: #657b83; }
-.base04-background { background-color: #839496; }
-.base05-background { background-color: #93a1a1; }
-.base06-background { background-color: #eee8d5; }
-.base07-background { background-color: #fdf6e3; }
-.base08-background { background-color: #dc322f; }
-.base09-background { background-color: #cb4b16; }
-.base0A-background { background-color: #b58900; }
-.base0B-background { background-color: #859900; }
-.base0C-background { background-color: #2aa198; }
-.base0D-background { background-color: #268bd2; }
-.base0E-background { background-color: #6c71c4; }
-.base0F-background { background-color: #d33682; }
-
-.base00 { color: #002b36; }
-.base01 { color: #073642; }
-.base02 { color: #586e75; }
-.base03 { color: #657b83; }
-.base04 { color: #839496; }
-.base05 { color: #93a1a1; }
-.base06 { color: #eee8d5; }
-.base07 { color: #fdf6e3; }
-.base08 { color: #dc322f; }
-.base09 { color: #cb4b16; }
-.base0A { color: #b58900; }
-.base0B { color: #859900; }
-.base0C { color: #2aa198; }
-.base0D { color: #268bd2; }
-.base0E { color: #6c71c4; }
-.base0F { color: #d33682; }
diff --git a/static/css/base16-solarized-light.css b/static/css/base16-solarized-light.css
deleted file mode 100644
index 7164cb04..00000000
--- a/static/css/base16-solarized-light.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #fdf6e3; }
-.base01-background { background-color: #eee8d5; }
-.base02-background { background-color: #93a1a1; }
-.base03-background { background-color: #839496; }
-.base04-background { background-color: #657b83; }
-.base05-background { background-color: #586e75; }
-.base06-background { background-color: #073642; }
-.base07-background { background-color: #002b36; }
-.base08-background { background-color: #dc322f; }
-.base09-background { background-color: #cb4b16; }
-.base0A-background { background-color: #b58900; }
-.base0B-background { background-color: #859900; }
-.base0C-background { background-color: #2aa198; }
-.base0D-background { background-color: #268bd2; }
-.base0E-background { background-color: #6c71c4; }
-.base0F-background { background-color: #d33682; }
-
-.base00 { color: #fdf6e3; }
-.base01 { color: #eee8d5; }
-.base02 { color: #93a1a1; }
-.base03 { color: #839496; }
-.base04 { color: #657b83; }
-.base05 { color: #586e75; }
-.base06 { color: #073642; }
-.base07 { color: #002b36; }
-.base08 { color: #dc322f; }
-.base09 { color: #cb4b16; }
-.base0A { color: #b58900; }
-.base0B { color: #859900; }
-.base0C { color: #2aa198; }
-.base0D { color: #268bd2; }
-.base0E { color: #6c71c4; }
-.base0F { color: #d33682; }
diff --git a/static/css/base16-spacemacs.css b/static/css/base16-spacemacs.css
deleted file mode 100644
index 48737650..00000000
--- a/static/css/base16-spacemacs.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #1f2022; }
-.base01-background { background-color: #282828; }
-.base02-background { background-color: #444155; }
-.base03-background { background-color: #585858; }
-.base04-background { background-color: #b8b8b8; }
-.base05-background { background-color: #a3a3a3; }
-.base06-background { background-color: #e8e8e8; }
-.base07-background { background-color: #f8f8f8; }
-.base08-background { background-color: #f2241f; }
-.base09-background { background-color: #ffa500; }
-.base0A-background { background-color: #b1951d; }
-.base0B-background { background-color: #67b11d; }
-.base0C-background { background-color: #2d9574; }
-.base0D-background { background-color: #4f97d7; }
-.base0E-background { background-color: #a31db1; }
-.base0F-background { background-color: #b03060; }
-
-.base00 { color: #1f2022; }
-.base01 { color: #282828; }
-.base02 { color: #444155; }
-.base03 { color: #585858; }
-.base04 { color: #b8b8b8; }
-.base05 { color: #a3a3a3; }
-.base06 { color: #e8e8e8; }
-.base07 { color: #f8f8f8; }
-.base08 { color: #f2241f; }
-.base09 { color: #ffa500; }
-.base0A { color: #b1951d; }
-.base0B { color: #67b11d; }
-.base0C { color: #2d9574; }
-.base0D { color: #4f97d7; }
-.base0E { color: #a31db1; }
-.base0F { color: #b03060; }
diff --git a/static/css/base16-summerfruit-dark.css b/static/css/base16-summerfruit-dark.css
deleted file mode 100644
index 1c8f2332..00000000
--- a/static/css/base16-summerfruit-dark.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #151515; }
-.base01-background { background-color: #202020; }
-.base02-background { background-color: #303030; }
-.base03-background { background-color: #505050; }
-.base04-background { background-color: #B0B0B0; }
-.base05-background { background-color: #D0D0D0; }
-.base06-background { background-color: #E0E0E0; }
-.base07-background { background-color: #FFFFFF; }
-.base08-background { background-color: #FF0086; }
-.base09-background { background-color: #FD8900; }
-.base0A-background { background-color: #ABA800; }
-.base0B-background { background-color: #00C918; }
-.base0C-background { background-color: #1FAAAA; }
-.base0D-background { background-color: #3777E6; }
-.base0E-background { background-color: #AD00A1; }
-.base0F-background { background-color: #CC6633; }
-
-.base00 { color: #151515; }
-.base01 { color: #202020; }
-.base02 { color: #303030; }
-.base03 { color: #505050; }
-.base04 { color: #B0B0B0; }
-.base05 { color: #D0D0D0; }
-.base06 { color: #E0E0E0; }
-.base07 { color: #FFFFFF; }
-.base08 { color: #FF0086; }
-.base09 { color: #FD8900; }
-.base0A { color: #ABA800; }
-.base0B { color: #00C918; }
-.base0C { color: #1FAAAA; }
-.base0D { color: #3777E6; }
-.base0E { color: #AD00A1; }
-.base0F { color: #CC6633; }
diff --git a/static/css/base16-summerfruit-light.css b/static/css/base16-summerfruit-light.css
deleted file mode 100644
index cb54d4c5..00000000
--- a/static/css/base16-summerfruit-light.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #FFFFFF; }
-.base01-background { background-color: #E0E0E0; }
-.base02-background { background-color: #D0D0D0; }
-.base03-background { background-color: #B0B0B0; }
-.base04-background { background-color: #000000; }
-.base05-background { background-color: #101010; }
-.base06-background { background-color: #151515; }
-.base07-background { background-color: #202020; }
-.base08-background { background-color: #FF0086; }
-.base09-background { background-color: #FD8900; }
-.base0A-background { background-color: #ABA800; }
-.base0B-background { background-color: #00C918; }
-.base0C-background { background-color: #1FAAAA; }
-.base0D-background { background-color: #3777E6; }
-.base0E-background { background-color: #AD00A1; }
-.base0F-background { background-color: #CC6633; }
-
-.base00 { color: #FFFFFF; }
-.base01 { color: #E0E0E0; }
-.base02 { color: #D0D0D0; }
-.base03 { color: #B0B0B0; }
-.base04 { color: #000000; }
-.base05 { color: #101010; }
-.base06 { color: #151515; }
-.base07 { color: #202020; }
-.base08 { color: #FF0086; }
-.base09 { color: #FD8900; }
-.base0A { color: #ABA800; }
-.base0B { color: #00C918; }
-.base0C { color: #1FAAAA; }
-.base0D { color: #3777E6; }
-.base0E { color: #AD00A1; }
-.base0F { color: #CC6633; }
diff --git a/static/css/base16-tomorrow-night.css b/static/css/base16-tomorrow-night.css
deleted file mode 100644
index 09ecf08e..00000000
--- a/static/css/base16-tomorrow-night.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #1d1f21; }
-.base01-background { background-color: #282a2e; }
-.base02-background { background-color: #373b41; }
-.base03-background { background-color: #969896; }
-.base04-background { background-color: #b4b7b4; }
-.base05-background { background-color: #c5c8c6; }
-.base06-background { background-color: #e0e0e0; }
-.base07-background { background-color: #ffffff; }
-.base08-background { background-color: #cc6666; }
-.base09-background { background-color: #de935f; }
-.base0A-background { background-color: #f0c674; }
-.base0B-background { background-color: #b5bd68; }
-.base0C-background { background-color: #8abeb7; }
-.base0D-background { background-color: #81a2be; }
-.base0E-background { background-color: #b294bb; }
-.base0F-background { background-color: #a3685a; }
-
-.base00 { color: #1d1f21; }
-.base01 { color: #282a2e; }
-.base02 { color: #373b41; }
-.base03 { color: #969896; }
-.base04 { color: #b4b7b4; }
-.base05 { color: #c5c8c6; }
-.base06 { color: #e0e0e0; }
-.base07 { color: #ffffff; }
-.base08 { color: #cc6666; }
-.base09 { color: #de935f; }
-.base0A { color: #f0c674; }
-.base0B { color: #b5bd68; }
-.base0C { color: #8abeb7; }
-.base0D { color: #81a2be; }
-.base0E { color: #b294bb; }
-.base0F { color: #a3685a; }
diff --git a/static/css/base16-tomorrow.css b/static/css/base16-tomorrow.css
deleted file mode 100644
index f1486823..00000000
--- a/static/css/base16-tomorrow.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #ffffff; }
-.base01-background { background-color: #e0e0e0; }
-.base02-background { background-color: #d6d6d6; }
-.base03-background { background-color: #8e908c; }
-.base04-background { background-color: #969896; }
-.base05-background { background-color: #4d4d4c; }
-.base06-background { background-color: #282a2e; }
-.base07-background { background-color: #1d1f21; }
-.base08-background { background-color: #c82829; }
-.base09-background { background-color: #f5871f; }
-.base0A-background { background-color: #eab700; }
-.base0B-background { background-color: #718c00; }
-.base0C-background { background-color: #3e999f; }
-.base0D-background { background-color: #4271ae; }
-.base0E-background { background-color: #8959a8; }
-.base0F-background { background-color: #a3685a; }
-
-.base00 { color: #ffffff; }
-.base01 { color: #e0e0e0; }
-.base02 { color: #d6d6d6; }
-.base03 { color: #8e908c; }
-.base04 { color: #969896; }
-.base05 { color: #4d4d4c; }
-.base06 { color: #282a2e; }
-.base07 { color: #1d1f21; }
-.base08 { color: #c82829; }
-.base09 { color: #f5871f; }
-.base0A { color: #eab700; }
-.base0B { color: #718c00; }
-.base0C { color: #3e999f; }
-.base0D { color: #4271ae; }
-.base0E { color: #8959a8; }
-.base0F { color: #a3685a; }
diff --git a/static/css/base16-twilight.css b/static/css/base16-twilight.css
deleted file mode 100644
index c8dfda3f..00000000
--- a/static/css/base16-twilight.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #1e1e1e; }
-.base01-background { background-color: #323537; }
-.base02-background { background-color: #464b50; }
-.base03-background { background-color: #5f5a60; }
-.base04-background { background-color: #838184; }
-.base05-background { background-color: #a7a7a7; }
-.base06-background { background-color: #c3c3c3; }
-.base07-background { background-color: #ffffff; }
-.base08-background { background-color: #cf6a4c; }
-.base09-background { background-color: #cda869; }
-.base0A-background { background-color: #f9ee98; }
-.base0B-background { background-color: #8f9d6a; }
-.base0C-background { background-color: #afc4db; }
-.base0D-background { background-color: #7587a6; }
-.base0E-background { background-color: #9b859d; }
-.base0F-background { background-color: #9b703f; }
-
-.base00 { color: #1e1e1e; }
-.base01 { color: #323537; }
-.base02 { color: #464b50; }
-.base03 { color: #5f5a60; }
-.base04 { color: #838184; }
-.base05 { color: #a7a7a7; }
-.base06 { color: #c3c3c3; }
-.base07 { color: #ffffff; }
-.base08 { color: #cf6a4c; }
-.base09 { color: #cda869; }
-.base0A { color: #f9ee98; }
-.base0B { color: #8f9d6a; }
-.base0C { color: #afc4db; }
-.base0D { color: #7587a6; }
-.base0E { color: #9b859d; }
-.base0F { color: #9b703f; }
diff --git a/static/css/base16-unikitty-dark.css b/static/css/base16-unikitty-dark.css
deleted file mode 100644
index e6ef32e3..00000000
--- a/static/css/base16-unikitty-dark.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #2e2a31; }
-.base01-background { background-color: #4a464d; }
-.base02-background { background-color: #666369; }
-.base03-background { background-color: #838085; }
-.base04-background { background-color: #9f9da2; }
-.base05-background { background-color: #bcbabe; }
-.base06-background { background-color: #d8d7da; }
-.base07-background { background-color: #f5f4f7; }
-.base08-background { background-color: #d8137f; }
-.base09-background { background-color: #d65407; }
-.base0A-background { background-color: #dc8a0e; }
-.base0B-background { background-color: #17ad98; }
-.base0C-background { background-color: #149bda; }
-.base0D-background { background-color: #796af5; }
-.base0E-background { background-color: #bb60ea; }
-.base0F-background { background-color: #c720ca; }
-
-.base00 { color: #2e2a31; }
-.base01 { color: #4a464d; }
-.base02 { color: #666369; }
-.base03 { color: #838085; }
-.base04 { color: #9f9da2; }
-.base05 { color: #bcbabe; }
-.base06 { color: #d8d7da; }
-.base07 { color: #f5f4f7; }
-.base08 { color: #d8137f; }
-.base09 { color: #d65407; }
-.base0A { color: #dc8a0e; }
-.base0B { color: #17ad98; }
-.base0C { color: #149bda; }
-.base0D { color: #796af5; }
-.base0E { color: #bb60ea; }
-.base0F { color: #c720ca; }
diff --git a/static/css/base16-unikitty-light.css b/static/css/base16-unikitty-light.css
deleted file mode 100644
index 7e4c51b7..00000000
--- a/static/css/base16-unikitty-light.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.base00-background { background-color: #ffffff; }
-.base01-background { background-color: #e1e1e2; }
-.base02-background { background-color: #c4c3c5; }
-.base03-background { background-color: #a7a5a8; }
-.base04-background { background-color: #89878b; }
-.base05-background { background-color: #6c696e; }
-.base06-background { background-color: #4f4b51; }
-.base07-background { background-color: #322d34; }
-.base08-background { background-color: #d8137f; }
-.base09-background { background-color: #d65407; }
-.base0A-background { background-color: #dc8a0e; }
-.base0B-background { background-color: #17ad98; }
-.base0C-background { background-color: #149bda; }
-.base0D-background { background-color: #775dff; }
-.base0E-background { background-color: #aa17e6; }
-.base0F-background { background-color: #e013d0; }
-
-.base00 { color: #ffffff; }
-.base01 { color: #e1e1e2; }
-.base02 { color: #c4c3c5; }
-.base03 { color: #a7a5a8; }
-.base04 { color: #89878b; }
-.base05 { color: #6c696e; }
-.base06 { color: #4f4b51; }
-.base07 { color: #322d34; }
-.base08 { color: #d8137f; }
-.base09 { color: #d65407; }
-.base0A { color: #dc8a0e; }
-.base0B { color: #17ad98; }
-.base0C { color: #149bda; }
-.base0D { color: #775dff; }
-.base0E { color: #aa17e6; }
-.base0F { color: #e013d0; }
diff --git a/static/css/themes.json b/static/css/themes.json
deleted file mode 100644
index ea8e5a0c..00000000
--- a/static/css/themes.json
+++ /dev/null
@@ -1,66 +0,0 @@
-[
-"base16-pleroma-dark.css",
-"base16-pleroma-light.css",
-"base16-3024.css",
-"base16-apathy.css",
-"base16-ashes.css",
-"base16-atelier-cave.css",
-"base16-atelier-dune.css",
-"base16-atelier-estuary.css",
-"base16-atelier-forest.css",
-"base16-atelier-heath.css",
-"base16-atelier-lakeside.css",
-"base16-atelier-plateau.css",
-"base16-atelier-savanna.css",
-"base16-atelier-seaside.css",
-"base16-atelier-sulphurpool.css",
-"base16-bespin.css",
-"base16-brewer.css",
-"base16-bright.css",
-"base16-chalk.css",
-"base16-codeschool.css",
-"base16-darktooth.css",
-"base16-default-dark.css",
-"base16-default-light.css",
-"base16-eighties.css",
-"base16-embers.css",
-"base16-flat.css",
-"base16-github.css",
-"base16-google-dark.css",
-"base16-google-light.css",
-"base16-grayscale-dark.css",
-"base16-grayscale-light.css",
-"base16-green-screen.css",
-"base16-harmonic16-dark.css",
-"base16-harmonic16-light.css",
-"base16-hopscotch.css",
-"base16-ir-black.css",
-"base16-isotope.css",
-"base16-london-tube.css",
-"base16-macintosh.css",
-"base16-marrakesh.css",
-"base16-materia.css",
-"base16-mexico-light.css",
-"base16-mocha.css",
-"base16-monokai.css",
-"base16-ocean.css",
-"base16-oceanicnext.css",
-"base16-paraiso.css",
-"base16-phd.css",
-"base16-pico.css",
-"base16-pop.css",
-"base16-railscasts.css",
-"base16-seti-ui.css",
-"base16-shapeshifter.css",
-"base16-solar-flare.css",
-"base16-solarized-dark.css",
-"base16-solarized-light.css",
-"base16-spacemacs.css",
-"base16-summerfruit-dark.css",
-"base16-summerfruit-light.css",
-"base16-tomorrow-night.css",
-"base16-tomorrow.css",
-"base16-twilight.css",
-"base16-unikitty-dark.css",
-"base16-unikitty-light.css"
-]
-- 
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/services')

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 29133fb0084f31a9ba3c50f0d34fd6ca398d1490 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 11 Feb 2020 10:42:15 +0200
Subject: don't use cache for theme data

---
 src/services/style_setter/style_setter.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

(limited to 'src/services')

diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 57e3057a..48f51c59 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -313,7 +313,9 @@ export const generatePreset = (input) => {
 }
 
 export const getThemes = () => {
-  return window.fetch('/static/styles.json')
+  const cache = 'no-store'
+
+  return window.fetch('/static/styles.json', { cache })
     .then((data) => data.json())
     .then((themes) => {
       return Object.entries(themes).map(([k, v]) => {
@@ -321,7 +323,7 @@ export const getThemes = () => {
         if (typeof v === 'object') {
           promise = Promise.resolve(v)
         } else if (typeof v === 'string') {
-          promise = window.fetch(v)
+          promise = window.fetch(v, { cache })
             .then((data) => data.json())
             .catch((e) => {
               console.error(e)
-- 
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/services')

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/services')

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 73dd7209ddc45ab036b4b6ba37fee9d8909d95dd Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 11 Feb 2020 18:21:03 +0200
Subject: fixed transparent + semi-transparent inheritance case

---
 src/services/theme_data/theme_data.service.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

(limited to 'src/services')

diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
index 7479a55e..75768795 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@@ -352,9 +352,8 @@ export const getColors = (sourceColors, sourceOpacity) => SLOT_ORDERED.reduce(({
   }
   const opacitySlot = getOpacitySlot(key)
   if (opacitySlot && outputColor.a === undefined) {
-    const deps = getDependencies(key, SLOT_INHERITANCE)
-    const dependencySlot = deps && deps[0]
-    if (dependencySlot && sourceColors[dependencySlot] === 'transparent') {
+    const dependencySlot = deps[0]
+    if (dependencySlot && colors[dependencySlot] === 'transparent') {
       outputColor.a = 0
     } else {
       outputColor.a = Number(sourceOpacity[opacitySlot]) || OPACITIES[opacitySlot].defaultValue || 1
-- 
cgit v1.2.3-70-g09d2


From c43325acd7dc2a11217b9c70b9a0d53159de26d3 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 13 Feb 2020 21:39:14 +0200
Subject: fix pressed button in top bar

---
 src/services/theme_data/pleromafe.js | 4 ++++
 1 file changed, 4 insertions(+)

(limited to 'src/services')

diff --git a/src/services/theme_data/pleromafe.js b/src/services/theme_data/pleromafe.js
index 9b33e4a9..6d4f583b 100644
--- a/src/services/theme_data/pleromafe.js
+++ b/src/services/theme_data/pleromafe.js
@@ -470,6 +470,10 @@ export const SLOT_INHERITANCE = {
     variant: 'btnPressed',
     textColor: true
   },
+  btnPressedTopBar: {
+    depends: ['btnPressed'],
+    layer: 'btn'
+  },
   btnPressedTopBarText: {
     depends: ['btnTopBarText'],
     layer: 'btnTopBar',
-- 
cgit v1.2.3-70-g09d2


From 695d6b6c5070f935aeec5c4db1f21fb715803b1b Mon Sep 17 00:00:00 2001
From: eugenijm <eugenijm@protonmail.com>
Date: Mon, 10 Feb 2020 23:53:56 +0300
Subject: Fix user activation/deactivation, deletion, and role assignment in
 the moderation menu

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

(limited to 'src/services')

diff --git a/src/modules/users.js b/src/modules/users.js
index ce3e595d..df133be0 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -374,9 +374,9 @@ const users = {
       return rootState.api.backendInteractor.unsubscribeUser({ id })
         .then((relationship) => commit('updateUserRelationship', [relationship]))
     },
-    toggleActivationStatus ({ rootState, commit }, user) {
+    toggleActivationStatus ({ rootState, commit }, { user }) {
       const api = user.deactivated ? rootState.api.backendInteractor.activateUser : rootState.api.backendInteractor.deactivateUser
-      api(user)
+      api({ user })
         .then(({ deactivated }) => commit('updateActivationStatus', { user, deactivated }))
     },
     registerPushNotifications (store) {
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 20eaa9a0..03e88ae2 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -402,8 +402,8 @@ const fetchStatus = ({ id, credentials }) => {
     .then((data) => parseStatus(data))
 }
 
-const tagUser = ({ tag, credentials, ...options }) => {
-  const screenName = options.screen_name
+const tagUser = ({ tag, credentials, user }) => {
+  const screenName = user.screen_name
   const form = {
     nicknames: [screenName],
     tags: [tag]
@@ -419,8 +419,8 @@ const tagUser = ({ tag, credentials, ...options }) => {
   })
 }
 
-const untagUser = ({ tag, credentials, ...options }) => {
-  const screenName = options.screen_name
+const untagUser = ({ tag, credentials, user }) => {
+  const screenName = user.screen_name
   const body = {
     nicknames: [screenName],
     tags: [tag]
@@ -436,7 +436,7 @@ const untagUser = ({ tag, credentials, ...options }) => {
   })
 }
 
-const addRight = ({ right, credentials, ...user }) => {
+const addRight = ({ right, credentials, user }) => {
   const screenName = user.screen_name
 
   return fetch(PERMISSION_GROUP_URL(screenName, right), {
@@ -446,7 +446,7 @@ const addRight = ({ right, credentials, ...user }) => {
   })
 }
 
-const deleteRight = ({ right, credentials, ...user }) => {
+const deleteRight = ({ right, credentials, user }) => {
   const screenName = user.screen_name
 
   return fetch(PERMISSION_GROUP_URL(screenName, right), {
@@ -478,7 +478,7 @@ const deactivateUser = ({ credentials, user: { screen_name: nickname } }) => {
   }).then(response => get(response, 'users.0'))
 }
 
-const deleteUser = ({ credentials, ...user }) => {
+const deleteUser = ({ credentials, user }) => {
   const screenName = user.screen_name
   const headers = authHeaders(credentials)
 
-- 
cgit v1.2.3-70-g09d2


From 3b3a31b461b9c543697e9b8cb45c39430e9c8555 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 17 Feb 2020 23:43:56 +0200
Subject: improve the display of disabled buttons

---
 src/App.scss                         | 16 ++++++++++++++--
 src/services/theme_data/pleromafe.js |  8 ++++----
 2 files changed, 18 insertions(+), 6 deletions(-)

(limited to 'src/services')

diff --git a/src/App.scss b/src/App.scss
index 7dfbdb7d..89aa3215 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -104,7 +104,11 @@ button {
     color: $fallback--text;
     color: var(--btnPressedText, $fallback--text);
     background-color: $fallback--fg;
-    background-color: var(--btnPressed, $fallback--fg)
+    background-color: var(--btnPressed, $fallback--fg);
+    i {
+      color: $fallback--text;
+      color: var(--btnPressedText, $fallback--text);
+    }
   }
 
   &:disabled {
@@ -112,7 +116,11 @@ button {
     color: $fallback--text;
     color: var(--btnDisabledText, $fallback--text);
     background-color: $fallback--fg;
-    background-color: var(--btnDisabled, $fallback--fg)
+    background-color: var(--btnDisabled, $fallback--fg);
+    i {
+      color: $fallback--text;
+      color: var(--btnDisabledText, $fallback--text);
+    }
   }
 
   &.toggled {
@@ -122,6 +130,10 @@ button {
     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);
+    i {
+      color: $fallback--text;
+      color: var(--btnToggledText, $fallback--text);
+    }
   }
 
   &.danger {
diff --git a/src/services/theme_data/pleromafe.js b/src/services/theme_data/pleromafe.js
index 6d4f583b..33a2ed57 100644
--- a/src/services/theme_data/pleromafe.js
+++ b/src/services/theme_data/pleromafe.js
@@ -509,25 +509,25 @@ export const SLOT_INHERITANCE = {
   // Buttons: disabled
   btnDisabled: {
     depends: ['btn', 'bg'],
-    color: (mod, btn, bg) => alphaBlend(btn, 0.5, bg)
+    color: (mod, btn, bg) => alphaBlend(btn, 0.25, bg)
   },
   btnDisabledText: {
     depends: ['btnText', 'btnDisabled'],
     layer: 'btn',
     variant: 'btnDisabled',
-    color: (mod, text, btn) => alphaBlend(text, 0.5, btn)
+    color: (mod, text, btn) => alphaBlend(text, 0.25, btn)
   },
   btnDisabledPanelText: {
     depends: ['btnPanelText', 'btnDisabled'],
     layer: 'btnPanel',
     variant: 'btnDisabled',
-    color: (mod, text, btn) => alphaBlend(text, 0.5, btn)
+    color: (mod, text, btn) => alphaBlend(text, 0.25, btn)
   },
   btnDisabledTopBarText: {
     depends: ['btnTopBarText', 'btnDisabled'],
     layer: 'btnTopBar',
     variant: 'btnDisabled',
-    color: (mod, text, btn) => alphaBlend(text, 0.5, btn)
+    color: (mod, text, btn) => alphaBlend(text, 0.25, btn)
   },
 
   // Input fields
-- 
cgit v1.2.3-70-g09d2


From 1e95a0795a6f7f1db49244430d1498987f6b3969 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 17 Feb 2020 23:59:52 +0200
Subject: paper theme, updated todo, lol

---
 src/services/style_setter/style_setter.js |   2 +-
 static/styles.json                        |   2 +-
 static/themes/kenomo.json                 |  71 ------------
 static/themes/paper.json                  | 172 ++++++++++++++++++++++++++++++
 4 files changed, 174 insertions(+), 73 deletions(-)
 delete mode 100644 static/themes/kenomo.json
 create mode 100644 static/themes/paper.json

(limited to 'src/services')

diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index c8610507..fbdcf562 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -270,7 +270,7 @@ export const generateShadows = (input, colors) => {
     rules: {
       shadows: Object
         .entries(shadows)
-      // TODO for v2.1: if shadow doesn't have non-inset shadows with spread > 0 - optionally
+      // TODO for v2.2: if shadow doesn't have non-inset shadows with spread > 0 - optionally
       // convert all non-inset shadows into filter: drop-shadow() to boost performance
         .map(([k, v]) => [
           `--${k}Shadow: ${getCssShadow(v)}`,
diff --git a/static/styles.json b/static/styles.json
index 54c0335f..3349a837 100644
--- a/static/styles.json
+++ b/static/styles.json
@@ -13,5 +13,5 @@
   "breezy-dark": "/static/themes/breezy-dark.json",
   "breezy-light": "/static/themes/breezy-light.json",
   "mammal": "/static/themes/mammal.json",
-  "kenomo": "/static/themes/kenomo.json"
+  "paper": "/static/themes/paper.json"
 }
diff --git a/static/themes/kenomo.json b/static/themes/kenomo.json
deleted file mode 100644
index 98ddf974..00000000
--- a/static/themes/kenomo.json
+++ /dev/null
@@ -1,71 +0,0 @@
-{
-  "_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"
-    }
-  }
-}
diff --git a/static/themes/paper.json b/static/themes/paper.json
new file mode 100644
index 00000000..a3b90a0a
--- /dev/null
+++ b/static/themes/paper.json
@@ -0,0 +1,172 @@
+{
+  "_pleroma_theme_version": 2,
+  "name": "Paper",
+  "source": {
+    "themeEngineVersion": 3,
+    "fonts": {},
+    "shadows": {
+      "panel": [
+        {
+          "x": "0",
+          "y": "2",
+          "blur": "9",
+          "spread": 0,
+          "inset": false,
+          "color": "#668bb2",
+          "alpha": "0.1"
+        },
+        {
+          "x": "0",
+          "y": "1",
+          "blur": "2",
+          "spread": "-1",
+          "inset": false,
+          "color": "#668bb2",
+          "alpha": "0.1"
+        }
+      ],
+      "topBar": [
+        {
+          "x": 0,
+          "y": "3",
+          "blur": "8",
+          "spread": 0,
+          "inset": false,
+          "color": "#3e618e",
+          "alpha": "0.1"
+        },
+        {
+          "x": 0,
+          "y": "1",
+          "blur": "4",
+          "spread": 0,
+          "inset": false,
+          "color": "#3e618e",
+          "alpha": "0.1"
+        }
+      ],
+      "button": [
+        {
+          "x": 0,
+          "y": "2",
+          "blur": "5",
+          "spread": 0,
+          "color": "#463f78",
+          "alpha": "0.1",
+          "inset": false
+        }
+      ],
+      "input": [
+        {
+          "x": 0,
+          "y": "1",
+          "blur": "2",
+          "spread": 0,
+          "inset": true,
+          "color": "#6277b7",
+          "alpha": "0.1"
+        }
+      ],
+      "buttonHover": [
+        {
+          "x": 0,
+          "y": "2",
+          "blur": "5",
+          "spread": 0,
+          "color": "#494949",
+          "alpha": "0.1"
+        },
+        {
+          "x": 0,
+          "y": "2",
+          "blur": "0",
+          "spread": "20",
+          "color": "#ffffff",
+          "alpha": "1",
+          "inset": true
+        }
+      ],
+      "buttonPressed": [
+        {
+          "x": 0,
+          "y": 0,
+          "blur": "4",
+          "spread": "0",
+          "color": "#494949",
+          "alpha": "0.8",
+          "inset": false
+        }
+      ],
+      "avatarStatus": [
+        {
+          "x": "0",
+          "y": "2",
+          "blur": "4",
+          "spread": "0",
+          "inset": false,
+          "color": "#3e618e",
+          "alpha": "0.1"
+        }
+      ],
+      "avatar": [
+        {
+          "x": 0,
+          "y": "2",
+          "blur": "5",
+          "spread": "0",
+          "color": "#3e618e",
+          "alpha": "0.9"
+        }
+      ],
+      "popup": [
+        {
+          "x": "0",
+          "y": "3",
+          "blur": "11",
+          "spread": 0,
+          "color": "#668bb2",
+          "alpha": "0.2"
+        },
+        {
+          "x": "0",
+          "y": "2",
+          "blur": "3",
+          "spread": "-1",
+          "color": "#668bb2",
+          "alpha": "0.2"
+        }
+      ]
+    },
+    "opacity": {
+      "underlay": "1",
+      "border": "0"
+    },
+    "colors": {
+      "bg": "#ffffff",
+      "fg": "#f6f6f6",
+      "text": "#494949",
+      "underlay": "#ffffff",
+      "link": "#788ca1",
+      "accent": "#97a0aa",
+      "cBlue": "#788ca1",
+      "cRed": "#eed7ce",
+      "cGreen": "#788ca1",
+      "cOrange": "#788ca1",
+      "postLink": "#788ca1",
+      "border": "#ffffff",
+      "icon": "#b6c9c4",
+      "panel": "#ffffff",
+      "topBarText": "#4b4b4b"
+    },
+    "radii": {
+      "btn": "0",
+      "input": "0",
+      "checkbox": "0",
+      "panel": "0",
+      "avatar": "2",
+      "avatarAlt": "2",
+      "tooltip": "0",
+      "attachment": "0"
+    }
+  }
+}
-- 
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/services')

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 0702934f4f05595194c73cc463b2e72a27e3b1e2 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 4 Mar 2020 00:23:14 +0200
Subject: fix trasparency problems in some cases (purple headers)

---
 src/modules/config.js                         | 1 +
 src/services/theme_data/theme_data.service.js | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

(limited to 'src/services')

diff --git a/src/modules/config.js b/src/modules/config.js
index e6b373b4..7997521d 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -102,6 +102,7 @@ const config = {
           setPreset(value)
           break
         case 'customTheme':
+        case 'customThemeSource':
           applyTheme(value)
       }
     }
diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
index e6ff82e6..de6561cd 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@@ -352,7 +352,8 @@ export const getColors = (sourceColors, sourceOpacity) => SLOT_ORDERED.reduce(({
   }
   const opacitySlot = getOpacitySlot(key)
   const ownOpacitySlot = value.opacity
-  if (opacitySlot && (outputColor.a === undefined || ownOpacitySlot)) {
+  const opacityOverriden = ownOpacitySlot && sourceOpacity[opacitySlot] !== undefined
+  if (opacitySlot && (outputColor.a === undefined || opacityOverriden)) {
     const dependencySlot = deps[0]
     if (dependencySlot && colors[dependencySlot] === 'transparent') {
       outputColor.a = 0
-- 
cgit v1.2.3-70-g09d2


From 9f2c1b4008ef7bb77c98e80f75b41eaa9e92b90a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 6 Mar 2020 21:17:24 +0200
Subject: fix several issues related to opacity

---
 src/services/theme_data/theme_data.service.js | 38 ++++++++++++++++++++++-----
 1 file changed, 32 insertions(+), 6 deletions(-)

(limited to 'src/services')

diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
index de6561cd..c3fdbd87 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@@ -350,17 +350,43 @@ export const getColors = (sourceColors, sourceOpacity) => SLOT_ORDERED.reduce(({
   if (!outputColor) {
     throw new Error('Couldn\'t generate color for ' + key)
   }
-  const opacitySlot = getOpacitySlot(key)
+
+  const opacitySlot = value.opacity || getOpacitySlot(key)
   const ownOpacitySlot = value.opacity
-  const opacityOverriden = ownOpacitySlot && sourceOpacity[opacitySlot] !== undefined
-  if (opacitySlot && (outputColor.a === undefined || opacityOverriden)) {
+
+  if (sourceColor === 'transparent') {
+    outputColor.a = 0
+  } else if (ownOpacitySlot === null) {
+    outputColor.a = 1
+  } else {
+    const opacityOverriden = ownOpacitySlot && sourceOpacity[opacitySlot] !== undefined
+
     const dependencySlot = deps[0]
-    if (dependencySlot && colors[dependencySlot] === 'transparent') {
-      outputColor.a = 0
+    const dependencyColor = dependencySlot && colors[dependencySlot]
+
+    if (!ownOpacitySlot && dependencyColor && !value.textColor && ownOpacitySlot !== null) {
+      // Inheriting color from dependency (weird, i know)
+      // except if it's a text color or opacity slot is set to 'null'
+      outputColor.a = dependencyColor.a
+    } else if (!dependencyColor && !opacitySlot) {
+      // Remove any alpha channel if no dependency and no opacitySlot found
+      delete outputColor.a
     } else {
-      outputColor.a = Number(sourceOpacity[opacitySlot]) || OPACITIES[opacitySlot].defaultValue || 1
+      // Otherwise try to assign opacity
+      if (dependencyColor && dependencyColor.a === 0) {
+        // transparent dependency shall make dependents transparent too
+        outputColor.a = 0
+      } else {
+        // Otherwise check if opacity is overriden and use that or default value instead
+        outputColor.a = Number(
+          opacityOverriden
+            ? sourceOpacity[opacitySlot]
+            : (OPACITIES[opacitySlot] || {}).defaultValue
+        )
+      }
     }
   }
+
   if (opacitySlot) {
     return {
       colors: { ...colors, [key]: outputColor },
-- 
cgit v1.2.3-70-g09d2


From 7aa5bf0896c045d5d4a4e19fe7eff2c61fd2acf9 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 6 Mar 2020 21:20:42 +0200
Subject: prioritize disabled opacity over transparent keyword

---
 src/services/theme_data/theme_data.service.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'src/services')

diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
index c3fdbd87..44fb575c 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@@ -354,10 +354,10 @@ export const getColors = (sourceColors, sourceOpacity) => SLOT_ORDERED.reduce(({
   const opacitySlot = value.opacity || getOpacitySlot(key)
   const ownOpacitySlot = value.opacity
 
-  if (sourceColor === 'transparent') {
-    outputColor.a = 0
-  } else if (ownOpacitySlot === null) {
+  if (ownOpacitySlot === null) {
     outputColor.a = 1
+  } else if (sourceColor === 'transparent') {
+    outputColor.a = 0
   } else {
     const opacityOverriden = ownOpacitySlot && sourceOpacity[opacitySlot] !== undefined
 
-- 
cgit v1.2.3-70-g09d2


From 550080bd82bf39e35b2b481d8643bf1ac7461d7c Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 6 Mar 2020 21:39:17 +0200
Subject: fix last issue

---
 src/services/theme_data/theme_data.service.js | 3 +++
 1 file changed, 3 insertions(+)

(limited to 'src/services')

diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
index 44fb575c..4d7e4f67 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@@ -384,6 +384,9 @@ export const getColors = (sourceColors, sourceOpacity) => SLOT_ORDERED.reduce(({
             : (OPACITIES[opacitySlot] || {}).defaultValue
         )
       }
+      if (Number.isNaN(outputColor.a)) {
+        outputColor.a = 1
+      }
     }
   }
 
-- 
cgit v1.2.3-70-g09d2


From a485386a3b07f831859fcefa9cd429fc801fd8eb Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 6 Mar 2020 21:48:40 +0200
Subject: fix tests

---
 src/services/theme_data/theme_data.service.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

(limited to 'src/services')

diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
index 4d7e4f67..dd87e3cf 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@@ -384,12 +384,13 @@ export const getColors = (sourceColors, sourceOpacity) => SLOT_ORDERED.reduce(({
             : (OPACITIES[opacitySlot] || {}).defaultValue
         )
       }
-      if (Number.isNaN(outputColor.a)) {
-        outputColor.a = 1
-      }
     }
   }
 
+  if (Number.isNaN(outputColor.a) || outputColor.a === undefined) {
+    outputColor.a = 1
+  }
+
   if (opacitySlot) {
     return {
       colors: { ...colors, [key]: outputColor },
-- 
cgit v1.2.3-70-g09d2


From 40005240eb30ce59035299dc348a3962626e32c6 Mon Sep 17 00:00:00 2001
From: Mark Felder <feld@FreeBSD.org>
Date: Tue, 31 Mar 2020 14:46:38 -0500
Subject: Send credentials for favourited_by and reblogged_by API endpoints

This ensures the data is fetchable on private instances
---
 src/services/api/api.service.js | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

(limited to 'src/services')

diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 03e88ae2..7db1d094 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -880,12 +880,20 @@ const fetchPoll = ({ pollId, credentials }) => {
   )
 }
 
-const fetchFavoritedByUsers = ({ id }) => {
-  return promisedRequest({ url: MASTODON_STATUS_FAVORITEDBY_URL(id) }).then((users) => users.map(parseUser))
+const fetchFavoritedByUsers = ({ id, credentials }) => {
+  return promisedRequest({
+    url: MASTODON_STATUS_FAVORITEDBY_URL(id),
+    method: 'GET',
+    credentials
+  }).then((users) => users.map(parseUser))
 }
 
-const fetchRebloggedByUsers = ({ id }) => {
-  return promisedRequest({ url: MASTODON_STATUS_REBLOGGEDBY_URL(id) }).then((users) => users.map(parseUser))
+const fetchRebloggedByUsers = ({ id, credentials }) => {
+  return promisedRequest({
+    url: MASTODON_STATUS_REBLOGGEDBY_URL(id),
+    method: 'GET',
+    credentials
+  }).then((users) => users.map(parseUser))
 }
 
 const fetchEmojiReactions = ({ id, credentials }) => {
-- 
cgit v1.2.3-70-g09d2


From 18fa338d43b6b7b61b484ae6106ef3b95e5adeee Mon Sep 17 00:00:00 2001
From: Egor Kislitsyn <egor@kislitsyn.com>
Date: Mon, 13 Apr 2020 15:26:55 +0400
Subject: Fix pagination

---
 src/services/api/api.service.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/services')

diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 7db1d094..ad2b2ad5 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -540,7 +540,7 @@ const fetchTimeline = ({
     params.push(['with_move', withMove])
   }
 
-  params.push(['count', 20])
+  params.push(['limit', 20])
   params.push(['with_muted', withMuted])
 
   const queryString = map(params, (param) => `${param[0]}=${param[1]}`).join('&')
-- 
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/services')

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/services')

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/services')

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 cda298c8223851d50edcd2761391d4ddb8932ed1 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Thu, 23 Apr 2020 11:17:52 +0300
Subject: remove unused mutation and test for it

---
 src/modules/users.js                                       |  4 ----
 .../entity_normalizer/entity_normalizer.service.js         |  9 ---------
 test/unit/specs/modules/users.spec.js                      | 14 --------------
 3 files changed, 27 deletions(-)

(limited to 'src/services')

diff --git a/src/modules/users.js b/src/modules/users.js
index 591d4634..6b19fc97 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -83,10 +83,6 @@ const unmuteDomain = (store, domain) => {
 }
 
 export const mutations = {
-  setMuted (state, { user: { id }, muted }) {
-    const user = state.usersObject[id]
-    set(user, 'muted', muted)
-  },
   tagUser (state, { user: { id }, tag }) {
     const user = state.usersObject[id]
     const tags = user.tags || []
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index 66a7a8b7..7237fdfc 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -73,15 +73,6 @@ export const parseUser = (data) => {
       output.background_image = data.pleroma.background_image
       output.token = data.pleroma.chat_token
 
-      if (relationship && !relationship) {
-        output.follows_you = relationship.followed_by
-        output.requested = relationship.requested
-        output.following = relationship.following
-        output.statusnet_blocking = relationship.blocking
-        output.muted = relationship.muting
-        output.showing_reblogs = relationship.showing_reblogs
-        output.subscribed = relationship.subscribing
-      }
       if (relationship) {
         output.relationship = relationship
       }
diff --git a/test/unit/specs/modules/users.spec.js b/test/unit/specs/modules/users.spec.js
index eeb7afef..670acfc8 100644
--- a/test/unit/specs/modules/users.spec.js
+++ b/test/unit/specs/modules/users.spec.js
@@ -18,20 +18,6 @@ describe('The users module', () => {
       expect(state.users).to.eql([user])
       expect(state.users[0].name).to.eql('Dude')
     })
-
-    it('sets a mute bit on users', () => {
-      const state = cloneDeep(defaultState)
-      const user = { id: '1', name: 'Guy' }
-
-      mutations.addNewUsers(state, [user])
-      mutations.setMuted(state, { user, muted: true })
-
-      expect(user.muted).to.eql(true)
-
-      mutations.setMuted(state, { user, muted: false })
-
-      expect(user.muted).to.eql(false)
-    })
   })
 
   describe('findUser', () => {
-- 
cgit v1.2.3-70-g09d2


From ce0a1e7ad134089f62835fc0f9f015fed673766b Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Thu, 23 Apr 2020 14:08:33 +0300
Subject: add back missing catch

---
 src/services/notifications_fetcher/notifications_fetcher.service.js | 1 +
 1 file changed, 1 insertion(+)

(limited to 'src/services')

diff --git a/src/services/notifications_fetcher/notifications_fetcher.service.js b/src/services/notifications_fetcher/notifications_fetcher.service.js
index eb6d84c4..864e32f8 100644
--- a/src/services/notifications_fetcher/notifications_fetcher.service.js
+++ b/src/services/notifications_fetcher/notifications_fetcher.service.js
@@ -48,6 +48,7 @@ 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 }) => {
-- 
cgit v1.2.3-70-g09d2


From 99d8e16e4d19acbd811a9e19e087eeed04f7b638 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Thu, 23 Apr 2020 14:11:48 +0300
Subject: remove with_relationships as it doesn't help

---
 src/services/api/api.service.js                           | 4 +---
 src/services/timeline_fetcher/timeline_fetcher.service.js | 2 --
 2 files changed, 1 insertion(+), 5 deletions(-)

(limited to 'src/services')

diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index ee6bf151..7db1d094 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -496,8 +496,7 @@ const fetchTimeline = ({
   userId = false,
   tag = false,
   withMuted = false,
-  withMove = false,
-  withRelationships = false
+  withMove = false
 }) => {
   const timelineUrls = {
     public: MASTODON_PUBLIC_TIMELINE,
@@ -543,7 +542,6 @@ 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/timeline_fetcher/timeline_fetcher.service.js b/src/services/timeline_fetcher/timeline_fetcher.service.js
index 96fafff9..c6b28ad5 100644
--- a/src/services/timeline_fetcher/timeline_fetcher.service.js
+++ b/src/services/timeline_fetcher/timeline_fetcher.service.js
@@ -31,7 +31,6 @@ 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
@@ -42,7 +41,6 @@ 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 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/services')

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 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/services')

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 02c8a9e3143f2b12f44d24f307e2718dec22987b Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Fri, 1 May 2020 17:26:07 +0300
Subject: remove with_move param

---
 src/services/api/api.service.js                                     | 6 +-----
 src/services/notifications_fetcher/notifications_fetcher.service.js | 3 ---
 2 files changed, 1 insertion(+), 8 deletions(-)

(limited to 'src/services')

diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index ad2b2ad5..3c6b8f4e 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -495,8 +495,7 @@ const fetchTimeline = ({
   until = false,
   userId = false,
   tag = false,
-  withMuted = false,
-  withMove = false
+  withMuted = false
 }) => {
   const timelineUrls = {
     public: MASTODON_PUBLIC_TIMELINE,
@@ -536,9 +535,6 @@ const fetchTimeline = ({
   if (timeline === 'public' || timeline === 'publicAndExternal') {
     params.push(['only_media', false])
   }
-  if (timeline === 'notifications') {
-    params.push(['with_move', withMove])
-  }
 
   params.push(['limit', 20])
   params.push(['with_muted', withMuted])
diff --git a/src/services/notifications_fetcher/notifications_fetcher.service.js b/src/services/notifications_fetcher/notifications_fetcher.service.js
index 864e32f8..64499a1b 100644
--- a/src/services/notifications_fetcher/notifications_fetcher.service.js
+++ b/src/services/notifications_fetcher/notifications_fetcher.service.js
@@ -11,12 +11,9 @@ const fetchAndUpdate = ({ store, credentials, older = false }) => {
   const rootState = store.rootState || store.state
   const timelineData = rootState.statuses.notifications
   const hideMutedPosts = getters.mergedConfig.hideMutedPosts
-  const allowFollowingMove = rootState.users.currentUser.allow_following_move
 
   args['withMuted'] = !hideMutedPosts
 
-  args['withMove'] = !allowFollowingMove
-
   args['timeline'] = 'notifications'
   if (older) {
     if (timelineData.minId !== Number.POSITIVE_INFINITY) {
-- 
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/services')

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 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/services')

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 355281081a044c950ce7d07fa1081149eb4aec0d Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Wed, 13 May 2020 17:53:43 +0300
Subject: don't send undefined

---
 src/services/api/api.service.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/services')

diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 94ff4623..37ccfd6b 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -943,7 +943,7 @@ const searchUsers = ({ credentials, query, withRelationships }) => {
     params: {
       q: query,
       resolve: true,
-      with_relationships: withRelationships
+      with_relationships: !!withRelationships
     },
     credentials
   })
-- 
cgit v1.2.3-70-g09d2


From 9c7cb3a95431bbea44391f79da465f77565a4b49 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Wed, 13 May 2020 18:04:30 +0300
Subject: remove search1 with_relationships

---
 src/modules/users.js            | 4 ++--
 src/services/api/api.service.js | 5 ++---
 2 files changed, 4 insertions(+), 5 deletions(-)

(limited to 'src/services')

diff --git a/src/modules/users.js b/src/modules/users.js
index f377da75..f9329f2a 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -428,8 +428,8 @@ const users = {
         store.commit('setUserForNotification', notification)
       })
     },
-    searchUsers (store, { query, withRelationships }) {
-      return store.rootState.api.backendInteractor.searchUsers({ query, withRelationships })
+    searchUsers (store, { query }) {
+      return store.rootState.api.backendInteractor.searchUsers({ query })
         .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 37ccfd6b..7f82d2fa 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -937,13 +937,12 @@ const reportUser = ({ credentials, userId, statusIds, comment, forward }) => {
   })
 }
 
-const searchUsers = ({ credentials, query, withRelationships }) => {
+const searchUsers = ({ credentials, query }) => {
   return promisedRequest({
     url: MASTODON_USER_SEARCH_URL,
     params: {
       q: query,
-      resolve: true,
-      with_relationships: !!withRelationships
+      resolve: true
     },
     credentials
   })
-- 
cgit v1.2.3-70-g09d2


From 5235e7ea1e133d699f7e3dc39473d44e789f15c9 Mon Sep 17 00:00:00 2001
From: Ivan Tashkinov <ivantashkinov@gmail.com>
Date: Mon, 25 May 2020 08:48:44 +0300
Subject: Removed `with_muted` param usage for user favorites timeline endpoint
 (it only supports pagination params).

---
 src/services/api/api.service.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

(limited to 'src/services')

diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 7f82d2fa..9c7530a2 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -538,9 +538,11 @@ const fetchTimeline = ({
   if (timeline === 'public' || timeline === 'publicAndExternal') {
     params.push(['only_media', false])
   }
+  if (timeline !== 'favorites') {
+    params.push(['with_muted', withMuted])
+  }
 
   params.push(['limit', 20])
-  params.push(['with_muted', withMuted])
 
   const queryString = map(params, (param) => `${param[0]}=${param[1]}`).join('&')
   url += `?${queryString}`
-- 
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/services')

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 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/services')

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 f197a2aa39eb5cb77887b64b182be78a3eaefdd1 Mon Sep 17 00:00:00 2001
From: lain <lain@soykaf.club>
Date: Thu, 4 Jun 2020 15:12:03 +0200
Subject: EntityNormalizer: Add colons to emoji alt text.

This makes it possible to copy them and still have them work.
---
 src/services/entity_normalizer/entity_normalizer.service.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/services')

diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index 6dac7c15..c7ed65a4 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -210,7 +210,7 @@ export const addEmojis = (string, emojis) => {
     const regexSafeShortCode = emoji.shortcode.replace(matchOperatorsRegex, '\\$&')
     return acc.replace(
       new RegExp(`:${regexSafeShortCode}:`, 'g'),
-      `<img src='${emoji.url}' alt='${emoji.shortcode}' title='${emoji.shortcode}' class='emoji' />`
+      `<img src='${emoji.url}' alt=':${emoji.shortcode}:' title=':${emoji.shortcode}:' class='emoji' />`
     )
   }, string)
 }
-- 
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/services')

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 8d7d4980b9a9c68e3c36dc00dfc85e39842b03f7 Mon Sep 17 00:00:00 2001
From: lain <lain@soykaf.club>
Date: Thu, 11 Jun 2020 18:39:19 +0200
Subject: StatusParser: Remove unused removeAttachmentLinks.

Brings down the vendor by over 200kb
---
 package.json                                            |  3 +--
 src/services/status_parser/status_parser.js             | 15 ---------------
 .../specs/services/status_parser/status_parses.spec.js  | 17 -----------------
 3 files changed, 1 insertion(+), 34 deletions(-)
 delete mode 100644 test/unit/specs/services/status_parser/status_parses.spec.js

(limited to 'src/services')

diff --git a/package.json b/package.json
index 4d68cc6e..42efc7e9 100644
--- a/package.json
+++ b/package.json
@@ -22,12 +22,10 @@
     "cropperjs": "^1.4.3",
     "diff": "^3.0.1",
     "escape-html": "^1.0.3",
-    "karma-mocha-reporter": "^2.2.1",
     "localforage": "^1.5.0",
     "object-path": "^0.11.3",
     "phoenix": "^1.3.0",
     "portal-vue": "^2.1.4",
-    "sanitize-html": "^1.13.0",
     "v-click-outside": "^2.1.1",
     "vue": "^2.6.11",
     "vue-chat-scroll": "^1.2.1",
@@ -39,6 +37,7 @@
     "whatwg-fetch": "^2.0.3"
   },
   "devDependencies": {
+    "karma-mocha-reporter": "^2.2.1",
     "@babel/core": "^7.7.5",
     "@babel/plugin-transform-runtime": "^7.7.6",
     "@babel/preset-env": "^7.7.6",
diff --git a/src/services/status_parser/status_parser.js b/src/services/status_parser/status_parser.js
index 3d517e3c..ed0f6d57 100644
--- a/src/services/status_parser/status_parser.js
+++ b/src/services/status_parser/status_parser.js
@@ -1,17 +1,4 @@
 import { filter } from 'lodash'
-import sanitize from 'sanitize-html'
-
-export const removeAttachmentLinks = (html) => {
-  return sanitize(html, {
-    allowedTags: false,
-    allowedAttributes: false,
-    exclusiveFilter: ({ tag, attribs }) => tag === 'a' && typeof attribs.class === 'string' && attribs.class.match(/attachment/)
-  })
-}
-
-export const parse = (html) => {
-  return removeAttachmentLinks(html)
-}
 
 export const muteWordHits = (status, muteWords) => {
   const statusText = status.text.toLowerCase()
@@ -22,5 +9,3 @@ export const muteWordHits = (status, muteWords) => {
 
   return hits
 }
-
-export default parse
diff --git a/test/unit/specs/services/status_parser/status_parses.spec.js b/test/unit/specs/services/status_parser/status_parses.spec.js
deleted file mode 100644
index 7afd5042..00000000
--- a/test/unit/specs/services/status_parser/status_parses.spec.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { removeAttachmentLinks } from '../../../../../src/services/status_parser/status_parser.js'
-
-const example = '<div class="status-content">@<a href="https://sealion.club/user/4" class="h-card mention" title="dewoo">dwmatiz</a> <a href="https://social.heldscal.la/file/3deb764ada10ce64a61b7a070b75dac45f86d2d5bf213bf18873da71d8714d86.png" title="https://social.heldscal.la/file/3deb764ada10ce64a61b7a070b75dac45f86d2d5bf213bf18873da71d8714d86.png" class="attachment" id="attachment-159853" rel="nofollow external">https://social.heldscal.la/attachment/159853</a></div>'
-
-describe('statusParser.removeAttachmentLinks', () => {
-  const exampleWithoutAttachmentLinks = '<div class="status-content">@<a href="https://sealion.club/user/4" class="h-card mention" title="dewoo">dwmatiz</a> </div>'
-
-  it('removes attachment links', () => {
-    const parsed = removeAttachmentLinks(example)
-    expect(parsed).to.eql(exampleWithoutAttachmentLinks)
-  })
-
-  it('works when the class is empty', () => {
-    const parsed = removeAttachmentLinks('<a></a>')
-    expect(parsed).to.eql('<a></a>')
-  })
-})
-- 
cgit v1.2.3-70-g09d2


From 0c364862991907ecd3073503af6b389c305fd53e Mon Sep 17 00:00:00 2001
From: lain <lain@soykaf.club>
Date: Thu, 11 Jun 2020 18:49:39 +0200
Subject: API: Remove fetch polyfill

All browser except IE have supported this for longer than
Pleroma even exists.
---
 package.json                    | 3 +--
 src/services/api/api.service.js | 1 -
 2 files changed, 1 insertion(+), 3 deletions(-)

(limited to 'src/services')

diff --git a/package.json b/package.json
index c131d21a..c0665f6e 100644
--- a/package.json
+++ b/package.json
@@ -32,8 +32,7 @@
     "vue-router": "^3.0.1",
     "vue-template-compiler": "^2.6.11",
     "vuelidate": "^0.7.4",
-    "vuex": "^3.0.1",
-    "whatwg-fetch": "^2.0.3"
+    "vuex": "^3.0.1"
   },
   "devDependencies": {
     "karma-mocha-reporter": "^2.2.1",
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index b3082bc5..dfffc291 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -1,6 +1,5 @@
 import { each, map, concat, last, get } from 'lodash'
 import { parseStatus, parseUser, parseNotification, parseAttachment } from '../entity_normalizer/entity_normalizer.service.js'
-import 'whatwg-fetch'
 import { RegistrationError, StatusCodeError } from '../errors/errors'
 
 /* eslint-env browser */
-- 
cgit v1.2.3-70-g09d2