matthias/dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: render ChatContent as DashboardLayout child so useChat has ChatProvider in scope

Browse Source
This commit is contained in:
Matthias Hochmeister
2026-03-27 18:03:54 +01:00
parent c1b4a92a12
commit 60e1329815
1 changed files with 53 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
frontend/src/pages/Chat.tsx
View File

@@ -10,7 +10,7 @@ import { notificationsApi } from '../services/notifications';
import ChatRoomList from '../components/chat/ChatRoomList'; import ChatRoomList from '../components/chat/ChatRoomList';
import ChatMessageView from '../components/chat/ChatMessageView'; import ChatMessageView from '../components/chat/ChatMessageView';
const ChatPage: React.FC = () => { const ChatContent: React.FC = () => {
const { rooms, selectedRoomToken, connected } = useChat(); const { rooms, selectedRoomToken, connected } = useChat();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const markedRoomsRef = React.useRef(new Set<string>()); const markedRoomsRef = React.useRef(new Set<string>());
@@ -44,53 +44,59 @@ const ChatPage: React.FC = () => {
}, [selectedRoomToken, queryClient]); }, [selectedRoomToken, queryClient]);
return ( return (
<DashboardLayout> <Box
<Box sx={{
sx={{ height: 'calc(100vh - 112px)',
height: 'calc(100vh - 112px)', display: 'flex',
display: 'flex', border: 1,
border: 1, borderColor: 'divider',
borderColor: 'divider', borderRadius: 1,
borderRadius: 1, overflow: 'hidden',
overflow: 'hidden', }}
}} >
> {!connected ? (
{!connected ? ( <Box sx={{ p: 3, display: 'flex', alignItems: 'center' }}>
<Box sx={{ p: 3, display: 'flex', alignItems: 'center' }}> <Typography variant="body1" color="text.secondary">
<Typography variant="body1" color="text.secondary"> Nextcloud nicht verbunden. Bitte verbinden Sie sich in den{' '}
Nextcloud nicht verbunden. Bitte verbinden Sie sich in den{' '} <Link to="/settings" style={{ color: 'inherit' }}>Einstellungen</Link>.
<Link to="/settings" style={{ color: 'inherit' }}>Einstellungen</Link>. </Typography>
</Typography> </Box>
) : (
<>
<Box
sx={{
width: 280,
flexShrink: 0,
borderRight: 1,
borderColor: 'divider',
display: 'flex',
flexDirection: 'column',
overflow: 'hidden',
}}
>
<ChatRoomList />
</Box> </Box>
) : ( <Box sx={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
<> {selectedRoomToken ? (
<Box <ChatMessageView />
sx={{ ) : (
width: 280, <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
flexShrink: 0, <Typography variant="body1" color="text.secondary">
borderRight: 1, Wähle ein Gespräch aus, um zu beginnen.
borderColor: 'divider', </Typography>
display: 'flex', </Box>
flexDirection: 'column', )}
overflow: 'hidden', </Box>
}} </>
> )}
<ChatRoomList /> </Box>
</Box> );
<Box sx={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}> };
{selectedRoomToken ? (
<ChatMessageView /> const ChatPage: React.FC = () => {
) : ( return (
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}> <DashboardLayout>
<Typography variant="body1" color="text.secondary"> <ChatContent />
Wähle ein Gespräch aus, um zu beginnen.
</Typography>
</Box>
)}
</Box>
</>
)}
</Box>
</DashboardLayout> </DashboardLayout>
); );
}; };