Merge branch 'tusooa/extra-notifications' into 'develop'

Extra notifications See merge request pleroma/pleroma-fe!1853
2023-10-31 11:29:04 +00:00 · 2023-10-31 11:29:04 +00:00 · 954d03150f
--- a/changelog.d/extra-notifications.add
+++ b/changelog.d/extra-notifications.add
@ -0,0 +1 @@
+Support showing extra notifications in the notifications column
--- a/src/components/extra_notifications/extra_notifications.js
+++ 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
--- a/src/components/extra_notifications/extra_notifications.vue
+++ 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>
--- 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"
    />
--- 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 },
--- 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 () {
--- 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"
@ -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"
--- 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>

--- 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",
--- 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
 }
--- 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,

--- 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)
+}
				`@ -0,0 +1 @@`
				`Support showing extra notifications in the notifications column`