[Glitch] Add quote notifications to WebUI

Port 081d38679f to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

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

@@ -13,6 +13,7 @@ export const allNotificationTypes = [
   'favourite',
   'reblog',
   'mention',
+  'quote',
   'poll',
   'status',
   'update',
@@ -28,6 +29,7 @@ export type NotificationWithStatusType =
   | 'reblog'
   | 'status'
   | 'mention'
+  | 'quote'
   | 'poll'
   | 'update';
 

app/javascript/flavours/glitch/components/status_prepend.jsx

@@ -101,6 +101,14 @@ export default class StatusPrepend extends PureComponent {
           values={{ name: link }}
         />
       );
+    case 'quote':
+      return (
+        <FormattedMessage
+          id='notification.label.quote'
+          defaultMessage='{name} quoted your post'
+          values={{ name: link }}
+        />
+      );
     }
     return null;
   };

app/javascript/flavours/glitch/features/notifications/components/notification.jsx

@@ -8,8 +8,8 @@ import { withRouter } from 'react-router-dom';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-
 import FlagIcon from '@/material-icons/400-24px/flag-fill.svg?react';
+import FormatQuoteIcon from '@/material-icons/400-24px/format_quote.svg?react';
 import PersonIcon from '@/material-icons/400-24px/person-fill.svg?react';
 import PersonAddIcon from '@/material-icons/400-24px/person_add-fill.svg?react';
 import { Account } from 'flavours/glitch/components/account';
@@ -229,6 +229,31 @@ class Notification extends ImmutablePureComponent {
     );
   }
 
+  renderQuote (notification) {
+    return (
+      <StatusQuoteManager
+        containerId={notification.get('id')}
+        hidden={!!this.props.hidden}
+        id={notification.get('status')}
+        account={notification.get('account')}
+        prepend='quote'
+        muted
+        notification={notification}
+        onMoveDown={this.handleMoveDown}
+        onMoveUp={this.handleMoveUp}
+        onMention={this.props.onMention}
+        contextType='notifications'
+        getScrollPosition={this.props.getScrollPosition}
+        updateScrollBottom={this.props.updateScrollBottom}
+        cachedMediaWidth={this.props.cachedMediaWidth}
+        cacheMediaWidth={this.props.cacheMediaWidth}
+        onUnmount={this.props.onUnmount}
+        withDismiss
+        unread={this.props.unread}
+      />
+    );
+  }
+
   renderStatus (notification) {
     return (
       <StatusQuoteManager
@@ -431,6 +456,8 @@ class Notification extends ImmutablePureComponent {
       return this.renderFollowRequest(notification, account, link);
     case 'mention':
       return this.renderMention(notification);
+    case 'quote':
+      return this.renderQuote(notification);
     case 'favourite':
       return this.renderFavourite(notification);
     case 'reblog':

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

@@ -15,6 +15,7 @@ import { NotificationFollowRequest } from './notification_follow_request';
 import { NotificationMention } from './notification_mention';
 import { NotificationModerationWarning } from './notification_moderation_warning';
 import { NotificationPoll } from './notification_poll';
+import { NotificationQuote } from './notification_quote';
 import { NotificationReblog } from './notification_reblog';
 import { NotificationSeveredRelationships } from './notification_severed_relationships';
 import { NotificationStatus } from './notification_status';
@@ -91,6 +92,11 @@ export const NotificationGroup: React.FC<{
         <NotificationMention unread={unread} notification={notificationGroup} />
       );
       break;
+    case 'quote':
+      content = (
+        <NotificationQuote unread={unread} notification={notificationGroup} />
+      );
+      break;
     case 'follow':
       content = (
         <NotificationFollow unread={unread} notification={notificationGroup} />

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

@@ -0,0 +1,33 @@
+import { FormattedMessage } from 'react-intl';
+
+import FormatQuoteIcon from '@/material-icons/400-24px/format_quote.svg?react';
+import type { NotificationGroupQuote } from 'flavours/glitch/models/notification_group';
+
+import type { LabelRenderer } from './notification_group_with_status';
+import { NotificationWithStatus } from './notification_with_status';
+
+const quoteLabelRenderer: LabelRenderer = (displayName) => (
+  <FormattedMessage
+    id='notification.label.quote'
+    defaultMessage='{name} quoted your post'
+    values={{ name: displayName }}
+  />
+);
+
+export const NotificationQuote: React.FC<{
+  notification: NotificationGroupQuote;
+  unread: boolean;
+}> = ({ notification, unread }) => {
+  return (
+    <NotificationWithStatus
+      type='quote'
+      icon={FormatQuoteIcon}
+      iconId='quote'
+      accountIds={notification.sampleAccountIds}
+      count={notification.notifications_count}
+      statusId={notification.statusId}
+      labelRenderer={quoteLabelRenderer}
+      unread={unread}
+    />
+  );
+};

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

@@ -36,6 +36,7 @@ export type NotificationGroupFavourite =
 export type NotificationGroupReblog = BaseNotificationWithStatus<'reblog'>;
 export type NotificationGroupStatus = BaseNotificationWithStatus<'status'>;
 export type NotificationGroupMention = BaseNotificationWithStatus<'mention'>;
+export type NotificationGroupQuote = BaseNotificationWithStatus<'quote'>;
 export type NotificationGroupPoll = BaseNotificationWithStatus<'poll'>;
 export type NotificationGroupUpdate = BaseNotificationWithStatus<'update'>;
 export type NotificationGroupFollow = BaseNotification<'follow'>;
@@ -87,6 +88,7 @@ export type NotificationGroup =
   | NotificationGroupReblog
   | NotificationGroupStatus
   | NotificationGroupMention
+  | NotificationGroupQuote
   | NotificationGroupPoll
   | NotificationGroupUpdate
   | NotificationGroupFollow
@@ -137,6 +139,7 @@ export function createNotificationGroupFromJSON(
     case 'reblog':
     case 'status':
     case 'mention':
+    case 'quote':
     case 'poll':
     case 'update': {
       const { status_id: statusId, ...groupWithoutStatus } = group;
@@ -209,6 +212,7 @@ export function createNotificationGroupFromNotificationJSON(
     case 'reblog':
     case 'status':
     case 'mention':
+    case 'quote':
     case 'poll':
     case 'update':
       return {