refactor: Use new main menu as "Getting started" column in Advanced Web UI (#35117)

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

@@ -15,39 +15,34 @@ import LogoutIcon from '@/material-icons/400-24px/logout.svg?react';
 import MenuIcon from '@/material-icons/400-24px/menu.svg?react';
 import NotificationsIcon from '@/material-icons/400-24px/notifications-fill.svg?react';
 import PublicIcon from '@/material-icons/400-24px/public.svg?react';
-import SettingsIcon from '@/material-icons/400-24px/settings-fill.svg?react';
+import SettingsIcon from '@/material-icons/400-24px/settings.svg?react';
 import { mountCompose, unmountCompose } from 'mastodon/actions/compose';
 import { openModal } from 'mastodon/actions/modal';
 import { Column } from 'mastodon/components/column';
 import { ColumnHeader } from 'mastodon/components/column_header';
 import { Icon } from 'mastodon/components/icon';
-import { mascot } from 'mastodon/initial_state';
+import { mascot, reduceMotion } from 'mastodon/initial_state';
 import { useAppDispatch, useAppSelector } from 'mastodon/store';
 
+import { messages as navbarMessages } from '../ui/components/navigation_bar';
+
 import { Search } from './components/search';
 import ComposeFormContainer from './containers/compose_form_container';
 
 const messages = defineMessages({
-  start: { id: 'getting_started.heading', defaultMessage: 'Getting started' },
-  home_timeline: { id: 'tabs_bar.home', defaultMessage: 'Home' },
-  notifications: {
-    id: 'tabs_bar.notifications',
-    defaultMessage: 'Notifications',
+  live_feed_public: {
+    id: 'navigation_bar.live_feed_public',
+    defaultMessage: 'Live feed (public)',
   },
-  public: {
-    id: 'navigation_bar.public_timeline',
-    defaultMessage: 'Federated timeline',
-  },
-  community: {
-    id: 'navigation_bar.community_timeline',
-    defaultMessage: 'Local timeline',
+  live_feed_local: {
+    id: 'navigation_bar.live_feed_local',
+    defaultMessage: 'Live feed (local)',
   },
   preferences: {
     id: 'navigation_bar.preferences',
     defaultMessage: 'Preferences',
   },
   logout: { id: 'navigation_bar.logout', defaultMessage: 'Logout' },
-  compose: { id: 'navigation_bar.compose', defaultMessage: 'Compose new post' },
 });
 
 type ColumnMap = ImmutableMap<'id' | 'uuid' | 'params', string>;
@@ -82,19 +77,27 @@ const Compose: React.FC<{ multiColumn: boolean }> = ({ multiColumn }) => {
     [dispatch],
   );
 
+  const scrollNavbarIntoView = useCallback(() => {
+    const navbar = document.querySelector('.navigation-panel');
+    navbar?.scrollIntoView({
+      behavior: reduceMotion ? 'auto' : 'smooth',
+    });
+  }, []);
+
   if (multiColumn) {
     return (
       <div
         className='drawer'
         role='region'
-        aria-label={intl.formatMessage(messages.compose)}
+        aria-label={intl.formatMessage(navbarMessages.publish)}
       >
         <nav className='drawer__header'>
           <Link
             to='/getting-started'
             className='drawer__tab'
-            title={intl.formatMessage(messages.start)}
-            aria-label={intl.formatMessage(messages.start)}
+            title={intl.formatMessage(navbarMessages.menu)}
+            aria-label={intl.formatMessage(navbarMessages.menu)}
+            onClick={scrollNavbarIntoView}
           >
             <Icon id='bars' icon={MenuIcon} />
           </Link>
@@ -102,8 +105,8 @@ const Compose: React.FC<{ multiColumn: boolean }> = ({ multiColumn }) => {
             <Link
               to='/home'
               className='drawer__tab'
-              title={intl.formatMessage(messages.home_timeline)}
-              aria-label={intl.formatMessage(messages.home_timeline)}
+              title={intl.formatMessage(navbarMessages.home)}
+              aria-label={intl.formatMessage(navbarMessages.home)}
             >
               <Icon id='home' icon={HomeIcon} />
             </Link>
@@ -112,8 +115,8 @@ const Compose: React.FC<{ multiColumn: boolean }> = ({ multiColumn }) => {
             <Link
               to='/notifications'
               className='drawer__tab'
-              title={intl.formatMessage(messages.notifications)}
-              aria-label={intl.formatMessage(messages.notifications)}
+              title={intl.formatMessage(navbarMessages.notifications)}
+              aria-label={intl.formatMessage(navbarMessages.notifications)}
             >
               <Icon id='bell' icon={NotificationsIcon} />
             </Link>
@@ -122,8 +125,8 @@ const Compose: React.FC<{ multiColumn: boolean }> = ({ multiColumn }) => {
             <Link
               to='/public/local'
               className='drawer__tab'
-              title={intl.formatMessage(messages.community)}
-              aria-label={intl.formatMessage(messages.community)}
+              title={intl.formatMessage(messages.live_feed_local)}
+              aria-label={intl.formatMessage(messages.live_feed_local)}
             >
               <Icon id='users' icon={PeopleIcon} />
             </Link>
@@ -132,8 +135,8 @@ const Compose: React.FC<{ multiColumn: boolean }> = ({ multiColumn }) => {
             <Link
               to='/public'
               className='drawer__tab'
-              title={intl.formatMessage(messages.public)}
-              aria-label={intl.formatMessage(messages.public)}
+              title={intl.formatMessage(messages.live_feed_public)}
+              aria-label={intl.formatMessage(messages.live_feed_public)}
             >
               <Icon id='globe' icon={PublicIcon} />
             </Link>
@@ -175,12 +178,12 @@ const Compose: React.FC<{ multiColumn: boolean }> = ({ multiColumn }) => {
   return (
     <Column
       bindToDocument={!multiColumn}
-      label={intl.formatMessage(messages.compose)}
+      label={intl.formatMessage(navbarMessages.publish)}
     >
       <ColumnHeader
         icon='pencil'
         iconComponent={EditIcon}
-        title={intl.formatMessage(messages.compose)}
+        title={intl.formatMessage(navbarMessages.publish)}
         multiColumn={multiColumn}
         showBackButton
       />