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

pl-fe: shoutbox in chat widget

Browse Source 
Signed-off-by: Nicole Mikołajczyk <git@mkljczk.pl>
This commit is contained in:
Nicole Mikołajczyk
2025-04-01 19:53:17 +02:00
parent 8327ef6f05
commit de39283b51
3 changed files with 78 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/pl-fe/src/contexts/chat-context.tsx
View File

@ -16,7 +16,8 @@ enum ChatWidgetScreens {
INBOX = 'INBOX',
SEARCH = 'SEARCH',
CHAT = 'CHAT',
CHAT_SETTINGS = 'CHAT_SETTINGS'
CHAT_SETTINGS = 'CHAT_SETTINGS',
SHOUTBOX = 'SHOUTBOX',
}
interface IChatProvider {

12
packages/pl-fe/src/features/chats/components/chat-pane/chat-pane.tsx
View File

@ -12,6 +12,7 @@ import ChatSearch from '../chat-search/chat-search';
import ChatPaneHeader from '../chat-widget/chat-pane-header';
import ChatWindow from '../chat-widget/chat-window';
import ChatSearchHeader from '../chat-widget/headers/chat-search-header';
import ShoutboxWindow from '../chat-widget/shoutbox-window';
import { Pane } from '../ui/pane';
import Blankslate from './blankslate';
@ -27,7 +28,7 @@ const ChatPane = () => {
const handleClickChat = (nextChat: Chat | 'shoutbox') => {
if (nextChat === 'shoutbox') {
// changeScreen(ChatWidgetScreens.SHOUTBOX);
changeScreen(ChatWidgetScreens.SHOUTBOX);
} else {
changeScreen(ChatWidgetScreens.CHAT, nextChat.id);
}
@ -60,6 +61,15 @@ const ChatPane = () => {
);
}
// Shoutbox
if (screen === ChatWidgetScreens.SHOUTBOX) {
return (
<Pane isOpen={isOpen}>
<ShoutboxWindow />
</Pane>
);
}
if (screen === ChatWidgetScreens.SEARCH) {
return (
<Pane isOpen={isOpen}>

65
packages/pl-fe/src/features/chats/components/chat-widget/shoutbox-window.tsx Normal file
View File

@ -0,0 +1,65 @@
import React from 'react';
import { FormattedMessage } from 'react-intl';
import Avatar from 'pl-fe/components/ui/avatar';
import HStack from 'pl-fe/components/ui/hstack';
import Icon from 'pl-fe/components/ui/icon';
import Stack from 'pl-fe/components/ui/stack';
import Text from 'pl-fe/components/ui/text';
import { ChatWidgetScreens, useChatContext } from 'pl-fe/contexts/chat-context';
import { usePlFeConfig } from 'pl-fe/hooks/use-pl-fe-config';
import Shoutbox from '../shoutbox';
import ChatPaneHeader from './chat-pane-header';
const ShoutboxWindow = () => {
const { changeScreen, isOpen, toggleChatPane } = useChatContext();
const { logo } = usePlFeConfig();
const closeChat = () => {
changeScreen(ChatWidgetScreens.INBOX);
};
return (
<>
<ChatPaneHeader
title={
<HStack alignItems='center' space={2}>
{isOpen && (
<button onClick={closeChat}>
<Icon
src={require('@tabler/icons/outline/arrow-left.svg')}
className='size-6 text-gray-600 dark:text-gray-400 rtl:rotate-180'
/>
</button>
)}
<HStack alignItems='center' space={3}>
{isOpen && (
<Avatar src={logo} alt='' size={40} className='flex-none' />
)}
<Stack alignItems='start'>
<div className='flex grow items-center space-x-1'>
<Text size='sm' weight='bold' truncate>
<FormattedMessage id='chat_list_item_shoutbox' defaultMessage='Instance shoutbox' />
</Text>
</div>
</Stack>
</HStack>
</HStack>
}
isToggleable={!isOpen}
isOpen={isOpen}
onToggle={toggleChatPane}
/>
<Stack className='h-full grow overflow-hidden' space={2}>
<Shoutbox />
</Stack>
</>
);
};
export { ShoutboxWindow as default };