Redesign: Add new column header to post/thread page (#40372)

app/javascript/mastodon/components/column_header/styles.module.scss

@@ -44,11 +44,10 @@
 
   grid-area: 1 / 2;
   white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
   min-width: 0;
 
   > button {
+    text-overflow: ellipsis;
     overflow: hidden;
     width: 100%;
     padding: 0;

app/javascript/mastodon/features/home_timeline/components/column_settings_redesign.tsx

@@ -37,7 +37,10 @@ export const HomeColumnSettings: React.FC<{
     <ColumnSettingsMenu
       icon={SlidersHorizontalIcon}
       label={
-        <FormattedMessage id='home.settings' defaultMessage='Home Settings' />
+        <FormattedMessage
+          id='column.following_settings'
+          defaultMessage='Following Feed Settings'
+        />
       }
     >
       <MenuItemCheckbox

app/javascript/mastodon/features/home_timeline/index.jsx

@@ -35,6 +35,7 @@ import { MultiColumnMenuItems } from '@/mastodon/components/column_header/multic
 
 const messages = defineMessages({
   title: { id: 'column.home', defaultMessage: 'Home' },
+  following: { id: 'column.following', defaultMessage: 'Following' },
   show_announcements: { id: 'home.show_announcements', defaultMessage: 'Show announcements' },
   hide_announcements: { id: 'home.hide_announcements', defaultMessage: 'Hide announcements' },
 });
@@ -149,7 +150,7 @@ class HomeTimeline extends PureComponent {
       <Column bindToDocument={!multiColumn} label={intl.formatMessage(messages.title)}>
         {isRedesignEnabled() ? (
           <ColumnHeader
-            title={intl.formatMessage(messages.title)}
+            title={intl.formatMessage(messages.following)}
             withUnreadMarker={hasUnread}
             extraButtons={
               <HomeColumnSettings>

app/javascript/mastodon/features/status/index.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 
-import { defineMessages } from 'react-intl';
+import { defineMessages, FormattedMessage } from 'react-intl';
 
 import classNames from 'classnames';
 import { Helmet } from '@unhead/react/helmet';
@@ -14,7 +14,9 @@ import { connect } from 'react-redux';
 import VisibilityIcon from '@/material-icons/400-24px/visibility.svg?react';
 import VisibilityOffIcon from '@/material-icons/400-24px/visibility_off.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 { ColumnHeader, ColumnSettingsMenu } from '@/mastodon/components/column_header';
+import { DisplayNameSimple } from '@/mastodon/components/display_name/simple';
 import { Hotkeys }  from 'mastodon/components/hotkeys';
 import { Icon }  from 'mastodon/components/icon';
 import { injectIntl } from '@/mastodon/components/intl';
@@ -73,6 +75,7 @@ import { DetailedStatus } from './components/detailed_status';
 import { RefreshController } from './components/refresh_controller';
 import { quoteComposeById } from '@/mastodon/actions/compose_typed';
 import { FOCUS_TARGET, NavigationFocusTarget } from '@/mastodon/components/navigation_focus_target';
+import { isRedesignEnabled } from '@/mastodon/utils/environment';
 
 const messages = defineMessages({
   revealAll: { id: 'status.show_more_all', defaultMessage: 'Show more for all' },
@@ -555,6 +558,7 @@ class Status extends ImmutablePureComponent {
       descendants = <>{this.renderChildren(descendantsIds)}</>;
     }
 
+    const account = status.get('account');
     const isLocal = status.getIn(['account', 'acct'], '').indexOf('@') === -1;
     const isIndexable = !status.getIn(['account', 'noindex']);
 
@@ -573,13 +577,40 @@ class Status extends ImmutablePureComponent {
 
     return (
       <Column bindToDocument={!multiColumn} label={intl.formatMessage(messages.detailedStatus)}>
-        <ColumnHeader
-          showBackButton
-          multiColumn={multiColumn}
-          extraButton={(
-            <button type='button' className='column-header__button' title={intl.formatMessage(status.get('hidden') ? messages.revealAll : messages.hideAll)} aria-label={intl.formatMessage(status.get('hidden') ? messages.revealAll : messages.hideAll)} onClick={this.handleToggleAll}><Icon id={status.get('hidden') ? 'eye' : 'eye-slash'} icon={status.get('hidden') ? VisibilityIcon : VisibilityOffIcon} /></button>
-          )}
-        />
+        {isRedesignEnabled() ? (
+          <ColumnHeader
+            withBackButton
+            title={
+              <FormattedMessage
+                id='status.title'
+                defaultMessage='Post by {name}'
+                values={{
+                  name: <DisplayNameSimple account={account} />
+                }}
+              />
+            }
+            extraButtons={
+              <ColumnSettingsMenu
+                label={
+                  <FormattedMessage
+                    id='status.options'
+                    defaultMessage='Post options'
+                  />
+                }
+              >
+                WIP: This menu will contain post actions from the new Status component
+              </ColumnSettingsMenu>
+            }
+          />
+        ) : (
+          <LegacyColumnHeader
+            showBackButton
+            multiColumn={multiColumn}
+            extraButton={(
+              <button type='button' className='column-header__button' title={intl.formatMessage(status.get('hidden') ? messages.revealAll : messages.hideAll)} aria-label={intl.formatMessage(status.get('hidden') ? messages.revealAll : messages.hideAll)} onClick={this.handleToggleAll}><Icon id={status.get('hidden') ? 'eye' : 'eye-slash'} icon={status.get('hidden') ? VisibilityIcon : VisibilityOffIcon} /></button>
+            )}
+          />
+        )}
 
         <ScrollContainer scrollKey='thread' shouldUpdateScroll={this.shouldUpdateScroll} childRef={this.setContainerRef}>
           <div className={classNames('item-list scrollable scrollable--flex', { fullscreen })} ref={this.setContainerRef}>

app/javascript/mastodon/locales/en.json

@@ -463,6 +463,8 @@
   "column.firehose_local": "Live feed for this server",
   "column.firehose_singular": "Live feed",
   "column.follow_requests": "Follow requests",
+  "column.following": "Following",
+  "column.following_settings": "Following Feed Settings",
   "column.has_unread_content": "(has unread content)",
   "column.home": "Home",
   "column.list_members": "Manage list members",
@@ -862,7 +864,6 @@
   "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.",
@@ -1358,6 +1359,7 @@
   "status.mute_conversation": "Mute conversation",
   "status.not_quoted": "You are not quoted in this post",
   "status.open": "Expand this post",
+  "status.options": "Post options",
   "status.pin": "Pin on profile",
   "status.public_only": "This post is private",
   "status.quote": "Quote",
@@ -1405,6 +1407,7 @@
   "status.show_less_all": "Show less for all",
   "status.show_more_all": "Show more for all",
   "status.show_original": "Show original",
+  "status.title": "Post by {name}",
   "status.title.with_attachments": "{user} posted {attachmentCount, plural, one {an attachment} other {{attachmentCount} attachments}}",
   "status.translate": "Translate",
   "status.translated_from_with": "Translated from {lang} using {provider}",