Profile redesign: About tab (#37851)

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

@@ -78,6 +78,7 @@ import {
   PrivacyPolicy,
   TermsOfService,
   AccountFeatured,
+  AccountAbout,
   Quotes,
 } from './util/async-components';
 import { ColumnsContextProvider } from './util/columns_context';
@@ -88,6 +89,7 @@ import { WrappedSwitch, WrappedRoute } from './util/react_router_helpers';
 // Without this it ends up in ~8 very commonly used bundles.
 import '../../components/status';
 import { areCollectionsEnabled } from '../collections/utils';
+import { isClientFeatureEnabled } from '@/mastodon/utils/environment';
 
 const messages = defineMessages({
   beforeUnload: { id: 'ui.beforeunload', defaultMessage: 'Your draft will be lost if you leave Mastodon.' },
@@ -109,6 +111,7 @@ class SwitchingColumnsArea extends PureComponent {
     children: PropTypes.node,
     location: PropTypes.object,
     singleColumn: PropTypes.bool,
+    layout: PropTypes.string.isRequired,
     forceOnboarding: PropTypes.bool,
   };
 
@@ -159,6 +162,37 @@ class SwitchingColumnsArea extends PureComponent {
       redirect = <Redirect from='/' to='/about' exact />;
     }
 
+    const profileRedesignEnabled = isClientFeatureEnabled('profile_redesign');
+    const profileRedesignRoutes = [];
+    if (profileRedesignEnabled) {
+      profileRedesignRoutes.push(
+        <WrappedRoute key="posts" path={['/@:acct/posts', '/accounts/:id/posts']} exact component={AccountTimeline} content={children} />,
+      );
+      // Check if we're in single-column mode. Confusingly, the singleColumn prop includes mobile.
+      if (this.props.layout === 'single-column') {
+        // When in single column mode (desktop w/o advanced view), redirect both the root and about to the posts tab.
+        profileRedesignRoutes.push(
+          <Redirect key="acct-redirect" from='/@:acct' to='/@:acct/posts' exact />,
+          <Redirect key="id-redirect" from='/accounts/:id' to='/accounts/:id/posts' exact />,
+          <Redirect key="about-acct-redirect" from='/@:acct/about' to='/@:acct/posts' exact />,
+          <Redirect key="about-id-redirect" from='/accounts/:id/about' to='/accounts/:id/posts' exact />,
+        );
+      } else {
+        // Otherwise, provide and redirect to the /about page.
+        profileRedesignRoutes.push(
+          <WrappedRoute key="about" path={['/@:acct/about', '/accounts/:id/about']} component={AccountAbout} content={children} />,
+          <Redirect key="acct-redirect" from='/@:acct' to='/@:acct/about' exact />,
+          <Redirect key="id-redirect" from='/accounts/:id' to='/accounts/:id/about' exact />
+        );
+      }
+    } else {
+      // If the redesign is not enabled but someone shares an /about link, redirect to the root.
+      profileRedesignRoutes.push(
+        <Redirect key="about-acct-redirect" from='/@:acct/about' to='/@:acct' exact />,
+        <Redirect key="about-id-redirect" from='/accounts/:id/about' to='/accounts/:id' exact />
+      );
+    }
+
     return (
       <ColumnsContextProvider multiColumn={!singleColumn}>
         <ColumnsAreaContainer ref={this.setRef} singleColumn={singleColumn}>
@@ -205,7 +239,8 @@ class SwitchingColumnsArea extends PureComponent {
             <WrappedRoute path='/search' component={Search} content={children} />
             <WrappedRoute path={['/publish', '/statuses/new']} component={Compose} content={children} />
 
-            <WrappedRoute path={['/@:acct', '/accounts/:id']} exact component={AccountTimeline} content={children} />
+            {!profileRedesignEnabled && <WrappedRoute path={['/@:acct', '/accounts/:id']} exact component={AccountTimeline} content={children} />}
+            {...profileRedesignRoutes}
             <WrappedRoute path={['/@:acct/featured', '/accounts/:id/featured']} component={AccountFeatured} content={children} />
             <WrappedRoute path='/@:acct/tagged/:tagged?' exact component={AccountTimeline} content={children} />
             <WrappedRoute path={['/@:acct/with_replies', '/accounts/:id/with_replies']} component={AccountTimeline} content={children} componentParams={{ withReplies: true }} />
@@ -235,7 +270,7 @@ class SwitchingColumnsArea extends PureComponent {
             }
             {areCollectionsEnabled() &&
               <WrappedRoute path='/collections' component={Collections} content={children} />
-            }    
+            }
 
             <Route component={BundleColumnError} />
           </WrappedSwitch>
@@ -591,7 +626,13 @@ class UI extends PureComponent {
     return (
       <Hotkeys global handlers={handlers}>
         <div className={classNames('ui', { 'is-composing': isComposing })} ref={this.setRef}>
-          <SwitchingColumnsArea identity={this.props.identity} location={location} singleColumn={layout === 'mobile' || layout === 'single-column'} forceOnboarding={firstLaunch && newAccount}>
+          <SwitchingColumnsArea
+            identity={this.props.identity}
+            location={location}
+            singleColumn={layout === 'mobile' || layout === 'single-column'}
+            layout={layout}
+            forceOnboarding={firstLaunch && newAccount}
+          >
             {children}
           </SwitchingColumnsArea>
 

app/javascript/mastodon/features/ui/util/async-components.js

@@ -87,6 +87,11 @@ export function AccountFeatured() {
   return import('../../account_featured');
 }
 
+export function AccountAbout() {
+  return import('../../account_about')
+    .then((module) => ({ default: module.AccountAbout }));
+}
+
 export function Followers () {
   return import('../../followers');
 }