fix: fix bell notifications, add tests

bin/svgs.js

@@ -1,6 +1,7 @@
 export default [
   { id: 'pinafore-logo', src: 'src/static/sailboat.svg', inline: true },
   { id: 'fa-bell', src: 'src/thirdparty/font-awesome-svg-png/white/svg/bell.svg', inline: true },
+  { id: 'fa-bell-o', src: 'src/thirdparty/font-awesome-svg-png/white/svg/bell-o.svg' },
   { id: 'fa-users', src: 'src/thirdparty/font-awesome-svg-png/white/svg/users.svg', inline: true },
   { id: 'fa-globe', src: 'src/thirdparty/font-awesome-svg-png/white/svg/globe.svg' },
   { id: 'fa-gear', src: 'src/thirdparty/font-awesome-svg-png/white/svg/gear.svg', inline: true },
@@ -22,6 +23,7 @@ export default [
   { id: 'fa-user-plus', src: 'src/thirdparty/font-awesome-svg-png/white/svg/user-plus.svg' },
   { id: 'fa-external-link', src: 'src/thirdparty/font-awesome-svg-png/white/svg/external-link.svg' },
   { id: 'fa-search', src: 'src/thirdparty/font-awesome-svg-png/white/svg/search.svg', inline: true },
+  { id: 'fa-comment', src: 'src/thirdparty/font-awesome-svg-png/white/svg/comment.svg' },
   { id: 'fa-comments', src: 'src/thirdparty/font-awesome-svg-png/white/svg/comments.svg', inline: true },
   { id: 'fa-paperclip', src: 'src/thirdparty/font-awesome-svg-png/white/svg/paperclip.svg' },
   { id: 'fa-thumb-tack', src: 'src/thirdparty/font-awesome-svg-png/white/svg/thumb-tack.svg' },

src/intl/en-US.js

@@ -309,10 +309,10 @@ export default {
     true {(follow requested)}
     other {}
   }`,
-  notifyLabel: `Subscribe`,
-  denotifyLabel: `Unsubscribe`,
+  notify: 'Subscribe to {account}',
+  denotify: 'Unsubscribe from {account}',
   subscribedAccount: 'Subscribed to account',
-  unsubscribedAccount: 'Unsubscribed to account',
+  unsubscribedAccount: 'Unsubscribed from account',
   unblock: 'Unblock',
   nameAndFollowing: 'Name and following',
   clickToSeeAvatar: 'Click to see avatar',
@@ -474,6 +474,7 @@ export default {
   newFollowers: 'New followers',
   reblogs: 'Boosts',
   pollResults: 'Poll results',
+  subscriptions: 'Subscribed toots',
   needToReauthenticate: 'You need to reauthenticate in order to enable push notification. Log out of {instance}?',
   failedToUpdatePush: 'Failed to update push notification settings: {error}',
   // Themes
@@ -508,6 +509,7 @@ export default {
   rebloggedYou: 'boosted your toot',
   favoritedYou: 'favorited your toot',
   followedYou: 'followed you',
+  posted: 'posted',
   pollYouCreatedEnded: 'A poll you created has ended',
   pollYouVotedEnded: 'A poll you voted on has ended',
   reblogged: 'boosted',

src/routes/_actions/notify.js → src/routes/_actions/setAccountNotified.js

@@ -4,7 +4,7 @@ import { toast } from '../_components/toast/toast.js'
 import { updateLocalRelationship } from './accounts.js'
 import { formatIntl } from '../_utils/formatIntl.js'
 
-export async function setAccountNotify (accountId, notify, toastOnSuccess) {
+export async function setAccountNotified (accountId, notify, toastOnSuccess) {
   const { currentInstance, accessToken } = store.get()
   try {
     let relationship
@@ -15,11 +15,11 @@ export async function setAccountNotify (accountId, notify, toastOnSuccess) {
     }
     await updateLocalRelationship(currentInstance, accountId, relationship)
     if (toastOnSuccess) {
-      /* no await */ toast.say(follow ? 'intl.subscribedAccount' : 'intl.unsubscribedAccount')
+      /* no await */ toast.say(notify ? 'intl.subscribedAccount' : 'intl.unsubscribedAccount')
     }
   } catch (e) {
     console.error(e)
-    /* no await */ toast.say(follow
+    /* no await */ toast.say(notify
       ? formatIntl('intl.unableToSubscribe', { error: (e.message || '') })
       : formatIntl('intl.unableToUnsubscribe', { error: (e.message || '') })
     )

src/routes/_api/notify.js

@@ -4,13 +4,13 @@ import { auth, basename } from './utils.js'
 export async function notifyAccount (instanceName, accessToken, accountId) {
   const url = `${basename(instanceName)}/api/v1/accounts/${accountId}/follow`
   return post(url, {
-    "notify": true,
+    notify: true
   }, auth(accessToken), { timeout: WRITE_TIMEOUT })
 }
 
 export async function denotifyAccount (instanceName, accessToken, accountId) {
   const url = `${basename(instanceName)}/api/v1/accounts/${accountId}/follow`
   return post(url, {
-    "notify": false
+    notify: false
   }, auth(accessToken), { timeout: WRITE_TIMEOUT })
 }

src/routes/_components/dialog/components/AccountProfileOptionsDialog.html

@@ -23,6 +23,7 @@
 import { toggleMute } from '../../../_actions/toggleMute.js'
 import { reportStatusOrAccount } from '../../../_actions/report.js'
 import { formatIntl } from '../../../_utils/formatIntl.js'
+import { setAccountNotified } from '../../../_actions/setAccountNotified.js'
 
 export default {
   oncreate,
@@ -39,6 +40,7 @@
     username: ({ account }) => account.username,
     muting: ({ relationship }) => relationship && relationship.muting,
     blocking: ({ relationship }) => relationship && relationship.blocking,
+    notifying: ({ relationship }) => relationship && relationship.notifying,
     followLabel: ({ following, followRequested, account, username }) => {
       if (typeof following === 'undefined' || !account) {
         return ''
@@ -86,7 +88,7 @@
       blockLabel, blocking, blockIcon, muteLabel, muteIcon,
       followLabel, followIcon, following, followRequested,
       accountId, verifyCredentialsId, username, isUser, showReblogsLabel,
-      domain, blockDomainLabel, reportLabel
+      domain, blockDomainLabel, reportLabel, notifying
     }) => ([
       !isUser && {
         key: 'mention',
@@ -98,6 +100,16 @@
         label: followLabel,
         icon: followIcon
       },
+      !isUser && following && notifying === false && { // notifying could be undefined for old servers
+        key: 'notify',
+        label: formatIntl('intl.notify', { account: `@${username}` }),
+        icon: '#fa-bell'
+      },
+      !isUser && following && notifying === true && { // notifying could be undefined for old servers
+        key: 'denotify',
+        label: formatIntl('intl.denotify', { account: `@${username}` }),
+        icon: '#fa-bell-o'
+      },
       !isUser && {
         key: 'block',
         label: blockLabel,
@@ -151,6 +163,10 @@
           return this.onCopyClicked()
         case 'report':
           return this.onReport()
+        case 'notify':
+          return this.onNotifyClicked()
+        case 'denotify':
+          return this.onDenotifyClicked()
       }
     },
     async onMentionClicked () {
@@ -193,6 +209,16 @@
       const { account } = this.get()
       this.close()
       await reportStatusOrAccount({ account })
+    },
+    async onNotifyClicked () {
+      const { accountId } = this.get()
+      this.close()
+      await setAccountNotified(accountId, /* notify */ true, /* toastOnSuccess */ true)
+    },
+    async onDenotifyClicked () {
+      const { accountId } = this.get()
+      this.close()
+      await setAccountNotified(accountId, /* notify */ false, /* toastOnSuccess */ true)
     }
   },
   components: {

src/routes/_components/dialog/components/StatusOptionsDialog.html

@@ -26,6 +26,7 @@
 import { toggleMute } from '../../../_actions/toggleMute.js'
 import { reportStatusOrAccount } from '../../../_actions/report.js'
 import { formatIntl } from '../../../_utils/formatIntl.js'
+import { setAccountNotified } from '../../../_actions/setAccountNotified.js'
 
 export default {
   oncreate,
@@ -53,6 +54,7 @@
     username: ({ account }) => account.username,
     muting: ({ relationship }) => relationship.muting,
     blocking: ({ relationship }) => relationship.blocking,
+    notifying: ({ relationship }) => relationship && relationship.notifying,
     followLabel: ({ following, followRequested, account, username }) => {
       if (typeof following === 'undefined' || !account) {
         return ''
@@ -96,7 +98,8 @@
     items: ({
       blockLabel, blocking, blockIcon, muteLabel, muteIcon, followLabel, followIcon,
       following, followRequested, pinLabel, isUser, visibility, mentionsUser, mutingConversation,
-      muteConversationLabel, muteConversationIcon, supportsWebShare, isPublicOrUnlisted, bookmarkLabel
+      muteConversationLabel, muteConversationIcon, supportsWebShare, isPublicOrUnlisted, bookmarkLabel,
+      username, notifying
     }) => ([
       isUser && {
         key: 'delete',
@@ -113,6 +116,16 @@
         label: followLabel,
         icon: followIcon
       },
+      !isUser && following && notifying === false && { // notifying could be undefined for old servers
+        key: 'notify',
+        label: formatIntl('intl.notify', { account: `@${username}` }),
+        icon: '#fa-bell'
+      },
+      !isUser && following && notifying === true && { // notifying could be undefined for old servers
+        key: 'denotify',
+        label: formatIntl('intl.denotify', { account: `@${username}` }),
+        icon: '#fa-bell-o'
+      },
       !isUser && {
         key: 'block',
         label: blockLabel,
@@ -187,6 +200,10 @@
           return this.onReport()
         case 'bookmark':
           return this.onBookmark()
+        case 'notify':
+          return this.onNotifyClicked()
+        case 'denotify':
+          return this.onDenotifyClicked()
       }
     },
     async onDeleteClicked () {
@@ -244,6 +261,16 @@
       const { status } = this.get()
       this.close()
       await setStatusBookmarkedOrUnbookmarked(status.id, !status.bookmarked)
+    },
+    async onNotifyClicked () {
+      const { accountId } = this.get()
+      this.close()
+      await setAccountNotified(accountId, /* notify */ true, /* toastOnSuccess */ true)
+    },
+    async onDenotifyClicked () {
+      const { accountId } = this.get()
+      this.close()
+      await setAccountNotified(accountId, /* notify */ false, /* toastOnSuccess */ true)
     }
   }
 }

src/routes/_components/profile/AccountProfile.html

@@ -8,7 +8,6 @@ <h1 class="sr-only">{profileForAccount}</h1>
   <div class="account-profile-grid-wrapper">
     <div class="account-profile-grid">
       <AccountProfileHeader {account} {relationship} {verifyCredentials} />
-      <AccountProfileNotify {account} {relationship} {verifyCredentials} />
       <AccountProfileFollow {account} {relationship} {verifyCredentials} />
       <AccountProfileNote {account} />
       <AccountProfileMeta {account} />
@@ -38,7 +37,7 @@ <h1 class="sr-only">{profileForAccount}</h1>
     display: grid;
     grid-template-areas: "avatar     name        label     followed-by   follow"
                          "avatar     username    username  username      follow"
-                         "avatar     note        note      note          notify"
+                         "avatar     note        note      note          follow"
                          "meta       meta        meta      meta          meta"
                          "details    details     details   details       details";
     grid-template-columns: min-content auto 1fr 1fr min-content;
@@ -72,7 +71,7 @@ <h1 class="sr-only">{profileForAccount}</h1>
       grid-template-areas: "avatar     name          follow"
                            "avatar     label         follow"
                            "avatar     username      follow"
-                           "avatar     followed-by   notify"
+                           "avatar     followed-by   follow"
                            "note       note          note"
                            "meta       meta          meta"
                            "details    details       details";
@@ -98,7 +97,6 @@ <h1 class="sr-only">{profileForAccount}</h1>
                            "username    username"
                            "followed-by followed-by"
                            "follow      follow"
-                           "notify      notify"
                            "note        note"
                            "meta        meta"
                            "details     details";
@@ -110,7 +108,6 @@ <h1 class="sr-only">{profileForAccount}</h1>
 </style>
 <script>
   import AccountProfileHeader from './AccountProfileHeader.html'
-  import AccountProfileNotify from './AccountProfileNotify.html'
   import AccountProfileFollow from './AccountProfileFollow.html'
   import AccountProfileNote from './AccountProfileNote.html'
   import AccountProfileMeta from './AccountProfileMeta.html'
@@ -147,7 +144,6 @@ <h1 class="sr-only">{profileForAccount}</h1>
       AccountProfileHeader,
       AccountProfileFollow,
       AccountProfileNote,
-      AccountProfileNotify,
       AccountProfileMeta,
       AccountProfileDetails,
       AccountProfileMovedBanner,

src/routes/_components/settings/instance/NotificationFilterSettings.html

@@ -10,7 +10,8 @@
     NOTIFICATION_FAVORITES,
     NOTIFICATION_FOLLOWS,
     NOTIFICATION_MENTIONS,
-    NOTIFICATION_POLLS
+    NOTIFICATION_POLLS,
+    NOTIFICATION_SUBSCRIPTIONS
   } from '../../../_static/instanceSettings.js'
 
   export default {
@@ -40,6 +41,11 @@
           key: NOTIFICATION_POLLS,
           label: 'intl.pollResults',
           defaultValue: true
+        },
+        {
+          key: NOTIFICATION_SUBSCRIPTIONS,
+          label: 'intl.subscriptions',
+          defaultValue: true
         }
       ]
     }),