🐛(frontend) display the meeting id in the join screen page title

Fix a minor issue on the join screen: the page title was missing the
meeting id, even though the hook's documentation stated it should be
included.

Align the actual behavior with the documented one so the meeting id
now shows up in the browser tab title.

CHANGELOG.md

@@ -30,6 +30,7 @@ and this project adheres to
 - 🐛(frontend) drop exact deviceId constraint on dynamic track creation
 - 🐛(frontend) fix permission store regression
 - 🐛(frontend) handle missing device errors gracefully
+- 🐛(frontend) display the meeting id in the join screen page title
 
 ## [1.25.2] - 2026-08-06
 

src/frontend/src/features/rooms/livekit/hooks/useRoomPageTitle.ts

@@ -1,28 +1,18 @@
 import { useTitle } from 'hoofd'
-import { useRoomData } from './useRoomData'
 import { useMemo } from 'react'
 
 const APP_TITLE = import.meta.env.VITE_APP_TITLE ?? ''
 
 /**
- * Updates the browser tab title with the room name to help users easily find
+ * Updates the browser tab title with the room id to help users easily find
  * the meeting tab among many open tabs. Works on both the join screen and
  * once connected.
  */
-export const useRoomPageTitle = () => {
-  const roomData = useRoomData()
-
+export const useRoomPageTitle = (roomId?: string) => {
   const pageTitle = useMemo(() => {
-    if (!roomData) {
-      return APP_TITLE
-    }
-
-    const roomLabel = roomData.name || roomData.slug || ''
-
-    if (!roomLabel) return APP_TITLE
-
-    return `${APP_TITLE} - ${roomLabel}  `
-  }, [roomData])
+    if (!roomId) return APP_TITLE
+    return `${APP_TITLE} - ${roomId}`
+  }, [roomId])
 
   useTitle(pageTitle)
 }

src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx

@@ -14,7 +14,6 @@ import { ConnectionObserver } from '../components/ConnectionObserver'
 import { reportError } from '@/features/analytics/telemetry'
 import { MediaStateObserver } from '../components/MediaStateObserver'
 import { RoomMetadataSynchronizer } from '../components/RoomMetadataSynchronizer'
-import { useRoomPageTitle } from '../hooks/useRoomPageTitle'
 import { useNoiseReduction } from '../hooks/useNoiseReduction'
 import { VideoResolutionSubscription } from '../components/VideoResolutionSubscription'
 import { SettingsDialogProvider } from '@/features/settings/components/SettingsDialogProvider'
@@ -55,7 +54,6 @@ export interface VideoConferenceProps extends React.HTMLAttributes<HTMLDivElemen
  * @public
  */
 export function VideoConference({ ...props }: VideoConferenceProps) {
-  useRoomPageTitle()
   useNoiseReduction()
 
   const { isOpen: isPictureInPictureOpen } = usePictureInPicture()

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

@@ -15,6 +15,7 @@ import {
 import { useConfig } from '@/api/useConfig.ts'
 import { LogLevel, setLogLevel } from 'livekit-client'
 import { useWatchDeviceAvailability } from '@/features/rooms/hooks/useWatchDeviceAvailability'
+import { useRoomPageTitle } from '@/features/rooms/livekit/hooks/useRoomPageTitle'
 
 const BaseRoom = ({ children }: { children: ReactNode }) => {
   return (
@@ -37,6 +38,8 @@ const Room = () => {
 
   const { data } = useConfig()
 
+  useRoomPageTitle(roomId)
+
   useEffect(() => {
     const shouldSilenceLogs = data?.silence_livekit_debug_logs || false
     setLogLevel(shouldSilenceLogs ? LogLevel.silent : LogLevel.debug)