From a4abbce9c2405aaa19a918ef2c7e056ebcfd04cf Mon Sep 17 00:00:00 2001
From: Echo <ChaosExAnima@users.noreply.github.com>
Date: Fri, 2 Oct 2026 11:36:43 +0000
Subject: [PATCH] Composer redesign: Standalone pages (#40826)

---
 .../account_edit/modals/bio_modal.tsx         |  1 -
 .../account_edit/modals/image_upload.tsx      |  6 +--
 .../account_edit/modals/name_modal.tsx        |  1 -
 .../account_timeline/modals/note_modal.tsx    |  1 -
 .../mastodon/features/compose/index.tsx       | 23 ++++++---
 .../features/compose/redesign/emoji.tsx       |  1 -
 .../features/compose/redesign/index.tsx       | 23 ++++++---
 .../features/compose/redesign/poll.tsx        |  1 -
 .../features/compose/redesign/sensitive.tsx   |  1 -
 .../compose/redesign/styles.module.scss       | 17 +++++++
 .../features/compose/redesign/trigger.tsx     |  1 -
 .../features/interaction_modal/index.tsx      |  1 -
 .../features/standalone/compose/index.jsx     | 15 ------
 .../features/standalone/compose/index.tsx     | 49 +++++++++++++++++++
 .../features/ui/components/boost_modal.tsx    |  1 -
 .../confirmation_modal.tsx                    |  2 -
 eslint.config.mjs                             |  1 +
 17 files changed, 100 insertions(+), 45 deletions(-)
 delete mode 100644 app/javascript/mastodon/features/standalone/compose/index.jsx
 create mode 100644 app/javascript/mastodon/features/standalone/compose/index.tsx

diff --git a/app/javascript/mastodon/features/account_edit/modals/bio_modal.tsx b/app/javascript/mastodon/features/account_edit/modals/bio_modal.tsx
index 8d286dedce7..c18fa576d67 100644
--- a/app/javascript/mastodon/features/account_edit/modals/bio_modal.tsx
+++ b/app/javascript/mastodon/features/account_edit/modals/bio_modal.tsx
@@ -71,7 +71,6 @@ export const BioModal: FC<BaseConfirmationModalProps> = ({ onClose }) => {
         maxLength={maxLength}
         className={classes.bioField}
         {...textAreaProps}
-        // eslint-disable-next-line jsx-a11y/no-autofocus -- This is a modal, it's fine.
         autoFocus
       />
     </ConfirmationModal>
diff --git a/app/javascript/mastodon/features/account_edit/modals/image_upload.tsx b/app/javascript/mastodon/features/account_edit/modals/image_upload.tsx
index db641ff1c0c..03911b7c134 100644
--- a/app/javascript/mastodon/features/account_edit/modals/image_upload.tsx
+++ b/app/javascript/mastodon/features/account_edit/modals/image_upload.tsx
@@ -282,11 +282,7 @@ const StepUpload: FC<{
         }}
         tagName='p'
       />
-      <Button
-        onClick={handleUploadClick}
-        // eslint-disable-next-line jsx-a11y/no-autofocus -- This is the main input, so auto-focus on it.
-        autoFocus
-      >
+      <Button onClick={handleUploadClick} autoFocus>
         <FormattedMessage
           id='account_edit.upload_modal.step_upload.button'
           defaultMessage='Browse files'
diff --git a/app/javascript/mastodon/features/account_edit/modals/name_modal.tsx b/app/javascript/mastodon/features/account_edit/modals/name_modal.tsx
index de429771400..edb17d75dea 100644
--- a/app/javascript/mastodon/features/account_edit/modals/name_modal.tsx
+++ b/app/javascript/mastodon/features/account_edit/modals/name_modal.tsx
@@ -63,7 +63,6 @@ export const NameModal: FC<BaseConfirmationModalProps> = ({ onClose }) => {
         aria-labelledby={titleId}
         counterMax={maxLength}
         label=''
-        // eslint-disable-next-line jsx-a11y/no-autofocus -- This is a modal, it's fine.
         autoFocus
       />
     </ConfirmationModal>
diff --git a/app/javascript/mastodon/features/account_timeline/modals/note_modal.tsx b/app/javascript/mastodon/features/account_timeline/modals/note_modal.tsx
index b8875be0370..9edae1a9258 100644
--- a/app/javascript/mastodon/features/account_timeline/modals/note_modal.tsx
+++ b/app/javascript/mastodon/features/account_timeline/modals/note_modal.tsx
@@ -146,7 +146,6 @@ const InnerNodeModal: FC<{
                 ? { variant: 'error', message: errorText }
                 : undefined
             }
-            // eslint-disable-next-line jsx-a11y/no-autofocus -- We want to focus here as it's a modal.
             autoFocus
           />
         </>
diff --git a/app/javascript/mastodon/features/compose/index.tsx b/app/javascript/mastodon/features/compose/index.tsx
index ac56a2572cd..75e2c012244 100644
--- a/app/javascript/mastodon/features/compose/index.tsx
+++ b/app/javascript/mastodon/features/compose/index.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useCallback } from 'react';
+import { useEffect, useCallback, Suspense, lazy } from 'react';
 
 import { useIntl, defineMessages } from 'react-intl';
 
@@ -12,6 +12,7 @@ import elephantUIPlane from '@/images/elephant_ui_plane.svg';
 import { Column } from '@/mastodon/components/column';
 import { ColumnHeader as LegacyColumnHeader } from '@/mastodon/components/column/header';
 import { ColumnHeader } from '@/mastodon/components/column_header';
+import { LoadingIndicator } from '@/mastodon/components/loading_indicator';
 import { isRedesignEnabled } from '@/mastodon/utils/environment';
 import EditIcon from '@/material-icons/400-24px/edit_square.svg?react';
 import PeopleIcon from '@/material-icons/400-24px/group.svg?react';
@@ -206,12 +207,14 @@ const Compose: React.FC<{ multiColumn: boolean }> = ({ multiColumn }) => {
         />
       )}
 
