Add unread style

app/javascript/mastodon/features/notifications/components/moderation_warning.tsx

@@ -1,5 +1,7 @@
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
+import classNames from 'classnames';
+
 import GavelIcon from '@/material-icons/400-24px/gavel.svg?react';
 import { Icon } from 'mastodon/components/icon';
 
@@ -46,9 +48,15 @@ interface Props {
     | 'suspend';
   id: string;
   hidden: boolean;
+  unread: boolean;
 }
 
-export const ModerationWarning: React.FC<Props> = ({ action, id, hidden }) => {
+export const ModerationWarning: React.FC<Props> = ({
+  action,
+  id,
+  hidden,
+  unread,
+}) => {
   const intl = useIntl();
 
   if (hidden) {
@@ -56,12 +64,26 @@ export const ModerationWarning: React.FC<Props> = ({ action, id, hidden }) => {
   }
 
   return (
-    <div className='notification-group notification-group--link notification-group--moderation-warning focusable' tabIndex='0'>
+    <div
-      <div className='notification-group__icon'><Icon id='warning' icon={GavelIcon} /></div>
+      role='button'
+      className={classNames(
+        'notification-group notification-group--link notification-group--moderation-warning focusable',
+        { 'notification-group--unread': unread },
+      )}
+      tabIndex='0'
+    >
+      <div className='notification-group__icon'>
+        <Icon id='warning' icon={GavelIcon} />
+      </div>
 
       <div className='notification-group__main'>
         <p>{intl.formatMessage(messages[action])}</p>
-        <a href={`/disputes/strikes/${id}`} target='_blank' rel='noopener noreferrer' className='link-button'>
+        <a
+          href={`/disputes/strikes/${id}`}
+          target='_blank'
+          rel='noopener noreferrer'
+          className='link-button'
+        >
           <FormattedMessage
             id='notification.moderation-warning.learn_more'
             defaultMessage='Learn more'

app/javascript/mastodon/features/notifications/components/relationships_severance_event.jsx

@@ -2,6 +2,8 @@ import PropTypes from 'prop-types';
 
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
+import classNames from 'classnames';
+
 import HeartBrokenIcon from '@/material-icons/400-24px/heart_broken-fill.svg?react';
 import { Icon }  from 'mastodon/components/icon';
 import { domain } from 'mastodon/initial_state';
@@ -13,7 +15,7 @@ const messages = defineMessages({
   user_domain_block: { id: 'notification.relationships_severance_event.user_domain_block', defaultMessage: 'You have blocked {target}, removing {followersCount} of your followers and {followingCount, plural, one {# account} other {# accounts}} you follow.' },
 });
 
-export const RelationshipsSeveranceEvent = ({ type, target, followingCount, followersCount, hidden }) => {
+export const RelationshipsSeveranceEvent = ({ type, target, followingCount, followersCount, hidden, unread }) => {
   const intl = useIntl();
 
   if (hidden) {
@@ -21,7 +23,7 @@ export const RelationshipsSeveranceEvent = ({ type, target, followingCount, foll
   }
 
   return (
-    <div className='notification-group notification-group--link notification-group--relationships-severance-event focusable' tabIndex='0'>
+    <div role='button' className={classNames('notification-group notification-group--link notification-group--relationships-severance-event focusable', { 'notification-group--unread': unread })} tabIndex='0'>
       <div className='notification-group__icon'><Icon id='heart_broken' icon={HeartBrokenIcon} /></div>
 
       <div className='notification-group__main'>
@@ -42,4 +44,5 @@ RelationshipsSeveranceEvent.propTypes = {
   followersCount: PropTypes.number.isRequired,
   followingCount: PropTypes.number.isRequired,
   hidden: PropTypes.bool,
+  unread: PropTypes.bool,
 };

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

@@ -9,7 +9,7 @@ const AvatarWrapper: React.FC<{ accountId: string }> = ({ accountId }) => {
   if (!account) return null;
 
   return (
-    <Link to={`/@${account.get('acct')}`} title={`@${account.get('acct')}`}>
+    <Link to={`/@${account.acct}`} title={`@${account.acct}`}>
       <Avatar account={account} size={28} />
     </Link>
   );
@@ -19,7 +19,7 @@ export const AvatarGroup: React.FC<{ accountIds: string[] }> = ({
   accountIds,
 }) => (
   <div className='notification-group__avatar-group'>
-    {accountIds.map((accountId) => (
+    {accountIds.slice(0, 7).map((accountId) => (
       <AvatarWrapper key={accountId} accountId={accountId} />
     ))}
   </div>

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

@@ -27,7 +27,7 @@ export const NamesList: React.FC<{ accountIds: string[]; total: number }> = ({
 
   return (
     <FormattedMessage
-      id=''
+      id='name_and_others'
       defaultMessage='{name} and {count, plural, one {# other} other {# others}}'
       values={{ name: displayedName, count: total - 1 }}
     />

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

@@ -1,33 +1,37 @@
 import { FormattedMessage, useIntl, defineMessages } from 'react-intl';
 
+import classNames from 'classnames';
+
 import FlagIcon from '@/material-icons/400-24px/flag-fill.svg?react';
 import { Icon } from 'mastodon/components/icon';
 import { RelativeTimestamp } from 'mastodon/components/relative_timestamp';
 import type { NotificationGroupAdminReport } from 'mastodon/models/notification_group';
 import { useAppSelector } from 'mastodon/store';
 
-import { NamesList } from './names_list';
-
 // This needs to be kept in sync with app/models/report.rb
 const messages = defineMessages({
   other: {
-    id: 'report_notification.categories.other',
+    id: 'report_notification.categories.other_sentence',
-    defaultMessage: 'Other',
+    defaultMessage: 'other',
+  },
+  spam: {
+    id: 'report_notification.categories.spam_sentence',
+    defaultMessage: 'spam',
   },
-  spam: { id: 'report_notification.categories.spam', defaultMessage: 'Spam' },
   legal: {
-    id: 'report_notification.categories.legal',
+    id: 'report_notification.categories.legal_sentence',
-    defaultMessage: 'Legal',
+    defaultMessage: 'illegal content',
   },
   violation: {
-    id: 'report_notification.categories.violation',
+    id: 'report_notification.categories.violation_sentence',
-    defaultMessage: 'Rule violation',
+    defaultMessage: 'rule violation',
   },
 });
 
 export const NotificationAdminReport: React.FC<{
   notification: NotificationGroupAdminReport;
-}> = ({ notification, notification: { report } }) => {
+  unread: boolean;
+}> = ({ notification, notification: { report }, unread }) => {
   const intl = useIntl();
   const targetAccount = useAppSelector((state) =>
     state.getIn(['accounts', report.target_account.id]),
@@ -97,8 +101,10 @@ export const NotificationAdminReport: React.FC<{
       href={`/admin/reports/${report.id}`}
       target='_blank'
       rel='noopener noreferrer'
-      className='notification-group notification-group--link notification-group--admin-report focusable'
+      className={classNames(
-      tabIndex={0}
+        'notification-group notification-group--link notification-group--admin-report focusable',
+        { 'notification-group--unread': unread },
+      )}
     >
       <div className='notification-group__icon'>
         <Icon id='flag' icon={FlagIcon} />

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

@@ -16,7 +16,8 @@ const labelRenderer: LabelRenderer = (values) => (
 
 export const NotificationAdminSignUp: React.FC<{
   notification: NotificationGroupAdminSignUp;
-}> = ({ notification }) => (
+  unread: boolean;
+}> = ({ notification, unread }) => (
   <NotificationGroupWithStatus
     type='admin-sign-up'
     icon={PersonAddIcon}
@@ -24,5 +25,6 @@ export const NotificationAdminSignUp: React.FC<{
     timestamp={notification.latest_page_notification_at}
     count={notification.notifications_count}
     labelRenderer={labelRenderer}
+    unread={unread}
   />
 );

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

@@ -16,7 +16,8 @@ const labelRenderer: LabelRenderer = (values) => (
 
 export const NotificationFavourite: React.FC<{
   notification: NotificationGroupFavourite;
-}> = ({ notification }) => (
+  unread: boolean;
+}> = ({ notification, unread }) => (
   <NotificationGroupWithStatus
     type='favourite'
     icon={StarIcon}
@@ -25,5 +26,6 @@ export const NotificationFavourite: React.FC<{
     timestamp={notification.latest_page_notification_at}
     count={notification.notifications_count}
     labelRenderer={labelRenderer}
+    unread={unread}
   />
 );

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

@@ -16,7 +16,8 @@ const labelRenderer: LabelRenderer = (values) => (
 
 export const NotificationFollow: React.FC<{
   notification: NotificationGroupFollow;
-}> = ({ notification }) => (
+  unread: boolean;
+}> = ({ notification, unread }) => (
   <NotificationGroupWithStatus
     type='follow'
     icon={PersonAddIcon}
@@ -24,5 +25,6 @@ export const NotificationFollow: React.FC<{
     timestamp={notification.latest_page_notification_at}
     count={notification.notifications_count}
     labelRenderer={labelRenderer}
+    unread={unread}
   />
 );

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

@@ -16,7 +16,8 @@ const labelRenderer: LabelRenderer = (values) => (
 
 export const NotificationFollowRequest: React.FC<{
   notification: NotificationGroupFollowRequest;
-}> = ({ notification }) => (
+  unread: boolean;
+}> = ({ notification, unread }) => (
   <NotificationGroupWithStatus
     type='follow-request'
     icon={PersonAddIcon}
@@ -24,5 +25,6 @@ export const NotificationFollowRequest: React.FC<{
     timestamp={notification.latest_page_notification_at}
     count={notification.notifications_count}
     labelRenderer={labelRenderer}
+    unread={unread}
   />
 );

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

@@ -5,7 +5,6 @@ import { HotKeys } from 'react-hotkeys';
 import type { NotificationGroup as NotificationGroupModel } from 'mastodon/models/notification_group';
 import { useAppSelector } from 'mastodon/store';
 
-
 import { NotificationAdminReport } from './notification_admin_report';
 import { NotificationAdminSignUp } from './notification_admin_sign_up';
 import { NotificationFavourite } from './notification_favourite';
@@ -24,22 +23,25 @@ export const NotificationGroup: React.FC<{
   unread: boolean;
   onMoveUp: unknown;
   onMoveDown: unknown;
-}> = ({ notificationGroupId, onMoveUp, onMoveDown }) => {
+}> = ({ notificationGroupId, unread, onMoveUp, onMoveDown }) => {
   const notificationGroup = useAppSelector((state) =>
     state.notificationsGroups.groups.find(
       (item) => item.type !== 'gap' && item.group_key === notificationGroupId,
     ),
   );
 
-  const handlers = useMemo(() => ({
+  const handlers = useMemo(
-    moveUp: () => {
+    () => ({
-      onMoveUp(notificationGroupId);
+      moveUp: () => {
-    },
+        onMoveUp(notificationGroupId);
+      },
 
-    moveDown: () => {
+      moveDown: () => {
-      onMoveDown(notificationGroupId);
+        onMoveDown(notificationGroupId);
-    },
+      },
-  }), [notificationGroupId, onMoveUp, onMoveDown]);
+    }),
+    [notificationGroupId, onMoveUp, onMoveDown],
+  );
 
   if (!notificationGroup || notificationGroup.type === 'gap') return null;
 
@@ -47,48 +49,86 @@ export const NotificationGroup: React.FC<{
 
   switch (notificationGroup.type) {
     case 'reblog':
-      content = <NotificationReblog notification={notificationGroup} />;
+      content = (
+        <NotificationReblog unread={unread} notification={notificationGroup} />
+      );
       break;
     case 'favourite':
-      content = <NotificationFavourite notification={notificationGroup} />;
+      content = (
+        <NotificationFavourite
+          unread={unread}
+          notification={notificationGroup}
+        />
+      );
       break;
     case 'severed_relationships':
-      content = <NotificationSeveredRelationships notification={notificationGroup} />;
+      content = (
+        <NotificationSeveredRelationships
+          unread={unread}
+          notification={notificationGroup}
+        />
+      );
       break;
     case 'mention':
-      content = <NotificationMention notification={notificationGroup} />;
+      content = (
+        <NotificationMention unread={unread} notification={notificationGroup} />
+      );
       break;
     case 'follow':
-      content = <NotificationFollow notification={notificationGroup} />;
+      content = (
+        <NotificationFollow unread={unread} notification={notificationGroup} />
+      );
       break;
     case 'follow_request':
-      content = <NotificationFollowRequest notification={notificationGroup} />;
+      content = (
+        <NotificationFollowRequest
+          unread={unread}
+          notification={notificationGroup}
+        />
+      );
       break;
     case 'poll':
-      content = <NotificationPoll notification={notificationGroup} />;
+      content = (
+        <NotificationPoll unread={unread} notification={notificationGroup} />
+      );
       break;
     case 'status':
-      content = <NotificationStatus notification={notificationGroup} />;
+      content = (
+        <NotificationStatus unread={unread} notification={notificationGroup} />
+      );
       break;
     case 'update':
-      content = <NotificationUpdate notification={notificationGroup} />;
+      content = (
+        <NotificationUpdate unread={unread} notification={notificationGroup} />
+      );
       break;
     case 'admin.sign_up':
-      content = <NotificationAdminSignUp notification={notificationGroup} />;
+      content = (
+        <NotificationAdminSignUp
+          unread={unread}
+          notification={notificationGroup}
+        />
+      );
       break;
     case 'admin.report':
-      content = <NotificationAdminReport notification={notificationGroup} />;
+      content = (
+        <NotificationAdminReport
+          unread={unread}
+          notification={notificationGroup}
+        />
+      );
       break;
     case 'moderation_warning':
-      content = <NotificationModerationWarning notification={notificationGroup} />;
+      content = (
+        <NotificationModerationWarning
+          unread={unread}
+          notification={notificationGroup}
+        />
+      );
       break;
     default:
       return null;
   }
 
-  return (
+  return <HotKeys handlers={handlers}>{content}</HotKeys>;
-    <HotKeys handlers={handlers}>
-      {content}
-    </HotKeys>
-  );
 };

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

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 
-import { FormattedMessage } from 'react-intl';
+import classNames from 'classnames';
 
 import type { IconProp } from 'mastodon/components/icon';
 import { Icon } from 'mastodon/components/icon';
@@ -22,6 +22,7 @@ export const NotificationGroupWithStatus: React.FC<{
   timestamp: string;
   labelRenderer: LabelRenderer;
   type: string;
+  unread: boolean;
 }> = ({
   icon,
   timestamp,
@@ -30,6 +31,7 @@ export const NotificationGroupWithStatus: React.FC<{
   statusId,
   labelRenderer,
   type,
+  unread,
 }) => {
   const label = useMemo(
     () =>
@@ -41,7 +43,11 @@ export const NotificationGroupWithStatus: React.FC<{
 
   return (
     <div
-      className={`notification-group focusable notification-group--${type}`}
+      role='button'
+      className={classNames(
+        `notification-group focusable notification-group--${type}`,
+        { 'notification-group--unread': unread },
+      )}
       tabIndex='0'
     >
       <div className='notification-group__icon'>

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

@@ -16,7 +16,8 @@ const labelRenderer: LabelRenderer = (values) => (
 
 export const NotificationMention: React.FC<{
   notification: NotificationGroupMention;
-}> = ({ notification }) => (
+  unread: boolean;
+}> = ({ notification, unread }) => (
   <NotificationWithStatus
     type='mention'
     icon={ReplyIcon}
@@ -24,5 +25,6 @@ export const NotificationMention: React.FC<{
     count={notification.notifications_count}
     statusId={notification.statusId}
     labelRenderer={labelRenderer}
+    unread={unread}
   />
 );

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

@@ -3,9 +3,7 @@ import type { NotificationGroupModerationWarning } from 'mastodon/models/notific
 
 export const NotificationModerationWarning: React.FC<{
   notification: NotificationGroupModerationWarning;
-}> = ({ notification: { event } }) => (
+  unread: boolean;
-  <ModerationWarning
+}> = ({ notification: { event }, unread }) => (
-    action={event.action}
+  <ModerationWarning action={event.action} id={event.id} unread={unread} />
-    id={event.id}
-  />
 );

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

@@ -1,26 +1,40 @@
 import { FormattedMessage } from 'react-intl';
 
 import BarChart4BarsIcon from '@/material-icons/400-20px/bar_chart_4_bars.svg?react';
+import { me } from 'mastodon/initial_state';
 import type { NotificationGroupPoll } from 'mastodon/models/notification_group';
 
 import { NotificationWithStatus } from './notification_with_status';
 
-const labelRenderer = () => (
+const labelRendererOther = () => (
   <FormattedMessage
     id='notification.poll'
     defaultMessage='A poll you have voted in has ended'
   />
 );
 
+const labelRendererOwn = () => (
+  <FormattedMessage
+    id='notification.own_poll'
+    defaultMessage='Your poll has ended'
+  />
+);
+
 export const NotificationPoll: React.FC<{
   notification: NotificationGroupPoll;
-}> = ({ notification }) => (
+  unread: boolean;
+}> = ({ notification, unread }) => (
   <NotificationWithStatus
     type='poll'
     icon={BarChart4BarsIcon}
     accountIds={notification.sampleAccountsIds}
     count={notification.notifications_count}
     statusId={notification.statusId}
-    labelRenderer={labelRenderer}
+    labelRenderer={
+      notification.sampleAccountsIds[0] === me
+        ? labelRendererOwn
+        : labelRendererOther
+    }
+    unread={unread}
   />
 );

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

@@ -16,7 +16,8 @@ const labelRenderer: LabelRenderer = (values) => (
 
 export const NotificationReblog: React.FC<{
   notification: NotificationGroupReblog;
-}> = ({ notification }) => (
+  unread: boolean;
+}> = ({ notification, unread }) => (
   <NotificationGroupWithStatus
     type='reblog'
     icon={RepeatIcon}
@@ -25,5 +26,6 @@ export const NotificationReblog: React.FC<{
     timestamp={notification.latest_page_notification_at}
     count={notification.notifications_count}
     labelRenderer={labelRenderer}
+    unread={unread}
   />
 );

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

@@ -3,11 +3,13 @@ import type { NotificationGroupSeveredRelationships } from 'mastodon/models/noti
 
 export const NotificationSeveredRelationships: React.FC<{
   notification: NotificationGroupSeveredRelationships;
-}> = ({ notification: { event } }) => (
+  unread: boolean;
+}> = ({ notification: { event }, unread }) => (
   <RelationshipsSeveranceEvent
     type={event.type}
     target={event.target_name}
     followersCount={event.followers_count}
     followingCount={event.following_count}
+    unread={unread}
   />
 );

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

@@ -16,7 +16,8 @@ const labelRenderer: LabelRenderer = (values) => (
 
 export const NotificationStatus: React.FC<{
   notification: NotificationGroupStatus;
-}> = ({ notification }) => (
+  unread: boolean;
+}> = ({ notification, unread }) => (
   <NotificationWithStatus
     type='status'
     icon={NotificationsActiveIcon}
@@ -24,5 +25,6 @@ export const NotificationStatus: React.FC<{
     count={notification.notifications_count}
     statusId={notification.statusId}
     labelRenderer={labelRenderer}
+    unread={unread}
   />
 );

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

@@ -16,7 +16,8 @@ const labelRenderer: LabelRenderer = (values) => (
 
 export const NotificationUpdate: React.FC<{
   notification: NotificationGroupUpdate;
-}> = ({ notification }) => (
+  unread: boolean;
+}> = ({ notification, unread }) => (
   <NotificationWithStatus
     type='update'
     icon={EditIcon}
@@ -24,5 +25,6 @@ export const NotificationUpdate: React.FC<{
     count={notification.notifications_count}
     statusId={notification.statusId}
     labelRenderer={labelRenderer}
+    unread={unread}
   />
 );

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

@@ -2,6 +2,7 @@ import { useMemo } from 'react';
 
 import type { IconProp } from 'mastodon/components/icon';
 import { Icon } from 'mastodon/components/icon';
+import classNames from 'classnames';
 import Status from 'mastodon/containers/status_container';
 
 import { NamesList } from './names_list';
@@ -14,7 +15,8 @@ export const NotificationWithStatus: React.FC<{
   statusId: string;
   count: number;
   labelRenderer: LabelRenderer;
-}> = ({ icon, accountIds, statusId, count, labelRenderer, type }) => {
+  unread: boolean;
+}> = ({ icon, accountIds, statusId, count, labelRenderer, type, unread }) => {
   const label = useMemo(
     () =>
       labelRenderer({
@@ -25,7 +27,11 @@ export const NotificationWithStatus: React.FC<{
 
   return (
     <div
-      className={`notification-ungrouped focusable notification-ungrouped--${type}`}
+      role='button'
+      className={classNames(
+        `notification-ungrouped focusable notification-ungrouped--${type}`,
+        { 'notification-ungrouped--unread': unread },
+      )}
       tabIndex='0'
     >
       <div className='notification-ungrouped__header'>

app/javascript/mastodon/locales/en.json

@@ -1,5 +1,4 @@
 {
-  "a9ng3b": "{name} and {count, plural, one {# other} other {# others}}",
   "about.blocks": "Moderated servers",
   "about.contact": "Contact:",
   "about.disclaimer": "Mastodon is free, open-source software, and a trademark of Mastodon gGmbH.",
@@ -444,6 +443,7 @@
   "mute_modal.title": "Mute user?",
   "mute_modal.you_wont_see_mentions": "You won't see posts that mention them.",
   "mute_modal.you_wont_see_posts": "They can still see your posts, but you won't see theirs.",
+  "name_and_others": "{name} and {count, plural, one {# other} other {# others}}",
   "navigation_bar.about": "About",
   "navigation_bar.advanced_interface": "Open in advanced web interface",
   "navigation_bar.blocks": "Blocked users",

app/javascript/styles/mastodon/components.scss

@@ -1612,13 +1612,17 @@ body > [data-popper-placement] {
   }
 }
 
-.status__wrapper-direct {
+.status__wrapper-direct,
+.notification-group--unread,
+.notification-ungrouped--unread {
   background: rgba($ui-highlight-color, 0.05);
 
   &:focus {
-    background: rgba($ui-highlight-color, 0.05);
+    background: rgba($ui-highlight-color, 0.1);
   }
+}
 
+.status__wrapper-direct {
   .status__prepend {
     color: $highlight-text-color;
   }