From b030109f75ec68eea4427373e2d75ea5d5e47c3d Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Sat, 25 Apr 2020 21:15:01 +0900
Subject: [PATCH 1/3] refs #1281 Use i18n in notification status

---
 src/config/locales/en/translation.json                |  4 ++++
 .../components/organisms/Notification/Favourite.vue   | 11 ++++++-----
 .../components/organisms/Notification/Follow.vue      |  3 ++-
 .../components/organisms/Notification/Reaction.vue    |  3 ++-
 .../components/organisms/Notification/Reblog.vue      | 11 ++++++-----
 5 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/config/locales/en/translation.json b/src/config/locales/en/translation.json
index b3afe2d8..12fe7ffb 100644
--- a/src/config/locales/en/translation.json
+++ b/src/config/locales/en/translation.json
@@ -453,6 +453,10 @@
     "reblog": {
       "title": "Reblog",
       "body": "{{username}} boosted your status"
+    },
+    "reaction": {
+      "title": "Reaction",
+      "body": "{{username}} reacted your status"
     }
   }
 }
diff --git a/src/renderer/components/organisms/Notification/Favourite.vue b/src/renderer/components/organisms/Notification/Favourite.vue
index 0defc936..d18727f3 100644
--- a/src/renderer/components/organisms/Notification/Favourite.vue
+++ b/src/renderer/components/organisms/Notification/Favourite.vue
@@ -18,7 +18,8 @@
           <icon name="star" scale="0.7"></icon>
         </div>
         <div class="action-detail">
-          <span class="bold" @click="openUser(message.account)"><bdi v-html="username(message.account)"></bdi></span> favourited your status
+          <span class="bold" @click="openUser(message.account)"><bdi v-html="username(message.account)"></bdi></span
+          >{{ $t('notification.favourite.body') }}
         </div>
         <div class="action-icon" role="presentation">
           <FailoverImg :src="message.account.avatar" :alt="`Avatar of ${message.account.username}`" />
@@ -141,7 +142,7 @@ export default {
       timeFormat: state => state.App.timeFormat,
       language: state => state.App.language
     }),
-    shortcutEnabled: function() {
+    shortcutEnabled: function () {
       return this.focused && !this.overlaid
     }
   },
