fix: show browser version alert

packages/frontend/package.json

@@ -49,6 +49,7 @@
     "@tiptap/starter-kit": "^2.4.0",
     "@ungap/with-resolvers": "^0.1.0",
     "@xstate/store": "^0.0.5",
+    "bowser": "^2.11.0",
     "browser-image-compression": "^2.0.2",
     "buffer": "^6.0.3",
     "date-fns": "^3.6.0",

packages/frontend/src/components/CompatibilityAlert.tsx

@@ -0,0 +1,21 @@
+import { Center } from "#styled-system/jsx";
+import Alert from "@codegouvfr/react-dsfr/Alert";
+import Bowser from "bowser";
+
+const browser = Bowser.getParser(window.navigator.userAgent);
+const isWrongVersion = browser.getBrowser().name === "Firefox" && browser.getBrowserVersion().startsWith("102");
+
+export const CompatibilityAlert = () => {
+  if (!isWrongVersion) return null;
+  return (
+    <Center>
+      <Alert
+        severity="warning"
+        title={`
+        Votre navigateur n'est pas compatible avec l'application. 
+        Veuillez le mettre à jour, ou utiliser un autre navigateur.
+        `}
+      />
+    </Center>
+  );
+};

packages/frontend/src/routes/__root.tsx

@@ -11,6 +11,7 @@ import type { RouterOutputs } from "../api";
 import { useIsLoggedIn } from "../contexts/AuthContext";
 import { MenuButton } from "../features/menu/MenuButton";
 import { useIsDesktop } from "../hooks/useIsDesktop";
+import { CompatibilityAlert } from "#components/CompatibilityAlert";
 
 export const Route = createRootRouteWithContext<Partial<RouterOutputs<"/api/login">>>()({
   beforeLoad: (ctx) => {
@@ -131,7 +132,7 @@ const Layout = ({ children }: PropsWithChildren) => {
       />
       {isLoggedIn ? <MenuButton headerRef={headerRef} /> : null}
       {/* <Menu headerRef={headerRef} /> */}
-
+      <CompatibilityAlert />
       <Box flex="1">{children}</Box>
       {/* <TanStackRouterDevtools /> */}