diff --git a/app/javascript/mastodon/features/notifications_v2/components/notification_follow.tsx b/app/javascript/mastodon/features/notifications_v2/components/notification_follow.tsx
index 0ed96ae636..3760096d44 100644
--- a/app/javascript/mastodon/features/notifications_v2/components/notification_follow.tsx
+++ b/app/javascript/mastodon/features/notifications_v2/components/notification_follow.tsx
@@ -1,7 +1,11 @@
import { FormattedMessage } from 'react-intl';
import PersonAddIcon from '@/material-icons/400-24px/person_add-fill.svg?react';
+import { FollowersCounter } from 'mastodon/components/counters';
+import { FollowButton } from 'mastodon/components/follow_button';
+import { ShortNumber } from 'mastodon/components/short_number';
import type { NotificationGroupFollow } from 'mastodon/models/notification_group';
+import { useAppSelector } from 'mastodon/store';
import type { LabelRenderer } from './notification_group_with_status';
import { NotificationGroupWithStatus } from './notification_group_with_status';
@@ -14,18 +18,45 @@ const labelRenderer: LabelRenderer = (values) => (
/>
);
+const FollowerCount: React.FC<{ accountId: string }> = ({ accountId }) => {
+ const account = useAppSelector((s) => s.accounts.get(accountId));
+
+ if (!account) return null;
+
+ return (
+
+ );
+};
+
export const NotificationFollow: React.FC<{
notification: NotificationGroupFollow;
unread: boolean;
-}> = ({ notification, unread }) => (
-
-);
+}> = ({ notification, unread }) => {
+ let actions: JSX.Element | undefined;
+ let additionalContent: JSX.Element | undefined;
+
+ if (notification.sampleAccountIds.length === 1) {
+ // only display those if the group contains 1 account, otherwise it does not makes sense
+ const account = notification.sampleAccountIds[0];
+
+ if (account) {
+ actions = ;
+ additionalContent = ;
+ }
+ }
+
+ return (
+
+ );
+};
diff --git a/app/javascript/mastodon/features/notifications_v2/components/notification_follow_request.tsx b/app/javascript/mastodon/features/notifications_v2/components/notification_follow_request.tsx
index 8c9837efa3..281bfd94af 100644
--- a/app/javascript/mastodon/features/notifications_v2/components/notification_follow_request.tsx
+++ b/app/javascript/mastodon/features/notifications_v2/components/notification_follow_request.tsx
@@ -46,7 +46,7 @@ export const NotificationFollowRequest: React.FC<{
}, [dispatch, notification.sampleAccountIds]);
const actions = (
-
+ <>
-
+ >
);
return (
diff --git a/app/javascript/mastodon/features/notifications_v2/components/notification_group_with_status.tsx b/app/javascript/mastodon/features/notifications_v2/components/notification_group_with_status.tsx
index 2af73c8362..8f555956e0 100644
--- a/app/javascript/mastodon/features/notifications_v2/components/notification_group_with_status.tsx
+++ b/app/javascript/mastodon/features/notifications_v2/components/notification_group_with_status.tsx
@@ -31,6 +31,7 @@ export const NotificationGroupWithStatus: React.FC<{
labelSeeMoreHref?: string;
type: string;
unread: boolean;
+ additionalContent?: JSX.Element;
}> = ({
icon,
iconId,
@@ -43,6 +44,7 @@ export const NotificationGroupWithStatus: React.FC<{
labelSeeMoreHref,
type,
unread,
+ additionalContent,
}) => {
const dispatch = useAppDispatch();
@@ -92,7 +94,9 @@ export const NotificationGroupWithStatus: React.FC<{
- {actions}
+ {actions && (
+
{actions}
+ )}
@@ -106,6 +110,12 @@ export const NotificationGroupWithStatus: React.FC<{
)}
+
+ {additionalContent && (
+
+ {additionalContent}
+
+ )}
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 08f43c59cb..895762b803 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -10486,6 +10486,13 @@ noscript {
gap: 8px;
flex: 1 1 auto;
overflow: hidden;
+ container-type: inline-size;
+
+ @container (width < 350px) {
+ &__header time {
+ display: none;
+ }
+ }
&__header {
display: flex;
@@ -10525,6 +10532,11 @@ noscript {
border-radius: 8px;
padding: 8px;
}
+
+ &__additional-content {
+ color: $darker-text-color;
+ margin-top: -8px; // to offset the parent's `gap` property
+ }
}
&__avatar-group {