@@ -151,13 +152,13 @@ export default {
     }
   },
   watch: {
-    focused: function(newState, oldState) {
+    focused: function (newState, oldState) {
       if (newState) {
-        this.$nextTick(function() {
+        this.$nextTick(function () {
           this.$refs.status.focus()
         })
       } else if (oldState && !newState) {
-        this.$nextTick(function() {
+        this.$nextTick(function () {
           this.$refs.status.blur()
         })
       }
diff --git a/src/renderer/components/organisms/Notification/Follow.vue b/src/renderer/components/organisms/Notification/Follow.vue
index d93840cf..c38ff223 100644
--- a/src/renderer/components/organisms/Notification/Follow.vue
+++ b/src/renderer/components/organisms/Notification/Follow.vue
@@ -14,7 +14,8 @@
         <icon name="user-plus" scale="0.7"></icon>
       </div>
       <div class="action-detail">
-        <span class="bold" @click="openUser(message.account)"><bdi v-html="username(message.account)"></bdi></span> is now following you
+        <span class="bold" @click="openUser(message.account)"><bdi v-html="username(message.account)"></bdi></span
+        >{{ $t('notification.follow.body') }}
       </div>
       <div class="action-icon" role="presentation">
         <FailoverImg :src="message.account.avatar" />
diff --git a/src/renderer/components/organisms/Notification/Reaction.vue b/src/renderer/components/organisms/Notification/Reaction.vue
index 4e9f77f3..3dd79f64 100644
--- a/src/renderer/components/organisms/Notification/Reaction.vue
+++ b/src/renderer/components/organisms/Notification/Reaction.vue
@@ -18,7 +18,8 @@
           {{ message.emoji }}
         </div>
         <div class="action-detail">
-          <span class="bold" @click="openUser(message.account)"><bdi v-html="username(message.account)"></bdi></span> reacted to your status
+          <span class="bold" @click="openUser(message.account)"><bdi v-html="username(message.account)"></bdi></span
+          >{{ $t('notification.reaction.body') }}
         </div>
         <div class="action-icon" role="presentation">
           <FailoverImg :src="message.account.avatar" :alt="`Avatar of ${message.account.username}`" />
diff --git a/src/renderer/components/organisms/Notification/Reblog.vue b/src/renderer/components/organisms/Notification/Reblog.vue
index 19660f67..d0242ef1 100644
--- a/src/renderer/components/organisms/Notification/Reblog.vue
+++ b/src/renderer/components/organisms/Notification/Reblog.vue
@@ -18,7 +18,8 @@
           <icon name="retweet" scala="0.7"></icon>
         </div>
         <div class="action-detail">
-          <span class="bold" @click="openUser(message.account)"><bdi v-html="username(message.account)"></bdi></span> boosted your status
+          <span class="bold" @click="openUser(message.account)"><bdi v-html="username(message.account)"></bdi></span
+          >{{ $t('notification.reblog.body') }}
         </div>
         <div class="action-icon" role="presentation">
           <FailoverImg :src="message.account.avatar" :alt="`Avatar of ${message.account.username}`" />
@@ -142,7 +143,7 @@ export default {
       timeFormat: state => state.App.timeFormat,
       language: state => state.App.language
     }),
-    shortcutEnabled: function() {
+    shortcutEnabled: function () {
       return this.focused && !this.overlaid
     }
   },
@@ -152,13 +153,13 @@ export default {
     }
   },
   watch: {
-    focused: function(newState, oldState) {
+    focused: function (newState, oldState) {
       if (newState) {
-        this.$nextTick(function() {
+        this.$nextTick(function () {
           this.$refs.status.focus()
         })
       } else if (oldState && !newState) {
-        this.$nextTick(function() {
+        this.$nextTick(function () {
           this.$refs.status.blur()
         })
       }

From aacb1437cb5cc4fdddd02637aa244584be47f080 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Sat, 25 Apr 2020 21:25:28 +0900
Subject: [PATCH 2/3] refs #1281 Create notification when receive emoji
 reaction in web socket

---
 .../integration/store/Preferences/Notification.spec.ts   | 3 ++-
 .../renderer/unit/store/Preferences/Notification.spec.ts | 3 ++-
 src/main/index.ts                                        | 9 +++++++++
 src/main/preferences.ts                                  | 3 ++-
 src/renderer/store/App.ts                                | 3 ++-
 src/renderer/store/Preferences/Notification.ts           | 3 ++-
 src/types/notify.ts                                      | 7 ++++---
 7 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/spec/renderer/integration/store/Preferences/Notification.spec.ts b/spec/renderer/integration/store/Preferences/Notification.spec.ts
index 00794537..c85daf3f 100644
--- a/spec/renderer/integration/store/Preferences/Notification.spec.ts
+++ b/spec/renderer/integration/store/Preferences/Notification.spec.ts
@@ -12,7 +12,8 @@ const state = (): NotificationState => {
         reply: true,
         reblog: true,
         favourite: true,
-        follow: true
+        follow: true,
+        reaction: true
       }
     }
   }
diff --git a/spec/renderer/unit/store/Preferences/Notification.spec.ts b/spec/renderer/unit/store/Preferences/Notification.spec.ts
index 2c05f177..797785d8 100644
--- a/spec/renderer/unit/store/Preferences/Notification.spec.ts
+++ b/spec/renderer/unit/store/Preferences/Notification.spec.ts
@@ -9,7 +9,8 @@ describe('Preferences/Notification', () => {
           reply: true,
           reblog: true,
           favourite: true,
-          follow: true
+          follow: true,
+          reaction: true
         }
       }
     }
diff --git a/src/main/index.ts b/src/main/index.ts
index 08bdad2c..d97e042c 100644
--- a/src/main/index.ts
+++ b/src/main/index.ts
@@ -1442,6 +1442,15 @@ const createNotification = (notification: Entity.Notification, notifyConfig: Not
         } as NotificationConstructorOptions
       }
       break
+    case 'emoji_reaction':
+      if (notifyConfig.reaction) {
+        return {
+          title: i18next.t('notification.reaction.title'),
+          body: i18next.t('notification.reaction.body', { username: username(notification.account) }),
+          silent: false
+        } as NotificationConstructorOptions
+      }
+      break
     default:
       break
   }
diff --git a/src/main/preferences.ts b/src/main/preferences.ts
index 1eef83e8..209d7917 100644
--- a/src/main/preferences.ts
+++ b/src/main/preferences.ts
@@ -45,7 +45,8 @@ const notify: Notify = {
   reply: true,
   reblog: true,
   favourite: true,
-  follow: true
+  follow: true,
+  reaction: true
 }
 
 const language: LanguageSet = {
diff --git a/src/renderer/store/App.ts b/src/renderer/store/App.ts
index 14427fde..109a43f6 100644
--- a/src/renderer/store/App.ts
+++ b/src/renderer/store/App.ts
@@ -39,7 +39,8 @@ const state = (): AppState => ({
     reply: true,
     reblog: true,
     favourite: true,
-    follow: true
+    follow: true,
+    reaction: true
   },
   tootPadding: 8,
   timeFormat: TimeFormat.Absolute.value,
diff --git a/src/renderer/store/Preferences/Notification.ts b/src/renderer/store/Preferences/Notification.ts
index 4d31f9e3..c2f7f2f5 100644
--- a/src/renderer/store/Preferences/Notification.ts
+++ b/src/renderer/store/Preferences/Notification.ts
@@ -16,7 +16,8 @@ const state: NotificationState = {
       reply: true,
       reblog: true,
       favourite: true,
-      follow: true
+      follow: true,
+      reaction: true
     }
   }
 }
diff --git a/src/types/notify.ts b/src/types/notify.ts
index 68172a3f..ceb419ac 100644
--- a/src/types/notify.ts
+++ b/src/types/notify.ts
@@ -1,6 +1,7 @@
 export type Notify = {
-  reply: boolean,
-  reblog: boolean,
-  favourite: boolean,
+  reply: boolean
+  reblog: boolean
+  favourite: boolean
   follow: boolean
+  reaction: boolean
 }

From b6ae363db4b083a29137887a75126c98121c17d8 Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Sat, 25 Apr 2020 21:38:23 +0900
Subject: [PATCH 3/3] refs #1281 Add reaction notification preferences

---
 .../store/Preferences/Notification.spec.ts    |  9 +-
 src/config/locales/en/translation.json        |  3 +-
 .../components/Preferences/Notification.vue   | 93 +++++++++----------
 3 files changed, 53 insertions(+), 52 deletions(-)

diff --git a/spec/renderer/integration/store/Preferences/Notification.spec.ts b/spec/renderer/integration/store/Preferences/Notification.spec.ts
index c85daf3f..7e519641 100644
--- a/spec/renderer/integration/store/Preferences/Notification.spec.ts
+++ b/spec/renderer/integration/store/Preferences/Notification.spec.ts
@@ -59,7 +59,8 @@ describe('Preferences/Notification', () => {
               reply: false,
               reblog: false,
               favourite: false,
-              follow: false
+              follow: false,
+              reaction: false
             }
           }
         })
@@ -71,7 +72,8 @@ describe('Preferences/Notification', () => {
             reply: false,
             reblog: false,
             favourite: false,
-            follow: false
+            follow: false,
+            reaction: false
           }
         })
       })
@@ -94,7 +96,8 @@ describe('Preferences/Notification', () => {
           reply: false,
           reblog: false,
           favourite: true,
-          follow: true
+          follow: true,
+          reaction: true
         }
       })
       expect(App.actions.loadPreferences).toBeCalled()
diff --git a/src/config/locales/en/translation.json b/src/config/locales/en/translation.json
index 12fe7ffb..ef453ae5 100644
--- a/src/config/locales/en/translation.json
+++ b/src/config/locales/en/translation.json
@@ -179,7 +179,8 @@
         "reply": "Notify me when I receive a reply",
         "reblog": "Notify me when I receive a reblog",
         "favourite": "Notify me when I receive a favourite",
-        "follow": "Notify me when I receive a follow"
+        "follow": "Notify me when I receive a follow",
+        "reaction": "Notify me when I receive a emoji reaction"
       }
     },
     "account": {
diff --git a/src/renderer/components/Preferences/Notification.vue b/src/renderer/components/Preferences/Notification.vue
index 831407e1..0370ed41 100644
--- a/src/renderer/components/Preferences/Notification.vue
+++ b/src/renderer/components/Preferences/Notification.vue
@@ -1,37 +1,25 @@
 <template>
-<div id="notification">
-  <h2>{{ $t('preferences.notification.title') }}</h2>
-  <el-form class="section" label-position="right" label-width="250px" size="small">
-    <p class="description">{{ $t('preferences.notification.enable.description') }}</p>
-    <el-form-item for="notifyReply" :label="$t('preferences.notification.enable.reply')">
-      <el-switch
-        id="notifyReply"
-        v-model="notifyReply"
-        active-color="#13ce66">
-      </el-switch>
-    </el-form-item>
-    <el-form-item for="notifyReblog" :label="$t('preferences.notification.enable.reblog')">
-      <el-switch
-        id="notifyReblog"
-        v-model="notifyReblog"
-        active-color="#13ce66">
-      </el-switch>
-    </el-form-item>
-    <el-form-item for="notifyFavourite" :label="$t('preferences.notification.enable.favourite')">
-      <el-switch
-        id="notifyFavourite"
-        v-model="notifyFavourite"
-        active-color="#13ce66">
-      </el-switch>
-    </el-form-item>
-    <el-form-item for="notifyFollow" :label="$t('preferences.notification.enable.follow')">
-      <el-switch
-        v-model="notifyFollow"
-        active-color="#13ce66">
-      </el-switch>
-    </el-form-item>
-  </el-form>
-</div>
+  <div id="notification">
+    <h2>{{ $t('preferences.notification.title') }}</h2>
+    <el-form class="section" label-position="right" label-width="300px" size="small">
+      <p class="description">{{ $t('preferences.notification.enable.description') }}</p>
+      <el-form-item for="notifyReply" :label="$t('preferences.notification.enable.reply')">
+        <el-switch id="notifyReply" v-model="notifyReply" active-color="#13ce66"> </el-switch>
+      </el-form-item>
+      <el-form-item for="notifyReblog" :label="$t('preferences.notification.enable.reblog')">
+        <el-switch id="notifyReblog" v-model="notifyReblog" active-color="#13ce66"> </el-switch>
+      </el-form-item>
+      <el-form-item for="notifyReaction" :label="$t('preferences.notification.enable.reaction')">
+        <el-switch id="notifyReaction" v-model="notifyReaction" active-color="#13ce66"> </el-switch>
+      </el-form-item>
+      <el-form-item for="notifyFavourite" :label="$t('preferences.notification.enable.favourite')">
+        <el-switch id="notifyFavourite" v-model="notifyFavourite" active-color="#13ce66"> </el-switch>
+      </el-form-item>
+      <el-form-item for="notifyFollow" :label="$t('preferences.notification.enable.follow')">
+        <el-switch v-model="notifyFollow" active-color="#13ce66"> </el-switch>
+      </el-form-item>
+    </el-form>
+  </div>
 </template>
 
 <script>
@@ -39,54 +27,63 @@ export default {
   name: 'notification',
   computed: {
     notifyReply: {
-      get () {
+      get() {
         return this.$store.state.Preferences.Notification.notification.notify.reply
       },
-      set (value) {
+      set(value) {
         this.$store.dispatch('Preferences/Notification/updateNotify', {
           reply: value
         })
       }
     },
     notifyReblog: {
-      get () {
+      get() {
         return this.$store.state.Preferences.Notification.notification.notify.reblog
       },
-      set (value) {
+      set(value) {
         this.$store.dispatch('Preferences/Notification/updateNotify', {
           reblog: value
         })
       }
     },
     notifyFavourite: {
-      get () {
+      get() {
         return this.$store.state.Preferences.Notification.notification.notify.favourite
       },
-      set (value) {
+      set(value) {
         this.$store.dispatch('Preferences/Notification/updateNotify', {
           favourite: value
         })
       }
     },
     notifyFollow: {
-      get () {
+      get() {
         return this.$store.state.Preferences.Notification.notification.notify.follow
       },
-      set (value) {
+      set(value) {
         this.$store.dispatch('Preferences/Notification/updateNotify', {
           follow: value
         })
       }
+    },
+    notifyReaction: {
+      get() {
+        return this.$store.state.Preferences.Notification.notification.notify.reaction
+      },
+      set(value) {
+        this.$store.dispatch('Preferences/Notification/updateNotify', {
+          reaction: value
+        })
+      }
     }
   },
-  created () {
-    this.$store.dispatch('Preferences/Notification/loadNotification')
-      .catch(() => {
-        this.$message({
-          message: this.$t('message.preferences_load_error'),
-          type: 'error'
-        })
+  created() {
+    this.$store.dispatch('Preferences/Notification/loadNotification').catch(() => {
+      this.$message({
+        message: this.$t('message.preferences_load_error'),
+        type: 'error'
       })
+    })
   }
 }
 </script>