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

---
 .../services/style_setter/style_setter.spec.js     | 79 ++++++++++++++++++++++
 1 file changed, 79 insertions(+)
 create mode 100644 test/unit/specs/services/style_setter/style_setter.spec.js

(limited to 'test/unit/specs')

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 21d9c87b344598c457ae01b872b85c033a5e043f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 12 Jan 2020 23:05:32 +0200
Subject: fix tests

---
 .../services/style_setter/style_setter.spec.js     | 79 ----------------------
 .../specs/services/theme_data/theme_data.spec.js   | 79 ++++++++++++++++++++++
 2 files changed, 79 insertions(+), 79 deletions(-)
 delete mode 100644 test/unit/specs/services/style_setter/style_setter.spec.js
 create mode 100644 test/unit/specs/services/theme_data/theme_data.spec.js

(limited to 'test/unit/specs')

diff --git a/test/unit/specs/services/style_setter/style_setter.spec.js b/test/unit/specs/services/style_setter/style_setter.spec.js
deleted file mode 100644
index 7f789124..00000000
--- a/test/unit/specs/services/style_setter/style_setter.spec.js
+++ /dev/null
@@ -1,79 +0,0 @@
-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'))
-  })
-})
diff --git a/test/unit/specs/services/theme_data/theme_data.spec.js b/test/unit/specs/services/theme_data/theme_data.spec.js
new file mode 100644
index 00000000..507905eb
--- /dev/null
+++ b/test/unit/specs/services/theme_data/theme_data.spec.js
@@ -0,0 +1,79 @@
+import { getLayersArray, topoSort } from 'src/services/theme_data/theme_data.service.js'
+
+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 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 'test/unit/specs')

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 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 'test/unit/specs')

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 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 'test/unit/specs')

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 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 'test/unit/specs')

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

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

(limited to 'test/unit/specs')

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


From 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 'test/unit/specs')

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 c1e38a44231d3fbd2624df2c06a2d25222f51e1c Mon Sep 17 00:00:00 2001
From: xenofem <xenofem@xeno.science>
Date: Sun, 16 Feb 2020 16:35:04 -0500
Subject: EmojiInput tests should be checking the input value on the last input
 event, not the first

---
 test/unit/specs/components/emoji_input.spec.js | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

(limited to 'test/unit/specs')

