adding chat features, admin features and bug fixes

frontend/src/components/chat/ChatRoomList.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import List from '@mui/material/List';
+import ListItemButton from '@mui/material/ListItemButton';
+import Badge from '@mui/material/Badge';
+import Typography from '@mui/material/Typography';
+import { useChat } from '../../contexts/ChatContext';
+
+const ChatRoomList: React.FC = () => {
+  const { rooms, selectedRoomToken, selectRoom } = useChat();
+
+  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 && (
+                  <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>
+        ))}
+      </List>
+    </Box>
+  );
+};
+
+export default ChatRoomList;