️♻️(frontend) make the Conference component not know about routing

Makes more sense that way: only the Room _route_ knows about route
params, not the internal component used.

src/frontend/src/features/rooms/components/Conference.tsx

@@ -1,4 +1,3 @@
-import { useParams } from 'wouter'
 import { useQuery } from '@tanstack/react-query'
 import {
   LiveKitRoom,
@@ -11,11 +10,12 @@ import { navigateToHome } from '@/features/home'
 import { fetchRoom } from '../api/fetchRoom'
 
 export const Conference = ({
+  roomId,
   userConfig,
 }: {
+  roomId: string
   userConfig: LocalUserChoices
 }) => {
-  const { roomId } = useParams()
   const { status, data } = useQuery({
     queryKey: [keys.room, roomId, userConfig.username],
     queryFn: () =>

src/frontend/src/features/rooms/routes/Room.tsx

@@ -1,15 +1,21 @@
 import { type LocalUserChoices } from '@livekit/components-react'
 import { useState } from 'react'
+import { useParams } from 'wouter'
 import { Conference } from '../components/Conference'
 import { Join } from '../components/Join'
 import { Screen } from '@/layout/Screen'
+import { ErrorScreen } from '@/layout/ErrorScreen'
 
 export const Room = () => {
   const [userConfig, setUserConfig] = useState<LocalUserChoices | null>(null)
+  const { roomId } = useParams()
+  if (!roomId) {
+    return <ErrorScreen />
+  }
   return (
     <Screen>
       {userConfig ? (
-        <Conference userConfig={userConfig} />
+        <Conference roomId={roomId} userConfig={userConfig} />
       ) : (
         <Join onSubmit={setUserConfig} />
       )}