Add year in review feature to web UI (#32709)

app/javascript/mastodon/features/notifications_v2/components/notification_annual_report.tsx

@@ -0,0 +1,59 @@
+import { useCallback } from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
+import classNames from 'classnames';
+
+import CelebrationIcon from '@/material-icons/400-24px/celebration.svg?react';
+import { openModal } from 'mastodon/actions/modal';
+import { Icon } from 'mastodon/components/icon';
+import type { NotificationGroupAnnualReport } from 'mastodon/models/notification_group';
+import { useAppDispatch } from 'mastodon/store';
+
+export const NotificationAnnualReport: React.FC<{
+  notification: NotificationGroupAnnualReport;
+  unread: boolean;
+}> = ({ notification: { annualReport }, unread }) => {
+  const dispatch = useAppDispatch();
+  const year = annualReport.year;
+
+  const handleClick = useCallback(() => {
+    dispatch(
+      openModal({
+        modalType: 'ANNUAL_REPORT',
+        modalProps: { year },
+      }),
+    );
+  }, [dispatch, year]);
+
+  return (
+    <div
+      role='button'
+      className={classNames(
+        'notification-group notification-group--link notification-group--annual-report focusable',
+        { 'notification-group--unread': unread },
+      )}
+      tabIndex={0}
+    >
+      <div className='notification-group__icon'>
+        <Icon id='celebration' icon={CelebrationIcon} />
+      </div>
+
+      <div className='notification-group__main'>
+        <p>
+          <FormattedMessage
+            id='notification.annual_report.message'
+            defaultMessage="Your {year} #Wrapstodon awaits! Unveil your year's highlights and memorable moments on Mastodon!"
+            values={{ year }}
+          />
+        </p>
+        <button onClick={handleClick} className='link-button'>
+          <FormattedMessage
+            id='notification.annual_report.view'
+            defaultMessage='View #Wrapstodon'
+          />
+        </button>
+      </div>
+    </div>
+  );
+};

app/javascript/mastodon/features/notifications_v2/components/notification_group.tsx

@@ -9,6 +9,7 @@ import { useAppSelector, useAppDispatch } from 'mastodon/store';
 
 import { NotificationAdminReport } from './notification_admin_report';
 import { NotificationAdminSignUp } from './notification_admin_sign_up';
+import { NotificationAnnualReport } from './notification_annual_report';
 import { NotificationFavourite } from './notification_favourite';
 import { NotificationFollow } from './notification_follow';
 import { NotificationFollowRequest } from './notification_follow_request';
@@ -143,6 +144,14 @@ export const NotificationGroup: React.FC<{
         />
       );
       break;
+    case 'annual_report':
+      content = (
+        <NotificationAnnualReport
+          unread={unread}
+          notification={notificationGroup}
+        />
+      );
+      break;
     default:
       return null;
   }