[Glitch] refactor: Use new main menu as "Getting started" column in Advanced Web UI

Port d28a4428b5 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/features/compose/index.tsx

@@ -24,33 +24,28 @@ import { Icon } from 'flavours/glitch/components/icon';
 import glitchedElephant1 from 'flavours/glitch/images/mbstobon-ui-0.png';
 import glitchedElephant2 from 'flavours/glitch/images/mbstobon-ui-1.png';
 import glitchedElephant3 from 'flavours/glitch/images/mbstobon-ui-2.png';
-import { mascot } from 'flavours/glitch/initial_state';
+import { mascot, reduceMotion } from 'flavours/glitch/initial_state';
 import { useAppDispatch, useAppSelector } from 'flavours/glitch/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' },
+  live_feed_public: {
-  home_timeline: { id: 'tabs_bar.home', defaultMessage: 'Home' },
+    id: 'navigation_bar.live_feed_public',
-  notifications: {
+    defaultMessage: 'Live feed (public)',
-    id: 'tabs_bar.notifications',
-    defaultMessage: 'Notifications',
   },
-  public: {
+  live_feed_local: {
-    id: 'navigation_bar.public_timeline',
+    id: 'navigation_bar.live_feed_local',
-    defaultMessage: 'Federated timeline',
+    defaultMessage: 'Live feed (local)',
-  },
-  community: {
-    id: 'navigation_bar.community_timeline',
-    defaultMessage: 'Local timeline',
   },
   settings: {
     id: 'navigation_bar.app_settings',
     defaultMessage: 'App settings',
   },
   logout: { id: 'navigation_bar.logout', defaultMessage: 'Logout' },
-  compose: { id: 'navigation_bar.compose', defaultMessage: 'Compose new post' },
 });
 
 type ColumnMap = ImmutableMap<'id' | 'uuid' | 'params', string>;
@@ -127,19 +122,27 @@ const Compose: React.FC<{ multiColumn: boolean }> = ({ multiColumn }) => {
     elephantUIPlane,
   ][elefriend];
 
+  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)}
+            title={intl.formatMessage(navbarMessages.menu)}
-            aria-label={intl.formatMessage(messages.start)}
+            aria-label={intl.formatMessage(navbarMessages.menu)}
+            onClick={scrollNavbarIntoView}
           >
             <Icon id='bars' icon={MenuIcon} />
           </Link>