-      <div className='scrollable'>
-        <ComposeFormContainer
-          // This is fine on this single-purpose view
-          // eslint-disable-next-line jsx-a11y/no-autofocus
-          autoFocus
-        />
+      <div className='scrollable scrollable--flex'>
+        {isRedesignEnabled() ? (
+          <Suspense fallback={<LoadingIndicator />}>
+            <ComposeLazyForm autoFocus headless />
+          </Suspense>
+        ) : (
+          <ComposeFormContainer autoFocus />
+        )}
       </div>
 
       <Helmet>
@@ -221,5 +224,11 @@ const Compose: React.FC<{ multiColumn: boolean }> = ({ multiColumn }) => {
   );
 };
 
+const ComposeLazyForm = lazy(() =>
+  import('./redesign/index').then(({ RedesignComposeForm }) => ({
+    default: RedesignComposeForm,
+  })),
+);
+
 // eslint-disable-next-line import/no-default-export
 export default Compose;
diff --git a/app/javascript/mastodon/features/compose/redesign/emoji.tsx b/app/javascript/mastodon/features/compose/redesign/emoji.tsx
index bc55d931f1a..c6f05442d6e 100644
--- a/app/javascript/mastodon/features/compose/redesign/emoji.tsx
+++ b/app/javascript/mastodon/features/compose/redesign/emoji.tsx
@@ -195,7 +195,6 @@ const ComposeEmojiDropdown: React.FC<
           showSkinTones={false}
           // We need to cast as unknown as this requires a legacy class component.
           notFound={NotFound as unknown as () => React.Component}
-          // eslint-disable-next-line jsx-a11y/no-autofocus
           autoFocus
           emojiTooltip
         />
