feat: don't automatically close sidebars

src/components/Room/useRoom.ts

@@ -54,14 +54,12 @@ export function useRoom(
   const {
     numberOfPeers,
     setNumberOfPeers,
-    setDoShowPeers,
     peerList,
     setPeerList,
     tabHasFocus,
     showAlert,
     setRoomId,
     setPassword,
-    setIsPeerListOpen,
     customUsername,
   } = useContext(ShellContext)
 
@@ -157,9 +155,9 @@ export function useRoom(
   useEffect(() => {
     return () => {
       peerRoom.leaveRoom()
-      setIsPeerListOpen(false)
+      setPeerList([])
     }
-  }, [peerRoom, setIsPeerListOpen])
+  }, [peerRoom, setPeerList])
 
   useEffect(() => {
     setPassword(password)
@@ -177,14 +175,6 @@ export function useRoom(
     }
   }, [roomId, setRoomId])
 
-  useEffect(() => {
-    setDoShowPeers(true)
-
-    return () => {
-      setDoShowPeers(false)
-    }
-  }, [setDoShowPeers])
-
   useEffect(() => {
     if (isShowingMessages) setUnreadMessages(0)
   }, [isShowingMessages, setUnreadMessages])

src/components/Shell/Drawer.tsx

@@ -32,23 +32,11 @@ export const drawerWidth = 240
 
 export interface DrawerProps extends PropsWithChildren {
   isDrawerOpen: boolean
-  onAboutLinkClick: () => void
-  onDisclaimerClick: () => void
   onDrawerClose: () => void
-  onHomeLinkClick: () => void
-  onSettingsLinkClick: () => void
   theme: Theme
 }
 
