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] 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 00000000..0bf904ba
--- /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 00000000..11eeb937
--- /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 d499d3d6..0ed1571d 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 633efca6..d40c930a 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 a7ab451f..d58fd2fa 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",