rework issue system

frontend/src/components/chat/ChatPanel.tsx

@@ -195,7 +195,7 @@ const ChatPanelInner: React.FC = () => {
             sx={{
               display: { xs: 'none', sm: 'flex' },
               flexDirection: 'column',
-              width: 56,
+              width: 120,
               flexShrink: 0,
               borderRight: 1,
               borderColor: 'divider',
@@ -207,12 +207,21 @@ const ChatPanelInner: React.FC = () => {
               const isSelected = room.token === selectedRoomToken;
               return (
                 <Tooltip key={room.token} title={room.displayName} placement="left" arrow>
-                  <IconButton
+                  <Box
                     onClick={() => selectRoom(room.token)}
                     sx={{
-                      mx: 'auto',
-                      my: 0.25,
-                      p: 0.5,
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: 0.75,
+                      px: 1,
+                      py: 0.5,
+                      cursor: 'pointer',
+                      borderRadius: 1,
+                      mx: 0.5,
+                      bgcolor: isSelected ? 'action.selected' : 'transparent',
+                      '&:hover': {
+                        bgcolor: isSelected ? 'action.selected' : 'action.hover',
+                      },
                     }}
                   >
                     <Badge
@@ -222,17 +231,29 @@ const ChatPanelInner: React.FC = () => {
                     >
                       <Avatar
                         sx={{
-                          width: 32,
-                          height: 32,
-                          fontSize: '0.7rem',
+                          width: 28,
+                          height: 28,
+                          fontSize: '0.65rem',
                           bgcolor: isSelected ? 'primary.main' : 'action.hover',
                           color: isSelected ? 'primary.contrastText' : 'text.primary',
+                          flexShrink: 0,
                         }}
                       >
                         {room.displayName.substring(0, 2).toUpperCase()}
                       </Avatar>
                     </Badge>
-                  </IconButton>
+                    <Typography
+                      variant="caption"
+                      noWrap
+                      sx={{
+                        flex: 1,
+                        minWidth: 0,
+                        fontWeight: isSelected ? 600 : 400,
+                      }}
+                    >
+                      {room.displayName}
+                    </Typography>
+                  </Box>
                 </Tooltip>
               );
             })}