🚸(frontend) make explicit why a page is not found

Enhance the error message based on @spaccoud's feedback,
explain to the user why a page is not found.

src/frontend/src/App.tsx

@@ -5,7 +5,7 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { QueryClientProvider } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 import { useLang } from 'hoofd'
-import { Switch, Route } from 'wouter'
+import { Switch, Route, useLocation } from 'wouter'
 import { I18nProvider } from 'react-aria-components'
 import { Layout } from './layout/Layout'
 import { NotFoundScreen } from './components/NotFoundScreen'
@@ -15,39 +15,47 @@ import { queryClient } from '@/api/queryClient'
 import { AppInitialization } from '@/components/AppInitialization'
 import { SdkCreateButton } from './features/sdk/routes/CreateButton'
 
+const SDK_BASE_ROUTE = '/sdk'
+
 function App() {
   const { i18n } = useTranslation()
   useLang(i18n.language)
+
+  const [location] = useLocation()
+  const isSDKRoute = location.startsWith(SDK_BASE_ROUTE)
+
+  if (isSDKRoute) {
+    return (
+      <QueryClientProvider client={queryClient}>
+        <Suspense fallback={null}>
+          <I18nProvider locale={i18n.language}>
+            <Switch>
+              <Route path={SDK_BASE_ROUTE} nest>
+                <Route path="/create-button">
+                  <SdkCreateButton />
+                </Route>
+              </Route>
+            </Switch>
+          </I18nProvider>
+        </Suspense>
+      </QueryClientProvider>
+    )
+  }
+
   return (
     <QueryClientProvider client={queryClient}>
+      <AppInitialization />
       <Suspense fallback={null}>
         <I18nProvider locale={i18n.language}>
-          <Switch>
-            <Route path="/sdk" nest>
-              <Route path="/create-button">
-                <SdkCreateButton />
-              </Route>
-            </Route>
-            {/* We only want support and ReactQueryDevTools in non /sdk routes */}
-            <Route path="*">
-              <AppInitialization />
-              <Layout>
-                {Object.entries(routes).map(([, route], i) => (
-                  <Route
-                    key={i}
-                    path={route.path}
-                    component={route.Component}
-                  />
-                ))}
-              </Layout>
-              <ReactQueryDevtools
-                initialIsOpen={false}
-                buttonPosition="top-left"
-              />
-            </Route>
-
-            <Route component={NotFoundScreen} />
-          </Switch>
+          <Layout>
+            <Switch>
+              {Object.entries(routes).map(([, route], i) => (
+                <Route key={i} path={route.path} component={route.Component} />
+              ))}
+              <Route component={NotFoundScreen} />
+            </Switch>
+          </Layout>
+          <ReactQueryDevtools initialIsOpen={false} buttonPosition="top-left" />
         </I18nProvider>
       </Suspense>
     </QueryClientProvider>

src/frontend/src/components/NotFoundScreen.tsx

@@ -1,12 +1,19 @@
 import { CenteredContent } from '@/layout/CenteredContent'
 import { Screen } from '@/layout/Screen'
+import { Text } from '@/primitives/Text'
 import { useTranslation } from 'react-i18next'
+import { Bold } from '@/primitives'
 
 export const NotFoundScreen = () => {
   const { t } = useTranslation()
   return (
     <Screen layout="centered">
-      <CenteredContent title={t('notFound.heading')} withBackButton />
+      <CenteredContent title={t('notFound.heading')} withBackButton>
+        <Text centered>
+          {t('notFound.body')}{' '}
+          <Bold>https://visio.numerique.gouv.fr/xxx-yyyy-zzz.</Bold>
+        </Text>
+      </CenteredContent>
     </Screen>
   )
 }

src/frontend/src/locales/de/global.json

@@ -22,7 +22,8 @@
   },
   "logout": "",
   "notFound": {
-    "heading": ""
+    "heading": "",
+    "body": ""
   },
   "submit": "OK",
   "footer": {

src/frontend/src/locales/en/global.json

@@ -22,7 +22,8 @@
   },
   "logout": "Logout",
   "notFound": {
-    "heading": "Page not found"
+    "heading": "Verify your meeting code",
+    "body": "Check that you have entered the correct meeting code in the URL. Example:"
   },
   "submit": "OK",
   "footer": {

src/frontend/src/locales/fr/global.json

@@ -22,7 +22,8 @@
   },
   "logout": "Se déconnecter",
   "notFound": {
-    "heading": "Page introuvable"
+    "heading": "Vérifier votre code de réunion",
+    "body": "Vérifiez que vous avez saisi le code de réunion correct dans l'URL. Exemple :"
   },
   "submit": "OK",
   "footer": {