Add notification grouping for reactions

app/javascript/flavours/glitch/api_types/notifications.ts

@@ -11,6 +11,7 @@ export const allNotificationTypes = [
   'follow',
   'follow_request',
   'favourite',
+  'reaction',
   'reblog',
   'mention',
   'poll',
@@ -24,6 +25,7 @@ export const allNotificationTypes = [
 
 export type NotificationWithStatusType =
   | 'favourite'
+  | 'reaction'
   | 'reblog'
   | 'status'
   | 'mention'

app/javascript/flavours/glitch/features/notifications_v2/components/notification_group.tsx

@@ -13,6 +13,7 @@ import { NotificationFollowRequest } from './notification_follow_request';
 import { NotificationMention } from './notification_mention';
 import { NotificationModerationWarning } from './notification_moderation_warning';
 import { NotificationPoll } from './notification_poll';
+import { NotificationReaction } from './notification_reaction';
 import { NotificationReblog } from './notification_reblog';
 import { NotificationSeveredRelationships } from './notification_severed_relationships';
 import { NotificationStatus } from './notification_status';
@@ -61,6 +62,14 @@ export const NotificationGroup: React.FC<{
         />
       );
       break;
+    case 'reaction':
+      content = (
+        <NotificationReaction
+          unread={unread}
+          notification={notificationGroup}
+        />
+      );
+      break;
     case 'severed_relationships':
       content = (
         <NotificationSeveredRelationships

app/javascript/flavours/glitch/features/notifications_v2/components/notification_reaction.tsx

@@ -0,0 +1,34 @@
+import { FormattedMessage } from 'react-intl';
+
+import MoodIcon from '@/material-icons/400-24px/mood.svg?react';
+import type { NotificationGroupReaction } from 'flavours/glitch/models/notification_group';
+
+import type { LabelRenderer } from './notification_group_with_status';
+import { NotificationGroupWithStatus } from './notification_group_with_status';
+
+const labelRenderer: LabelRenderer = (values) => (
+  <FormattedMessage
+    id='notification.reaction'
+    defaultMessage='{name} reacted to your status'
+    values={values}
+  />
+);
+
+export const NotificationReaction: React.FC<{
+  notification: NotificationGroupReaction;
+  unread: boolean;
+}> = ({ notification, unread }) => {
+  return (
+    <NotificationGroupWithStatus
+      type='reaction'
+      icon={MoodIcon}
+      iconId='react'
+      accountIds={notification.sampleAccountIds}
+      statusId={notification.statusId}
+      timestamp={notification.latest_page_notification_at}
+      count={notification.notifications_count}
+      labelRenderer={labelRenderer}
+      unread={unread}
+    />
+  );
+};

app/javascript/flavours/glitch/features/notifications_v2/filter_bar.tsx

@@ -5,6 +5,7 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import HomeIcon from '@/material-icons/400-24px/home-fill.svg?react';
 import InsertChartIcon from '@/material-icons/400-24px/insert_chart.svg?react';
+import MoodIcon from '@/material-icons/400-24px/mood.svg?react';
 import PersonAddIcon from '@/material-icons/400-24px/person_add.svg?react';
 import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
 import ReplyAllIcon from '@/material-icons/400-24px/reply_all.svg?react';
@@ -23,6 +24,10 @@ const tooltips = defineMessages({
     id: 'notifications.filter.favourites',
     defaultMessage: 'Favorites',
   },
+  reactions: {
+    id: 'notifications.filter.reactions',
+    defaultMessage: 'Reactions',
+  },
   boosts: { id: 'notifications.filter.boosts', defaultMessage: 'Boosts' },
   polls: { id: 'notifications.filter.polls', defaultMessage: 'Poll results' },
   follows: { id: 'notifications.filter.follows', defaultMessage: 'Follows' },
@@ -91,6 +96,14 @@ export const FilterBar: React.FC = () => {
         >
           <Icon id='star' icon={StarIcon} />
         </BarButton>
+        <BarButton
+          selectedFilter={selectedFilter}
+          type='reaction'
+          key='reaction'
+          title={intl.formatMessage(tooltips.reactions)}
+        >
+          <Icon id='react' icon={MoodIcon} />
+        </BarButton>
         <BarButton
           selectedFilter={selectedFilter}
           type='reblog'

app/javascript/flavours/glitch/models/notification_group.ts

@@ -31,6 +31,7 @@ interface BaseNotification<Type extends NotificationType>
 
 export type NotificationGroupFavourite =
   BaseNotificationWithStatus<'favourite'>;
+export type NotificationGroupReaction = BaseNotificationWithStatus<'reaction'>;
 export type NotificationGroupReblog = BaseNotificationWithStatus<'reblog'>;
 export type NotificationGroupStatus = BaseNotificationWithStatus<'status'>;
 export type NotificationGroupMention = BaseNotificationWithStatus<'mention'>;
@@ -76,6 +77,7 @@ export interface NotificationGroupAdminReport
 
 export type NotificationGroup =
   | NotificationGroupFavourite
+  | NotificationGroupReaction
   | NotificationGroupReblog
   | NotificationGroupStatus
   | NotificationGroupMention
@@ -120,6 +122,7 @@ export function createNotificationGroupFromJSON(
 
   switch (group.type) {
     case 'favourite':
+    case 'reaction':
     case 'reblog':
     case 'status':
     case 'mention':
@@ -179,6 +182,7 @@ export function createNotificationGroupFromNotificationJSON(
 
   switch (notification.type) {
     case 'favourite':
+    case 'reaction':
     case 'reblog':
     case 'status':
     case 'mention':

app/javascript/flavours/glitch/styles/components.scss

@@ -10943,6 +10943,10 @@ noscript {
     color: $gold-star;
   }
 
+  &--reaction &__icon {
+    color: $blurple-300;
+  }
+
   &--reblog &__icon {
     color: $valid-value-color;
   }

app/serializers/rest/notification_group_serializer.rb

@@ -15,7 +15,7 @@ class REST::NotificationGroupSerializer < ActiveModel::Serializer
   belongs_to :account_warning, key: :moderation_warning, if: :moderation_warning_event?, serializer: REST::AccountWarningSerializer
 
   def status_type?
-    [:favourite, :reblog, :status, :mention, :poll, :update].include?(object.type)
+    [:favourite, :reaction, :reblog, :status, :mention, :poll, :update].include?(object.type)
   end
 
   def report_type?

app/services/notify_service.rb

@@ -206,7 +206,7 @@ def call(recipient, type, activity)
   private
 
   def notification_group_key
-    return nil if @notification.filtered || %i(favourite reblog).exclude?(@notification.type)
+    return nil if @notification.filtered || %i(favourite reaction reblog).exclude?(@notification.type)
 
     type_prefix = "#{@notification.type}-#{@notification.target_status.id}"
     redis_key   = "notif-group/#{@recipient.id}/#{type_prefix}"