diff --git a/app/javascript/mastodon/components/column_header/column_header.stories.tsx b/app/javascript/mastodon/components/column_header/column_header.stories.tsx index bedba53ace1..caafd1037f3 100644 --- a/app/javascript/mastodon/components/column_header/column_header.stories.tsx +++ b/app/javascript/mastodon/components/column_header/column_header.stories.tsx @@ -35,9 +35,16 @@ export const WithBackButton: Story = { }, }; +export const WithUnreadMarker: Story = { + args: { + withUnreadMarker: true, + }, +}; + export const WithButtons: Story = { args: { withBackButton: true, + withUnreadMarker: false, extraButtons: ( <> Options diff --git a/app/javascript/mastodon/components/column_header/column_settings_menu.tsx b/app/javascript/mastodon/components/column_header/column_settings_menu.tsx new file mode 100644 index 00000000000..5384b08bedf --- /dev/null +++ b/app/javascript/mastodon/components/column_header/column_settings_menu.tsx @@ -0,0 +1,46 @@ +import { FormattedMessage } from 'react-intl'; + +import { DotsThreeIcon } from '@phosphor-icons/react'; + +import { ColumnHeaderButton } from '@/mastodon/components/column_header'; +import { Menu, MenuList, MenuTrigger } from '@/mastodon/components/menu'; + +import type { IconButtonProps } from '../button/redesign'; + +type ColumnSettingsMenuProps = { + icon?: IconButtonProps['icon']; + children: React.ReactNode; +} & ( + | { + labelPrefix?: never; + label: React.ReactNode; + } + | { + labelPrefix: React.ReactNode; + label?: never; + } +); + +export const ColumnSettingsMenu: React.FC = ({ + label, + labelPrefix, + icon = DotsThreeIcon, + children, +}) => { + return ( + + + {labelPrefix} + {label ?? ( + + )} + + + {children} + + + ); +}; diff --git a/app/javascript/mastodon/components/column_header/index.tsx b/app/javascript/mastodon/components/column_header/index.tsx index ea4c6da49f8..c21af93d22e 100644 --- a/app/javascript/mastodon/components/column_header/index.tsx +++ b/app/javascript/mastodon/components/column_header/index.tsx @@ -3,6 +3,7 @@ import { useCallback } from 'react'; import { FormattedMessage } from 'react-intl'; import classNames from 'classnames'; +import { useLocation } from 'react-router'; import { ArrowLeftIcon, ListIcon } from '@phosphor-icons/react'; @@ -17,13 +18,19 @@ import type { IconButtonProps } from '../button/redesign'; import { Button, IconButton } from '../button/redesign'; import { useColumn, useColumnIndexContext } from '../column/context'; import { NavigationFocusTarget } from '../navigation_focus_target'; +import type { LocationState } from '../router'; import { useAppHistory } from '../router'; import classes from './styles.module.scss'; +export { ColumnSettingsMenu } from './column_settings_menu'; + export interface ColumnHeaderProps { title: string; - withBackButton?: boolean; + // Set to auto to display the back button based on + // the `fromMastodon` location state + withBackButton?: boolean | 'auto'; + withUnreadMarker?: boolean; extraButtons?: React.ReactNode; className?: string; } @@ -31,17 +38,26 @@ export interface ColumnHeaderProps { export const ColumnHeader: React.FC = ({ title, withBackButton, + withUnreadMarker, extraButtons, className, ...props }: ColumnHeaderProps) => { const { scrollTop } = useColumn(); const columnIndex = useColumnIndexContext(); + const location = useLocation(); + const hasBackButton = + withBackButton === true || + (withBackButton === 'auto' && location.state?.fromMastodon); return ( -
- {withBackButton ? : } +
+ {hasBackButton ? : } {hasReactChildren(extraButtons) && ( diff --git a/app/javascript/mastodon/components/column_header/multicolumn_settings.tsx b/app/javascript/mastodon/components/column_header/multicolumn_settings.tsx new file mode 100644 index 00000000000..e3e91fd6c4b --- /dev/null +++ b/app/javascript/mastodon/components/column_header/multicolumn_settings.tsx @@ -0,0 +1,74 @@ +import { useCallback } from 'react'; + +import { FormattedMessage } from 'react-intl'; + +import { useHistory } from 'react-router'; + +import { MenuItem, MenuItemDivider } from '@/mastodon/components/menu'; + +interface MultiColumnMenuItemsProps { + withDivider?: boolean; + pinned: boolean; + onPin: () => void; + onMove?: (direction: number) => void; +} + +export const MultiColumnMenuItems: React.FC = ({ + withDivider = false, + onPin, + onMove, + pinned, +}) => { + const history = useHistory(); + + const togglePin = useCallback(() => { + if (!pinned) { + history.replace('/'); + } + + onPin(); + }, [history, pinned, onPin]); + + const moveLeft = useCallback(() => { + onMove?.(-1); + }, [onMove]); + + const moveRight = useCallback(() => { + onMove?.(1); + }, [onMove]); + + return ( + <> + {withDivider && } + + {pinned ? ( + + ) : ( + + )} + + {pinned && onMove && ( + <> + + + + + + + + )} + + ); +}; diff --git a/app/javascript/mastodon/components/column_header/styles.module.scss b/app/javascript/mastodon/components/column_header/styles.module.scss index 315e9c70111..12268b7901a 100644 --- a/app/javascript/mastodon/components/column_header/styles.module.scss +++ b/app/javascript/mastodon/components/column_header/styles.module.scss @@ -1,4 +1,5 @@ @use '@/styles/mastodon/mixins'; +@use '@/styles/mastodon/variables'; .root { position: relative; @@ -12,8 +13,6 @@ align-items: center; min-height: 40px; padding: var(--space-sm); - border-top-left-radius: var(--radius-xl); - border-top-right-radius: var(--radius-xl); text-align: center; color: var(--color-text-primary); background: linear-gradient( @@ -21,12 +20,29 @@ var(--color-bg-primary) var(--column-header-gradient-start, 55%), transparent ); + + @media (width >= variables.$mobile-menu-breakpoint) { + border-top-left-radius: var(--radius-xl); + border-top-right-radius: var(--radius-xl); + } + + &[data-has-unread='true']::after { + content: ''; + grid-row: 1; + grid-column: 2; + width: var(--space-xs); + height: var(--space-xs); + background-color: var(--color-text-brand); + border-radius: var(--radius-round); + justify-self: center; + align-self: end; + } } .title { @include mixins.type-heading-sm; - grid-column: 2; + grid-area: 1 / 2; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; @@ -43,10 +59,12 @@ } .leftButton { + grid-area: 1 / 1; justify-self: start; } .rightButtons { + grid-area: 1 / 3; display: flex; align-items: center; justify-self: end; diff --git a/app/javascript/mastodon/components/menu/items.tsx b/app/javascript/mastodon/components/menu/items.tsx index 0cc164647c1..f73420108b2 100644 --- a/app/javascript/mastodon/components/menu/items.tsx +++ b/app/javascript/mastodon/components/menu/items.tsx @@ -200,13 +200,15 @@ function useAssertMenuType(componentName: string) { } } +export type MenuItemRadioChangeHandler = (change: { value: string }) => void; + interface MenuItemRadioProps extends Omit< MenuItemProps<'button'>, 'as' | 'onChange' | 'icon' > { checked: boolean; value: string; - onChange?: (change: { value: string }) => void; + onChange?: MenuItemRadioChangeHandler; } export const MenuItemRadio: React.FC = ({ @@ -236,9 +238,14 @@ export const MenuItemRadio: React.FC = ({ ); }; +export type MenuItemCheckboxChangeHandler = (change: { + value: string; + checked: boolean; +}) => void; + interface MenuItemCheckboxProps extends Omit { icon?: IconProp; - onChange?: (change: { value: string; checked: boolean }) => void; + onChange?: MenuItemCheckboxChangeHandler; } export const MenuItemCheckbox: React.FC = ({ diff --git a/app/javascript/mastodon/components/menu/styles.module.scss b/app/javascript/mastodon/components/menu/styles.module.scss index 4261cdb7cae..7639c95500c 100644 --- a/app/javascript/mastodon/components/menu/styles.module.scss +++ b/app/javascript/mastodon/components/menu/styles.module.scss @@ -11,6 +11,7 @@ overflow: hidden; z-index: calc(infinity); max-width: var(--_max-card-width, 100vw); + text-align: start; &[data-elevation='2'] { @include mixins.elevation-2; diff --git a/app/javascript/mastodon/features/blocks/index.jsx b/app/javascript/mastodon/features/blocks/index.jsx index 6c3370bb9df..5995a4b39cd 100644 --- a/app/javascript/mastodon/features/blocks/index.jsx +++ b/app/javascript/mastodon/features/blocks/index.jsx @@ -15,10 +15,14 @@ import { Account } from '@/mastodon/components/account'; import { Column } from '@/mastodon/components/column'; import { LoadingIndicator } from '@/mastodon/components/loading_indicator'; import ScrollableList from '@/mastodon/components/scrollable_list'; -import { ColumnHeader } from '@/mastodon/components/column/header'; +import { ColumnHeader as LegacyColumnHeader } from '@/mastodon/components/column/header'; +import { isRedesignEnabled } from '@/mastodon/utils/environment'; +import { ColumnHeader } from '@/mastodon/components/column_header'; +import { Helmet } from '@unhead/react/helmet'; const messages = defineMessages({ heading: { id: 'column.blocks', defaultMessage: 'Blocked users' }, + heading_redesign: { id: 'column.blocked_accounts', defaultMessage: 'Blocked Accounts' }, }); const mapStateToProps = state => ({ @@ -62,7 +66,11 @@ class Blocks extends ImmutablePureComponent { return ( - + {isRedesignEnabled() ? ( + + ) : ( + + )} , )} + + + + {intl.formatMessage(isRedesignEnabled() ? messages.heading_redesign : messages.heading)} + + + ); } diff --git a/app/javascript/mastodon/features/bookmarked_statuses/index.tsx b/app/javascript/mastodon/features/bookmarked_statuses/index.tsx index 3ac7830c8f6..f14ce5f465d 100644 --- a/app/javascript/mastodon/features/bookmarked_statuses/index.tsx +++ b/app/javascript/mastodon/features/bookmarked_statuses/index.tsx @@ -6,7 +6,11 @@ import { Helmet } from '@unhead/react/helmet'; import { Column } from '@/mastodon/components/column'; import { ColumnHeader as LegacyColumnHeader } from '@/mastodon/components/column/header'; -import { ColumnHeader } from '@/mastodon/components/column_header'; +import { + ColumnHeader, + ColumnSettingsMenu, +} from '@/mastodon/components/column_header'; +import { MultiColumnMenuItems } from '@/mastodon/components/column_header/multicolumn_settings'; import { isRedesignEnabled } from '@/mastodon/utils/environment'; import BookmarksIcon from '@/material-icons/400-24px/bookmarks-fill.svg?react'; import { @@ -20,7 +24,7 @@ import { useAppDispatch, useAppSelector } from 'mastodon/store'; const messages = defineMessages({ heading: { id: 'column.bookmarks', defaultMessage: 'Bookmarks' }, - headingRedesign: { id: 'column.saved_posts', defaultMessage: 'Saved Posts' }, + heading_redesign: { id: 'column.saved_posts', defaultMessage: 'Saved Posts' }, }); const Bookmarks: React.FC<{ @@ -78,7 +82,23 @@ const Bookmarks: React.FC<{ label={intl.formatMessage(messages.heading)} > {isRedesignEnabled() ? ( - + + + + ) + } + /> ) : ( {isRedesignEnabled() - ? intl.formatMessage(messages.headingRedesign) + ? intl.formatMessage(messages.heading_redesign) : intl.formatMessage(messages.heading)} diff --git a/app/javascript/mastodon/features/direct_timeline/index.tsx b/app/javascript/mastodon/features/direct_timeline/index.tsx index 0990b73f55b..050ef9f6c70 100644 --- a/app/javascript/mastodon/features/direct_timeline/index.tsx +++ b/app/javascript/mastodon/features/direct_timeline/index.tsx @@ -5,8 +5,14 @@ import { defineMessages, useIntl, FormattedMessage } from 'react-intl'; 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, + ColumnSettingsMenu, +} from '@/mastodon/components/column_header'; +import { MultiColumnMenuItems } from '@/mastodon/components/column_header/multicolumn_settings'; import { useAppDispatch } from '@/mastodon/store'; +import { isRedesignEnabled } from '@/mastodon/utils/environment'; import AlternateEmailIcon from '@/material-icons/400-24px/alternate_email.svg?react'; import { addColumn, removeColumn, moveColumn } from 'mastodon/actions/columns'; import { @@ -20,6 +26,7 @@ import { ConversationsList } from './components/conversations_list'; const messages = defineMessages({ title: { id: 'column.direct', defaultMessage: 'Private mentions' }, + title_redesign: { id: 'tab_bar.messages', defaultMessage: 'Messages' }, }); interface ColumnBase { @@ -64,16 +71,36 @@ const DirectTimeline: React.FC = ({ columnId, multiColumn }) => { bindToDocument={!multiColumn} label={intl.formatMessage(messages.title)} > - + {isRedesignEnabled() ? ( + + + + ) + } + /> + ) : ( + + )} = ({ columnId, multiColumn }) => { /> - {intl.formatMessage(messages.title)} + + {intl.formatMessage( + isRedesignEnabled() ? messages.title_redesign : messages.title, + )} + diff --git a/app/javascript/mastodon/features/explore/index.tsx b/app/javascript/mastodon/features/explore/index.tsx index 00972a5ecfe..f4c2cfa2bb2 100644 --- a/app/javascript/mastodon/features/explore/index.tsx +++ b/app/javascript/mastodon/features/explore/index.tsx @@ -6,7 +6,8 @@ import { NavLink, Switch, Route } 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 { ColumnHeader } from '@/mastodon/components/column_header'; import { isRedesignEnabled } from '@/mastodon/utils/environment'; import TrendingUpIcon from '@/material-icons/400-24px/trending_up.svg?react'; import { SymbolLogo } from 'mastodon/components/logo'; @@ -22,6 +23,7 @@ import Tags from './tags'; const messages = defineMessages({ title: { id: 'explore.title', defaultMessage: 'Trending' }, + titleRedesign: { id: 'tabs_bar.explore', defaultMessage: 'Explore' }, }); const Explore: React.FC<{ multiColumn: boolean }> = ({ multiColumn }) => { @@ -34,13 +36,20 @@ const Explore: React.FC<{ multiColumn: boolean }> = ({ multiColumn }) => { bindToDocument={!multiColumn} label={intl.formatMessage(messages.title)} > - + {isRedesignEnabled() ? ( + + ) : ( + + )}
= ({ multiColumn }) => { - {intl.formatMessage(messages.title)} + + {intl.formatMessage( + isRedesignEnabled() ? messages.titleRedesign : messages.title, + )} + diff --git a/app/javascript/mastodon/features/explore/redesign.module.scss b/app/javascript/mastodon/features/explore/redesign.module.scss index 5a661c5edf9..6ca4377d09f 100644 --- a/app/javascript/mastodon/features/explore/redesign.module.scss +++ b/app/javascript/mastodon/features/explore/redesign.module.scss @@ -1,3 +1,4 @@ .searchHeader { display: flex !important; + border-inline: none; } diff --git a/app/javascript/mastodon/features/favourited_statuses/index.tsx b/app/javascript/mastodon/features/favourited_statuses/index.tsx index 626053c01da..394dd66c53a 100644 --- a/app/javascript/mastodon/features/favourited_statuses/index.tsx +++ b/app/javascript/mastodon/features/favourited_statuses/index.tsx @@ -5,7 +5,13 @@ import { defineMessages, useIntl, FormattedMessage } from 'react-intl'; 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, + ColumnSettingsMenu, +} from '@/mastodon/components/column_header'; +import { MultiColumnMenuItems } from '@/mastodon/components/column_header/multicolumn_settings'; +import { isRedesignEnabled } from '@/mastodon/utils/environment'; import StarIcon from '@/material-icons/400-24px/star-fill.svg?react'; import { addColumn, removeColumn, moveColumn } from 'mastodon/actions/columns'; import { @@ -18,6 +24,10 @@ import { useAppDispatch, useAppSelector } from 'mastodon/store'; const messages = defineMessages({ heading: { id: 'column.favourites', defaultMessage: 'Favorites' }, + heading_redesign: { + id: 'navigation_bar.liked_posts', + defaultMessage: 'Liked Posts', + }, }); const Favourites: React.FC<{ columnId: string; multiColumn: boolean }> = ({ @@ -74,16 +84,36 @@ const Favourites: React.FC<{ columnId: string; multiColumn: boolean }> = ({ bindToDocument={!multiColumn} label={intl.formatMessage(messages.heading)} > - + {isRedesignEnabled() ? ( + + + + ) + } + /> + ) : ( + + )} { @@ -178,17 +182,30 @@ const Firehose = ({ feedType, multiColumn }) => { return ( - - - + {isRedesignEnabled ? ( + + + + } + /> + ) : ( + + + + )} {(canViewFeed(signedIn, permissions, localLiveFeedAccess) && canViewFeed(signedIn, permissions, remoteLiveFeedAccess)) && (
diff --git a/app/javascript/mastodon/features/home_timeline/components/column_settings_redesign.tsx b/app/javascript/mastodon/features/home_timeline/components/column_settings_redesign.tsx new file mode 100644 index 00000000000..067e051dbd1 --- /dev/null +++ b/app/javascript/mastodon/features/home_timeline/components/column_settings_redesign.tsx @@ -0,0 +1,79 @@ +import { useCallback } from 'react'; + +import { FormattedMessage } from 'react-intl'; + +import { SlidersHorizontalIcon } from '@phosphor-icons/react'; + +import { ColumnSettingsMenu } from '@/mastodon/components/column_header'; +import { MenuItemCheckbox } from '@/mastodon/components/menu'; +import type { MenuItemCheckboxChangeHandler } from '@/mastodon/components/menu/items'; +import { useAppSelector, useAppDispatch } from 'mastodon/store'; + +import { changeSetting } from '../../../actions/settings'; + +export const HomeColumnSettings: React.FC<{ + children?: React.ReactNode; +}> = ({ children }) => { + const dispatch = useAppDispatch(); + + const settings = useAppSelector((state) => state.settings.get('home')); + const onChange = useCallback( + ({ value, checked }) => { + dispatch(changeSetting(['home', 'shows', value], checked)); + }, + [dispatch], + ); + + /* eslint-disable @typescript-eslint/no-unsafe-call */ + // @ts-expect-error settings isn't typed yet + const showBoosts = settings.getIn(['shows', 'reblog']) as boolean; + // @ts-expect-error settings isn't typed yet + const showQuotes = settings.getIn(['shows', 'quote']) as boolean; + // @ts-expect-error settings isn't typed yet + const showReplies = settings.getIn(['shows', 'reply']) as boolean; + /* eslint-enable @typescript-eslint/no-unsafe-call */ + + return ( + + } + > + + + + + + + + + + {children} + + ); +}; diff --git a/app/javascript/mastodon/features/home_timeline/index.jsx b/app/javascript/mastodon/features/home_timeline/index.jsx index f9dfb64c552..2ae26a63b95 100644 --- a/app/javascript/mastodon/features/home_timeline/index.jsx +++ b/app/javascript/mastodon/features/home_timeline/index.jsx @@ -11,7 +11,7 @@ import { connect } from 'react-redux'; import CampaignIcon from '@/material-icons/400-24px/campaign.svg?react'; import HomeIcon from '@/material-icons/400-24px/home-fill.svg?react'; import { Column } from '@/mastodon/components/column'; -import { ColumnHeader } from '@/mastodon/components/column/header'; +import { ColumnHeader as LegacyColumnHeader } from '@/mastodon/components/column/header'; import { injectIntl } from '@/mastodon/components/intl'; import { SymbolLogo } from 'mastodon/components/logo'; import { fetchAnnouncements, toggleShowAnnouncements } from 'mastodon/actions/announcements'; @@ -28,6 +28,10 @@ import { ColumnSettings } from './components/column_settings'; import { CriticalUpdateBanner } from './components/critical_update_banner'; import { Announcements } from './components/announcements'; import { AnnualReportTimeline } from '../annual_report/timeline'; +import { isRedesignEnabled } from '@/mastodon/utils/environment'; +import { ColumnHeader } from '@/mastodon/components/column_header'; +import { HomeColumnSettings } from './components/column_settings_redesign'; +import { MultiColumnMenuItems } from '@/mastodon/components/column_header/multicolumn_settings'; const messages = defineMessages({ title: { id: 'column.home', defaultMessage: 'Home' }, @@ -143,21 +147,40 @@ class HomeTimeline extends PureComponent { return ( - } - scrollTopOnClick - > - - + {isRedesignEnabled() ? ( + + {multiColumn && + + } + + } + /> + ) : ( + } + scrollTopOnClick + > + + + )} {signedIn ? ( { diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json index dc3cb77cfa3..f87e229f7ac 100644 --- a/app/javascript/mastodon/locales/en.json +++ b/app/javascript/mastodon/locales/en.json @@ -449,6 +449,7 @@ "collections.visibility_unlisted": "Unlisted", "collections.visibility_unlisted_hint": "Visible to anyone with a link. Hidden from search results and recommendations.", "column.about": "About", + "column.blocked_accounts": "Blocked Accounts", "column.blocks": "Blocked users", "column.bookmarks": "Bookmarks", "column.community": "Local timeline", @@ -462,6 +463,7 @@ "column.firehose_local": "Live feed for this server", "column.firehose_singular": "Live feed", "column.follow_requests": "Follow requests", + "column.has_unread_content": "(has unread content)", "column.home": "Home", "column.list_members": "Manage list members", "column.lists": "Lists", @@ -471,14 +473,19 @@ "column.pins": "Pinned posts", "column.public": "Federated timeline", "column.saved_posts": "Saved Posts", + "column.settings": "Column Settings", "column.your_collections": "Your Collections", "column_back_button.label": "Back", "column_header.hide_settings": "Hide settings", "column_header.moveLeft_settings": "Move column to the left", "column_header.moveRight_settings": "Move column to the right", + "column_header.move_column_left": "Move column left", + "column_header.move_column_right": "Move column right", "column_header.pin": "Pin", + "column_header.pin_column": "Pin column", "column_header.show_settings": "Show settings", "column_header.unpin": "Unpin", + "column_header.unpin_column": "Unpin column", "column_search.cancel": "Cancel", "combobox.close_results": "Close results", "combobox.loading": "Loading", @@ -853,6 +860,7 @@ "home.pending_critical_update.body": "Please update your Mastodon server as soon as possible!", "home.pending_critical_update.link": "See updates", "home.pending_critical_update.title": "Critical security update available!", + "home.settings": "Home Settings", "home.show_announcements": "Show announcements", "ignore_notifications_modal.bots_title": "Ignore notifications from bots?", "ignore_notifications_modal.disclaimer": "Mastodon cannot inform users that you've ignored their notifications. Ignoring notifications will not stop the messages themselves from being sent.", @@ -979,7 +987,7 @@ "navigation_bar.administration": "Administration", "navigation_bar.advanced_interface": "Open in advanced web interface", "navigation_bar.automated_deletion": "Automated post deletion", - "navigation_bar.blocked_accounts": "Blocked accounts", + "navigation_bar.blocked_accounts": "Blocked Accounts", "navigation_bar.blocks": "Blocked users", "navigation_bar.bookmarks": "Bookmarks", "navigation_bar.collections": "Collections", @@ -992,7 +1000,7 @@ "navigation_bar.followers_and_following": "Followers & Following", "navigation_bar.follows_and_followers": "Follows and followers", "navigation_bar.import_export": "Import and export", - "navigation_bar.liked_posts": "Liked posts", + "navigation_bar.liked_posts": "Liked Posts", "navigation_bar.lists": "Lists", "navigation_bar.live_feed_local": "Live feed (local)", "navigation_bar.live_feed_public": "Live feed (public)", @@ -1403,6 +1411,7 @@ "subscribed_languages.lead": "Only posts in selected languages will appear on your home and list timelines after the change. Select none to receive posts in all languages.", "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.custom_feeds": "Custom Feeds", "tabs_bar.custom_feeds_empty": "You have no custom feeds yet.", diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 9de3cd386be..56918dbb05e 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -8044,9 +8044,12 @@ a.status-card { display: flex; flex-shrink: 0; + [data-redesign='true'] & { + border-inline: none; + } + @media screen and (max-width: ($no-gap-breakpoint - 1px)) { - border-right: 0; - border-left: 0; + border-inline: none; } button {