🚸(home) skip the join screen when creating a room

at the cost of a not-changeable username, logged in users who create
rooms now skip the join page. I think it's good to have this to test
this way, even if the username choice is not there yet.

src/frontend/src/features/home/routes/Home.tsx

@@ -31,7 +31,10 @@ export const Home = () => {
               variant="primary"
               onPress={
                 isLoggedIn
-                  ? () => navigateTo('room', generateRoomId())
+                  ? () =>
+                      navigateTo('room', generateRoomId(), {
+                        state: { create: true },
+                      })
                   : undefined
               }
               href={isLoggedIn ? undefined : authUrl()}

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

@@ -35,8 +35,9 @@ export const Conference = ({
       audioCaptureDefaults: {
         deviceId: userConfig.audioDeviceId ?? undefined,
       },
-    };
-  }, [userConfig]);
+    }
+    // do not rely on the userConfig object directly as its reference may change on every render
+  }, [userConfig.videoDeviceId, userConfig.audioDeviceId])
 
   const room = useMemo(() => new Room(roomOptions), [roomOptions]);
 

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

@@ -1,24 +1,46 @@
-import { type LocalUserChoices } from '@livekit/components-react'
 import { useState } from 'react'
+import {
+  usePersistentUserChoices,
+  type LocalUserChoices,
+} from '@livekit/components-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'
+import { useUser } from '@/features/auth'
+import { Conference } from '../components/Conference'
+import { Join } from '../components/Join'
 
 export const Room = () => {
+  const { user, isLoggedIn } = useUser()
+  const { userChoices: existingUserChoices } = usePersistentUserChoices()
   const [userConfig, setUserConfig] = useState<LocalUserChoices | null>(null)
+
   const { roomId } = useParams()
+  const mode = isLoggedIn && history.state?.create ? 'create' : 'join'
+  const skipJoinScreen = isLoggedIn && mode === 'create'
+
   if (!roomId) {
     return <ErrorScreen />
   }
+
+  if (!userConfig && !skipJoinScreen) {
+    return (
+      <Screen>
+        <Join onSubmit={setUserConfig} />
+      </Screen>
+    )
+  }
+
   return (
     <Screen>
-      {userConfig ? (
-        <Conference roomId={roomId} userConfig={userConfig} />
-      ) : (
-        <Join onSubmit={setUserConfig} />
-      )}
+      <Conference
+        roomId={roomId}
+        userConfig={{
+          ...existingUserChoices,
+          ...(skipJoinScreen ? { username: user?.email as string } : {}),
+          ...userConfig,
+        }}
+      />
     </Screen>
   )
 }