From 0d6a9e8a647be860b10506aecaafb4ff0f10150f Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Sun, 13 Aug 2023 23:57:34 -0400
Subject: [PATCH 01/12] Display extra notifications on notifications column

---
 .../extra_notifications.js                    |  9 ++++
 .../extra_notifications.vue                   | 42 +++++++++++++++++++
 src/components/notifications/notifications.js |  7 +++-
 .../notifications/notifications.vue           |  7 ++++
 src/i18n/en.json                              |  4 +-
 5 files changed, 67 insertions(+), 2 deletions(-)
 create mode 100644 src/components/extra_notifications/extra_notifications.js
 create mode 100644 src/components/extra_notifications/extra_notifications.vue

diff --git a/src/components/extra_notifications/extra_notifications.js b/src/components/extra_notifications/extra_notifications.js
new file mode 100644
index 0000000000..0bf904baea
--- /dev/null
+++ b/src/components/extra_notifications/extra_notifications.js
@@ -0,0 +1,9 @@
+import { mapGetters } from 'vuex'
+
+const ExtraNotifications = {
+  computed: {
+    ...mapGetters(['unreadChatCount', 'unreadAnnouncementCount'])
+  }
+}
+
+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 0000000000..11eeb937f3
--- /dev/null
+++ b/src/components/extra_notifications/extra_notifications.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="ExtraNotifications">
+    <router-link
+      v-if="unreadChatCount"
+      class="button-unstyled -link extra-notification"
+      to="chats"
+    >
+      {{ $tc('notifications.unread_chats', unreadChatCount, { num: unreadChatCount }) }}
+    </router-link>
+    <router-link
+      v-if="unreadAnnouncementCount"
+      class="button-unstyled -link extra-notification"
+      to="announcements"
+    >
+      {{ $tc('notifications.unread_announcements', unreadAnnouncementCount, { num: unreadAnnouncementCount }) }}
+    </router-link>
+  </div>
+</template>
+
+<script src="./extra_notifications.js" />
+
+<style lang="scss">
+@import "../../variables";
+
+.ExtraNotifications {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+
+  .extra-notification {
+    width: 100%;
+    padding: 1em;
+  }
+
+  .extra-notification {
+    border-bottom: 1px solid;
+    border-color: $fallback--border;
+    border-color: var(--border, $fallback--border);
+  }
+}
+</style>
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index d499d3d62d..0ed1571dbd 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -1,6 +1,7 @@
 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 {
@@ -23,7 +24,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
@@ -94,6 +96,9 @@ const Notifications = {
       return this.filteredNotifications.slice(0, this.unseenCount + this.seenToDisplayCount)
     },
     noSticky () { return this.$store.getters.mergedConfig.disableStickyHeaders },
+    showExtraNotifications () {
+      return true
+    },
     ...mapGetters(['unreadChatCount', 'unreadAnnouncementCount'])
   },
   mounted () {
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 633efca6b0..d40c930a6f 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -54,6 +54,13 @@
           class="panel-body"
           role="feed"
         >
+          <div
+            v-if="showExtraNotifications"
+            role="listitem"
+            class="notification"
+          >
+            <extra-notifications />
+          </div>
           <div
             v-for="notification in notificationsToDisplay"
             :key="notification.id"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index a7ab451f4c..d58fd2fa75 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -205,7 +205,9 @@
     "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"
   },
   "polls": {
     "add_poll": "Add poll",

From c4549f0993dd2e176f6619694cfaa632d166f002 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Fri, 18 Aug 2023 20:02:58 -0400
Subject: [PATCH 02/12] Display follow requests in extra notifications

---
 .../extra_notifications/extra_notifications.js        | 11 ++++++++++-
 .../extra_notifications/extra_notifications.vue       | 11 +++++++++--
 src/i18n/en.json                                      |  3 ++-
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/components/extra_notifications/extra_notifications.js b/src/components/extra_notifications/extra_notifications.js
index 0bf904baea..1f3c6e6de0 100644
--- a/src/components/extra_notifications/extra_notifications.js
+++ b/src/components/extra_notifications/extra_notifications.js
@@ -2,7 +2,16 @@ import { mapGetters } from 'vuex'
 
 const ExtraNotifications = {
   computed: {
-    ...mapGetters(['unreadChatCount', 'unreadAnnouncementCount'])
+    shouldShowChats () {
+      return this.unreadChatCount
+    },
+    shouldShowAnnouncements () {
+      return this.unreadAnnouncementCount
+    },
+    shouldShowFollowRequests () {
+      return this.followRequestCount
+    },
+    ...mapGetters(['unreadChatCount', 'unreadAnnouncementCount', 'followRequestCount'])
   }
 }
 
diff --git a/src/components/extra_notifications/extra_notifications.vue b/src/components/extra_notifications/extra_notifications.vue
index 11eeb937f3..f5cf16616e 100644
--- a/src/components/extra_notifications/extra_notifications.vue
+++ b/src/components/extra_notifications/extra_notifications.vue
@@ -1,19 +1,26 @@
 <template>
   <div class="ExtraNotifications">
     <router-link
-      v-if="unreadChatCount"
+      v-if="shouldShowChats"
       class="button-unstyled -link extra-notification"
       to="chats"
     >
       {{ $tc('notifications.unread_chats', unreadChatCount, { num: unreadChatCount }) }}
     </router-link>
     <router-link
-      v-if="unreadAnnouncementCount"
+      v-if="shouldShowAnnouncements"
       class="button-unstyled -link extra-notification"
       to="announcements"
     >
       {{ $tc('notifications.unread_announcements', unreadAnnouncementCount, { num: unreadAnnouncementCount }) }}
     </router-link>
+    <router-link
+      v-if="shouldShowFollowRequests"
+      class="button-unstyled -link extra-notification"
+      to="friend-requests"
+    >
+      {{ $tc('notifications.unread_follow_requests', followRequestCount, { num: followRequestCount }) }}
+    </router-link>
   </div>
 </template>
 
diff --git a/src/i18n/en.json b/src/i18n/en.json
index d58fd2fa75..62e80ce3ca 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -207,7 +207,8 @@
     "submitted_report": "submitted a report",
     "poll_ended": "poll has ended",
     "unread_announcements": "{num} unread announcement | {num} unread announcements",
-    "unread_chats": "{num} unread chat | {num} unread chats"
+    "unread_chats": "{num} unread chat | {num} unread chats",
+    "unread_follow_requests": "{num} new follow request | {num} new follow requests"
   },
   "polls": {
     "add_poll": "Add poll",

From 7f51ea369eb4ae1252fcba9a82438fd00471e874 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Fri, 18 Aug 2023 20:34:27 -0400
Subject: [PATCH 03/12] Make extra notification display customizable

---
 .../extra_notifications.js                    | 22 ++++++++--
 .../extra_notifications.vue                   | 27 ++++++++++++
 .../settings_modal/tabs/notifications_tab.vue | 41 +++++++++++++++++++
 src/i18n/en.json                              | 10 ++++-
 src/modules/config.js                         |  5 +++
 src/modules/instance.js                       |  5 +++
 6 files changed, 105 insertions(+), 5 deletions(-)

diff --git a/src/components/extra_notifications/extra_notifications.js b/src/components/extra_notifications/extra_notifications.js
index 1f3c6e6de0..cd687eafd1 100644
--- a/src/components/extra_notifications/extra_notifications.js
+++ b/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 })
+    }
   }
 }
 
