Make extra notification display customizable

src/components/extra_notifications/extra_notifications.js

@@ -3,15 +3,29 @@ import { mapGetters } from 'vuex'
 const ExtraNotifications = {
   computed: {
     shouldShowChats () {
-      return this.unreadChatCount
+      return this.mergedConfig.showExtraNotifications && this.mergedConfig.showChatsInExtraNotifications && this.unreadChatCount
     },
     shouldShowAnnouncements () {
-      return this.unreadAnnouncementCount
+      return this.mergedConfig.showExtraNotifications && this.mergedConfig.showAnnouncementsInExtraNotifications && this.unreadAnnouncementCount
     },
     shouldShowFollowRequests () {
-      return this.followRequestCount
+      return this.mergedConfig.showExtraNotifications && this.mergedConfig.showFollowRequestsInExtraNotifications && this.followRequestCount
     },
-    ...mapGetters(['unreadChatCount', 'unreadAnnouncementCount', 'followRequestCount'])
+    hasAnythingToShow () {
+      return this.shouldShowChats || this.shouldShowAnnouncements || this.shouldShowFollowRequests
+    },
+    shouldShowCustomizationTip () {
+      return this.mergedConfig.showExtraNotificationsTip && this.hasAnythingToShow
+    },
+    ...mapGetters(['unreadChatCount', 'unreadAnnouncementCount', 'followRequestCount', 'mergedConfig'])
+  },
+  methods: {
+    openNotificationSettings () {
+      return this.$store.dispatch('openSettingsModalTab', 'notifications')
+    },
+    dismissConfigurationTip () {
+      return this.$store.dispatch('setOption', { name: 'showExtraNotificationsTip', value: false })
+    }
   }
 }
 

src/components/extra_notifications/extra_notifications.vue

@@ -21,6 +21,29 @@
     >
       {{ $tc('notifications.unread_follow_requests', followRequestCount, { num: followRequestCount }) }}
     </router-link>
+    <i18n-t
+      v-if="shouldShowCustomizationTip"
+      tag="span"
+      class="extra-notification tip"
+      keypath="notifications.configuration_tip"
+    >
+      <template #theSettings>
+        <button
+          class="button-unstyled -link"
+          @click="openNotificationSettings"
+        >
+          {{ $t('notifications.configuration_tip_settings') }}
+        </button>
+      </template>
+      <template #dismiss>
+        <button
+          class="button-unstyled -link"
+          @click="dismissConfigurationTip"
+        >
+          {{ $t('notifications.configuration_tip_dismiss') }}
+        </button>
+      </template>
+    </i18n-t>
   </div>
 </template>
 
@@ -45,5 +68,9 @@
     border-color: $fallback--border;
     border-color: var(--border, $fallback--border);
   }
+
+  .tip {
+    display: inline;
+  }
 }
 </style>

src/components/settings_modal/tabs/notifications_tab.vue

@@ -51,6 +51,47 @@
             </li>
           </ul>
         </li>
+        <li>
+          <BooleanSetting path="showExtraNotifications">
+            {{ $t('settings.notification_show_extra') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <ul class="setting-list suboptions">
+            <li>
+              <BooleanSetting
+                path="showChatsInExtraNotifications"
+                :disabled="!mergedConfig.showExtraNotifications"
+              >
+                {{ $t('settings.notification_extra_chats') }}
+              </BooleanSetting>
+            </li>
+            <li>
+              <BooleanSetting
+                path="showAnnouncementsInExtraNotifications"
+                :disabled="!mergedConfig.showExtraNotifications"
+              >
+                {{ $t('settings.notification_extra_announcements') }}
+              </BooleanSetting>
+            </li>
+            <li>
+              <BooleanSetting
+                path="showFollowRequestsInExtraNotifications"
+                :disabled="!mergedConfig.showExtraNotifications"
+              >
+                {{ $t('settings.notification_extra_follow_requests') }}
+              </BooleanSetting>
+            </li>
+            <li>
+              <BooleanSetting
+                path="showExtraNotificationsTip"
+                :disabled="!mergedConfig.showExtraNotifications"
+              >
+                {{ $t('settings.notification_extra_tip') }}
+              </BooleanSetting>
+            </li>
+          </ul>
+        </li>
       </ul>
     </div>
 

src/i18n/en.json

@@ -208,7 +208,10 @@
     "poll_ended": "poll has ended",
     "unread_announcements": "{num} unread announcement | {num} unread announcements",
     "unread_chats": "{num} unread chat | {num} unread chats",
-    "unread_follow_requests": "{num} new follow request | {num} new follow requests"
+    "unread_follow_requests": "{num} new follow request | {num} new follow requests",
+    "configuration_tip": "You can customize what to display here in {theSettings}. {dismiss}",
+    "configuration_tip_settings": "the settings",
+    "configuration_tip_dismiss": "Do not show again"
   },
   "polls": {
     "add_poll": "Add poll",
@@ -562,6 +565,11 @@
     "notification_visibility_moves": "User Migrates",
     "notification_visibility_emoji_reactions": "Reactions",
     "notification_visibility_polls": "Ends of polls you voted in",
+    "notification_show_extra": "Show extra notifications in the notifications column",
+    "notification_extra_chats": "Show unread chats",
+    "notification_extra_announcements": "Show unread announcements",
+    "notification_extra_follow_requests": "Show new follow requests",
+    "notification_extra_tip": "Show the customization tip for extra notifications",
     "no_rich_text_description": "Strip rich text formatting from all posts",
     "no_blocks": "No blocks",
     "no_mutes": "No mutes",

src/modules/config.js

@@ -117,6 +117,11 @@ export const defaultState = {
   conversationTreeAdvanced: undefined, // instance default
   conversationOtherRepliesButton: undefined, // instance default
   conversationTreeFadeAncestors: undefined, // instance default
+  showExtraNotifications: undefined, // instance default
+  showExtraNotificationsTip: undefined, // instance default
+  showChatsInExtraNotifications: undefined, // instance default
+  showAnnouncementsInExtraNotifications: undefined, // instance default
+  showFollowRequestsInExtraNotifications: undefined, // instance default
   maxDepthInThread: undefined, // instance default
   autocompleteSelect: undefined // instance default
 }

src/modules/instance.js

@@ -103,6 +103,11 @@ const defaultState = {
   conversationTreeAdvanced: false,
   conversationOtherRepliesButton: 'below',
   conversationTreeFadeAncestors: false,
+  showExtraNotifications: true,
+  showExtraNotificationsTip: true,
+  showChatsInExtraNotifications: true,
+  showAnnouncementsInExtraNotifications: true,
+  showFollowRequestsInExtraNotifications: true,
   maxDepthInThread: 6,
   autocompleteSelect: false,