made people aside generic

dailyjs/basic-call/components/Room/Room.js

@@ -19,13 +19,14 @@ import { ReactComponent as IconPeople } from '@dailyjs/shared/icons/people-md.sv
 import { ReactComponent as IconSettings } from '@dailyjs/shared/icons/settings-md.svg';
 import PropTypes from 'prop-types';
 
+import { PEOPLE_ASIDE } from '../../../shared/components/Aside/PeopleAside';
 import { VideoGrid } from '../VideoGrid';
 import { Header } from './Header';
 import { Tray, TrayButton } from './Tray';
 
 export const Room = ({ onLeave }) => {
   const { callObject } = useCallState();
-  const { setShowDeviceModal, setShowPeopleAside } = useUIState();
+  const { setShowDeviceModal, setShowAside } = useUIState();
   const { isCamMuted, isMicMuted } = useMediaDevices();
   const { setShowModal, showModal } = useWaitingRoom();
   const { localParticipant } = useParticipants();
@@ -81,7 +82,7 @@ export const Room = ({ onLeave }) => {
 
         <TrayButton
           label="People"
-          onClick={() => setShowPeopleAside((p) => !p)}
+          onClick={() => setShowAside((p) => (p ? null : PEOPLE_ASIDE))}
         >
           <IconPeople />
         </TrayButton>

dailyjs/shared/components/Aside/PeopleAside.js

@@ -10,6 +10,8 @@ import { useParticipants } from '../../contexts/ParticipantsProvider';
 import { useUIState } from '../../contexts/UIStateProvider';
 import { Button } from '../Button';
 
+export const PEOPLE_ASIDE = 'people';
+
 const PersonRow = ({ participant, isOwner = false }) => (
   <div className="person-row">
     <div className="name">
@@ -93,15 +95,15 @@ PersonRow.propTypes = {
 
 export const PeopleAside = () => {
   const { callObject } = useCallState();
-  const { showPeopleAside, setShowPeopleAside } = useUIState();
+  const { showAside, setShowAside } = useUIState();
   const { allParticipants, isOwner } = useParticipants();
 
-  if (!showPeopleAside) {
+  if (!showAside && showAside !== PEOPLE_ASIDE) {
     return null;
   }
 
   return (
-    <Aside onClose={() => setShowPeopleAside(false)}>
+    <Aside onClose={() => setShowAside(false)}>
       {isOwner && (
         <div className="owner-actions">
           <Button

dailyjs/shared/contexts/UIStateProvider.js

@@ -5,15 +5,15 @@ export const UIStateContext = createContext();
 
 export const UIStateProvider = ({ children }) => {
   const [showDeviceModal, setShowDeviceModal] = useState(false);
-  const [showPeopleAside, setShowPeopleAside] = useState(false);
+  const [showAside, setShowAside] = useState();
 
   return (
     <UIStateContext.Provider
       value={{
         showDeviceModal,
         setShowDeviceModal,
-        showPeopleAside,
+        showAside,
-        setShowPeopleAside,
+        setShowAside,
       }}
     >
       {children}