diff --git a/app/javascript/mastodon/features/compose/redesign/index.tsx b/app/javascript/mastodon/features/compose/redesign/index.tsx
index b2ca31f86e3..7fb709d55a7 100644
--- a/app/javascript/mastodon/features/compose/redesign/index.tsx
+++ b/app/javascript/mastodon/features/compose/redesign/index.tsx
@@ -28,6 +28,7 @@ import { ComposeVisibility } from './visibility';
 
 interface RedesignComposeFormProps {
   autoFocus?: boolean;
+  headless?: boolean;
   className?: string;
   noMinimize?: boolean;
   redirectOnSuccess?: boolean;
@@ -35,7 +36,14 @@ interface RedesignComposeFormProps {
 
 export const RedesignComposeForm: React.FC<
   RedesignComposeFormProps & React.ComponentPropsWithRef<'form'>
-> = ({ autoFocus, className, noMinimize, redirectOnSuccess, ...props }) => {
+> = ({
+  autoFocus,
+  headless,
+  className,
+  noMinimize,
+  redirectOnSuccess,
+  ...props
+}) => {
   const type = useAppSelector(selectComposeType);
 
   const { onEmojiPick, onSubmit } = useComposeHandlers(redirectOnSuccess);
@@ -48,13 +56,17 @@ export const RedesignComposeForm: React.FC<
       role='dialog'
       onSubmit={onSubmit}
       aria-labelledby={titleId}
-      className={classNames(className, classes.root)}
+      className={classNames(
+        className,
+        classes.root,
+        headless && classes.headless,
+      )}
     >
       {(type === 'message' || type === 'replyPrivate') && (
         <div className={classes.background} />
       )}
 
-      <ComposeFormHeader id={titleId} noMinimize={noMinimize} />
+      {!headless && <ComposeFormHeader id={titleId} noMinimize={noMinimize} />}
 
       <ComposeReply />
 
@@ -68,10 +80,7 @@ export const RedesignComposeForm: React.FC<
 
       <ComposeSensitiveField />
 
-      <ComposeTextarea
-        // eslint-disable-next-line jsx-a11y/no-autofocus
-        autoFocus={autoFocus}
-      >
+      <ComposeTextarea autoFocus={autoFocus}>
         <ComposeAttachments className={classes.attachments} />
       </ComposeTextarea>
 
diff --git a/app/javascript/mastodon/features/compose/redesign/poll.tsx b/app/javascript/mastodon/features/compose/redesign/poll.tsx
index b82dec1a4b2..7ebb6b10207 100644
--- a/app/javascript/mastodon/features/compose/redesign/poll.tsx
+++ b/app/javascript/mastodon/features/compose/redesign/poll.tsx
@@ -254,7 +254,6 @@ const ComposePollOption: React.FC<{
           number: index + 1,
         })}
         maxLength={50}
-        // eslint-disable-next-line jsx-a11y/no-autofocus
         autoFocus={index === 0}
         data-index={index}
         spellCheck
diff --git a/app/javascript/mastodon/features/compose/redesign/sensitive.tsx b/app/javascript/mastodon/features/compose/redesign/sensitive.tsx
index 2971089ca61..fcc80dd27c8 100644
--- a/app/javascript/mastodon/features/compose/redesign/sensitive.tsx
+++ b/app/javascript/mastodon/features/compose/redesign/sensitive.tsx
@@ -56,7 +56,6 @@ export const ComposeSensitiveField: React.FC = () => {
       value={sensitiveText}
       onChange={onChange}
       onKeyDown={onKeyDown}
-      // eslint-disable-next-line jsx-a11y/no-autofocus -- Focuses on open
       autoFocus
     />
   );
diff --git a/app/javascript/mastodon/features/compose/redesign/styles.module.scss b/app/javascript/mastodon/features/compose/redesign/styles.module.scss
index 8bdbbcb7408..aadda629fcf 100644
--- a/app/javascript/mastodon/features/compose/redesign/styles.module.scss
+++ b/app/javascript/mastodon/features/compose/redesign/styles.module.scss
@@ -18,6 +18,23 @@
   }
 }
 
