resolve issues with new features

frontend/src/components/chat/ChatPanel.tsx

@@ -4,33 +4,81 @@ import Paper from '@mui/material/Paper';
 import IconButton from '@mui/material/IconButton';
 import ChatIcon from '@mui/icons-material/Chat';
 import Typography from '@mui/material/Typography';
+import Avatar from '@mui/material/Avatar';
+import Badge from '@mui/material/Badge';
+import Tooltip from '@mui/material/Tooltip';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
 import { useLayout } from '../../contexts/LayoutContext';
 import { ChatProvider, useChat } from '../../contexts/ChatContext';
 import ChatRoomList from './ChatRoomList';
 import ChatMessageView from './ChatMessageView';
 
+const TRANSITION = 'width 225ms cubic-bezier(0.4, 0, 0.6, 1)';
+const COLLAPSED_WIDTH = 64;
+const EXPANDED_WIDTH = 360;
+
 const ChatPanelInner: React.FC = () => {
   const { chatPanelOpen, setChatPanelOpen } = useLayout();
-  const { selectedRoomToken, connected } = useChat();
+  const { rooms, selectedRoomToken, selectRoom, connected } = useChat();
 
   if (!chatPanelOpen) {
     return (
       <Paper
         elevation={2}
         sx={{
-          width: 60,
+          width: COLLAPSED_WIDTH,
           height: '100%',
           display: 'flex',
           flexDirection: 'column',
           alignItems: 'center',
           pt: 1,
           flexShrink: 0,
-          transition: 'width 0.2s ease',
+          transition: TRANSITION,
+          overflowX: 'hidden',
+          overflowY: 'auto',
         }}
       >
-        <IconButton onClick={() => setChatPanelOpen(true)}>
+        <IconButton onClick={() => setChatPanelOpen(true)} aria-label="Chat öffnen">
           <ChatIcon />
         </IconButton>
+        {connected && (
+          <List disablePadding>
+            {rooms.map((room) => (
+              <ListItem key={room.token} disablePadding sx={{ justifyContent: 'center', py: 0.5 }}>
+                <Tooltip title={room.displayName} placement="left" arrow>
+                  <IconButton
+                    onClick={() => {
+                      setChatPanelOpen(true);
+                      selectRoom(room.token);
+                    }}
+                    sx={{ p: 0.5 }}
+                  >
+                    <Badge
+                      variant="dot"
+                      color="primary"
+                      invisible={room.unreadMessages === 0}
+                    >
+                      <Avatar
+                        sx={{
+                          width: 32,
+                          height: 32,
+                          fontSize: '0.75rem',
+                          bgcolor:
+                            room.token === selectedRoomToken
+                              ? 'primary.main'
+                              : 'action.hover',
+                        }}
+                      >
+                        {room.displayName.substring(0, 2).toUpperCase()}
+                      </Avatar>
+                    </Badge>
+                  </IconButton>
+                </Tooltip>
+              </ListItem>
+            ))}
+          </List>
+        )}
       </Paper>
     );
   }
@@ -39,12 +87,12 @@ const ChatPanelInner: React.FC = () => {
     <Paper
       elevation={2}
       sx={{
-        width: 360,
+        width: EXPANDED_WIDTH,
         height: '100%',
         display: 'flex',
         flexDirection: 'column',
         flexShrink: 0,
-        transition: 'width 0.2s ease',
+        transition: TRANSITION,
         overflow: 'hidden',
       }}
     >
@@ -62,7 +110,7 @@ const ChatPanelInner: React.FC = () => {
         <Typography variant="subtitle1" fontWeight={600}>
           Chat
         </Typography>
-        <IconButton size="small" onClick={() => setChatPanelOpen(false)}>
+        <IconButton size="small" onClick={() => setChatPanelOpen(false)} aria-label="Chat einklappen">
           <ChatIcon fontSize="small" />
         </IconButton>
       </Box>