diff --git a/changelog.d/extra-notifications.add b/changelog.d/extra-notifications.add
new file mode 100644
index 00000000..90f21f54
--- /dev/null
+++ b/changelog.d/extra-notifications.add
@@ -0,0 +1 @@
+Support showing extra notifications in the notifications column
diff --git a/src/components/extra_notifications/extra_notifications.js b/src/components/extra_notifications/extra_notifications.js
new file mode 100644
index 00000000..1bb0f837
--- /dev/null
+++ b/src/components/extra_notifications/extra_notifications.js
@@ -0,0 +1,48 @@
+import { mapGetters } from 'vuex'
+
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+ faUserPlus,
+ faComments,
+ faBullhorn
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+ faUserPlus,
+ faComments,
+ faBullhorn
+)
+
+const ExtraNotifications = {
+ computed: {
+ shouldShowChats () {
+ return this.mergedConfig.showExtraNotifications && this.mergedConfig.showChatsInExtraNotifications && this.unreadChatCount
+ },
+ shouldShowAnnouncements () {
+ return this.mergedConfig.showExtraNotifications && this.mergedConfig.showAnnouncementsInExtraNotifications && this.unreadAnnouncementCount
+ },
+ shouldShowFollowRequests () {
+ return this.mergedConfig.showExtraNotifications && this.mergedConfig.showFollowRequestsInExtraNotifications && this.followRequestCount
+ },
+ hasAnythingToShow () {
+ return this.shouldShowChats || this.shouldShowAnnouncements || this.shouldShowFollowRequests
+ },
+ shouldShowCustomizationTip () {
+ return this.mergedConfig.showExtraNotificationsTip && this.hasAnythingToShow
+ },
+ currentUser () {
+ return this.$store.state.users.currentUser
+ },
+ ...mapGetters(['unreadChatCount', 'unreadAnnouncementCount', 'followRequestCount', 'mergedConfig'])
+ },
+ methods: {
+ openNotificationSettings () {
+ return this.$store.dispatch('openSettingsModalTab', 'notifications')
+ },
+ dismissConfigurationTip () {
+ return this.$store.dispatch('setOption', { name: 'showExtraNotificationsTip', value: false })
+ }
+ }
+}
+
+export default ExtraNotifications
diff --git a/src/components/extra_notifications/extra_notifications.vue b/src/components/extra_notifications/extra_notifications.vue
new file mode 100644
index 00000000..6e0456a5
--- /dev/null
+++ b/src/components/extra_notifications/extra_notifications.vue
@@ -0,0 +1,113 @@
+
+
+
+
+
+
+
diff --git a/src/components/interactions/interactions.vue b/src/components/interactions/interactions.vue
index b7291c02..35d03562 100644
--- a/src/components/interactions/interactions.vue
+++ b/src/components/interactions/interactions.vue
@@ -39,6 +39,7 @@
diff --git a/src/components/mobile_nav/mobile_nav.js b/src/components/mobile_nav/mobile_nav.js
index dad1f6aa..b5325116 100644
--- a/src/components/mobile_nav/mobile_nav.js
+++ b/src/components/mobile_nav/mobile_nav.js
@@ -1,7 +1,10 @@
import SideDrawer from '../side_drawer/side_drawer.vue'
import Notifications from '../notifications/notifications.vue'
import ConfirmModal from '../confirm_modal/confirm_modal.vue'
-import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils'
+import {
+ unseenNotificationsFromStore,
+ countExtraNotifications
+} from '../../services/notification_utils/notification_utils'
import GestureService from '../../services/gesture_service/gesture_service'
import NavigationPins from 'src/components/navigation/navigation_pins.vue'
import { mapGetters } from 'vuex'
@@ -50,7 +53,7 @@ const MobileNav = {
return unseenNotificationsFromStore(this.$store)
},
unseenNotificationsCount () {
- return this.unseenNotifications.length
+ return this.unseenNotifications.length + countExtraNotifications(this.$store)
},
hideSitename () { return this.$store.state.instance.hideSitename },
sitename () { return this.$store.state.instance.name },
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index d499d3d6..571df0f1 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -1,12 +1,14 @@
import { computed } from 'vue'
import { mapGetters } from 'vuex'
import Notification from '../notification/notification.vue'
+import ExtraNotifications from '../extra_notifications/extra_notifications.vue'
import NotificationFilters from './notification_filters.vue'
import notificationsFetcher from '../../services/notifications_fetcher/notifications_fetcher.service.js'
import {
notificationsFromStore,
filteredNotificationsFromStore,
- unseenNotificationsFromStore
+ unseenNotificationsFromStore,
+ countExtraNotifications
} from '../../services/notification_utils/notification_utils.js'
import FaviconService from '../../services/favicon_service/favicon_service.js'
import { library } from '@fortawesome/fontawesome-svg-core'
@@ -23,7 +25,8 @@ const DEFAULT_SEEN_TO_DISPLAY_COUNT = 30
const Notifications = {
components: {
Notification,
- NotificationFilters
+ NotificationFilters,
+ ExtraNotifications
},
props: {
// Disables panel styles, unread mark, potentially other notification-related actions
@@ -31,6 +34,11 @@ const Notifications = {
minimalMode: Boolean,
// Custom filter mode, an array of strings, possible values 'mention', 'repeat', 'like', 'follow', used to override global filter for use in "Interactions" timeline
filterMode: Array,
+ // Do not show extra notifications
+ noExtra: {
+ type: Boolean,
+ default: false
+ },
// Disable teleporting (i.e. for /users/user/notifications)
disableTeleport: Boolean
},
@@ -65,11 +73,17 @@ const Notifications = {
filteredNotifications () {
return filteredNotificationsFromStore(this.$store, this.filterMode)
},
+ unseenCountBadgeText () {
+ return `${this.unseenCount ? this.unseenCount : ''}${this.extraNotificationsCount ? '*' : ''}`
+ },
unseenCount () {
return this.unseenNotifications.length
},
+ extraNotificationsCount () {
+ return countExtraNotifications(this.$store)
+ },
unseenCountTitle () {
- return this.unseenCount + (this.unreadChatCount) + this.unreadAnnouncementCount
+ return this.unseenNotifications.length + (this.unreadChatCount) + this.unreadAnnouncementCount
},
loading () {
return this.$store.state.statuses.notifications.loading
@@ -94,6 +108,9 @@ const Notifications = {
return this.filteredNotifications.slice(0, this.unseenCount + this.seenToDisplayCount)
},
noSticky () { return this.$store.getters.mergedConfig.disableStickyHeaders },
+ showExtraNotifications () {
+ return !this.noExtra
+ },
...mapGetters(['unreadChatCount', 'unreadAnnouncementCount'])
},
mounted () {
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 633efca6..999f8e9c 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -17,9 +17,9 @@
{{ $t('notifications.notifications') }}
{{ unseenCount }}
+ >{{ unseenCountBadgeText }}
+
+
+
+
+
+ {{ $t('settings.notification_show_extra') }}
+
+
+
+
+ -
+
+ {{ $t('settings.notification_extra_chats') }}
+
+
+ -
+
+ {{ $t('settings.notification_extra_announcements') }}
+
+
+ -
+
+ {{ $t('settings.notification_extra_follow_requests') }}
+
+
+ -
+
+ {{ $t('settings.notification_extra_tip') }}
+
+
+
+
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 2358a4ce..1658a25d 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -205,7 +205,13 @@
"migrated_to": "migrated to",
"reacted_with": "reacted with {0}",
"submitted_report": "submitted a report",
- "poll_ended": "poll has ended"
+ "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",
+ "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",
@@ -561,6 +567,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",
diff --git a/src/modules/config.js b/src/modules/config.js
index 56f8cba5..dda3d221 100644
--- a/src/modules/config.js
+++ b/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
}
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 1ee64552..034348ff 100644
--- a/src/modules/instance.js
+++ b/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,
diff --git a/src/services/notification_utils/notification_utils.js b/src/services/notification_utils/notification_utils.js
index 0f8b9b02..815e792d 100644
--- a/src/services/notification_utils/notification_utils.js
+++ b/src/services/notification_utils/notification_utils.js
@@ -124,3 +124,17 @@ export const prepareNotificationObject = (notification, i18n) => {
return notifObj
}
+
+export const countExtraNotifications = (store) => {
+ const mergedConfig = store.getters.mergedConfig
+
+ if (!mergedConfig.showExtraNotifications) {
+ return 0
+ }
+
+ return [
+ mergedConfig.showChatsInExtraNotifications ? store.getters.unreadChatCount : 0,
+ mergedConfig.showAnnouncementsInExtraNotifications ? store.getters.unreadAnnouncementCount : 0,
+ mergedConfig.showFollowRequestsInExtraNotifications ? store.getters.followRequestCount : 0
+ ].reduce((a, c) => a + c, 0)
+}