diff --git a/src/components/extra_notifications/extra_notifications.vue b/src/components/extra_notifications/extra_notifications.vue
index f5cf16616e..d5edf39908 100644
--- a/src/components/extra_notifications/extra_notifications.vue
+++ b/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>
diff --git a/src/components/settings_modal/tabs/notifications_tab.vue b/src/components/settings_modal/tabs/notifications_tab.vue
index fcb92135e8..4dfba44411 100644
--- a/src/components/settings_modal/tabs/notifications_tab.vue
+++ b/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>
 
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 62e80ce3ca..90e3364819 100644
--- a/src/i18n/en.json
+++ b/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",
diff --git a/src/modules/config.js b/src/modules/config.js
index 56f8cba55c..dda3d2219d 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 bb0292da0b..3972bd2903 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,
 

From 1c180ace0b12ff85cb6cfe34bfc022b0f82b1c85 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Fri, 18 Aug 2023 20:39:14 -0400
Subject: [PATCH 04/12] Fix router links to use route objects

---
 src/components/extra_notifications/extra_notifications.js  | 3 +++
 src/components/extra_notifications/extra_notifications.vue | 6 +++---
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/extra_notifications/extra_notifications.js b/src/components/extra_notifications/extra_notifications.js
index cd687eafd1..01df12a30e 100644
--- a/src/components/extra_notifications/extra_notifications.js
+++ b/src/components/extra_notifications/extra_notifications.js
@@ -17,6 +17,9 @@ const ExtraNotifications = {
     shouldShowCustomizationTip () {
       return this.mergedConfig.showExtraNotificationsTip && this.hasAnythingToShow
     },
+    currentUser () {
+      return this.$store.state.users.currentUser
+    },
     ...mapGetters(['unreadChatCount', 'unreadAnnouncementCount', 'followRequestCount', 'mergedConfig'])
   },
   methods: {
diff --git a/src/components/extra_notifications/extra_notifications.vue b/src/components/extra_notifications/extra_notifications.vue
index d5edf39908..7e09e5cce3 100644
--- a/src/components/extra_notifications/extra_notifications.vue
+++ b/src/components/extra_notifications/extra_notifications.vue
@@ -3,21 +3,21 @@
     <router-link
       v-if="shouldShowChats"
       class="button-unstyled -link extra-notification"
-      to="chats"
+      :to="{ name: 'chats', params: { username: currentUser.screen_name } }"
     >
       {{ $tc('notifications.unread_chats', unreadChatCount, { num: unreadChatCount }) }}
     </router-link>
     <router-link
       v-if="shouldShowAnnouncements"
       class="button-unstyled -link extra-notification"
-      to="announcements"
+      :to="{ name: 'announcements' }"
     >
       {{ $tc('notifications.unread_announcements', unreadAnnouncementCount, { num: unreadAnnouncementCount }) }}
     </router-link>
     <router-link
       v-if="shouldShowFollowRequests"
       class="button-unstyled -link extra-notification"
-      to="friend-requests"
+      :to="{ name: 'friend-requests' }"
     >
       {{ $tc('notifications.unread_follow_requests', followRequestCount, { num: followRequestCount }) }}
     </router-link>

From bd60238f010df2554e88639f21003487ec503704 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Fri, 18 Aug 2023 20:41:49 -0400
Subject: [PATCH 05/12] Do not show extra notifications in interactions page

---
 src/components/notifications/notifications.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index 0ed1571dbd..09ebc94370 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -97,7 +97,7 @@ const Notifications = {
     },
     noSticky () { return this.$store.getters.mergedConfig.disableStickyHeaders },
     showExtraNotifications () {
-      return true
+      return !this.noHeading
     },
     ...mapGetters(['unreadChatCount', 'unreadAnnouncementCount'])
   },

