Merge remote-tracking branch 'parent/main' into upstream-20240806

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

@@ -1,5 +1,6 @@
 import { FormattedMessage } from 'react-intl';
 
+import AlternateEmailIcon from '@/material-icons/400-24px/alternate_email.svg?react';
 import ReplyIcon from '@/material-icons/400-24px/reply-fill.svg?react';
 import type { StatusVisibility } from 'mastodon/api_types/statuses';
 import type { NotificationGroupMention } from 'mastodon/models/notification_group';
@@ -39,7 +40,7 @@ export const NotificationMention: React.FC<{
   return (
     <NotificationWithStatus
       type='mention'
-      icon={ReplyIcon}
+      icon={statusVisibility === 'direct' ? AlternateEmailIcon : ReplyIcon}
       iconId='reply'
       accountIds={notification.sampleAccountIds}
       count={notification.notifications_count}

app/javascript/mastodon/features/notifications_v2/index.tsx

@@ -43,7 +43,10 @@ import Column from '../../components/column';
 import { ColumnHeader } from '../../components/column_header';
 import { LoadGap } from '../../components/load_gap';
 import ScrollableList from '../../components/scrollable_list';
-import { FilteredNotificationsBanner } from '../notifications/components/filtered_notifications_banner';
+import {
+  FilteredNotificationsBanner,
+  FilteredNotificationsIconButton,
+} from '../notifications/components/filtered_notifications_banner';
 import NotificationsPermissionBanner from '../notifications/components/notifications_permission_banner';
 import ColumnSettingsContainer from '../notifications/containers/column_settings_container';
 
@@ -306,16 +309,21 @@ export const Notifications: React.FC<{
     <NotSignedInIndicator />
   );
 
-  const extraButton = canMarkAsRead ? (
-    <button
-      aria-label={intl.formatMessage(messages.markAsRead)}
-      title={intl.formatMessage(messages.markAsRead)}
-      onClick={handleMarkAsRead}
-      className='column-header__button'
-    >
-      <Icon id='done-all' icon={DoneAllIcon} />
-    </button>
-  ) : null;
+  const extraButton = (
+    <>
+      <FilteredNotificationsIconButton className='column-header__button' />
+      {canMarkAsRead && (
+        <button
+          aria-label={intl.formatMessage(messages.markAsRead)}
+          title={intl.formatMessage(messages.markAsRead)}
+          onClick={handleMarkAsRead}
+          className='column-header__button'
+        >
+          <Icon id='done-all' icon={DoneAllIcon} />
+        </button>
+      )}
+    </>
+  );
 
   return (
     <Column