Redesign: Add "New" button to Messages column header (#40377)

app/javascript/mastodon/features/direct_timeline/index.tsx

@@ -2,15 +2,18 @@ import { useCallback, useEffect } from 'react';
 
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
+import { PlusIcon } from '@phosphor-icons/react';
 import { Helmet } from '@unhead/react/helmet';
 
 import { Column } from '@/mastodon/components/column';
 import { ColumnHeader as LegacyColumnHeader } from '@/mastodon/components/column/header';
 import {
   ColumnHeader,
+  ColumnHeaderButton,
   ColumnSettingsMenu,
 } from '@/mastodon/components/column_header';
 import { MultiColumnMenuItems } from '@/mastodon/components/column_header/multicolumn_settings';
+import { openNewComposer } from '@/mastodon/reducers/slices/composer';
 import { useAppDispatch } from '@/mastodon/store';
 import { isRedesignEnabled } from '@/mastodon/utils/environment';
 import AlternateEmailIcon from '@/material-icons/400-24px/alternate_email.svg?react';
@@ -39,6 +42,10 @@ const DirectTimeline: React.FC<ColumnBase> = ({ columnId, multiColumn }) => {
   const dispatch = useAppDispatch();
   const pinned = !!columnId;
 
+  const composeNewMessage = useCallback(() => {
+    dispatch(openNewComposer({ type: 'message' }));
+  }, [dispatch]);
+
   const handlePin = useCallback(() => {
     if (columnId) {
       dispatch(removeColumn(columnId));
@@ -76,17 +83,27 @@ const DirectTimeline: React.FC<ColumnBase> = ({ columnId, multiColumn }) => {
           title={intl.formatMessage(messages.title_redesign)}
           withBackButton={multiColumn && !pinned && 'auto'}
           extraButtons={
-            multiColumn && (
-              <ColumnSettingsMenu
-                labelPrefix={intl.formatMessage(messages.title_redesign)}
+            <>
+              <ColumnHeaderButton
+                showTextOnDesktop
+                variant='solid'
+                icon={PlusIcon}
+                onClick={composeNewMessage}
               >
-                <MultiColumnMenuItems
-                  onPin={handlePin}
-                  onMove={handleMove}
-                  pinned={pinned}
-                />
-              </ColumnSettingsMenu>
-            )
+                <FormattedMessage id='messages.new' defaultMessage='New' />
+              </ColumnHeaderButton>
+              {multiColumn && (
+                <ColumnSettingsMenu
+                  labelPrefix={intl.formatMessage(messages.title_redesign)}
+                >
+                  <MultiColumnMenuItems
+                    onPin={handlePin}
+                    onMove={handleMove}
+                    pinned={pinned}
+                  />
+                </ColumnSettingsMenu>
+              )}
+            </>
           }
         />
       ) : (

app/javascript/mastodon/features/navigation_panel/redesign/mobile_nav.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
@@ -9,14 +9,12 @@ import {
   ChatCircleIcon,
   HouseIcon,
   MagnifyingGlassIcon,
-  HamburgerIcon,
 } from '@phosphor-icons/react';
 import { animated, useSpring } from '@react-spring/web';
 import { useDrag } from '@use-gesture/react';
 
 import { closeNavigation, openNavigation } from '@/mastodon/actions/navigation';
 import { Avatar } from '@/mastodon/components/avatar';
-import { IconButton } from '@/mastodon/components/button/redesign';
 import { FOCUS_TARGET } from '@/mastodon/components/navigation_focus_target';
 import { ComposeRedesignButton } from '@/mastodon/features/compose/redesign/trigger';
 import { useAccount } from '@/mastodon/hooks/useAccount';
@@ -29,8 +27,6 @@ import classes from './mobile_nav.module.scss';
 import { MobileNavLink } from './navigation_link';
 
 export const RedesignMobileNavigation: React.FC = () => {
-  const dispatch = useAppDispatch();
-
   const { accountId, signedIn } = useIdentity();
   const account = useAccount(accountId);
 
@@ -38,10 +34,6 @@ export const RedesignMobileNavigation: React.FC = () => {
     selectUnreadNotificationGroupsCount,
   );
 
-  const handleOpenNavigation = useCallback(() => {
-    dispatch(openNavigation());
-  }, [dispatch]);
-
   if (!signedIn) {
     return null;
   }
@@ -89,13 +81,6 @@ export const RedesignMobileNavigation: React.FC = () => {
           </MobileNavLink>
         </ul>
         <ComposeRedesignButton inline />
-        <IconButton // Silly placeholder – will be replaced with button in column header
-          icon={HamburgerIcon}
-          variant='solid'
-          onClick={handleOpenNavigation}
-        >
-          Menu
-        </IconButton>
       </nav>
       <SlideOutNavigation />
     </>

app/javascript/mastodon/locales/en.json

@@ -975,6 +975,7 @@
   "load_pending": "{count, plural, one {# new item} other {# new items}}",
   "loading_indicator.label": "Loading…",
   "media_gallery.hide": "Hide",
+  "messages.new": "New",
   "moved_to_account_banner.text": "Your account {disabledAccount} is currently disabled because you moved to {movedToAccount}.",
   "mute_modal.hide_from_notifications": "Hide from notifications",
   "mute_modal.hide_options": "Hide options",