feat(#141): put public key in accordion

src/components/Shell/PeerListItem.tsx

@@ -1,30 +1,33 @@
-import { useState } from 'react'
-import Box from '@mui/material/Box'
-import ListItemText from '@mui/material/ListItemText'
-import SyncAltIcon from '@mui/icons-material/SyncAlt'
+import EnhancedEncryptionIcon from '@mui/icons-material/EnhancedEncryption'
 import NetworkPingIcon from '@mui/icons-material/NetworkPing'
-import ListItem from '@mui/material/ListItem'
-import Tooltip from '@mui/material/Tooltip'
-import CircularProgress from '@mui/material/CircularProgress'
+import NoEncryptionIcon from '@mui/icons-material/NoEncryption'
+import SyncAltIcon from '@mui/icons-material/SyncAlt'
+import Accordion from '@mui/material/Accordion'
+import AccordionDetails from '@mui/material/AccordionDetails'
+import AccordionSummary from '@mui/material/AccordionSummary'
+import Box from '@mui/material/Box'
 import Button from '@mui/material/Button'
+import CircularProgress from '@mui/material/CircularProgress'
 import Dialog from '@mui/material/Dialog'
 import DialogActions from '@mui/material/DialogActions'
 import DialogContent from '@mui/material/DialogContent'
-import DialogContentText from '@mui/material/DialogContentText'
 import DialogTitle from '@mui/material/DialogTitle'
-import NoEncryptionIcon from '@mui/icons-material/NoEncryption'
-import EnhancedEncryptionIcon from '@mui/icons-material/EnhancedEncryption'
+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 { useState } from 'react'
 
 import { AudioVolume } from 'components/AudioVolume'
 import { PeerNameDisplay } from 'components/PeerNameDisplay'
 import { PublicKey } from 'components/PublicKey'
+import { PeerConnectionType } from 'lib/PeerRoom'
 import {
-  Peer,
   AudioChannel,
   AudioChannelName,
+  Peer,
   PeerVerificationState,
 } from 'models/chat'
-import { PeerConnectionType } from 'lib/PeerRoom'
 
 import { PeerDownloadFileButton } from './PeerDownloadFileButton'
 
@@ -158,8 +161,14 @@ export const PeerListItem = ({
           </Box>
         </DialogTitle>
         <DialogContent>
-          <DialogContentText>Their public key:</DialogContentText>
-          <PublicKey publicKey={peer.publicKey} />
+          <Accordion>
+            <AccordionSummary>
+              <Typography>Their public key</Typography>
+            </AccordionSummary>
+            <AccordionDetails>
+              <PublicKey publicKey={peer.publicKey} />
+            </AccordionDetails>
+          </Accordion>
         </DialogContent>
         <DialogActions>
           <Button onClick={handleDialogClose}>Close</Button>