heaven/vojo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

feat(direct): use compact native phone layout for new chat to keep form fitted under the on-screen keyboard

Browse source
This commit is contained in:
heaven 2026-04-29 22:30:39 +03:00
parent 212d3e3482
commit b5ea37d57a
1 changed files with 36 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
src/app/pages/client/direct/DirectCreate.tsx
View file

@ -1,6 +1,6 @@
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom'; import { useNavigate, useSearchParams } from 'react-router-dom';
import { Box, Icon, IconButton, Icons, Scroll } from 'folds'; import { Box, Icon, IconButton, Icons, Scroll, Text, config } from 'folds';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { useMatrixClient } from '../../../hooks/useMatrixClient'; import { useMatrixClient } from '../../../hooks/useMatrixClient';
import { getDirectCreateSearchParams } from '../../pathSearchParam'; import { getDirectCreateSearchParams } from '../../pathSearchParam';
@ -18,11 +18,13 @@ import {
} from '../../../components/page'; } from '../../../components/page';
import { BackRouteHandler } from '../../../components/BackRouteHandler'; import { BackRouteHandler } from '../../../components/BackRouteHandler';
import { CreateChat } from '../../../features/create-chat'; import { CreateChat } from '../../../features/create-chat';
import { isNativePlatform } from '../../../utils/capacitor';
export function DirectCreate() { export function DirectCreate() {
const { t } = useTranslation(); const { t } = useTranslation();
const mx = useMatrixClient(); const mx = useMatrixClient();
const screenSize = useScreenSizeContext(); const screenSize = useScreenSizeContext();
const native = isNativePlatform();
const navigate = useNavigate(); const navigate = useNavigate();
const [searchParams] = useSearchParams(); const [searchParams] = useSearchParams();
@ -39,6 +41,39 @@ export function DirectCreate() {
} }
}, [mx, navigate, directs, userId]); }, [mx, navigate, directs, userId]);
// Native phone (Capacitor + Mobile screen): compact layout — title goes into
// the back-arrow header, form sits directly below with light padding, no
// oversized hero whitespace. The on-screen keyboard otherwise pushed the
// centered hero layout into a visibly long scrollable area. Native tablets,
// desktop, and web (any size) keep the original hero-section layout.
if (native && screenSize === ScreenSize.Mobile) {
return (
<Page>
<PageHeader balance outlined={false}>
<Box grow="Yes" alignItems="Center" gap="200">
<BackRouteHandler>
{(onBack) => (
<IconButton onClick={onBack}>
<Icon src={Icons.ArrowLeft} />
</IconButton>
)}
</BackRouteHandler>
<Text size="H4" truncate>
{t('Direct.create_chat')}
</Text>
</Box>
</PageHeader>
<Box grow="Yes">
<Scroll size="0" hideTrack visibility="Hover">
<Box style={{ padding: config.space.S400 }}>
<CreateChat defaultUserId={userId} />
</Box>
</Scroll>
</Box>
</Page>
);
}
return ( return (
<Page> <Page>
{screenSize === ScreenSize.Mobile && ( {screenSize === ScreenSize.Mobile && (