From 50bad0fc68dee158e1681e599c7852550f5bef31 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Fri, 18 Aug 2023 21:07:48 -0400
Subject: [PATCH 06/12] Display unread visuals when there are unread extra
 notifications

---
 src/components/interactions/interactions.vue   |  1 +
 src/components/mobile_nav/mobile_nav.js        |  7 +++++--
 src/components/notifications/notifications.js  | 18 +++++++++++++++---
 src/components/notifications/notifications.vue |  4 ++--
 .../notification_utils/notification_utils.js   | 14 ++++++++++++++
 5 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/src/components/interactions/interactions.vue b/src/components/interactions/interactions.vue
index b7291c02ca..35d0356273 100644
--- a/src/components/interactions/interactions.vue
+++ b/src/components/interactions/interactions.vue
@@ -39,6 +39,7 @@
     <Notifications
       ref="notifications"
       :no-heading="true"
+      :no-extra="true"
       :minimal-mode="true"
       :filter-mode="filterMode"
     />
diff --git a/src/components/mobile_nav/mobile_nav.js b/src/components/mobile_nav/mobile_nav.js
index dad1f6aa32..b532511608 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 09ebc94370..571df0f1c9 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -7,7 +7,8 @@ import notificationsFetcher from '../../services/notifications_fetcher/notificat
 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'
@@ -33,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
   },
