🩹(frontend) clear router state on page reload

(aligned with Google Meet or Jitsi ux)

This ensures participants join a room with a fresh access token.

Some participants information might be altered after the access token
was generated (e.g. their name).

I wanted the initial data to be passed only once, when you navigate
to the room from the create button, but if you reload the page, then
a new access token will be fetched, and the pre-join screen displayed.

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

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import {
   usePersistentUserChoices,
   type LocalUserChoices,
@@ -19,6 +19,19 @@ export const Room = () => {
   const mode = isLoggedIn && history.state?.create ? 'create' : 'join'
   const skipJoinScreen = isLoggedIn && mode === 'create'
 
+  const clearRouterState = () => {
+    if (window?.history?.state) {
+      window.history.replaceState({}, '')
+    }
+  }
+
+  useEffect(() => {
+    window.addEventListener('beforeunload', clearRouterState)
+    return () => {
+      window.removeEventListener('beforeunload', clearRouterState)
+    }
+  }, [])
+
   if (!roomId) {
     return <ErrorScreen />
   }