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

nicolium: simplify, fix not showing chat list when shoutbox should be visible

Browse Source 
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2026-03-07 00:21:45 +01:00
parent 5023349545
commit 038285ffc6
3 changed files with 40 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
packages/nicolium/src/features/chats/components/chat-pane/blankslate.tsx
View File

@ -1,32 +1,29 @@
import React from 'react';
import { defineMessages, useIntl } from 'react-intl';
const messages = defineMessages({
title: { id: 'chat_pane.blankslate.title', defaultMessage: 'No messages yet' },
body: { id: 'chat_pane.blankslate.body', defaultMessage: 'Search for someone to chat with.' },
action: { id: 'chat_pane.blankslate.action', defaultMessage: 'Message someone' },
});
import { FormattedMessage } from 'react-intl';
interface IBlankslate {
onSearch(): void;
}
const Blankslate = ({ onSearch }: IBlankslate) => {
const intl = useIntl();
const Blankslate = ({ onSearch }: IBlankslate) => (
<div className='⁂-chat-widget__blankslate' data-testid='chat-pane-blankslate'>
<div className='⁂-chat-widget__blankslate__text'>
<p className='⁂-chat-widget__blankslate__text__title'>
<FormattedMessage id='chat_pane.blankslate.title' defaultMessage='No messages yet' />
</p>
return (
<div className='⁂-chat-widget__blankslate' data-testid='chat-pane-blankslate'>
<div className='⁂-chat-widget__blankslate__text'>
<p className='⁂-chat-widget__blankslate__text__title'>
{intl.formatMessage(messages.title)}
</p>
<p className='⁂-chat-widget__blankslate__text__body'>{intl.formatMessage(messages.body)}</p>
</div>
<button onClick={onSearch}>{intl.formatMessage(messages.action)}</button>
<p className='⁂-chat-widget__blankslate__text__body'>
<FormattedMessage
id='chat_pane.blankslate.body'
defaultMessage='Search for someone to chat with.'
/>
</p>
</div>
);
};
<button onClick={onSearch}>
<FormattedMessage id='chat_pane.blankslate.action' defaultMessage='Message someone' />
</button>
</div>
);
export { Blankslate as default };

45
packages/nicolium/src/features/chats/components/chats-page/components/blankslate-empty.tsx
View File

@ -1,4 +1,3 @@
import { useNavigate } from '@tanstack/react-router';
import React from 'react';
import { FormattedMessage } from 'react-intl';
@ -7,33 +6,25 @@ import Stack from '@/components/ui/stack';
import Text from '@/components/ui/text';
/** To display on the chats main page when no message is selected. */
const BlankslateEmpty: React.FC = () => {
const navigate = useNavigate();
const BlankslateEmpty: React.FC = () => (
<Stack space={6} alignItems='center' justifyContent='center' className='h-full p-6'>
<Stack space={2} className='max-w-sm'>
<Text size='2xl' weight='bold' tag='h2' align='center'>
<FormattedMessage id='chats.main.blankslate.title' defaultMessage='No messages yet' />
</Text>
const handleNewChat = () => {
navigate({ to: '/chats/new' });
};
return (
<Stack space={6} alignItems='center' justifyContent='center' className='h-full p-6'>
<Stack space={2} className='max-w-sm'>
<Text size='2xl' weight='bold' tag='h2' align='center'>
<FormattedMessage id='chats.main.blankslate.title' defaultMessage='No messages yet' />
</Text>
<Text size='sm' theme='muted' align='center'>
<FormattedMessage
id='chats.main.blankslate.subtitle'
defaultMessage='Search for someone to chat with'
/>
</Text>
</Stack>
<Button theme='primary' onClick={handleNewChat}>
<FormattedMessage id='chats.main.blankslate.new_chat' defaultMessage='Message someone' />
</Button>
<Text size='sm' theme='muted' align='center'>
<FormattedMessage
id='chats.main.blankslate.subtitle'
defaultMessage='Search for someone to chat with'
/>
</Text>
</Stack>
);
};
<Button theme='primary' to='/chats/new'>
<FormattedMessage id='chats.main.blankslate.new_chat' defaultMessage='Message someone' />
</Button>
</Stack>
);
export { BlankslateEmpty as default };

4
packages/nicolium/src/features/chats/components/chats-page/components/chats-page-empty.tsx
View File

@ -1,11 +1,13 @@
import React from 'react';
import { useChats } from '@/queries/chats';
import { useShoutboxIsLoading } from '@/stores/shoutbox';
import BlankslateEmpty from './blankslate-empty';
import BlankslateWithChats from './blankslate-with-chats';
const ChatsPageEmpty = () => {
const showShoutbox = !useShoutboxIsLoading();
const {
chatsQuery: { data: chats, isLoading },
} = useChats();
@ -14,7 +16,7 @@ const ChatsPageEmpty = () => {
return null;
}
if (chats && chats.length > 0) {
if ((chats && chats.length > 0) || showShoutbox) {
return <BlankslateWithChats />;
}