diff --git a/app/javascript/mastodon/features/followed_tags/index.tsx b/app/javascript/mastodon/features/followed_tags/index.tsx index 045e05c5ff7..0f5795de607 100644 --- a/app/javascript/mastodon/features/followed_tags/index.tsx +++ b/app/javascript/mastodon/features/followed_tags/index.tsx @@ -7,7 +7,9 @@ import { isFulfilled } from '@reduxjs/toolkit'; import { Helmet } from '@unhead/react/helmet'; import { Column } from '@/mastodon/components/column'; -import { ColumnHeader } from '@/mastodon/components/column/header'; +import { ColumnHeader as LegacyColumnHeader } from '@/mastodon/components/column/header'; +import { ColumnHeader } from '@/mastodon/components/column_header'; +import { isRedesignEnabled } from '@/mastodon/utils/environment'; import TagIcon from '@/material-icons/400-24px/tag.svg?react'; import { fetchFollowedHashtags, @@ -97,14 +99,21 @@ const FollowedTags: React.FC<{ multiColumn: boolean }> = ({ multiColumn }) => { bindToDocument={!multiColumn} label={intl.formatMessage(messages.heading)} > - + {isRedesignEnabled() ? ( + + ) : ( + + )} ({ list: state.getIn(['lists', props.params.id]), @@ -126,36 +130,71 @@ class ListTimeline extends PureComponent { return ( - -
-
- - - + {isRedesignEnabled() ? ( + + } + > + + + + + + + + + + {multiColumn && + + } + + } + /> + ) : ( + +
+
+ + + - -
-
- + +
+
+ + )} } + emptyMessage={isRedesignEnabled + ? + : + } bindToDocument={!multiColumn} /> diff --git a/app/javascript/mastodon/features/lists/index.tsx b/app/javascript/mastodon/features/lists/index.tsx index e4985526e59..1f6477f4d3f 100644 --- a/app/javascript/mastodon/features/lists/index.tsx +++ b/app/javascript/mastodon/features/lists/index.tsx @@ -4,12 +4,18 @@ import { defineMessages, useIntl, FormattedMessage } from 'react-intl'; import { Link } from 'react-router-dom'; +import { PlusIcon } from '@phosphor-icons/react'; import { Helmet } from '@unhead/react/helmet'; import { Column } from '@/mastodon/components/column'; -import { ColumnHeader } from '@/mastodon/components/column/header'; +import { ColumnHeader as LegacyColumnHeader } from '@/mastodon/components/column/header'; +import { + ColumnHeader, + ColumnHeaderButton, +} from '@/mastodon/components/column_header'; import { NotSignedInIndicator } from '@/mastodon/components/not_signed_in_indicator'; import { useIdentity } from '@/mastodon/identity_context'; +import { isRedesignEnabled } from '@/mastodon/utils/environment'; import AddIcon from '@/material-icons/400-24px/add.svg?react'; import ListAltIcon from '@/material-icons/400-24px/list_alt.svg?react'; import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react'; @@ -24,7 +30,12 @@ import { useAppSelector, useAppDispatch } from 'mastodon/store'; const messages = defineMessages({ heading: { id: 'column.lists', defaultMessage: 'Lists' }, + heading_redesign: { + id: 'column.custom_feeds', + defaultMessage: 'Custom Feeds', + }, create: { id: 'lists.create_list', defaultMessage: 'Create list' }, + create_redesign: { id: 'custom_feeds.create', defaultMessage: 'Create' }, edit: { id: 'lists.edit', defaultMessage: 'Edit list' }, delete: { id: 'lists.delete', defaultMessage: 'Delete list' }, more: { id: 'status.more', defaultMessage: 'More' }, @@ -90,45 +101,78 @@ const Lists: React.FC<{ const emptyMessage = ( <> - - -
- - + {isRedesignEnabled() ? ( + + +
+ + + ) : ( + + +
+ + + )} ); + const title = intl.formatMessage( + isRedesignEnabled() ? messages.heading_redesign : messages.heading, + ); + return ( - - + {isRedesignEnabled() ? ( + - - - ) - } - /> + {intl.formatMessage(messages.create_redesign)} + + } + /> + ) : ( + + + + ) + } + /> + )} - {intl.formatMessage(messages.heading)} + {title} diff --git a/app/javascript/mastodon/features/lists/members.tsx b/app/javascript/mastodon/features/lists/members.tsx index 9939ac0b5c6..7086953e98d 100644 --- a/app/javascript/mastodon/features/lists/members.tsx +++ b/app/javascript/mastodon/features/lists/members.tsx @@ -7,8 +7,10 @@ import { useParams, Link } from 'react-router-dom'; import { Helmet } from '@unhead/react/helmet'; import { Column } from '@/mastodon/components/column'; -import { ColumnHeader } from '@/mastodon/components/column/header'; +import { ColumnHeader as LegacyColumnHeader } from '@/mastodon/components/column/header'; import { ColumnSearchHeader } from '@/mastodon/components/column/search_header'; +import { ColumnHeader } from '@/mastodon/components/column_header'; +import { isRedesignEnabled } from '@/mastodon/utils/environment'; import ListAltIcon from '@/material-icons/400-24px/list_alt.svg?react'; import SquigglyArrow from '@/svg-icons/squiggly_arrow.svg?react'; import { fetchRelationships } from 'mastodon/actions/accounts'; @@ -33,7 +35,7 @@ import { useSearchAccounts } from 'mastodon/hooks/useSearchAccounts'; import { me } from 'mastodon/initial_state'; import { useAppDispatch, useAppSelector } from 'mastodon/store'; -export const messages = defineMessages({ +const messagesLegacy = defineMessages({ manageMembers: { id: 'column.list_members', defaultMessage: 'Manage list members', @@ -48,6 +50,21 @@ export const messages = defineMessages({ back: { id: 'column_back_button.label', defaultMessage: 'Back' }, }); +const messagesRedesign = defineMessages({ + manageMembers: { + id: 'custom_feeds.manage_accounts_title', + defaultMessage: 'Manage Feed Members', + }, + enterSearch: { + id: 'custom_feeds.add_to_feed', + defaultMessage: 'Add to feed', + }, +}); + +const messages = isRedesignEnabled() + ? { ...messagesLegacy, ...messagesRedesign } + : messagesLegacy; + type Mode = 'remove' | 'add'; const AccountItem: React.FC<{ @@ -232,13 +249,20 @@ const ListMembers: React.FC<{ bindToDocument={!multiColumn} label={intl.formatMessage(messages.manageMembers)} > - + {isRedesignEnabled() ? ( + + ) : ( + + )} = ({ id }) => { @@ -60,7 +106,7 @@ const MembersLink: React.FC<{
- {intl.formatMessage(membersMessages.manageMembers)} + {intl.formatMessage(messages.manageMembers)} = ({ list }) => { const dispatch = useAppDispatch(); const history = useHistory(); + const intl = useIntl(); const { id, @@ -158,9 +205,7 @@ const NewList: React.FC<{ list?: List | null }> = ({ list }) => { - } + label={intl.formatMessage(messages.nameFieldLabel)} value={title} onChange={handleTitleChange} id='list_title' @@ -169,34 +214,26 @@ const NewList: React.FC<{ list?: List | null }> = ({ list }) => {
- } + label={intl.formatMessage(messages.showRepliesTo)} value={repliesPolicy} onChange={handleRepliesPolicyChange} id='list_replies_policy' > - - {(msg) => } - - - {(msg) => } - - - {(msg) => } - + + +
@@ -217,10 +254,7 @@ const NewList: React.FC<{ list?: List | null }> = ({ list }) => { /> - + {intl.formatMessage(messages.exclusiveHint)}
@@ -265,19 +299,21 @@ const NewListWrapper: React.FC<{ }, [dispatch, signedIn, id]); const isLoading = id && !list; + const title = intl.formatMessage(id ? messages.edit : messages.create); return ( - - + + {isRedesignEnabled() ? ( + + ) : ( + + )}
{!signedIn ? ( @@ -290,9 +326,7 @@ const NewListWrapper: React.FC<{
- - {intl.formatMessage(id ? messages.edit : messages.create)} - + {title} diff --git a/app/javascript/mastodon/features/navigation_panel/redesign/index.tsx b/app/javascript/mastodon/features/navigation_panel/redesign/index.tsx index 86ba83c8047..0c542a1c56e 100644 --- a/app/javascript/mastodon/features/navigation_panel/redesign/index.tsx +++ b/app/javascript/mastodon/features/navigation_panel/redesign/index.tsx @@ -157,7 +157,7 @@ export const RedesignNavigationPanel: React.FC<{ label: ( ), link: '/lists/new', @@ -188,21 +188,18 @@ export const RedesignNavigationPanel: React.FC<{ defaultMessage='Followed Hashtags' /> } - action={{ - label: ( - - ), - link: '/followed_tags', - }} > {followedHashtags.slice(0, 4).map((tag) => ( #{tag.name} ))} + + + )} diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json index d9ed4792ddc..5153cac43b6 100644 --- a/app/javascript/mastodon/locales/en.json +++ b/app/javascript/mastodon/locales/en.json @@ -453,10 +453,13 @@ "column.blocks": "Blocked users", "column.bookmarks": "Bookmarks", "column.community": "Local timeline", + "column.create_custom_feed": "Create Custom Feed", "column.create_list": "Create list", + "column.custom_feeds": "Custom Feeds", "column.direct": "Private mentions", "column.directory": "Browse profiles", "column.domain_blocks": "Blocked domains", + "column.edit_custom_feed": "Edit Custom Feed", "column.edit_list": "Edit list", "column.favourites": "Favorites", "column.firehose": "Live feeds", @@ -666,6 +669,20 @@ "copy_icon_button.copy_this_text": "Copy link to clipboard", "copypaste.copied": "Copied", "copypaste.copy_to_clipboard": "Copy to clipboard", + "custom_feed.delete": "Delete feed", + "custom_feed.edit": "Edit feed", + "custom_feed.manage_accounts": "Manage members", + "custom_feed.options": "Feed Options", + "custom_feeds.add_to_feed": "Add to feed", + "custom_feeds.create": "Create", + "custom_feeds.create_a_list_to_organize": "Create a new custom feed to organize your Following feed.", + "custom_feeds.exclusive_hint": "If someone is in this custom feed, hide them in your Home feed to avoid seeing their posts twice.", + "custom_feeds.feed_name": "Feed name", + "custom_feeds.manage_accounts": "Manage feed members", + "custom_feeds.manage_accounts_title": "Manage Feed Members", + "custom_feeds.no_custom_feeds_yet": "No custom feeds yet.", + "custom_feeds.replies_policy.members": "Members of the feed", + "custom_feeds.show_replies_to": "Include replies from feed members to", "custom_homepage.about": "About", "custom_homepage.about_this_server": "About this server", "custom_homepage.administered_by": "Administered by", @@ -733,6 +750,7 @@ "empty_column.collections.featured_in_undiscoverable": "In order for people to add you to collections, you need to allow featuring in discovery experiences from Preferences > Privacy and reach", "empty_column.collections_self": "You have not created any collections yet.", "empty_column.community": "The local timeline is empty. Write something publicly to get the ball rolling!", + "empty_column.custom_feed": "There is nothing in this custom feed yet. When members of this feed post new statuses, they will appear here.", "empty_column.direct": "You don't have any private mentions yet. When you send or receive one, it will show up here.", "empty_column.disabled_feed": "This feed has been disabled by your server administrators.", "empty_column.domain_blocks": "There are no blocked domains yet.", @@ -1419,7 +1437,7 @@ "subscribed_languages.save": "Save changes", "subscribed_languages.target": "Change subscribed languages for {target}", "tab_bar.messages": "Messages", - "tabs_bar.create_custom_feed": "Create feed", + "tabs_bar.create_custom_feed": "Create", "tabs_bar.custom_feeds": "Custom Feeds", "tabs_bar.custom_feeds_empty": "You have no custom feeds yet.", "tabs_bar.explore": "Explore", diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index bf2ba300e31..34dfe38fa5e 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -11019,12 +11019,14 @@ noscript { display: flex; gap: 12px; align-items: center; - border: 1px solid var(--color-border-primary); - border-top: 0; - border-bottom: 0; + border-inline: 1px solid var(--color-border-primary); padding: 16px; padding-bottom: 8px; + [data-redesign='true'] & { + border-inline: none; + } + input { background: var(--color-bg-secondary); border: 1px solid var(--color-border-primary);