diff --git a/app/javascript/mastodon/features/home_timeline/components/inline_follow_suggestions.jsx b/app/javascript/mastodon/features/home_timeline/components/inline_follow_suggestions.jsx
index f76526e045..c39b43bade 100644
--- a/app/javascript/mastodon/features/home_timeline/components/inline_follow_suggestions.jsx
+++ b/app/javascript/mastodon/features/home_timeline/components/inline_follow_suggestions.jsx
@@ -21,6 +21,7 @@ import { DisplayName } from 'mastodon/components/display_name';
import { Icon } from 'mastodon/components/icon';
import { IconButton } from 'mastodon/components/icon_button';
import { VerifiedBadge } from 'mastodon/components/verified_badge';
+import { domain } from 'mastodon/initial_state';
const messages = defineMessages({
follow: { id: 'account.follow', defaultMessage: 'Follow' },
@@ -28,27 +29,43 @@ const messages = defineMessages({
previous: { id: 'lightbox.previous', defaultMessage: 'Previous' },
next: { id: 'lightbox.next', defaultMessage: 'Next' },
dismiss: { id: 'follow_suggestions.dismiss', defaultMessage: "Don't show again" },
+ friendsOfFriendsHint: { id: 'follow_suggestions.hints.friends_of_friends', defaultMessage: 'This profile is popular among the people you follow.' },
+ similarToRecentlyFollowedHint: { id: 'follow_suggestions.hints.similar_to_recently_followed', defaultMessage: 'This profile is similar to the profiles you have most recently followed.' },
+ featuredHint: { id: 'follow_suggestions.hints.featured', defaultMessage: 'This profile has been hand-picked by the {domain} team.' },
+ mostFollowedHint: { id: 'follow_suggestions.hints.most_followed', defaultMessage: 'This profile is one of the most followed on {domain}.'},
+ mostInteractionsHint: { id: 'follow_suggestions.hints.most_interactions', defaultMessage: 'This profile has been recently getting a lot of attention on {domain}.' },
});
const Source = ({ id }) => {
- let label;
+ const intl = useIntl();
+
+ let label, hint;
switch (id) {
case 'friends_of_friends':
+ hint = intl.formatMessage(messages.friendsOfFriendsHint);
+ label = ;
+ break;
case 'similar_to_recently_followed':
+ hint = intl.formatMessage(messages.similarToRecentlyFollowedHint);
label = ;
break;
case 'featured':
- label = ;
+ hint = intl.formatMessage(messages.featuredHint, { domain });
+ label = ;
break;
case 'most_followed':
+ hint = intl.formatMessage(messages.mostFollowedHint, { domain });
+ label = ;
+ break;
case 'most_interactions':
+ hint = intl.formatMessage(messages.mostInteractionsHint, { domain });
label = ;
break;
}
return (
-
+
{label}
@@ -92,7 +109,7 @@ const Card = ({ id, sources }) => {
{firstVerifiedField ?
:
}
-
+
);
};
diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json
index 12d0068d69..342b4c6e25 100644
--- a/app/javascript/mastodon/locales/en.json
+++ b/app/javascript/mastodon/locales/en.json
@@ -277,8 +277,13 @@
"follow_request.authorize": "Authorize",
"follow_request.reject": "Reject",
"follow_requests.unlocked_explanation": "Even though your account is not locked, the {domain} staff thought you might want to review follow requests from these accounts manually.",
- "follow_suggestions.curated_suggestion": "Editors' Choice",
+ "follow_suggestions.curated_suggestion": "Staff pick",
"follow_suggestions.dismiss": "Don't show again",
+ "follow_suggestions.hints.featured": "This profile has been hand-picked by the {domain} team.",
+ "follow_suggestions.hints.friends_of_friends": "This profile is popular among the people you follow.",
+ "follow_suggestions.hints.most_followed": "This profile is one of the most followed on {domain}.",
+ "follow_suggestions.hints.most_interactions": "This profile has been recently getting a lot of attention on {domain}.",
+ "follow_suggestions.hints.similar_to_recently_followed": "This profile is similar to the profiles you have most recently followed.",
"follow_suggestions.personalized_suggestion": "Personalized suggestion",
"follow_suggestions.popular_suggestion": "Popular suggestion",
"follow_suggestions.view_all": "View all",
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index af9fc88e7b..605b5d4b55 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -9416,6 +9416,7 @@ noscript {
flex-direction: column;
gap: 12px;
padding: 16px 0;
+ padding-bottom: 0;
border-bottom: 1px solid mix($ui-base-color, $ui-highlight-color, 75%);
background: mix($ui-base-color, $ui-highlight-color, 95%);
@@ -9454,6 +9455,7 @@ noscript {
cursor: pointer;
top: 0;
color: $primary-text-color;
+ opacity: 0.5;
&.left {
left: 0;
@@ -9481,6 +9483,8 @@ noscript {
&:hover,
&:focus,
&:active {
+ opacity: 1;
+
.inline-follow-suggestions__body__scroll-button__icon {
background: lighten($ui-highlight-color, 4%);
}
@@ -9492,11 +9496,10 @@ noscript {
flex-wrap: nowrap;
gap: 16px;
padding: 16px;
- padding-bottom: 0;
scroll-snap-type: x mandatory;
scroll-padding: 16px;
scroll-behavior: smooth;
- overflow-x: hidden;
+ overflow-x: scroll;
&__card {
background: darken($ui-base-color, 4%);
@@ -9521,6 +9524,7 @@ noscript {
position: absolute;
inset-inline-end: 8px;
top: 8px;
+ opacity: 0.75;
}
&__avatar {
@@ -9558,6 +9562,7 @@ noscript {
gap: 4px;
overflow: hidden;
white-space: nowrap;
+ cursor: help;
> span {
overflow: hidden;