♻️(frontend) refactor disconnection reason handling and state

Refactor the duplicateIdentity boolean URL parameter into an extensible string
reason parameter, making it easier to customize the disconnection message
shown to users.

Avoid passing this value via URL parameters, which are easy to manipulate.
Instead, use Wouter’s built-in navigation state to pass data across pages.

This was initially missed because navigateTo is a wrapper around Wouter’s
official navigation function, and its arguments were easy to overlook. This is
now fixed.

This prepares the ground for supporting additional disconnection reasons in
upcoming commits.

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

@@ -25,12 +25,12 @@ import { VideoConference } from '../livekit/prefabs/VideoConference'
 import { css } from '@/styled-system/css'
 import { BackgroundProcessorFactory } from '../livekit/components/blur'
 import { LocalUserChoices } from '@/stores/userChoices'
-import { navigateTo } from '@/navigation/navigateTo'
 import { MediaDeviceErrorAlert } from './MediaDeviceErrorAlert'
 import { usePostHog } from 'posthog-js/react'
 import { useConfig } from '@/api/useConfig'
 import { isFireFox } from '@/utils/livekit'
 import { useIsMobile } from '@/utils/useIsMobile'
+import { navigateTo } from '@/navigation/navigateTo'
 
 export const Conference = ({
   roomId,
@@ -230,10 +230,16 @@ export const Conference = ({
           onDisconnected={(e) => {
             switch (e) {
               case DisconnectReason.CLIENT_INITIATED:
-                navigateTo('feedback', { duplicateIdentity: false })
+                navigateTo('feedback')
                 return
               case DisconnectReason.DUPLICATE_IDENTITY:
-                navigateTo('feedback', { duplicateIdentity: true })
+                navigateTo(
+                  'feedback',
+                  {},
+                  {
+                    state: { reason: 'duplicateIdentity' },
+                  }
+                )
                 return
             }
           }}

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

@@ -3,7 +3,7 @@ import { Button } from '@/primitives'
 import { Screen } from '@/layout/Screen'
 import { Center, HStack, styled, VStack } from '@/styled-system/jsx'
 import { Rating } from '@/features/rooms/components/Rating.tsx'
-import { useLocation, useSearchParams } from 'wouter'
+import { useLocation } from 'wouter'
 
 // fixme - duplicated with home, refactor in a proper style
 const Heading = styled('h1', {
@@ -24,16 +24,14 @@ export const FeedbackRoute = () => {
   const { t } = useTranslation('rooms')
   const [, setLocation] = useLocation()
 
-  const [searchParams] = useSearchParams()
+  const state = window.history.state
 
   return (
     <Screen layout="centered" footer={false}>
       <Center>
         <VStack>
           <Heading>
-            {t(
-              `feedback.heading.${searchParams.get('duplicateIdentity') ? 'duplicateIdentity' : 'normal'}`
-            )}
+            {t(`feedback.heading.${state?.reason || 'normal'}`)}
           </Heading>
           <HStack>
             <Button variant="secondary" onPress={() => window.history.back()}>

src/frontend/src/routes.ts

@@ -43,11 +43,6 @@ export const routes: Record<
   feedback: {
     name: 'feedback',
     path: '/feedback',
-    to: (params: { duplicateIdentity?: false }) =>
-      '/feedback' +
-      (params.duplicateIdentity
-        ? `?duplicateIdentity=${params?.duplicateIdentity}`
-        : ''),
     Component: FeedbackRoute,
   },
   legalTerms: {