@@ -67,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
@@ -97,7 +109,7 @@ const Notifications = {
     },
     noSticky () { return this.$store.getters.mergedConfig.disableStickyHeaders },
     showExtraNotifications () {
-      return !this.noHeading
+      return !this.noExtra
     },
     ...mapGetters(['unreadChatCount', 'unreadAnnouncementCount'])
   },
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index d40c930a6f..999f8e9c7c 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -17,9 +17,9 @@
           <div class="title">
             {{ $t('notifications.notifications') }}
             <span
-              v-if="unseenCount"
+              v-if="unseenCountBadgeText"
               class="badge badge-notification unseen-count"
-            >{{ unseenCount }}</span>
+            >{{ unseenCountBadgeText }}</span>
           </div>
           <div
             v-if="showScrollTop"
diff --git a/src/services/notification_utils/notification_utils.js b/src/services/notification_utils/notification_utils.js
index 0f8b9b029f..815e792d1a 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)
+}

From c6715b346b2b83cc255714f2e98b3169b4f5a572 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Fri, 18 Aug 2023 21:19:41 -0400
Subject: [PATCH 07/12] Show unread marker for extra notifications

---
 .../extra_notifications.vue                   | 58 ++++++++++---------
 1 file changed, 32 insertions(+), 26 deletions(-)

diff --git a/src/components/extra_notifications/extra_notifications.vue b/src/components/extra_notifications/extra_notifications.vue
index 7e09e5cce3..4f32c04f4f 100644
--- a/src/components/extra_notifications/extra_notifications.vue
+++ b/src/components/extra_notifications/extra_notifications.vue
@@ -1,30 +1,39 @@
 <template>
   <div class="ExtraNotifications">
-    <router-link
-      v-if="shouldShowChats"
-      class="button-unstyled -link extra-notification"
-      :to="{ name: 'chats', params: { username: currentUser.screen_name } }"
-    >
-      {{ $tc('notifications.unread_chats', unreadChatCount, { num: unreadChatCount }) }}
-    </router-link>
-    <router-link
-      v-if="shouldShowAnnouncements"
-      class="button-unstyled -link extra-notification"
-      :to="{ name: 'announcements' }"
-    >
-      {{ $tc('notifications.unread_announcements', unreadAnnouncementCount, { num: unreadAnnouncementCount }) }}
-    </router-link>
-    <router-link
-      v-if="shouldShowFollowRequests"
-      class="button-unstyled -link extra-notification"
-      :to="{ name: 'friend-requests' }"
-    >
-      {{ $tc('notifications.unread_follow_requests', followRequestCount, { num: followRequestCount }) }}
-    </router-link>
+    <div class="notification unseen">
+      <div class="notification-overlay"></div>
+      <router-link
+        v-if="shouldShowChats"
+        class="button-unstyled -link extra-notification-link"
+        :to="{ name: 'chats', params: { username: currentUser.screen_name } }"
+      >
+        {{ $tc('notifications.unread_chats', unreadChatCount, { num: unreadChatCount }) }}
+      </router-link>
+    </div>
+    <div class="notification unseen">
+      <div class="notification-overlay"></div>
+      <router-link
+        v-if="shouldShowAnnouncements"
+        class="button-unstyled -link extra-notification-link"
+        :to="{ name: 'announcements' }"
+      >
+        {{ $tc('notifications.unread_announcements', unreadAnnouncementCount, { num: unreadAnnouncementCount }) }}
+      </router-link>
+    </div>
+    <div class="notification unseen">
+      <div class="notification-overlay"></div>
+      <router-link
+        v-if="shouldShowFollowRequests"
+        class="button-unstyled -link extra-notification-link"
+        :to="{ name: 'friend-requests' }"
+      >
+        {{ $tc('notifications.unread_follow_requests', followRequestCount, { num: followRequestCount }) }}
+      </router-link>
+    </div>
     <i18n-t
       v-if="shouldShowCustomizationTip"
       tag="span"
-      class="extra-notification tip"
+      class="notification tip"
       keypath="notifications.configuration_tip"
     >
       <template #theSettings>
@@ -58,12 +67,9 @@
   flex-direction: column;
   align-items: stretch;
 
