matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix chat navigation on mobile devices

Browse Source
This commit is contained in:
matty
2026-01-24 16:35:37 +00:00
parent 68467b480d
commit 66f481a0b9
2 changed files with 13 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/pl-fe/src/features/chats/components/chat-page/chat-page.tsx
View File

@ -1,17 +1,20 @@
import { Outlet, useMatches } from '@tanstack/react-router';
import { Outlet, useMatch } from '@tanstack/react-router';
import clsx from 'clsx';
import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
import Stack from 'pl-fe/components/ui/stack';
import { chatRoute, chatsNewRoute, chatsSettingsRoute, shoutboxRoute } from 'pl-fe/features/ui/router';
import ChatPageSidebar from './components/chat-page-sidebar';
const SIDEBAR_HIDDEN_PATHS = ['/chats/settings', '/chats/new', '/chats/:chatId', '/chats/shoutbox'];
const ChatPage: React.FC = () => {
const isSidebarHidden = useMatches({
select: (matches) => SIDEBAR_HIDDEN_PATHS.some((path) => matches.some(match => match.pathname === path)),
});
const chatMatch = useMatch({ from: chatRoute.id, shouldThrow: false });
const onChatRoute = !!chatMatch?.params?.chatId;
const onNewRoute = !!useMatch({ from: chatsNewRoute.id, shouldThrow: false });
const onSettingsRoute = !!useMatch({ from: chatsSettingsRoute.id, shouldThrow: false });
const onShoutboxRoute = !!useMatch({ from: shoutboxRoute.id, shouldThrow: false });
const isSidebarHidden = onChatRoute || onNewRoute || onSettingsRoute || onShoutboxRoute;
const containerRef = useRef<HTMLDivElement>(null);
const [height, setHeight] = useState<string | number>('100%');

8
packages/pl-fe/src/features/chats/components/chat-page/components/chat-page-main.tsx
View File

@ -120,12 +120,12 @@ const ChatPageMain = () => {
return (
<Stack className='h-full overflow-hidden'>
<HStack alignItems='center' justifyContent='between' space={2} className='w-full p-4'>
<HStack alignItems='center' space={2}>
<HStack alignItems='center'>
<HStack alignItems='center' space={2} className='overflow-hidden'>
<HStack alignItems='center' className='flex-none'>
<IconButton
src={require('@phosphor-icons/core/regular/arrow-left.svg')}
className='mr-2 size-7 sm:mr-0 sm:hidden rtl:rotate-180'
onClick={() => navigate({ to: '/chats/{-$chatId}' })}
onClick={() => navigate({ to: '/chats' })}
/>
<Link to='/@{$username}' params={{ username: chat.account.acct }}>
@ -133,7 +133,7 @@ const ChatPageMain = () => {
</Link>
</HStack>
<Stack alignItems='start' className='h-11 overflow-hidden'>
<Stack alignItems='start' className='h-11 min-w-0 overflow-hidden'>
<div className='flex w-full grow items-center space-x-1'>
<Link to='/@{$username}' params={{ username: chat.account.acct }}>
<Text weight='bold' size='sm' align='left' truncate>