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

resolve issues with new features

Browse Source
This commit is contained in:
Matthias Hochmeister
2026-03-12 10:21:26 +01:00
parent 31f1414e06
commit d5be68ca63
13 changed files with 275 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
frontend/src/components/chat/ChatRoomList.tsx
View File

@@ -1,9 +1,12 @@
import React from 'react';
import Box from '@mui/material/Box';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import Avatar from '@mui/material/Avatar';
import Badge from '@mui/material/Badge';
import Typography from '@mui/material/Typography';
import { useChat } from '../../contexts/ChatContext';
const ChatRoomList: React.FC = () => {
@@ -12,34 +15,65 @@ const ChatRoomList: React.FC = () => {
return (
<Box sx={{ overflow: 'auto', flex: 1 }}>
<List disablePadding>
{rooms.map((room) => (
<ListItemButton
key={room.token}
selected={room.token === selectedRoomToken}
onClick={() => selectRoom(room.token)}
sx={{ py: 1, px: 1.5 }}
>
<Box sx={{ flex: 1, minWidth: 0 }}>
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
<Typography variant="subtitle2" noWrap sx={{ flex: 1 }}>
{room.displayName}
</Typography>
{room.unreadMessages > 0 && (
{rooms.map((room) => {
const isSelected = room.token === selectedRoomToken;
return (
<ListItem key={room.token} disablePadding>
<ListItemButton
selected={isSelected}
onClick={() => selectRoom(room.token)}
sx={{
py: 1,
px: 1.5,
'&.Mui-selected': {
backgroundColor: 'primary.light',
color: 'primary.contrastText',
'&:hover': {
backgroundColor: 'primary.main',
},
'& .MuiListItemIcon-root': {
color: 'primary.contrastText',
},
'& .MuiListItemText-secondary': {
color: 'primary.contrastText',
opacity: 0.7,
},
},
}}
>
<ListItemIcon sx={{ minWidth: 40 }}>
<Badge
badgeContent={room.unreadMessages}
color="primary"
sx={{ ml: 1 }}
/>
)}
</Box>
{room.lastMessage && (
<Typography variant="caption" color="text.secondary" noWrap>
{room.lastMessage.author}: {room.lastMessage.text}
</Typography>
)}
</Box>
</ListItemButton>
))}
invisible={room.unreadMessages === 0}
>
<Avatar
sx={{
width: 32,
height: 32,
fontSize: '0.75rem',
bgcolor: isSelected ? 'primary.main' : 'action.hover',
color: isSelected ? 'primary.contrastText' : 'text.primary',
}}
>
{room.displayName.substring(0, 2).toUpperCase()}
</Avatar>
</Badge>
</ListItemIcon>
<ListItemText
primary={room.displayName}
primaryTypographyProps={{ noWrap: true, variant: 'subtitle2' }}
secondary={
room.lastMessage
? `${room.lastMessage.author}: ${room.lastMessage.text}`
: undefined
}
secondaryTypographyProps={{ noWrap: true, variant: 'caption' }}
/>
</ListItemButton>
</ListItem>
);
})}
</List>
</Box>
);