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 {