diff --git a/test/unit/specs/components/emoji_input.spec.js b/test/unit/specs/components/emoji_input.spec.js
index b1b98802..045b47fd 100644
--- a/test/unit/specs/components/emoji_input.spec.js
+++ b/test/unit/specs/components/emoji_input.spec.js
@@ -36,7 +36,8 @@ describe('EmojiInput', () => {
       input.setValue(initialString)
       wrapper.setData({ caret: initialString.length })
       wrapper.vm.insert({ insertion: '(test)', keepOpen: false })
-      expect(wrapper.emitted().input[0][0]).to.eql('Testing (test) ')
+      const inputEvents = wrapper.emitted().input
+      expect(inputEvents[inputEvents.length - 1][0]).to.eql('Testing (test) ')
     })
 
     it('inserts string at the end with trailing space (source has a trailing space)', () => {
@@ -46,7 +47,8 @@ describe('EmojiInput', () => {
       input.setValue(initialString)
       wrapper.setData({ caret: initialString.length })
       wrapper.vm.insert({ insertion: '(test)', keepOpen: false })
-      expect(wrapper.emitted().input[0][0]).to.eql('Testing (test) ')
+      const inputEvents = wrapper.emitted().input
+      expect(inputEvents[inputEvents.length - 1][0]).to.eql('Testing (test) ')
     })
 
     it('inserts string at the begginning without leading space', () => {
@@ -56,7 +58,8 @@ describe('EmojiInput', () => {
       input.setValue(initialString)
       wrapper.setData({ caret: 0 })
       wrapper.vm.insert({ insertion: '(test)', keepOpen: false })
-      expect(wrapper.emitted().input[0][0]).to.eql('(test) Testing')
+      const inputEvents = wrapper.emitted().input
+      expect(inputEvents[inputEvents.length - 1][0]).to.eql('(test) Testing')
     })
 
     it('inserts string between words without creating extra spaces', () => {
@@ -66,7 +69,8 @@ describe('EmojiInput', () => {
       input.setValue(initialString)
       wrapper.setData({ caret: 6 })
       wrapper.vm.insert({ insertion: ':ebin:', keepOpen: false })
-      expect(wrapper.emitted().input[0][0]).to.eql('Spurdo :ebin: Sparde')
+      const inputEvents = wrapper.emitted().input
+      expect(inputEvents[inputEvents.length - 1][0]).to.eql('Spurdo :ebin: Sparde')
     })
 
     it('inserts string between words without creating extra spaces (other caret)', () => {
@@ -76,7 +80,8 @@ describe('EmojiInput', () => {
       input.setValue(initialString)
       wrapper.setData({ caret: 7 })
       wrapper.vm.insert({ insertion: ':ebin:', keepOpen: false })
-      expect(wrapper.emitted().input[0][0]).to.eql('Spurdo :ebin: Sparde')
+      const inputEvents = wrapper.emitted().input
+      expect(inputEvents[inputEvents.length - 1][0]).to.eql('Spurdo :ebin: Sparde')
     })
 
     it('inserts string without any padding if padEmoji setting is set to false', () => {
@@ -86,7 +91,8 @@ describe('EmojiInput', () => {
       input.setValue(initialString)
       wrapper.setData({ caret: initialString.length, keepOpen: false })
       wrapper.vm.insert({ insertion: ':spam:' })
-      expect(wrapper.emitted().input[0][0]).to.eql('Eat some spam!:spam:')
+      const inputEvents = wrapper.emitted().input
+      expect(inputEvents[inputEvents.length - 1][0]).to.eql('Eat some spam!:spam:')
     })
 
     it('correctly sets caret after insertion at beginning', (done) => {
-- 
cgit v1.2.3-70-g09d2


From 576ad9750be4a76df7f7cc4d7062aa4546d7f61f Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Wed, 22 Apr 2020 00:07:01 +0300
Subject: make tests not fail

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

(limited to 'test/unit/specs')

diff --git a/test/unit/specs/components/user_profile.spec.js b/test/unit/specs/components/user_profile.spec.js
index 1b6a47d7..0a3f2d27 100644
--- a/test/unit/specs/components/user_profile.spec.js
+++ b/test/unit/specs/components/user_profile.spec.js
@@ -96,7 +96,8 @@ const externalProfileStore = new Vuex.Store({
         credentials: ''
       },
       usersObject: { 100: extUser },
-      users: [extUser]
+      users: [extUser],
+      relationships: {}
     }
   }
 })
@@ -164,7 +165,8 @@ const localProfileStore = new Vuex.Store({
         credentials: ''
       },
       usersObject: { 100: localUser, 'testuser': localUser },
-      users: [localUser]
+      users: [localUser],
+      relationships: {}
     }
   }
 })
-- 
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 'test/unit/specs')

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

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

(limited to 'test/unit/specs')

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


From c2dfe1f6cc364175d5aa17d587f82bdb6b8b189c Mon Sep 17 00:00:00 2001
From: lain <lain@soykaf.club>
Date: Thu, 4 Jun 2020 15:25:00 +0200
Subject: EntityNormalizerSpec: Test new behavior.

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

(limited to 'test/unit/specs')

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 cfb380ba..178e75c6 100644
--- a/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
+++ b/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
@@ -338,9 +338,9 @@ describe('API Entities normalizer', () => {
 
   describe('MastoAPI emoji adder', () => {
     const emojis = makeMockEmojiMasto()
-    const imageHtml = '<img src="https://example.com/image.png" alt="image" title="image" class="emoji" />'
+    const imageHtml = '<img src="https://example.com/image.png" alt=":image:" title=":image:" class="emoji" />'
       .replace(/"/g, '\'')
-    const thinkHtml = '<img src="https://example.com/think.png" alt="thinking" title="thinking" class="emoji" />'
+    const thinkHtml = '<img src="https://example.com/think.png" alt=":thinking:" title=":thinking:" class="emoji" />'
       .replace(/"/g, '\'')
 
     it('correctly replaces shortcodes in supplied string', () => {
-- 
cgit v1.2.3-70-g09d2


From 05167f202fbb55d1cee1a1c36b630c18ab297419 Mon Sep 17 00:00:00 2001
From: lain <lain@soykaf.club>
Date: Thu, 4 Jun 2020 15:31:52 +0200
Subject: EntityNormalizerSpec: More fixes.

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

(limited to 'test/unit/specs')

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 178e75c6..166fce2b 100644
--- a/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
+++ b/test/unit/specs/services/entity_normalizer/entity_normalizer.spec.js
@@ -366,8 +366,8 @@ describe('API Entities normalizer', () => {
         shortcode: '[a-z] {|}*'
       }])
       const result = addEmojis('This post has :c++: emoji and :[a-z] {|}*: emoji', emojis)
-      expect(result).to.include('title=\'c++\'')
-      expect(result).to.include('title=\'[a-z] {|}*\'')
+      expect(result).to.include('title=\':c++:\'')
+      expect(result).to.include('title=\':[a-z] {|}*:\'')
     })
   })
 })
-- 
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 'test/unit/specs')

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