Profile editing: Add initial route (#37885)

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

@@ -0,0 +1,53 @@
+import type { FC } from 'react';
+
+import { FormattedMessage, useIntl } from 'react-intl';
+
+import { Link } from 'react-router-dom';
+
+import { Column } from '@/mastodon/components/column';
+import { ColumnHeader } from '@/mastodon/components/column_header';
+import { LoadingIndicator } from '@/mastodon/components/loading_indicator';
+import BundleColumnError from '@/mastodon/features/ui/components/bundle_column_error';
+import { useAccount } from '@/mastodon/hooks/useAccount';
+import { useCurrentAccountId } from '@/mastodon/hooks/useAccountId';
+
+import classes from './styles.module.scss';
+
+export const AccountEdit: FC<{ multiColumn: boolean }> = ({ multiColumn }) => {
+  const accountId = useCurrentAccountId();
+  const account = useAccount(accountId);
+  const intl = useIntl();
+
+  if (!accountId) {
+    return <BundleColumnError multiColumn={multiColumn} errorType='routing' />;
+  }
+
+  if (!account) {
+    return (
+      <Column bindToDocument={!multiColumn} className={classes.column}>
+        <LoadingIndicator />
+      </Column>
+    );
+  }
+
+  return (
+    <Column bindToDocument={!multiColumn} className={classes.column}>
+      <ColumnHeader
+        title={intl.formatMessage({
+          id: 'account_edit.column_title',
+          defaultMessage: 'Edit Profile',
+        })}
+        className={classes.header}
+        showBackButton
+        extraButton={
+          <Link to={`/@${account.acct}`} className='button'>
+            <FormattedMessage
+              id='account_edit.column_button'
+              defaultMessage='Done'
+            />
+          </Link>
+        }
+      />
+    </Column>
+  );
+};

app/javascript/mastodon/features/account_edit/styles.module.scss

@@ -0,0 +1,26 @@
+.column {
+  border: 1px solid var(--color-border-primary);
+  border-top-width: 0;
+}
+
+.header {
+  :global(.column-header__buttons) {
+    align-items: center;
+    padding-inline-end: 16px;
+    height: auto;
+  }
+}
+
+.nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 24px 24px 12px;
+
+  > h1 {
+    flex-grow: 1;
+    font-weight: 600;
+    font-size: 15px;
+  }
+}

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

@@ -22,7 +22,7 @@ import { identityContextPropShape, withIdentity } from 'mastodon/identity_contex
 import { layoutFromWindow } from 'mastodon/is_mobile';
 import { WithRouterPropTypes } from 'mastodon/utils/react_router';
 import { checkAnnualReport } from '@/mastodon/reducers/slices/annual_report';
-import { isServerFeatureEnabled } from '@/mastodon/utils/environment';
+import { isClientFeatureEnabled, isServerFeatureEnabled } from '@/mastodon/utils/environment';
 
 import { uploadCompose, resetCompose, changeComposeSpoilerness } from '../../actions/compose';
 import { clearHeight } from '../../actions/height_cache';
@@ -80,6 +80,7 @@ import {
   TermsOfService,
   AccountFeatured,
   AccountAbout,
+  AccountEdit,
   Quotes,
 } from './util/async-components';
 import { ColumnsContextProvider } from './util/columns_context';
@@ -232,6 +233,8 @@ class SwitchingColumnsArea extends PureComponent {
             <WrappedRoute path='/bookmarks' component={BookmarkedStatuses} content={children} />
             <WrappedRoute path='/pinned' component={PinnedStatuses} content={children} />
 
+            {isClientFeatureEnabled('profile_editing') && <WrappedRoute key="edit" path='/profile/edit' component={AccountEdit} content={children} />}
+
             <WrappedRoute path={['/start', '/start/profile']} exact component={OnboardingProfile} content={children} />
             <WrappedRoute path='/start/follows' component={OnboardingFollows} content={children} />
             <WrappedRoute path='/directory' component={Directory} content={children} />

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

@@ -92,6 +92,11 @@ export function AccountAbout() {
     .then((module) => ({ default: module.AccountAbout }));
 }
 
+export function AccountEdit() {
+  return import('../../account_edit')
+  .then((module) => ({ default: module.AccountEdit }));
+}
+
 export function Followers () {
   return import('../../followers');
 }