🚸(room) prevent user from misclicking out of a meeting

now clicking on the header homepage link asks for confirmation when on
the route page.

this is quick and dirty, using browser confirm ui, and not making a
difference between join page and conference page, but it'll do for now

src/frontend/src/layout/Header.tsx

@@ -5,10 +5,12 @@ import { useTranslation } from 'react-i18next'
 import { A, Button, Popover, PopoverList, Text } from '@/primitives'
 import { SettingsButton } from '@/features/settings'
 import { authUrl, logoutUrl, useUser } from '@/features/auth'
+import { useMatchesRoute } from '@/utils/useMatchesRoute'
 
 export const Header = () => {
   const { t } = useTranslation()
-  const isHome = window.location.pathname === '/'
+  const isHome = useMatchesRoute('home')
+  const isRoom = useMatchesRoute('room')
   const { user, isLoggedIn } = useUser()
 
   return (
@@ -25,7 +27,19 @@ export const Header = () => {
       <Stack direction="row" justify="space-between" align="center">
         <header>
           <Text bold variant="h1" margin={false}>
-            <Link to="/">{t('app')}</Link>
+            <Link
+              onClick={(event) => {
+                if (
+                  isRoom &&
+                  !window.confirm(t('leaveRoomPrompt', { ns: 'rooms' }))
+                ) {
+                  event.preventDefault()
+                }
+              }}
+              to="/"
+            >
+              {t('app')}
+            </Link>
           </Text>
         </header>
         <nav>

src/frontend/src/locales/de/rooms.json

@@ -5,5 +5,6 @@
     "joinLabel": "",
     "micLabel": "",
     "userLabel": ""
-  }
+  },
+  "leaveRoomPrompt": ""
 }

src/frontend/src/locales/en/rooms.json

@@ -5,5 +5,6 @@
     "joinLabel": "Join",
     "micLabel": "Microphone",
     "userLabel": "Your name"
-  }
+  },
+  "leaveRoomPrompt": "This will make you leave the meeting."
 }

src/frontend/src/locales/fr/rooms.json

@@ -5,5 +5,6 @@
     "joinLabel": "Rejoindre",
     "micLabel": "Micro",
     "userLabel": "Votre nom"
-  }
+  },
+  "leaveRoomPrompt": "Revenir à l'accueil vous fera quitter la réunion."
 }

src/frontend/src/utils/useMatchesRoute.ts

@@ -0,0 +1,17 @@
+import { useRoute } from 'wouter'
+import { roomRouteRegex } from '@/features/rooms'
+
+type RouteName = 'home' | 'room'
+
+const routeMap = {
+  home: '/',
+  room: roomRouteRegex,
+}
+
+export const useMatchesRoute = (route: RouteName) => {
+  const [match] = useRoute(routeMap[route])
+  if (!(route in routeMap)) {
+    throw new Error(`Route ${route} not found`)
+  }
+  return match
+}