2 files changed, 161 insertions, 0 deletions
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 @@
+<template>
+  <div class="ExtraNotifications">
+    <div
+      v-if="shouldShowChats"
+      class="notification unseen"
+    >
+      <div class="notification-overlay" />
+      <router-link
+        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>
+    <div
+      v-if="shouldShowAnnouncements"
+      class="notification unseen"
+    >
+      <div class="notification-overlay" />
+      <router-link
+        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>
+    <div
+      v-if="shouldShowFollowRequests"
+      class="notification unseen"
+    >
+      <div class="notification-overlay" />
+      <router-link
+        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>
+    <i18n-t
+      v-if="shouldShowCustomizationTip"
+      tag="span"
+      class="notification tip extra-notification"
+      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>
+
+<script src="./extra_notifications.js" />
+
+<style lang="scss">
+@import "../../variables";
+
+.ExtraNotifications {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+
+  .notification {
+    width: 100%;
+    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;
+  }
+
+  .icon {
+    margin-right: 0.5em;
+  }
+
+  .tip {
+    display: inline;
+  }
+}
+</style>