resizeable sidebar and meeting names on startpage

frontend/src/App.tsx

@@ -20,6 +20,7 @@ function App() {
           conferenceData={conferenceData}
           setConferenceData={setConferenceData}
           userInfo={userInfo}
+          usersData={roomData}
         />
       </div>
     )

frontend/src/components/meeting/Meeting.css

@@ -0,0 +1,4 @@
+.meeting-quickjoin {
+  text-align: center
+
+}

frontend/src/components/meeting/Meeting.tsx

@@ -1,19 +1,26 @@
 import { ConferenceData } from '../../background/jitsi/eventListeners'
+import { UsersData } from '../../background/types/roomData'
 import useMeetingStarted from '../../hooks/useMeetingStarted'
 import { useRoomName } from '../../hooks/useRoomName'
 import JitsiEntrypoint from '../jitsi/JitsiEntrypoint'
 import { UserInfo } from '../jitsi/types'
 import MeetingNameInput from './MeetingNameInput'
+import './Meeting.css'
 
 interface Props {
   conferenceData: ConferenceData | undefined
   setConferenceData: (newData: ConferenceData) => void
   userInfo: UserInfo
+  usersData: UsersData
 }
 
-function Meeting({ conferenceData, setConferenceData, userInfo }: Props) {
+function Meeting(props: Props) {
+  const { conferenceData, setConferenceData, userInfo, usersData } = props
+  console.log("[Rooms] meeting usersData", props)
   const [meetingStarted] = useMeetingStarted()
   const { roomName } = useRoomName()
+  const [_, setMeetingStarted] = useMeetingStarted()
+  const { updateAndSubmitRoomName: updateAndSubmitRoomName } = useRoomName()
 
   if (meetingStarted) {
     return (
@@ -26,7 +33,32 @@ function Meeting({ conferenceData, setConferenceData, userInfo }: Props) {
     )
   }
 
-  return <MeetingNameInput roomName={roomName} currentUser={userInfo.displayName} />
+  return (
+    <div>
+      <MeetingNameInput roomName={roomName} currentUser={userInfo.displayName} />
+      <div className="meeting-quickjoin">
+        {usersData?.roomsData.map((roomData) => {
+          return (
+            <>
+              <h3>
+                <a
+                  href="#"
+                  onClick={() => {
+                    updateAndSubmitRoomName(roomData.roomName)
+                    setMeetingStarted(true)
+                  }}
+                >
+                  {roomData.roomName}
+                </a>
+              </h3>
+              {roomData.participants.map((participant) => (
+                <div key={participant.jid}> {participant.displayName} </div>
+              ))}
+            </>
+          )
+        })}
+      </div>
+    </div>)
 }
 
 export default Meeting

frontend/src/components/sidebar/Sidebar.css

@@ -1,4 +1,5 @@
 .sidebar {
+  resize: horizontal;
   display: flex;
   flex-direction: column;
   white-space: nowrap;