-  .extra-notification {
+  .notification {
     width: 100%;
     padding: 1em;
-  }
-
-  .extra-notification {
     border-bottom: 1px solid;
     border-color: $fallback--border;
     border-color: var(--border, $fallback--border);

From a2c21e27428d44eac899c2497f599f9abfcb5cef Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Fri, 18 Aug 2023 21:29:01 -0400
Subject: [PATCH 08/12] Make clickable area the whole row

---
 .../extra_notifications/extra_notifications.vue  | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/extra_notifications/extra_notifications.vue b/src/components/extra_notifications/extra_notifications.vue
index 4f32c04f4f..308c79d1a9 100644
--- a/src/components/extra_notifications/extra_notifications.vue
+++ b/src/components/extra_notifications/extra_notifications.vue
@@ -4,7 +4,7 @@
       <div class="notification-overlay"></div>
       <router-link
         v-if="shouldShowChats"
-        class="button-unstyled -link extra-notification-link"
+        class="button-unstyled -link extra-notification"
         :to="{ name: 'chats', params: { username: currentUser.screen_name } }"
       >
         {{ $tc('notifications.unread_chats', unreadChatCount, { num: unreadChatCount }) }}
@@ -14,7 +14,7 @@
       <div class="notification-overlay"></div>
       <router-link
         v-if="shouldShowAnnouncements"
-        class="button-unstyled -link extra-notification-link"
+        class="button-unstyled -link extra-notification"
         :to="{ name: 'announcements' }"
       >
         {{ $tc('notifications.unread_announcements', unreadAnnouncementCount, { num: unreadAnnouncementCount }) }}
@@ -24,7 +24,7 @@
       <div class="notification-overlay"></div>
       <router-link
         v-if="shouldShowFollowRequests"
-        class="button-unstyled -link extra-notification-link"
+        class="button-unstyled -link extra-notification"
         :to="{ name: 'friend-requests' }"
       >
         {{ $tc('notifications.unread_follow_requests', followRequestCount, { num: followRequestCount }) }}
@@ -33,7 +33,7 @@
     <i18n-t
       v-if="shouldShowCustomizationTip"
       tag="span"
-      class="notification tip"
+      class="notification tip extra-notification"
       keypath="notifications.configuration_tip"
     >
       <template #theSettings>
@@ -69,10 +69,16 @@
 
   .notification {
     width: 100%;
-    padding: 1em;
     border-bottom: 1px solid;
     border-color: $fallback--border;
     border-color: var(--border, $fallback--border);
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .extra-notification {
+    padding: 1em;
   }
 
   .tip {

From ebee2bda639988b3bfa29e0cfc9c6a76bfda5b07 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Fri, 18 Aug 2023 21:35:56 -0400
Subject: [PATCH 09/12] Add icons to extra notifications

---
 .../extra_notifications.js                    | 13 +++++++++++++
 .../extra_notifications.vue                   | 19 +++++++++++++++++++
 2 files changed, 32 insertions(+)

diff --git a/src/components/extra_notifications/extra_notifications.js b/src/components/extra_notifications/extra_notifications.js
index 01df12a30e..1bb0f83741 100644
--- a/src/components/extra_notifications/extra_notifications.js
+++ b/src/components/extra_notifications/extra_notifications.js
@@ -1,5 +1,18 @@
 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 () {
diff --git a/src/components/extra_notifications/extra_notifications.vue b/src/components/extra_notifications/extra_notifications.vue
index 308c79d1a9..512f515c7a 100644
--- a/src/components/extra_notifications/extra_notifications.vue
+++ b/src/components/extra_notifications/extra_notifications.vue
@@ -7,6 +7,11 @@
         class="button-unstyled -link extra-notification"
         :to="{ name: 'chats', params: { username: currentUser.screen_name } }"
       >
+        <FAIcon
+          fixed-width
+          class="fa-scale-110 icon"
+          icon="comments"
+        />
         {{ $tc('notifications.unread_chats', unreadChatCount, { num: unreadChatCount }) }}
       </router-link>
     </div>
@@ -17,6 +22,11 @@
         class="button-unstyled -link extra-notification"
         :to="{ name: 'announcements' }"
       >
+        <FAIcon
+          fixed-width
+          class="fa-scale-110 icon"
+          icon="bullhorn"
+        />
         {{ $tc('notifications.unread_announcements', unreadAnnouncementCount, { num: unreadAnnouncementCount }) }}
       </router-link>
     </div>
@@ -27,6 +37,11 @@
         class="button-unstyled -link extra-notification"
         :to="{ name: 'friend-requests' }"
       >
+        <FAIcon
+          fixed-width
+          class="fa-scale-110 icon"
+          icon="user-plus"
+        />
         {{ $tc('notifications.unread_follow_requests', followRequestCount, { num: followRequestCount }) }}
       </router-link>
     </div>
@@ -81,6 +96,10 @@
     padding: 1em;
   }
 
+  .icon {
+    margin-right: 0.5em;
+  }
+
   .tip {
     display: inline;
   }

From ff25838479ecbb6c28b741efde47b0ad9253c2da Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Fri, 18 Aug 2023 21:48:32 -0400
Subject: [PATCH 10/12] Make lint happy

---
 src/components/extra_notifications/extra_notifications.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/extra_notifications/extra_notifications.vue b/src/components/extra_notifications/extra_notifications.vue
index 512f515c7a..96489190b9 100644
--- a/src/components/extra_notifications/extra_notifications.vue
+++ b/src/components/extra_notifications/extra_notifications.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="ExtraNotifications">
     <div class="notification unseen">
-      <div class="notification-overlay"></div>
+      <div class="notification-overlay" />
       <router-link
         v-if="shouldShowChats"
         class="button-unstyled -link extra-notification"
@@ -16,7 +16,7 @@
       </router-link>
     </div>
     <div class="notification unseen">
-      <div class="notification-overlay"></div>
+      <div class="notification-overlay" />
       <router-link
         v-if="shouldShowAnnouncements"
         class="button-unstyled -link extra-notification"
@@ -31,7 +31,7 @@
       </router-link>
     </div>
     <div class="notification unseen">
-      <div class="notification-overlay"></div>
+      <div class="notification-overlay" />
       <router-link
         v-if="shouldShowFollowRequests"
         class="button-unstyled -link extra-notification"

From e4ab012f21f42c3a3c5b3a0bdcf0455cf419d366 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Fri, 18 Aug 2023 21:57:06 -0400
Subject: [PATCH 11/12] Move v-if condition to the right place

---
 .../extra_notifications.vue                    | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/extra_notifications/extra_notifications.vue b/src/components/extra_notifications/extra_notifications.vue
index 96489190b9..6e0456a5f4 100644
--- a/src/components/extra_notifications/extra_notifications.vue
+++ b/src/components/extra_notifications/extra_notifications.vue
@@ -1,9 +1,11 @@
 <template>
   <div class="ExtraNotifications">
-    <div class="notification unseen">
+    <div
+      v-if="shouldShowChats"
+      class="notification unseen"
+    >
       <div class="notification-overlay" />
       <router-link
-        v-if="shouldShowChats"
         class="button-unstyled -link extra-notification"
         :to="{ name: 'chats', params: { username: currentUser.screen_name } }"
       >
@@ -15,10 +17,12 @@
         {{ $tc('notifications.unread_chats', unreadChatCount, { num: unreadChatCount }) }}
       </router-link>
     </div>
-    <div class="notification unseen">
+    <div
+      v-if="shouldShowAnnouncements"
+      class="notification unseen"
+    >
       <div class="notification-overlay" />
       <router-link
-        v-if="shouldShowAnnouncements"
         class="button-unstyled -link extra-notification"
         :to="{ name: 'announcements' }"
       >
@@ -30,10 +34,12 @@
         {{ $tc('notifications.unread_announcements', unreadAnnouncementCount, { num: unreadAnnouncementCount }) }}
       </router-link>
     </div>
-    <div class="notification unseen">
+    <div
+      v-if="shouldShowFollowRequests"
+      class="notification unseen"
+    >
       <div class="notification-overlay" />
       <router-link
-        v-if="shouldShowFollowRequests"
         class="button-unstyled -link extra-notification"
         :to="{ name: 'friend-requests' }"
       >

From f153c688f618af05f0e750a9042581b62c0f98f0 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Fri, 18 Aug 2023 22:26:29 -0400
Subject: [PATCH 12/12] Add changelog

---
 changelog.d/extra-notifications.add | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 changelog.d/extra-notifications.add

diff --git a/changelog.d/extra-notifications.add b/changelog.d/extra-notifications.add
new file mode 100644
index 0000000000..90f21f5401
--- /dev/null
+++ b/changelog.d/extra-notifications.add
@@ -0,0 +1 @@
+Support showing extra notifications in the notifications column