-export const Drawer = ({
+export const Drawer = ({ isDrawerOpen, onDrawerClose, theme }: DrawerProps) => {
-  isDrawerOpen,
-  onAboutLinkClick,
-  onDisclaimerClick,
-  onDrawerClose,
-  onHomeLinkClick,
-  onSettingsLinkClick,
-  theme,
-}: DrawerProps) => {
   const settingsContext = useContext(SettingsContext)
   const colorMode = settingsContext.getUserSettings().colorMode
 
@@ -82,7 +70,7 @@ export const Drawer = ({
       </DrawerHeader>
       <Divider />
       <List role="navigation">
-        <Link to={routes.ROOT} onClick={onHomeLinkClick}>
+        <Link to={routes.ROOT}>
           <ListItem disablePadding>
             <ListItemButton>
               <ListItemIcon>
@@ -92,7 +80,7 @@ export const Drawer = ({
             </ListItemButton>
           </ListItem>
         </Link>
-        <Link to={routes.SETTINGS} onClick={onSettingsLinkClick}>
+        <Link to={routes.SETTINGS}>
           <ListItem disablePadding>
             <ListItemButton>
               <ListItemIcon>
@@ -102,7 +90,7 @@ export const Drawer = ({
             </ListItemButton>
           </ListItem>
         </Link>
-        <Link to={routes.ABOUT} onClick={onAboutLinkClick}>
+        <Link to={routes.ABOUT}>
           <ListItem disablePadding>
             <ListItemButton>
               <ListItemIcon>
@@ -112,7 +100,7 @@ export const Drawer = ({
             </ListItemButton>
           </ListItem>
         </Link>
-        <Link to={routes.DISCLAIMER} onClick={onDisclaimerClick}>
+        <Link to={routes.DISCLAIMER}>
           <ListItem disablePadding>
             <ListItemButton>
               <ListItemIcon>

src/components/Shell/Shell.tsx

@@ -55,7 +55,6 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => {
   const [isDrawerOpen, setIsDrawerOpen] = useState(defaultSidebarsOpen)
   const [isQRCodeDialogOpen, setIsQRCodeDialogOpen] = useState(false)
   const [isRoomShareDialogOpen, setIsRoomShareDialogOpen] = useState(false)
-  const [doShowPeers, setDoShowPeers] = useState(false)
   const [alertSeverity, setAlertSeverity] = useState<AlertColor>('info')
   const [showAppBar, setShowAppBar] = useState(true)
   const [showRoomControls, setShowRoomControls] = useState(true)
@@ -66,7 +65,7 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => {
   const [roomId, setRoomId] = useState<string | undefined>(undefined)
   const [password, setPassword] = useState<string | undefined>(undefined)
   const [isPeerListOpen, setIsPeerListOpen] = useState(defaultSidebarsOpen)
-  const [peerList, setPeerList] = useState<Peer[]>([]) // except you
+  const [peerList, setPeerList] = useState<Peer[]>([]) // except self
   const [tabHasFocus, setTabHasFocus] = useState(true)
   const [audioState, setAudioState] = useState<AudioState>(AudioState.STOPPED)
   const [videoState, setVideoState] = useState<VideoState>(VideoState.STOPPED)
@@ -91,7 +90,6 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => {
     () => ({
       numberOfPeers,
       tabHasFocus,
-      setDoShowPeers,
       setNumberOfPeers,
       showRoomControls,
       setShowRoomControls,
@@ -127,7 +125,6 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => {
       numberOfPeers,
       peerList,
       tabHasFocus,
-      setDoShowPeers,
       setNumberOfPeers,
       showRoomControls,
       setShowRoomControls,
@@ -242,6 +239,10 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => {
     setIsDrawerOpen(true)
   }
 
+  const handleDrawerClose = () => {
+    setIsDrawerOpen(false)
+  }
+
   const handlePeerListClick = () => {
     setIsPeerListOpen(!isPeerListOpen)
   }
@@ -263,26 +264,6 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => {
     }
   }
 
-  const handleDrawerClose = () => {
-    setIsDrawerOpen(false)
-  }
-
-  const handleHomeLinkClick = () => {
-    setIsDrawerOpen(false)
-  }
-
-  const handleAboutLinkClick = () => {
-    setIsDrawerOpen(false)
-  }
-
-  const handleDisclaimerLinkClick = () => {
-    setIsDrawerOpen(false)
-  }
-
-  const handleSettingsLinkClick = () => {
-    setIsDrawerOpen(false)
-  }
-
   const handleQRCodeDialogClose = () => {
     setIsQRCodeDialogOpen(false)
   }
@@ -310,12 +291,10 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => {
             onAlertClose={handleAlertClose}
           />
           <ShellAppBar
-            doShowPeers={doShowPeers}
             onDrawerOpen={handleDrawerOpen}
             onLinkButtonClick={handleLinkButtonClick}
             isDrawerOpen={isDrawerOpen}
             isPeerListOpen={isPeerListOpen}
-            numberOfPeers={numberOfPeers}
             title={title}
             onPeerListClick={handlePeerListClick}
             onRoomControlsClick={() => setShowRoomControls(!showRoomControls)}
@@ -326,11 +305,7 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => {
           />
           <Drawer
             isDrawerOpen={isDrawerOpen}
-            onAboutLinkClick={handleAboutLinkClick}
-            onDisclaimerClick={handleDisclaimerLinkClick}
             onDrawerClose={handleDrawerClose}
-            onHomeLinkClick={handleHomeLinkClick}
-            onSettingsLinkClick={handleSettingsLinkClick}
             theme={theme}
           />
           <RouteContent

src/components/Shell/ShellAppBar.tsx

@@ -18,6 +18,10 @@ import Menu from '@mui/icons-material/Menu'
 import QrCode2 from '@mui/icons-material/QrCode2'
 import RoomPreferences from '@mui/icons-material/RoomPreferences'
 
+import { useContext } from 'react'
+
+import { ShellContext } from 'contexts/ShellContext'
+
 import { drawerWidth } from './Drawer'
 import { peerListWidth } from './PeerList'
 
@@ -55,12 +59,10 @@ export const AppBar = styled(MuiAppBar, {
 }))
 
 interface ShellAppBarProps {
-  doShowPeers: boolean
   onDrawerOpen: () => void
   onLinkButtonClick: () => Promise<void>
   isDrawerOpen: boolean
   isPeerListOpen: boolean
-  numberOfPeers: number
   title: string
   onPeerListClick: () => void
   onRoomControlsClick: () => void
@@ -71,13 +73,11 @@ interface ShellAppBarProps {
 }
 
 export const ShellAppBar = ({
-  doShowPeers,
   onDrawerOpen,
   onLinkButtonClick,
   isDrawerOpen,
   isPeerListOpen,
   setIsQRCodeDialogOpen,
-  numberOfPeers,
   title,
   onPeerListClick,
   onRoomControlsClick,
@@ -85,6 +85,7 @@ export const ShellAppBar = ({
   isFullscreen,
   setIsFullscreen,
 }: ShellAppBarProps) => {
+  const { peerList } = useContext(ShellContext)
   const handleQRCodeClick = () => setIsQRCodeDialogOpen(true)
   const onClickFullscreen = () => setIsFullscreen(!isFullscreen)
   return (
@@ -131,8 +132,6 @@ export const ShellAppBar = ({
                 <Link />
               </IconButton>
             </Tooltip>
-            {doShowPeers ? (
-              <>
             <Tooltip title="Show QR Code">
               <IconButton
                 size="large"
@@ -174,11 +173,9 @@ export const ShellAppBar = ({
                 aria-label="Peer list"
                 onClick={onPeerListClick}
               >
-                    <StepIcon icon={numberOfPeers} />
+                <StepIcon icon={peerList.length + 1} />
               </IconButton>
             </Tooltip>
-              </>
-            ) : null}
           </Toolbar>
         </AppBar>
       </Slide>

src/contexts/ShellContext.ts

@@ -6,7 +6,6 @@ import { AudioState, ScreenShareState, VideoState, Peer } from 'models/chat'
 interface ShellContextProps {
   numberOfPeers: number
   tabHasFocus: boolean
-  setDoShowPeers: Dispatch<SetStateAction<boolean>>
   setNumberOfPeers: Dispatch<SetStateAction<number>>
   showRoomControls: boolean
   setShowRoomControls: Dispatch<SetStateAction<boolean>>
@@ -35,7 +34,6 @@ interface ShellContextProps {
 export const ShellContext = createContext<ShellContextProps>({
   numberOfPeers: 1,
   tabHasFocus: true,
-  setDoShowPeers: () => {},
   setNumberOfPeers: () => {},
   showRoomControls: false,
   setShowRoomControls: () => {},