fix: Keep user on Compose page when changing screen size, #34937 (#35105)

This commit is contained in:
diondiondion 2025-06-23 11:53:21 +02:00 committed by GitHub
commit 6166e61638
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 39 additions and 4 deletions

View file

@ -23,7 +23,7 @@ import { useColumnsContext } from '../util/columns_context';
import BundleColumnError from './bundle_column_error';
import { ColumnLoading } from './column_loading';
import { ComposePanel } from './compose_panel';
import { ComposePanel, RedirectToMobileComposeIfNeeded } from './compose_panel';
import DrawerLoading from './drawer_loading';
import { NavigationPanel } from 'mastodon/features/navigation_panel';
@ -124,6 +124,7 @@ export default class ColumnsArea extends ImmutablePureComponent {
<div className='columns-area__panels__pane columns-area__panels__pane--compositional'>
<div className='columns-area__panels__pane__inner'>
{renderComposePanel && <ComposePanel />}
<RedirectToMobileComposeIfNeeded />
</div>
</div>

View file

@ -1,4 +1,4 @@
import { useCallback, useEffect } from 'react';
import { useCallback, useEffect, useLayoutEffect } from 'react';
import { useLayout } from '@/mastodon/hooks/useLayout';
import { useAppDispatch, useAppSelector } from '@/mastodon/store';
@ -7,6 +7,7 @@ import {
mountCompose,
unmountCompose,
} from 'mastodon/actions/compose';
import { useAppHistory } from 'mastodon/components/router';
import ServerBanner from 'mastodon/components/server_banner';
import { Search } from 'mastodon/features/compose/components/search';
import ComposeFormContainer from 'mastodon/features/compose/containers/compose_form_container';
@ -54,3 +55,25 @@ export const ComposePanel: React.FC = () => {
</div>
);
};
/**
* Redirect the user to the standalone compose page when the
* sidebar composer is hidden due to a change in viewport size
* while a post is being written.
*/
export const RedirectToMobileComposeIfNeeded: React.FC = () => {
const history = useAppHistory();
const shouldRedirect = useAppSelector((state) =>
state.compose.get('should_redirect_to_compose_page'),
);
useLayoutEffect(() => {
if (shouldRedirect) {
history.push('/publish');
}
}, [history, shouldRedirect]);
return null;
};