✨(frontend) let signed-out visitors start a meeting

The home page only offers meeting creation to authenticated users, while the
backend already serves ephemeral rooms to anonymous visitors when
ALLOW_UNREGISTERED_ROOMS is enabled (the flag is checked in the room retrieve
view, not in the create one).

Expose the flag in the frontend configuration and, when it is on, show the
existing "Create a meeting" button to signed-out visitors. It navigates to a
freshly generated room id rather than calling POST /rooms/, which stays
reserved for registered rooms and for authenticated users.

The invite dialog opens for such a creator when the room is unregistered
(null id) and the navigation carries `create`. The `mode` computed in Room
is left untouched, so permissions and the join screen behave as before.

The home buttons row now wraps: signed-out visitors can see three controls
(create, join, login), and at the xsm breakpoint the fixed-width ProConnect
button leaves too little room for the other two.

CHANGELOG.md

@@ -13,6 +13,8 @@ and this project adheres to
 - 🔒(backend) throttle meeting link generation
 - 🔒️(backend) add a daily cap on room creation
 - 🔧(summary) add setting to control Sentry traces sampling rate
+- ✨(frontend) let signed-out visitors start a meeting
+- ✨(backend) expose `allow_unregistered_rooms` in the frontend configuration
 
 ### Fixed
 

src/backend/core/api/__init__.py

@@ -73,6 +73,7 @@ def get_frontend_configuration(request):
             "default_sources": settings.LIVEKIT_DEFAULT_SOURCES,
             "default_video_codec": settings.LIVEKIT_DEFAULT_VIDEO_CODEC,
         },
+        "allow_unregistered_rooms": settings.ALLOW_UNREGISTERED_ROOMS,
         "authenticated_users_can_edit_display_name": (
             settings.AUTHENTICATED_PARTICIPANTS_CAN_EDIT_DISPLAY_NAME
         ),

src/frontend/src/api/useConfig.ts

@@ -28,6 +28,7 @@ export interface ApiConfig {
   custom_css_url?: string
   use_french_gov_footer?: boolean
   use_proconnect_button?: boolean
+  allow_unregistered_rooms?: boolean
   idle_disconnect_warning_delay?: number
   recording?: {
     is_enabled?: boolean

src/frontend/src/features/home/components/CreateUnregisteredMeetingButton.tsx

@@ -0,0 +1,19 @@
+import { useTranslation } from 'react-i18next'
+import { Button } from '@/primitives'
+import { navigateTo } from '@/navigation/navigateTo'
+import { generateRoomId } from '@/features/rooms'
+
+export const CreateUnregisteredMeetingButton = () => {
+  const { t } = useTranslation('home')
+  return (
+    <Button
+      variant="primary"
+      data-attr="create-unregistered-meeting"
+      onPress={() =>
+        navigateTo('room', generateRoomId(), { state: { create: true } })
+      }
+    >
+      {t('createMeeting')}
+    </Button>
+  )
+}

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

@@ -9,6 +9,7 @@ import { JoinMeetingDialog } from '../components/JoinMeetingDialog'
 import { IntroSlider } from '../components/IntroSlider'
 import { MoreLink } from '../components/MoreLink'
 import { CreateMeetingMenu } from '../components/CreateMeetingMenu'
+import { CreateUnregisteredMeetingButton } from '../components/CreateUnregisteredMeetingButton'
 import { ReactNode, useEffect, useState } from 'react'
 
 import { css } from '@/styled-system/css'
@@ -189,13 +190,19 @@ const Home = () => {
                 display: 'flex',
                 gap: 0.5,
                 flexDirection: { base: 'column', xsm: 'row' },
+                flexWrap: 'wrap',
                 alignItems: { base: 'center', xsm: 'items-start' },
               })}
             >
               {isLoggedIn ? (
                 <CreateMeetingMenu />
               ) : (
-                <LoginButton proConnectHint={false} />
+                <>
+                  {data?.allow_unregistered_rooms && (
+                    <CreateUnregisteredMeetingButton />
+                  )}
+                  <LoginButton proConnectHint={false} />
+                </>
               )}
               <DialogTrigger>
                 <Button

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

@@ -40,11 +40,15 @@ const StyledRACDialog = styled(Dialog, {
 })
 
 export const InviteDialog = ({ mode }: { mode: 'join' | 'create' }) => {
-  const [showInviteDialog, setShowInviteDialog] = useState(mode === 'create')
-
   const { t } = useTranslation('rooms', { keyPrefix: 'shareDialog' })
 
   const roomData = useRoomData()
+
+  const isCreatingUnregisteredRoom =
+    roomData?.id === null && !!history.state?.create
+  const [isDismissed, setIsDismissed] = useState(false)
+  const showInviteDialog =
+    !isDismissed && (mode === 'create' || isCreatingUnregisteredRoom)
   const roomUrl = roomData?.slug ? getRouteUrl('room', roomData.slug) : ''
 
   const telephony = useTelephony()
@@ -78,7 +82,7 @@ export const InviteDialog = ({ mode }: { mode: 'join' | 'create' }) => {
             variant="tertiaryText"
             size="xs"
             onPress={() => {
-              setShowInviteDialog(false)
+              setIsDismissed(true)
             }}
             aria-label={t('closeDialog')}
           >