Change back button to always appear in advanced web UI (#29669)

app/javascript/mastodon/components/column_header.jsx

@@ -13,7 +13,7 @@ import ChevronRightIcon from '@/material-icons/400-24px/chevron_right.svg?react'
 import CloseIcon from '@/material-icons/400-24px/close.svg?react';
 import SettingsIcon from '@/material-icons/400-24px/settings.svg?react';
 import { Icon }  from 'mastodon/components/icon';
-import { ButtonInTabsBar, useColumnsContext } from 'mastodon/features/ui/util/columns_context';
+import { ButtonInTabsBar } from 'mastodon/features/ui/util/columns_context';
 import { WithRouterPropTypes } from 'mastodon/utils/react_router';
 
 import { useAppHistory } from './router';
@@ -26,10 +26,9 @@ const messages = defineMessages({
   back: { id: 'column_back_button.label', defaultMessage: 'Back' },
 });
 
-const BackButton = ({ pinned, show, onlyIcon }) => {
+const BackButton = ({ onlyIcon }) => {
   const history = useAppHistory();
   const intl = useIntl();
-  const { multiColumn } = useColumnsContext();
 
   const handleBackClick = useCallback(() => {
     if (history.location?.state?.fromMastodon) {
@@ -39,10 +38,6 @@ const BackButton = ({ pinned, show, onlyIcon }) => {
     }
   }, [history]);
 
-  const showButton = history && !pinned && ((multiColumn && history.location?.state?.fromMastodon) || show);
-
-  if (!showButton) return null;
-
   return (
     <button onClick={handleBackClick} className={classNames('column-header__back-button', { 'compact': onlyIcon })} aria-label={intl.formatMessage(messages.back)}>
       <Icon id='chevron-left' icon={ArrowBackIcon} className='column-back-button__icon' />
@@ -52,8 +47,6 @@ const BackButton = ({ pinned, show, onlyIcon }) => {
 };
 
 BackButton.propTypes = {
-  pinned: PropTypes.bool,
-  show: PropTypes.bool,
   onlyIcon: PropTypes.bool,
 };
 
@@ -118,7 +111,7 @@ class ColumnHeader extends PureComponent {
   };
 
   render () {
-    const { title, icon, iconComponent, active, children, pinned, multiColumn, extraButton, showBackButton, intl: { formatMessage }, placeholder, appendContent, collapseIssues } = this.props;
+    const { title, icon, iconComponent, active, children, pinned, multiColumn, extraButton, showBackButton, intl: { formatMessage }, placeholder, appendContent, collapseIssues, history } = this.props;
     const { collapsed, animating } = this.state;
 
     const wrapperClassName = classNames('column-header__wrapper', {
@@ -161,7 +154,9 @@ class ColumnHeader extends PureComponent {
       pinButton = <button className='text-btn column-header__setting-btn' onClick={this.handlePin}><Icon id='plus' icon={AddIcon} /> <FormattedMessage id='column_header.pin' defaultMessage='Pin' /></button>;
     }
 
-    backButton = <BackButton pinned={pinned} show={showBackButton} onlyIcon={!!title} />;
+    if (history && !pinned && ((multiColumn && history.location?.state?.fromMastodon) || showBackButton)) {
+      backButton = <BackButton onlyIcon={!!title} />;
+    }
 
     const collapsedContent = [
       extraContent,
@@ -199,16 +194,16 @@ class ColumnHeader extends PureComponent {
         <h1 className={buttonClassName}>
           {hasTitle && (
             <>
-              {showBackButton && backButton}
+              {backButton}
 
               <button onClick={this.handleTitleClick} className='column-header__title'>
-                {!showBackButton && <Icon id={icon} icon={iconComponent} className='column-header__icon' />}
+                {!backButton && <Icon id={icon} icon={iconComponent} className='column-header__icon' />}
                 {title}
               </button>
             </>
           )}
 
-          {!hasTitle && showBackButton && backButton}
+          {!hasTitle && backButton}
 
           <div className='column-header__buttons'>
             {extraButton}

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

@@ -68,7 +68,7 @@ class FollowRequests extends ImmutablePureComponent {
     );
 
     return (
-      <Column bindToDocument={!multiColumn} icon='user-plus' iconComponent={PersonAddIcon} heading={intl.formatMessage(messages.heading)} alwaysShowBackButton>
+      <Column bindToDocument={!multiColumn} icon='user-plus' iconComponent={PersonAddIcon} heading={intl.formatMessage(messages.heading)}>
         <ScrollableList
           scrollKey='follow_requests'
           onLoadMore={this.handleLoadMore}