feat(#141): [wip] render direct message room

src/components/Shell/PeerListItem.tsx

@@ -16,8 +16,10 @@ import ListItem from '@mui/material/ListItem'
 import ListItemText from '@mui/material/ListItemText'
 import Tooltip from '@mui/material/Tooltip'
 import Typography from '@mui/material/Typography'
+import useTheme from '@mui/material/styles/useTheme'
 import { useState } from 'react'
 
+import { Room } from 'components/Room'
 import { AudioVolume } from 'components/AudioVolume'
 import { PeerNameDisplay } from 'components/PeerNameDisplay'
 import { PublicKey } from 'components/PublicKey'
@@ -62,6 +64,7 @@ export const PeerListItem = ({
   peerConnectionTypes,
   peerAudioChannels,
 }: PeerListItemProps) => {
+  const theme = useTheme()
   const [showPeerDialog, setShowPeerDialog] = useState(false)
 
   const hasPeerConnection = peer.peerId in peerConnectionTypes
@@ -169,6 +172,16 @@ export const PeerListItem = ({
               <PublicKey publicKey={peer.publicKey} />
             </AccordionDetails>
           </Accordion>
+          <Box
+            mt={1}
+            pt={2}
+            display="flex"
+            flexDirection="column"
+            minHeight="350px"
+            bgcolor={theme.palette.background.paper}
+          >
+            <Room roomId="" userId={peer.userId} />
+          </Box>
         </DialogContent>
         <DialogActions>
           <Button onClick={handleDialogClose}>Close</Button>