@@ -147,8 +150,8 @@ const Compose: React.FC<{ multiColumn: boolean }> = ({ multiColumn }) => {
             <Link
               to='/home'
               className='drawer__tab'
-              title={intl.formatMessage(messages.home_timeline)}
+              title={intl.formatMessage(navbarMessages.home)}
-              aria-label={intl.formatMessage(messages.home_timeline)}
+              aria-label={intl.formatMessage(navbarMessages.home)}
             >
               <Icon id='home' icon={HomeIcon} />
             </Link>
@@ -157,8 +160,8 @@ const Compose: React.FC<{ multiColumn: boolean }> = ({ multiColumn }) => {
             <Link
               to='/notifications'
               className='drawer__tab'
-              title={intl.formatMessage(messages.notifications)}
+              title={intl.formatMessage(navbarMessages.notifications)}
-              aria-label={intl.formatMessage(messages.notifications)}
+              aria-label={intl.formatMessage(navbarMessages.notifications)}
             >
               <span className='icon-badge-wrapper'>
                 <Icon id='bell' icon={NotificationsIcon} />
@@ -172,8 +175,8 @@ const Compose: React.FC<{ multiColumn: boolean }> = ({ multiColumn }) => {
             <Link
               to='/public/local'
               className='drawer__tab'
-              title={intl.formatMessage(messages.community)}
+              title={intl.formatMessage(messages.live_feed_local)}
-              aria-label={intl.formatMessage(messages.community)}
+              aria-label={intl.formatMessage(messages.live_feed_local)}
             >
               <Icon id='users' icon={PeopleIcon} />
             </Link>
@@ -182,8 +185,8 @@ const Compose: React.FC<{ multiColumn: boolean }> = ({ multiColumn }) => {
             <Link
               to='/public'
               className='drawer__tab'
-              title={intl.formatMessage(messages.public)}
+              title={intl.formatMessage(messages.live_feed_public)}
-              aria-label={intl.formatMessage(messages.public)}
+              aria-label={intl.formatMessage(messages.live_feed_public)}
             >
               <Icon id='globe' icon={PublicIcon} />
             </Link>
@@ -230,12 +233,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
       />

app/javascript/flavours/glitch/features/getting_started/index.jsx

@@ -1,224 +0,0 @@
-import PropTypes from 'prop-types';
-
-import { defineMessages, injectIntl } from 'react-intl';
-
-import { Helmet } from 'react-helmet';
-
-import { createSelector } from '@reduxjs/toolkit';
-import { List as ImmutableList } from 'immutable';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { connect } from 'react-redux';
-
-import BookmarksIcon from '@/material-icons/400-24px/bookmarks-fill.svg?react';
-import ExploreIcon from '@/material-icons/400-24px/explore.svg?react';
-import ModerationIcon from '@/material-icons/400-24px/gavel.svg?react';
-import PeopleIcon from '@/material-icons/400-24px/group.svg?react';
-import HomeIcon from '@/material-icons/400-24px/home-fill.svg?react';
-import ListAltIcon from '@/material-icons/400-24px/list_alt.svg?react';
-import MailIcon from '@/material-icons/400-24px/mail.svg?react';
-import AdministrationIcon from '@/material-icons/400-24px/manufacturing.svg?react';
-import MenuIcon from '@/material-icons/400-24px/menu.svg?react';
-import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
-import NotificationsIcon from '@/material-icons/400-24px/notifications.svg?react';
-import PersonAddIcon from '@/material-icons/400-24px/person_add.svg?react';
-import PublicIcon from '@/material-icons/400-24px/public.svg?react';
-import SettingsIcon from '@/material-icons/400-24px/settings-fill.svg?react';
-import { fetchFollowRequests } from 'flavours/glitch/actions/accounts';
-import { fetchLists } from 'flavours/glitch/actions/lists';
-import { openModal } from 'flavours/glitch/actions/modal';
-import Column from 'flavours/glitch/features/ui/components/column';
-import { LinkFooter } from 'flavours/glitch/features/ui/components/link_footer';
-import { identityContextPropShape, withIdentity } from 'flavours/glitch/identity_context';
-import { canManageReports, canViewAdminDashboard } from 'flavours/glitch/permissions';
-import { preferencesLink } from 'flavours/glitch/utils/backend_links';
-
-import { me, showTrends } from '../../initial_state';
-import { NavigationBar } from '../compose/components/navigation_bar';
-import { ColumnLink } from '../ui/components/column_link';
-import ColumnSubheading from '../ui/components/column_subheading';
-
-import { Trends } from 'flavours/glitch/features/navigation_panel/components/trends';
-
-const messages = defineMessages({
-  heading: { id: 'getting_started.heading', defaultMessage: 'Getting started' },
-  home_timeline: { id: 'tabs_bar.home', defaultMessage: 'Home' },
-  notifications: { id: 'tabs_bar.notifications', defaultMessage: 'Notifications' },
-  public_timeline: { id: 'navigation_bar.public_timeline', defaultMessage: 'Federated timeline' },
-  navigation_subheading: { id: 'column_subheading.navigation', defaultMessage: 'Navigation' },
-  settings_subheading: { id: 'column_subheading.settings', defaultMessage: 'Settings' },
-  community_timeline: { id: 'navigation_bar.community_timeline', defaultMessage: 'Local timeline' },
-  explore: { id: 'navigation_bar.explore', defaultMessage: 'Explore' },
-  direct: { id: 'navigation_bar.direct', defaultMessage: 'Private mentions' },
-  bookmarks: { id: 'navigation_bar.bookmarks', defaultMessage: 'Bookmarks' },
-  preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' },
-  administration: { id: 'navigation_bar.administration', defaultMessage: 'Administration' },
-  moderation: { id: 'navigation_bar.moderation', defaultMessage: 'Moderation' },
-  settings: { id: 'navigation_bar.app_settings', defaultMessage: 'App settings' },
-  follow_requests: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' },
-  lists: { id: 'navigation_bar.lists', defaultMessage: 'Lists' },
-  keyboard_shortcuts: { id: 'navigation_bar.keyboard_shortcuts', defaultMessage: 'Keyboard shortcuts' },
-  lists_subheading: { id: 'column_subheading.lists', defaultMessage: 'Lists' },
-  misc: { id: 'navigation_bar.misc', defaultMessage: 'Misc' },
-  menu: { id: 'getting_started.heading', defaultMessage: 'Getting started' },
-});
-
-const makeMapStateToProps = () => {
-  const getOrderedLists = createSelector([state => state.get('lists')], lists => {
-    if (!lists) {
-      return lists;
-    }
-
-    return lists.toList().filter(item => !!item).sort((a, b) => a.get('title').localeCompare(b.get('title')));
-  });
-
-  const mapStateToProps = state => ({
-    lists: getOrderedLists(state),
-    myAccount: state.getIn(['accounts', me]),
-    columns: state.getIn(['settings', 'columns']),
-    unreadFollowRequests: state.getIn(['user_lists', 'follow_requests', 'items'], ImmutableList()).size,
-    unreadNotifications: state.getIn(['notifications', 'unread']),
-  });
-
-  return mapStateToProps;
-};
-
-const mapDispatchToProps = dispatch => ({
-  fetchFollowRequests: () => dispatch(fetchFollowRequests()),
-  fetchLists: () => dispatch(fetchLists()),
-  openSettings: () => dispatch(openModal({
-    modalType: 'SETTINGS',
-    modalProps: {},
-  })),
-});
-
-const badgeDisplay = (number, limit) => {
-  if (number === 0) {
-    return undefined;
-  } else if (limit && number >= limit) {
-    return `${limit}+`;
-  } else {
-    return number;
-  }
-};
-
-class GettingStarted extends ImmutablePureComponent {
-  static propTypes = {
-    identity: identityContextPropShape,
-    intl: PropTypes.object.isRequired,
-    myAccount: ImmutablePropTypes.record,
-    columns: ImmutablePropTypes.list,
-    multiColumn: PropTypes.bool,
-    fetchFollowRequests: PropTypes.func.isRequired,
-    unreadFollowRequests: PropTypes.number,
-    unreadNotifications: PropTypes.number,
-    lists: ImmutablePropTypes.list,
-    fetchLists: PropTypes.func.isRequired,
-    openSettings: PropTypes.func.isRequired,
-  };
-
-  UNSAFE_componentWillMount () {
-    this.props.fetchLists();
-  }
-
-  componentDidMount () {
-    const { fetchFollowRequests } = this.props;
-    const { signedIn } = this.props.identity;
-
-    if (!signedIn) {
-      return;
-    }
-
-    fetchFollowRequests();
-  }
-
-  render () {
-    const { intl, myAccount, columns, multiColumn, unreadFollowRequests, unreadNotifications, lists, openSettings } = this.props;
-    const { signedIn, permissions } = this.props.identity;
-
-    const navItems = [];
-    let listItems = [];
-
-    if (multiColumn) {
-      if (signedIn && !columns.find(item => item.get('id') === 'HOME')) {
-        navItems.push(<ColumnLink key='home' icon='home' iconComponent={HomeIcon} text={intl.formatMessage(messages.home_timeline)} to='/home' />);
-      }
-
-      if (!columns.find(item => item.get('id') === 'NOTIFICATIONS')) {
-        navItems.push(<ColumnLink key='notifications' icon='bell' iconComponent={NotificationsIcon} text={intl.formatMessage(messages.notifications)} badge={badgeDisplay(unreadNotifications)} to='/notifications' />);
-      }
-
-      if (!columns.find(item => item.get('id') === 'COMMUNITY')) {
-        navItems.push(<ColumnLink key='community_timeline' icon='users' iconComponent={PeopleIcon} text={intl.formatMessage(messages.community_timeline)} to='/public/local' />);
-      }
-
-      if (!columns.find(item => item.get('id') === 'PUBLIC')) {
-        navItems.push(<ColumnLink key='public_timeline' icon='globe' iconComponent={PublicIcon} text={intl.formatMessage(messages.public_timeline)} to='/public' />);
-      }
-    }
-
-    if (showTrends) {
-      navItems.push(<ColumnLink key='explore' icon='explore' iconComponent={ExploreIcon} text={intl.formatMessage(messages.explore)} to='/explore' />);
-    }
-
-    if (signedIn) {
-      if (!multiColumn || !columns.find(item => item.get('id') === 'DIRECT')) {
-        navItems.push(<ColumnLink key='conversations' icon='envelope' iconComponent={MailIcon} text={intl.formatMessage(messages.direct)} to='/conversations' />);
-      }
-
-      if (!multiColumn || !columns.find(item => item.get('id') === 'BOOKMARKS')) {
-        navItems.push(<ColumnLink key='bookmarks' icon='bookmark' iconComponent={BookmarksIcon} text={intl.formatMessage(messages.bookmarks)} to='/bookmarks' />);
-      }
-
-      if (myAccount.get('locked') || unreadFollowRequests > 0) {
-        navItems.push(<ColumnLink key='follow_requests' icon='user-plus' iconComponent={PersonAddIcon} text={intl.formatMessage(messages.follow_requests)} badge={badgeDisplay(unreadFollowRequests, 40)} to='/follow_requests' />);
-      }
-
-      navItems.push(<ColumnLink key='getting_started' icon='ellipsis-h' iconComponent={MoreHorizIcon} text={intl.formatMessage(messages.misc)} to='/getting-started-misc' />);
-
-      listItems = listItems.concat([
-        <div key='9'>
-          <ColumnLink key='lists' icon='bars' iconComponent={ListAltIcon} text={intl.formatMessage(messages.lists)} to='/lists' />
-          {lists.filter(list => !columns.find(item => item.get('id') === 'LIST' && item.getIn(['params', 'id']) === list.get('id'))).map(list =>
-            <ColumnLink key={`list-${list.get('id')}`} to={`/lists/${list.get('id')}`} icon='list-ul' iconComponent={ListAltIcon} text={list.get('title')} />,
-          )}
-        </div>,
-      ]);
-    }
-
-    return (
-      <Column bindToDocument={!multiColumn} icon='bars' iconComponent={MenuIcon} heading={intl.formatMessage(messages.heading)} label={intl.formatMessage(messages.menu)} hideHeadingOnMobile>
-        <div className='scrollable optionally-scrollable'>
-          <div className='getting-started__wrapper'>
-            {!multiColumn && signedIn && <NavigationBar account={myAccount} />}
-            {multiColumn && <ColumnSubheading text={intl.formatMessage(messages.navigation_subheading)} />}
-            {navItems}
-            {signedIn && (
-              <>
-                <ColumnSubheading text={intl.formatMessage(messages.lists_subheading)} />
-                {listItems}
-                <ColumnSubheading text={intl.formatMessage(messages.settings_subheading)} />
-                { preferencesLink !== undefined && <ColumnLink icon='cog' iconComponent={SettingsIcon} text={intl.formatMessage(messages.preferences)} href={preferencesLink} /> }
-                <ColumnLink icon='cogs' iconComponent={AdministrationIcon} text={intl.formatMessage(messages.settings)} onClick={openSettings} />
-                {canManageReports(permissions) && <ColumnLink key='moderation' href='/admin/reports' icon='flag' iconComponent={ModerationIcon} text={intl.formatMessage(messages.moderation)} />}
-                {canViewAdminDashboard(permissions) && <ColumnLink key='administration' href='/admin/dashboard' icon='tachometer' iconComponent={AdministrationIcon} text={intl.formatMessage(messages.administration)} />}
-              </>
-            )}
-          </div>
-
-          <LinkFooter multiColumn />
-        </div>
-
-        {(multiColumn && showTrends) && <Trends />}
-
-        <Helmet>
-          <title>{intl.formatMessage(messages.menu)}</title>
-          <meta name='robots' content='noindex' />
-        </Helmet>
-      </Column>
-    );
-  }
-
-}
-
-export default withIdentity(connect(makeMapStateToProps, mapDispatchToProps)(injectIntl(GettingStarted)));

app/javascript/flavours/glitch/features/getting_started/index.tsx

@@ -0,0 +1,32 @@
+import { useIntl } from 'react-intl';
+
+import { Helmet } from 'react-helmet';
+
+import { Column } from 'flavours/glitch/components/column';
+
+import { NavigationPanel } from '../navigation_panel';
+import { LinkFooter } from '../ui/components/link_footer';
+
+const GettingStarted: React.FC = () => {
+  const intl = useIntl();
+  return (
+    <Column>
+      <NavigationPanel multiColumn />
+
+      <LinkFooter multiColumn />
+
+      <Helmet>
+        <title>
+          {intl.formatMessage({
+            id: 'getting_started.heading',
+            defaultMessage: 'Getting started',
+          })}
+        </title>
+        <meta name='robots' content='noindex' />
+      </Helmet>
+    </Column>
+  );
+};
+
+// eslint-disable-next-line import/no-default-export
+export default GettingStarted;

app/javascript/flavours/glitch/features/getting_started_misc/index.jsx

@@ -1,59 +0,0 @@
-import PropTypes from 'prop-types';
-
-import { defineMessages, injectIntl } from 'react-intl';
-
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { connect } from 'react-redux';
-
-import BlockIcon from '@/material-icons/400-24px/block.svg?react';
-import InfoIcon from '@/material-icons/400-24px/info.svg?react';
-import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
-import PushPinIcon from '@/material-icons/400-24px/push_pin.svg?react';
-import StarIcon from '@/material-icons/400-24px/star-fill.svg?react';
-import VolumeOffIcon from '@/material-icons/400-24px/volume_off.svg?react';
-import Column from 'flavours/glitch/features/ui/components/column';
-import { ColumnLink } from 'flavours/glitch/features/ui/components/column_link';
-import ColumnSubheading from 'flavours/glitch/features/ui/components/column_subheading';
-import { identityContextPropShape, withIdentity } from 'flavours/glitch/identity_context';
-
-const messages = defineMessages({
-  heading: { id: 'column.heading', defaultMessage: 'Misc' },
-  subheading: { id: 'column.subheading', defaultMessage: 'Miscellaneous options' },
-  favourites: { id: 'navigation_bar.favourites', defaultMessage: 'Favorites' },
-  blocks: { id: 'navigation_bar.blocks', defaultMessage: 'Blocked users' },
-  domain_blocks: { id: 'navigation_bar.domain_blocks', defaultMessage: 'Blocked domains' },
-  mutes: { id: 'navigation_bar.mutes', defaultMessage: 'Muted users' },
-  pins: { id: 'navigation_bar.pins', defaultMessage: 'Pinned posts' },
-  keyboard_shortcuts: { id: 'navigation_bar.keyboard_shortcuts', defaultMessage: 'Keyboard shortcuts' },
-});
-
-class GettingStartedMisc extends ImmutablePureComponent {
-
-  static propTypes = {
-    identity: identityContextPropShape,
-    intl: PropTypes.object.isRequired,
-    dispatch: PropTypes.func.isRequired,
-  };
-
-  render () {
-    const { intl } = this.props;
-    const { signedIn } = this.props.identity;
-
-    return (
-      <Column icon='ellipsis-h' iconComponent={MoreHorizIcon} heading={intl.formatMessage(messages.heading)} alwaysShowBackButton>
-        <div className='scrollable'>
-          <ColumnSubheading text={intl.formatMessage(messages.subheading)} />
-          {signedIn && (<ColumnLink key='favourites' icon='star' iconComponent={StarIcon} text={intl.formatMessage(messages.favourites)} to='/favourites' />)}
-          {signedIn && (<ColumnLink key='pinned' icon='thumb-tack' iconComponent={PushPinIcon} text={intl.formatMessage(messages.pins)} to='/pinned' />)}
-          {signedIn && (<ColumnLink key='mutes' icon='volume-off' iconComponent={VolumeOffIcon} text={intl.formatMessage(messages.mutes)} to='/mutes' />)}
-          {signedIn && (<ColumnLink key='blocks' icon='ban' iconComponent={BlockIcon} text={intl.formatMessage(messages.blocks)} to='/blocks' />)}
-          {signedIn && (<ColumnLink key='domain_blocks' icon='minus-circle' iconComponent={BlockIcon} text={intl.formatMessage(messages.domain_blocks)} to='/domain_blocks' />)}
-          <ColumnLink key='shortcuts' icon='question' iconComponent={InfoIcon} text={intl.formatMessage(messages.keyboard_shortcuts)} to='/keyboard-shortcuts' />
-        </div>
-      </Column>
-    );
-  }
-
-}
-
-export default connect()(withIdentity(injectIntl(GettingStartedMisc)));

app/javascript/flavours/glitch/features/navigation_panel/index.tsx

@@ -203,13 +203,186 @@ const isFirehoseActive = (
 
 const MENU_WIDTH = 284;
 
-export const NavigationPanel: React.FC = () => {
+export const NavigationPanel: React.FC<{ multiColumn?: boolean }> = ({
+  multiColumn = false,
+}) => {
   const intl = useIntl();
   const { signedIn, disabledAccountId } = useIdentity();
+  const location = useLocation();
+  const showSearch = useBreakpoint('full') && !multiColumn;
+  const dispatch = useAppDispatch();
+
+  let banner: React.ReactNode;
+
+  if (transientSingleColumn) {
+    banner = (
+      <div className='switch-to-advanced'>
+        {intl.formatMessage(messages.openedInClassicInterface)}{' '}
+        <a
+          href={`/deck${location.pathname}`}
+          className='switch-to-advanced__toggle'
+        >
+          {intl.formatMessage(messages.advancedInterface)}
+        </a>
+      </div>
+    );
+  }
+
+  const handleOpenSettings = useCallback<MouseEventHandler>(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      dispatch(
+        openModal({
+          modalType: 'SETTINGS',
+          modalProps: {},
+        }),
+      );
+    },
+    [dispatch],
+  );
+
+  return (
+    <div className='navigation-panel'>
+      {showSearch && <Search singleColumn />}
+
+      {!multiColumn && <ProfileCard />}
+
+      {banner && <div className='navigation-panel__banner'>{banner}</div>}
+
+      <div className='navigation-panel__menu'>
+        {signedIn && (
+          <>
+            {!multiColumn && (
+              <ColumnLink
+                to='/publish'
+                icon='plus'
+                iconComponent={AddIcon}
+                activeIconComponent={AddIcon}
+                text={intl.formatMessage(messages.compose)}
+                className='button navigation-panel__compose-button'
+              />
+            )}
+            <ColumnLink
+              transparent
+              to='/home'
+              icon='home'
+              iconComponent={HomeIcon}
+              activeIconComponent={HomeActiveIcon}
+              text={intl.formatMessage(messages.home)}
+            />
+          </>
+        )}
+
+        {trendsEnabled && (
+          <ColumnLink
+            transparent
+            to='/explore'
+            icon='explore'
+            iconComponent={TrendingUpIcon}
+            text={intl.formatMessage(messages.explore)}
+          />
+        )}
+
+        {(signedIn || timelinePreview) && (
+          <ColumnLink
+            transparent
+            to='/public/local'
+            icon='globe'
+            iconComponent={PublicIcon}
+            isActive={isFirehoseActive}
+            text={intl.formatMessage(messages.firehose)}
+          />
+        )}
+
+        {signedIn && (
+          <>
+            <NotificationsLink />
+
+            <FollowRequestsLink />
+
+            <hr />
+
+            <ListPanel />
+
+            <FollowedTagsPanel />
+
+            <ColumnLink
+              transparent
+              to='/favourites'
+              icon='star'
+              iconComponent={StarIcon}
+              activeIconComponent={StarActiveIcon}
+              text={intl.formatMessage(messages.favourites)}
+            />
+            <ColumnLink
+              transparent
+              to='/bookmarks'
+              icon='bookmarks'
+              iconComponent={BookmarksIcon}
+              activeIconComponent={BookmarksActiveIcon}
+              text={intl.formatMessage(messages.bookmarks)}
+            />
+            <ColumnLink
+              transparent
+              to='/conversations'
+              icon='at'
+              iconComponent={AlternateEmailIcon}
+              text={intl.formatMessage(messages.direct)}
+            />
+
+            <hr />
+
+            <ColumnLink
+              transparent
+              href='/settings/preferences'
+              icon='cog'
+              iconComponent={SettingsIcon}
+              text={intl.formatMessage(messages.preferences)}
+            />
+            <ColumnLink
+              transparent
+              onClick={handleOpenSettings}
+              icon='cogs'
+              iconComponent={AdministrationIcon}
+              text={intl.formatMessage(messages.app_settings)}
+            />
+
+            <MoreLink />
+          </>
+        )}
+
+        <div className='navigation-panel__legal'>
+          <ColumnLink
+            transparent
+            to='/about'
+            icon='ellipsis-h'
+            iconComponent={InfoIcon}
+            text={intl.formatMessage(messages.about)}
+          />
+        </div>
+
+        {!signedIn && (
+          <div className='navigation-panel__sign-in-banner'>
+            <hr />
+
+            {disabledAccountId ? <DisabledAccountBanner /> : <SignInBanner />}
+          </div>
+        )}
+      </div>
+
+      <div className='flex-spacer' />
+
+      <Trends />
+    </div>
+  );
+};
+
+export const CollapsibleNavigationPanel: React.FC = () => {
   const open = useAppSelector((state) => state.navigation.open);
   const dispatch = useAppDispatch();
   const openable = useBreakpoint('openable');
-  const showSearch = useBreakpoint('full');
   const location = useLocation();
   const overlayRef = useRef<HTMLDivElement | null>(null);
 
@@ -311,37 +484,6 @@ export const NavigationPanel: React.FC = () => {
     }
   }, [open]);
 
-  let banner: React.ReactNode;
-
-  if (transientSingleColumn) {
-    banner = (
-      <div className='switch-to-advanced'>
-        {intl.formatMessage(messages.openedInClassicInterface)}{' '}
-        <a
-          href={`/deck${location.pathname}`}
-          className='switch-to-advanced__toggle'
-        >
-          {intl.formatMessage(messages.advancedInterface)}
-        </a>
-      </div>
-    );
-  }
-
-  const handleOpenSettings = useCallback<MouseEventHandler>(
-    (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-
-      dispatch(
-        openModal({
-          modalType: 'SETTINGS',
-          modalProps: {},
-        }),
-      );
-    },
-    [dispatch],
-  );
-
   const showOverlay = openable && open;
 
   return (
@@ -357,140 +499,7 @@ export const NavigationPanel: React.FC = () => {
         {...bind()}
         style={openable ? { x } : undefined}
       >
-        <div className='navigation-panel'>
+        <NavigationPanel />
-          {showSearch && <Search singleColumn />}
-
-          <ProfileCard />
-
-          {banner && <div className='navigation-panel__banner'>{banner}</div>}
-
-          <div className='navigation-panel__menu'>
-            {signedIn && (
-              <>
-                <ColumnLink
-                  to='/publish'
-                  icon='plus'
-                  iconComponent={AddIcon}
-                  activeIconComponent={AddIcon}
-                  text={intl.formatMessage(messages.compose)}
-                  className='button navigation-panel__compose-button'
-                />
-                <ColumnLink
-                  transparent
-                  to='/home'
-                  icon='home'
-                  iconComponent={HomeIcon}
-                  activeIconComponent={HomeActiveIcon}
-                  text={intl.formatMessage(messages.home)}
-                />
-              </>
-            )}
-
-            {trendsEnabled && (
-              <ColumnLink
-                transparent
-                to='/explore'
-                icon='explore'
-                iconComponent={TrendingUpIcon}
-                text={intl.formatMessage(messages.explore)}
-              />
-            )}
-
-            {(signedIn || timelinePreview) && (
-              <ColumnLink
-                transparent
-                to='/public/local'
-                icon='globe'
-                iconComponent={PublicIcon}
-                isActive={isFirehoseActive}
-                text={intl.formatMessage(messages.firehose)}
-              />
-            )}
-
-            {signedIn && (
-              <>
-                <NotificationsLink />
-
-                <FollowRequestsLink />
-
-                <hr />
-
-                <ListPanel />
-
-                <FollowedTagsPanel />
-
-                <ColumnLink
-                  transparent
-                  to='/favourites'
-                  icon='star'
-                  iconComponent={StarIcon}
-                  activeIconComponent={StarActiveIcon}
-                  text={intl.formatMessage(messages.favourites)}
-                />
-                <ColumnLink
-                  transparent
-                  to='/bookmarks'
-                  icon='bookmarks'
-                  iconComponent={BookmarksIcon}
-                  activeIconComponent={BookmarksActiveIcon}
-                  text={intl.formatMessage(messages.bookmarks)}
-                />
-                <ColumnLink
-                  transparent
-                  to='/conversations'
-                  icon='at'
-                  iconComponent={AlternateEmailIcon}
-                  text={intl.formatMessage(messages.direct)}
-                />
-
-                <hr />
-
-                <ColumnLink
-                  transparent
-                  href='/settings/preferences'
-                  icon='cog'
-                  iconComponent={SettingsIcon}
-                  text={intl.formatMessage(messages.preferences)}
-                />
-                <ColumnLink
-                  transparent
-                  onClick={handleOpenSettings}
-                  icon='cogs'
-                  iconComponent={AdministrationIcon}
-                  text={intl.formatMessage(messages.app_settings)}
-                />
-
-                <MoreLink />
-              </>
-            )}
-
-            <div className='navigation-panel__legal'>
-              <ColumnLink
-                transparent
-                to='/about'
-                icon='ellipsis-h'
-                iconComponent={InfoIcon}
-                text={intl.formatMessage(messages.about)}
-              />
-            </div>
-
-            {!signedIn && (
-              <div className='navigation-panel__sign-in-banner'>
-                <hr />
-
-                {disabledAccountId ? (
-                  <DisabledAccountBanner />
-                ) : (
-                  <SignInBanner />
-                )}
-              </div>
-            )}
-          </div>
-
-          <div className='flex-spacer' />
-
-          <Trends />
-        </div>
       </animated.div>
     </div>
   );

app/javascript/flavours/glitch/features/ui/components/columns_area.jsx

@@ -25,7 +25,7 @@ import BundleColumnError from './bundle_column_error';
 import { ColumnLoading } from './column_loading';
 import { ComposePanel, RedirectToMobileComposeIfNeeded } from './compose_panel';
 import DrawerLoading from './drawer_loading';
-import { NavigationPanel } from 'flavours/glitch/features/navigation_panel';
+import { CollapsibleNavigationPanel } from 'flavours/glitch/features/navigation_panel';
 
 const componentMap = {
   'COMPOSE': Compose,
@@ -133,7 +133,7 @@ export default class ColumnsArea extends ImmutablePureComponent {
             <div className='columns-area columns-area--mobile'>{children}</div>
           </div>
 
-          <NavigationPanel />
+          <CollapsibleNavigationPanel />
         </div>
       );
     }

app/javascript/flavours/glitch/features/ui/components/navigation_bar.tsx

@@ -22,7 +22,7 @@ import { registrationsOpen, sso_redirect } from 'flavours/glitch/initial_state';
 import { selectUnreadNotificationGroupsCount } from 'flavours/glitch/selectors/notifications';
 import { useAppDispatch, useAppSelector } from 'flavours/glitch/store';
 
-const messages = defineMessages({
+export const messages = defineMessages({
   home: { id: 'tabs_bar.home', defaultMessage: 'Home' },
   search: { id: 'tabs_bar.search', defaultMessage: 'Search' },
   publish: { id: 'tabs_bar.publish', defaultMessage: 'New Post' },

app/javascript/flavours/glitch/features/ui/index.jsx

@@ -69,7 +69,6 @@ import {
   DomainBlocks,
   Mutes,
   PinnedStatuses,
-  GettingStartedMisc,
   Directory,
   OnboardingProfile,
   OnboardingFollows,
@@ -152,13 +151,8 @@ class SwitchingColumnsArea extends PureComponent {
   };
 
   UNSAFE_componentWillMount () {
-    if (this.props.singleColumn) {
+    document.body.classList.toggle('layout-single-column', this.props.singleColumn);
-      document.body.classList.toggle('layout-single-column', true);
+    document.body.classList.toggle('layout-multiple-columns', !this.props.singleColumn);
-      document.body.classList.toggle('layout-multiple-columns', false);
-    } else {
-      document.body.classList.toggle('layout-single-column', false);
-      document.body.classList.toggle('layout-multiple-columns', true);
-    }
   }
 
   componentDidUpdate (prevProps) {
@@ -210,8 +204,8 @@ class SwitchingColumnsArea extends PureComponent {
             {singleColumn ? <Redirect from='/deck' to='/home' exact /> : null}
             {singleColumn && pathName.startsWith('/deck/') ? <Redirect from={pathName} to={{...this.props.location, pathname: pathName.slice(5)}} /> : null}
             {/* Redirect old bookmarks (without /deck) with home-like routes to the advanced interface */}
-            {!singleColumn && pathName === '/getting-started' ? <Redirect from='/getting-started' to='/deck/getting-started' exact /> : null}
             {!singleColumn && pathName === '/home' ? <Redirect from='/home' to='/deck/getting-started' exact /> : null}
+            {pathName === '/getting-started' ? <Redirect from='/getting-started' to={singleColumn ? '/home' : '/deck/getting-started'} exact /> : null}
 
             <WrappedRoute path='/getting-started' component={GettingStarted} content={children} />
             <WrappedRoute path='/keyboard-shortcuts' component={KeyboardShortcuts} content={children} />
@@ -271,7 +265,6 @@ class SwitchingColumnsArea extends PureComponent {
             <WrappedRoute path='/followed_tags' component={FollowedTags} content={children} />
             <WrappedRoute path='/mutes' component={Mutes} content={children} />
             <WrappedRoute path='/lists' component={Lists} content={children} />
-            <WrappedRoute path='/getting-started-misc' component={GettingStartedMisc} content={children} />
 
             <Route component={BundleColumnError} />
           </WrappedSwitch>

app/javascript/flavours/glitch/features/ui/util/async-components.js

@@ -50,10 +50,6 @@ export function GettingStarted () {
   return import('../../getting_started');
 }
 
-export function GettingStartedMisc () {
-  return import('../../getting_started_misc');
-}
-
 export function KeyboardShortcuts () {
   return import('../../keyboard_shortcuts');
 }

app/javascript/flavours/glitch/locales/en.json

@@ -6,12 +6,8 @@
   "account.view_full_profile": "View full profile",
   "boost_modal.missing_description": "This toot contains some media without description",
   "column.favourited_by": "Favourited by",
-  "column.heading": "Misc",
   "column.reblogged_by": "Boosted by",
-  "column.subheading": "Miscellaneous options",
   "column_header.profile": "Profile",
-  "column_subheading.lists": "Lists",
-  "column_subheading.navigation": "Navigation",
   "community.column_settings.allow_local_only": "Show local-only toots",
   "compose.attach.doodle": "Draw something",
   "compose.change_federation": "Change federation settings",
@@ -45,8 +41,6 @@
   "keyboard_shortcuts.secondary_toot": "to send toot using secondary privacy setting",
   "moved_to_warning": "This account is marked as moved to {moved_to_link}, and may thus not accept new follows.",
   "navigation_bar.app_settings": "App settings",
-  "navigation_bar.keyboard_shortcuts": "Keyboard shortcuts",
-  "navigation_bar.misc": "Misc",
   "notifications.column_settings.filter_bar.show_bar": "Show filter bar",
   "settings.always_show_spoilers_field": "Always enable the Content Warning field",
   "settings.close": "Close",