+.headless {
+  border: 0;
+  box-shadow: none;
+  flex-grow: 1;
+  border-radius: 0;
+  padding-block-start: 0;
+}
+
+:global(.compose-standalone) .headless {
+  min-height: 200px;
+
+  // 138px = header, 235px = footer, 8px padding
+  height: calc(100vh - (138px + 235px + var(--space-2)));
+  max-width: 400px;
+  margin-inline: auto;
+}
+
 .background {
   mask-repeat: repeat;
   mask-image: url('@/images/composer_message.svg');
diff --git a/app/javascript/mastodon/features/compose/redesign/trigger.tsx b/app/javascript/mastodon/features/compose/redesign/trigger.tsx
index fbcedcf9c22..1136e428917 100644
--- a/app/javascript/mastodon/features/compose/redesign/trigger.tsx
+++ b/app/javascript/mastodon/features/compose/redesign/trigger.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable jsx-a11y/no-autofocus */
 import { lazy, Suspense, useCallback, useEffect, useState } from 'react';
 
 import { FormattedMessage } from 'react-intl';
diff --git a/app/javascript/mastodon/features/interaction_modal/index.tsx b/app/javascript/mastodon/features/interaction_modal/index.tsx
index be43a922cc5..543766dcf29 100644
--- a/app/javascript/mastodon/features/interaction_modal/index.tsx
+++ b/app/javascript/mastodon/features/interaction_modal/index.tsx
@@ -364,7 +364,6 @@ const LoginForm: React.FC<{
           aria-label={intl.formatMessage(messages.loginPrompt, {
             example: EXAMPLE_VALUE,
           })}
-          // eslint-disable-next-line jsx-a11y/no-autofocus
           autoFocus
           onChange={handleChange}
           onFocus={handleFocus}
diff --git a/app/javascript/mastodon/features/standalone/compose/index.jsx b/app/javascript/mastodon/features/standalone/compose/index.jsx
deleted file mode 100644
index 5d336275d4f..00000000000
--- a/app/javascript/mastodon/features/standalone/compose/index.jsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { AlertsController } from 'mastodon/components/alerts_controller';
-import ComposeFormContainer from 'mastodon/features/compose/containers/compose_form_container';
-import LoadingBarContainer from 'mastodon/features/ui/containers/loading_bar_container';
-import ModalContainer from 'mastodon/features/ui/containers/modal_container';
-
-const Compose = () => (
-  <>
-    <ComposeFormContainer autoFocus withoutNavigation redirectOnSuccess />
-    <AlertsController />
-    <ModalContainer />
-    <LoadingBarContainer className='loading-bar' />
-  </>
-);
-
-export default Compose;
diff --git a/app/javascript/mastodon/features/standalone/compose/index.tsx b/app/javascript/mastodon/features/standalone/compose/index.tsx
new file mode 100644
index 00000000000..b42a2a49245
--- /dev/null
+++ b/app/javascript/mastodon/features/standalone/compose/index.tsx
@@ -0,0 +1,49 @@
+import { lazy, Suspense, useEffect } from 'react';
+
+import { AlertsController } from '@/mastodon/components/alerts_controller';
+import { LoadingIndicator } from '@/mastodon/components/loading_indicator';
+import ComposeFormContainer from '@/mastodon/features/compose/containers/compose_form_container';
+import LoadingBarContainer from '@/mastodon/features/ui/containers/loading_bar_container';
+import ModalContainer from '@/mastodon/features/ui/containers/modal_container';
+import { isRedesignEnabled } from '@/mastodon/utils/environment';
+
+const ComposeLazyForm = lazy(() =>
+  import('@/mastodon/features/compose/redesign/index').then(
+    ({ RedesignComposeForm }) => ({
+      default: RedesignComposeForm,
+    }),
+  ),
+);
+
+export const Compose: React.FC = () => {
+  return (
+    <>
+      {isRedesignEnabled() ? (
+        <RedesignCompose />
+      ) : (
+        <ComposeFormContainer autoFocus withoutNavigation redirectOnSuccess />
+      )}
+      <AlertsController />
+      <ModalContainer />
+      <LoadingBarContainer className='loading-bar' />
+    </>
+  );
+};
+
+const RedesignCompose: React.FC = () => {
+  useEffect(() => {
+    document.documentElement.dataset.redesign = 'true';
+    return () => {
+      document.documentElement.dataset.redesign = 'false';
+    };
+  }, []);
+
+  return (
+    <Suspense fallback={<LoadingIndicator />}>
+      <ComposeLazyForm autoFocus headless redirectOnSuccess />
+    </Suspense>
+  );
+};
+
+// eslint-disable-next-line import/no-default-export
+export default Compose;
diff --git a/app/javascript/mastodon/features/ui/components/boost_modal.tsx b/app/javascript/mastodon/features/ui/components/boost_modal.tsx
index 6a1c76221ad..34f5ef670aa 100644
--- a/app/javascript/mastodon/features/ui/components/boost_modal.tsx
+++ b/app/javascript/mastodon/features/ui/components/boost_modal.tsx
@@ -123,7 +123,6 @@ export const BoostModal: React.FC<{
                 ? messages.cancel_reblog
                 : messages.reblog,
             )}
-            /* eslint-disable-next-line jsx-a11y/no-autofocus -- We are in the modal */
             autoFocus
           />
         </div>
diff --git a/app/javascript/mastodon/features/ui/components/confirmation_modals/confirmation_modal.tsx b/app/javascript/mastodon/features/ui/components/confirmation_modals/confirmation_modal.tsx
index a581cb232fb..2634361d414 100644
--- a/app/javascript/mastodon/features/ui/components/confirmation_modals/confirmation_modal.tsx
+++ b/app/javascript/mastodon/features/ui/components/confirmation_modals/confirmation_modal.tsx
@@ -109,7 +109,6 @@ export const ConfirmationModal: React.FC<
           </>
         )}
 
-        {/* eslint-disable jsx-a11y/no-autofocus -- we are in a modal and thus autofocusing is justified */}
         <Button
           type='submit'
           loading={updating}
@@ -118,7 +117,6 @@ export const ConfirmationModal: React.FC<
         >
           {confirm}
         </Button>
-        {/* eslint-enable */}
       </ModalShellActions>
     </ModalShell>
   );
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 0780c16e7f0..d860de203d8 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -296,6 +296,7 @@ export default tseslint.config([
       'jsdoc/require-returns': 'off',
 
       'jsx-a11y/media-has-caption': 'off',
+      'jsx-a11y/no-autofocus': 'off',
 
       'react/prefer-stateless-function': 'warn',
       'react/function-component-definition': [