🚨(frontend) resolve key prop warning in ParticipantListItem

Key prop was incorrectly passed down as a regular prop to ParticipantListItem instead of being used at the array mapping level. Key is a special React prop for list rendering and cannot be accessed as a component prop.
🚨(frontend) update deprecated react-aria Section components
2025-01-16 12:12:43 +01:00 · 2025-01-16 12:12:19 +01:00
87 changed files with 1960 additions and 14964 deletions
@@ -175,53 +175,25 @@ jobs:
      - name: Check format
        run: cd src/frontend/ && npm run check

-  lint-sdk:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-
-      - name: Install dependencies
-        run: cd src/sdk/library/ && npm ci
-
-      - name: Check linting
-        run: cd src/sdk/library/ && npm run lint
-
-      - name: Check format
-        run: cd src/sdk/library/ && npm run check
-
-  build-sdk:
-    runs-on: ubuntu-latest
-    needs: lint-sdk
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-
-      - name: Install dependencies
-        run: cd src/sdk/library/ && npm ci
-
-      - name: Check linting
-        run: cd src/sdk/library/ && npm run lint
-
-      - name: Check format
-        run: cd src/sdk/library/ && npm run build
-
  i18n-crowdin:
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/create-github-app-token@v1
+      -
+        uses: actions/create-github-app-token@v1
        id: app-token
        with:
          app-id: ${{ secrets.APP_ID }}
          private-key: ${{ secrets.PRIVATE_KEY }}
          owner: ${{ github.repository_owner }}
          repositories: "infrastructure,secrets"
-      - name: Checkout repository
+      -
+        name: Checkout repository
        uses: actions/checkout@v4
        with:
          submodules: recursive
          token: ${{ steps.app-token.outputs.token }}
-      - name: Load sops secrets
+      -
+        name: Load sops secrets
        uses: rouja/actions-sops@main
        with:
          secret-file: secrets/numerique-gouv/meet/secrets.enc.env
@@ -14,7 +14,7 @@
      "groupName": "ignored js dependencies",
      "matchManagers": ["npm"],
      "matchPackageNames": [
-        "eslint", "react", "react-dom", "@types/react-dom", "@types/react", "react-i18next"
+        "eslint"
      ]
    }
  ]
@@ -25,7 +25,7 @@ license = { file = "LICENSE" }
 readme = "README.md"
 requires-python = ">=3.10"
 dependencies = [
-    "boto3==1.36.6",
+    "boto3==1.35.97",
    "Brotli==1.1.0",
    "brevo-python==1.1.2",
    "celery[redis]==5.4.0",
@@ -48,11 +48,11 @@ dependencies = [
    "june-analytics-python==2.3.0",
    "markdown==3.7",
    "nested-multipart-parser==1.5.0",
-    "psycopg[binary]==3.2.4",
+    "psycopg[binary]==3.2.3",
    "PyJWT==2.10.1",
    "python-frontmatter==1.1.0",
    "requests==2.32.3",
-    "sentry-sdk==2.20.0",
+    "sentry-sdk==2.19.2",
    "url-normalize==1.4.3",
    "WeasyPrint>=60.2",
    "whitenoise==6.8.2",
@@ -74,7 +74,7 @@ dev = [
    "freezegun==1.5.1",
    "ipdb==0.13.13",
    "ipython==8.31.0",
-    "pyfakefs==5.7.4",
+    "pyfakefs==5.7.3",
    "pylint-django==2.6.1",
    "pylint==3.3.3",
    "pytest-cov==6.0.0",
@@ -82,8 +82,8 @@ dev = [
    "pytest==8.3.4",
    "pytest-icdiff==0.9",
    "pytest-xdist==3.6.1",
-    "responses==0.25.6",
-    "ruff==0.9.3",
+    "responses==0.25.5",
+    "ruff==0.9.1",
    "types-requests==2.32.0.20241016",
 ]

@@ -13,48 +13,48 @@
    "check": "prettier --check ./src"
  },
  "dependencies": {
-    "@livekit/components-react": "2.8.1",
+    "@livekit/components-react": "2.6.9",
    "@livekit/components-styles": "1.1.4",
-    "@livekit/track-processors": "0.3.3",
-    "@pandacss/preset-panda": "0.51.1",
-    "@react-aria/toast": "3.0.0-beta.19",
-    "@remixicon/react": "4.6.0",
-    "@tanstack/react-query": "5.64.2",
+    "@livekit/track-processors": "0.3.2",
+    "@pandacss/preset-panda": "0.48.0",
+    "@react-aria/toast": "3.0.0-beta.18",
+    "@remixicon/react": "4.5.0",
+    "@tanstack/react-query": "5.61.3",
    "crisp-sdk-web": "1.0.25",
-    "hoofd": "1.7.3",
-    "i18next": "24.2.2",
-    "i18next-browser-languagedetector": "8.0.2",
-    "i18next-parser": "9.1.0",
+    "hoofd": "1.7.1",
+    "i18next": "24.0.2",
+    "i18next-browser-languagedetector": "8.0.0",
+    "i18next-parser": "9.0.2",
    "i18next-resources-to-backend": "1.2.1",
-    "livekit-client": "2.8.1",
-    "posthog-js": "1.210.2",
+    "livekit-client": "2.6.3",
+    "posthog-js": "1.188.0",
    "react": "18.3.1",
-    "react-aria-components": "1.6.0",
+    "react-aria-components": "1.5.0",
    "react-dom": "18.3.1",
    "react-i18next": "15.1.1",
    "use-sound": "4.0.3",
-    "valtio": "2.1.3",
-    "wouter": "3.4.0"
+    "valtio": "2.1.2",
+    "wouter": "3.3.5"
  },
  "devDependencies": {
-    "@pandacss/dev": "0.51.1",
-    "@tanstack/eslint-plugin-query": "5.64.2",
-    "@tanstack/react-query-devtools": "5.64.2",
-    "@types/node": "22.10.10",
+    "@pandacss/dev": "0.48.0",
+    "@tanstack/eslint-plugin-query": "5.61.3",
+    "@tanstack/react-query-devtools": "5.61.3",
+    "@types/node": "22.9.3",
    "@types/react": "18.3.12",
    "@types/react-dom": "18.3.1",
-    "@typescript-eslint/eslint-plugin": "8.21.0",
-    "@typescript-eslint/parser": "8.21.0",
-    "@vitejs/plugin-react": "4.3.4",
+    "@typescript-eslint/eslint-plugin": "8.15.0",
+    "@typescript-eslint/parser": "8.15.0",
+    "@vitejs/plugin-react": "4.3.3",
    "eslint": "8.57.0",
-    "eslint-config-prettier": "10.0.1",
+    "eslint-config-prettier": "9.1.0",
    "eslint-plugin-jsx-a11y": "6.10.2",
-    "eslint-plugin-react-hooks": "5.1.0",
-    "eslint-plugin-react-refresh": "0.4.18",
-    "postcss": "8.5.1",
-    "prettier": "3.4.2",
-    "typescript": "5.7.3",
-    "vite": "6.0.11",
-    "vite-tsconfig-paths": "5.1.4"
+    "eslint-plugin-react-hooks": "5.0.0",
+    "eslint-plugin-react-refresh": "0.4.14",
+    "postcss": "8.4.49",
+    "prettier": "3.3.3",
+    "typescript": "5.7.2",
+    "vite": "5.4.11",
+    "vite-tsconfig-paths": "5.1.3"
  }
 }
@@ -13,40 +13,24 @@ import { routes } from './routes'
 import './i18n/init'
 import { queryClient } from '@/api/queryClient'
 import { AppInitialization } from '@/components/AppInitialization'
-import { SdkCreateButton } from './features/sdk/routes/CreateButton'

 function App() {
  const { i18n } = useTranslation()
  useLang(i18n.language)
  return (
    <QueryClientProvider client={queryClient}>
+      <AppInitialization />
      <Suspense fallback={null}>
        <I18nProvider locale={i18n.language}>
-          <Switch>
-            {/* We only want support and ReactQueryDevTools in non /sdk routes */}
-            <Route path={/^(?!\/sdk).*$/}>
-              <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 path="/sdk" nest>
-              <Route path="/create-button">
-                <SdkCreateButton />
-              </Route>
-            </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>
@@ -1,24 +0,0 @@
-export const VisioIcon = () => {
-  return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M0.841702 8.95427C0.75 9.42479 0.75 10.0042 0.75 10.9748V13.3096C0.75 14.5138 0.75 15.1159 0.925134 15.6549C1.08009 16.1319 1.33356 16.5709 1.6691 16.9435C2.04833 17.3647 2.56977 17.6658 3.61264 18.2679L5.6346 19.4353C6.55753 19.9681 7.07208 20.2652 7.56247 20.4081V13.2043C7.56247 12.8442 7.36578 12.5129 7.04965 12.3404L0.841702 8.95427Z"
-        fill="currentColor"
-      />
-      <path
-        d="M17.747 10.0123V13.7685C17.747 14.2878 17.9727 14.7815 18.3654 15.1214L21.0688 17.4609C21.227 17.5947 21.3912 17.7042 21.5616 17.7894C21.738 17.8685 21.9084 17.9081 22.0726 17.9081C22.4255 17.9081 22.7084 17.7925 22.9213 17.5613C23.1404 17.324 23.2499 17.0168 23.2499 16.6396V7.14866C23.2499 6.77146 23.1404 6.46726 22.9213 6.23607C22.7084 5.9988 22.4255 5.88017 22.0726 5.88017C21.9084 5.88017 21.738 5.91971 21.5616 5.9988C21.3912 6.07789 21.227 6.1874 21.0688 6.32733L18.3675 8.65759C17.9735 8.99746 17.747 9.49201 17.747 10.0123Z"
-        fill="currentColor"
-      />
-      <path
-        d="M1.74517 7.61282C1.67 7.57182 1.59117 7.54405 1.51135 7.52872C1.56171 7.46443 1.61433 7.40178 1.66914 7.34091C2.04837 6.91973 2.56981 6.61868 3.61268 6.01657L5.63464 4.84919C6.67751 4.24708 7.19894 3.94603 7.7533 3.82819C8.2438 3.72394 8.75074 3.72394 9.24124 3.82819C9.7956 3.94603 10.317 4.24708 11.3599 4.84919L13.358 6.0028C13.366 6.00738 13.374 6.01197 13.3819 6.01658C14.4248 6.61868 14.9462 6.91973 15.3255 7.34091C15.661 7.71357 15.9145 8.15259 16.0694 8.62951C16.2446 9.16852 16.2446 9.77063 16.2446 10.9748V13.3096C16.2446 14.5138 16.2446 15.1159 16.0694 15.6549C15.9145 16.1319 15.661 16.5709 15.3255 16.9435C14.9462 17.3647 14.4248 17.6657 13.382 18.2678C13.373 18.273 13.364 18.2782 13.3551 18.2833L11.3599 19.4353C10.317 20.0374 9.7956 20.3384 9.24124 20.4562C9.21846 20.4611 9.19564 20.4657 9.17279 20.4701L9.17278 13.2043C9.17278 12.255 8.65422 11.3814 7.82079 10.9268L1.74517 7.61282Z"
-        fill="currentColor"
-      />
-    </svg>
-  )
-}
@@ -14,11 +14,10 @@ import { RiAddLine, RiLink } from '@remixicon/react'
 import { LaterMeetingDialog } from '@/features/home/components/LaterMeetingDialog'
 import { IntroSlider } from '@/features/home/components/IntroSlider'
 import { MoreLink } from '@/features/home/components/MoreLink'
-import { ReactNode, useEffect, useState } from 'react'
+import { ReactNode, useState } from 'react'

 import { css } from '@/styled-system/css'
 import { menuRecipe } from '@/primitives/menuRecipe.ts'
-import { SdkReverseClient } from '@/features/sdk/SdkReverseClient'

 const Columns = ({ children }: { children?: ReactNode }) => {
  return (
@@ -33,10 +32,10 @@ const Columns = ({ children }: { children?: ReactNode }) => {
        justifyContent: 'normal',
        padding: '0 1rem',
        width: 'calc(100% - 2rem)',
-        _motionReduce: {
+        '@media(prefers-reduced-motion: reduce)': {
          opacity: 1,
        },
-        _motionSafe: {
+        '@media(prefers-reduced-motion: no-preference)': {
          opacity: 0,
          animation: '.5s ease-in fade 0s forwards',
        },
@@ -157,18 +156,6 @@ export const Home = () => {
  const { mutateAsync: createRoom } = useCreateRoom()
  const [laterRoomId, setLaterRoomId] = useState<null | string>(null)

-  const { user } = useUser()
-
-  /**
-   * Used for SDK popup to close automatically.
-   */
-  useEffect(() => {
-    if (!user) {
-      return
-    }
-    SdkReverseClient.broadcastAuthentication()
-  }, [user])
-
  return (
    <UserAware>
      <Screen>
@@ -1,281 +1,30 @@
 import { useTranslation } from 'react-i18next'
-import {
-  usePersistentUserChoices,
-  usePreviewTracks,
-  type LocalUserChoices,
-} from '@livekit/components-react'
-import { css } from '@/styled-system/css'
+import { PreJoin, type LocalUserChoices } from '@livekit/components-react'
 import { Screen } from '@/layout/Screen'
-import { useMemo, useEffect, useRef, useState } from 'react'
-import { LocalVideoTrack, Track } from 'livekit-client'
-import { H } from '@/primitives/H'
-import { SelectToggleDevice } from '../livekit/components/controls/SelectToggleDevice'
-import { Field } from '@/primitives/Field'
-import { Form } from '@/primitives'
-import { HStack, VStack } from '@/styled-system/jsx'
-
-const onError = (e: Error) => console.error('ERROR', e)
+import { CenteredContent } from '@/layout/CenteredContent'
+import { useUser } from '@/features/auth'

 export const Join = ({
  onSubmit,
 }: {
  onSubmit: (choices: LocalUserChoices) => void
 }) => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'join' })
-
-  const {
-    userChoices: initialUserChoices,
-    saveAudioInputDeviceId,
-    saveVideoInputDeviceId,
-    saveUsername,
-  } = usePersistentUserChoices({})
-
-  const [audioDeviceId, setAudioDeviceId] = useState<string>(
-    initialUserChoices.audioDeviceId
-  )
-  const [videoDeviceId, setVideoDeviceId] = useState<string>(
-    initialUserChoices.videoDeviceId
-  )
-  const [username, setUsername] = useState<string>(initialUserChoices.username)
-
-  useEffect(() => {
-    saveAudioInputDeviceId(audioDeviceId)
-  }, [audioDeviceId, saveAudioInputDeviceId])
-
-  useEffect(() => {
-    saveVideoInputDeviceId(videoDeviceId)
-  }, [videoDeviceId, saveVideoInputDeviceId])
-
-  useEffect(() => {
-    saveUsername(username)
-  }, [username, saveUsername])
-
-  const [audioEnabled, setAudioEnabled] = useState(true)
-  const [videoEnabled, setVideoEnabled] = useState(true)
-
-  const tracks = usePreviewTracks(
-    {
-      audio: { deviceId: initialUserChoices.audioDeviceId },
-      video: { deviceId: initialUserChoices.videoDeviceId },
-    },
-    onError
-  )
-
-  const videoTrack = useMemo(
-    () =>
-      tracks?.filter(
-        (track) => track.kind === Track.Kind.Video
-      )[0] as LocalVideoTrack,
-    [tracks]
-  )
-
-  const audioTrack = useMemo(
-    () =>
-      tracks?.filter(
-        (track) => track.kind === Track.Kind.Audio
-      )[0] as LocalVideoTrack,
-    [tracks]
-  )
-
-  const videoEl = useRef(null)
-
-  useEffect(() => {
-    const videoElement = videoEl.current as HTMLVideoElement | null
-
-    const handleVideoLoaded = () => {
-      if (videoElement) {
-        videoElement.style.opacity = '1'
-      }
-    }
-
-    if (videoElement && videoTrack && videoEnabled) {
-      videoTrack.unmute()
-      videoTrack.attach(videoElement)
-      videoElement.addEventListener('loadedmetadata', handleVideoLoaded)
-    }
-
-    return () => {
-      videoTrack?.detach()
-      videoElement?.removeEventListener('loadedmetadata', handleVideoLoaded)
-    }
-  }, [videoTrack, videoEnabled])
-
-  function handleSubmit() {
-    onSubmit({
-      audioEnabled,
-      videoEnabled,
-      audioDeviceId,
-      videoDeviceId,
-      username,
-    })
-  }
+  const { t } = useTranslation('rooms')
+  const { user } = useUser()

  return (
-    <Screen footer={false}>
-      <div
-        className={css({
-          display: 'flex',
-          alignItems: 'flex-start',
-          justifyContent: 'center',
-          flexGrow: 1,
-          lg: {
-            alignItems: 'center',
-          },
-        })}
-      >
-        <div
-          className={css({
-            display: 'flex',
-            height: 'auto',
-            alignItems: 'center',
-            justifyContent: 'center',
-            gap: '2rem',
-            padding: '0 2rem',
-            flexDirection: 'column',
-            minWidth: 0,
-            width: '100%',
-            lg: {
-              flexDirection: 'row',
-              width: 'auto',
-              height: '570px',
-            },
-          })}
-        >
-          <div
-            className={css({
-              width: '100%',
-              lg: {
-                width: '740px',
-              },
-            })}
-          >
-            <div
-              className={css({
-                borderRadius: '1rem',
-                overflow: 'hidden',
-                position: 'relative',
-                width: '100%',
-                height: 'auto',
-                aspectRatio: 16 / 9,
-                '--tw-shadow':
-                  '0 10px 15px -5px #00000010, 0 4px 5px -6px #00000010',
-                '--tw-shadow-colored':
-                  '0 10px 15px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color)',
-                boxShadow:
-                  'var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)',
-                backgroundColor: 'black',
-              })}
-            >
-              {videoTrack && videoEnabled ? (
-                // eslint-disable-next-line jsx-a11y/media-has-caption
-                <video
-                  ref={videoEl}
-                  width="1280"
-                  height="720"
-                  className={css({
-                    display: 'block',
-                    width: '102%',
-                    height: '102%',
-                    objectFit: 'cover',
-                    transform: 'rotateY(180deg)',
-                    opacity: 0,
-                    transition: 'opacity 0.3s ease-in-out',
-                  })}
-                />
-              ) : (
-                <div
-                  className={css({
-                    width: '100%',
-                    height: '100%',
-                    color: 'white',
-                    display: 'flex',
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                  })}
-                >
-                  <p
-                    className={css({
-                      fontSize: '24px',
-                      fontWeight: '300',
-                    })}
-                  >
-                    {!videoEnabled && t('cameraDisabled')}
-                    {videoEnabled && !videoTrack && t('cameraStarting')}
-                  </p>
-                </div>
-              )}
-            </div>
-
-            <HStack justify="center" padding={1.5}>
-              <SelectToggleDevice
-                source={Track.Source.Microphone}
-                initialState={audioEnabled}
-                track={audioTrack}
-                initialDeviceId={initialUserChoices.audioDeviceId}
-                onChange={(enabled) => setAudioEnabled(enabled)}
-                onDeviceError={(error) => console.error(error)}
-                onActiveDeviceChange={(deviceId) =>
-                  setAudioDeviceId(deviceId ?? '')
-                }
-                variant="tertiary"
-              />
-              <SelectToggleDevice
-                source={Track.Source.Camera}
-                initialState={videoEnabled}
-                track={videoTrack}
-                initialDeviceId={initialUserChoices.videoDeviceId}
-                onChange={(enabled) => setVideoEnabled(enabled)}
-                onDeviceError={(error) => console.error(error)}
-                onActiveDeviceChange={(deviceId) =>
-                  setVideoDeviceId(deviceId ?? '')
-                }
-                variant="tertiary"
-              />
-            </HStack>
-          </div>
-          <div
-            className={css({
-              width: '100%',
-              flexShrink: 0,
-              padding: '0',
-              sm: {
-                width: '448px',
-                padding: '0 3rem 9rem 3rem',
-              },
-            })}
-          >
-            <Form
-              onSubmit={handleSubmit}
-              submitLabel={t('joinLabel')}
-              submitButtonProps={{
-                fullWidth: true,
-              }}
-            >
-              <VStack marginBottom={1}>
-                <H lvl={1} margin={false}>
-                  {t('heading')}
-                </H>
-                <Field
-                  type="text"
-                  onChange={setUsername}
-                  label={t('usernameLabel')}
-                  aria-label={t('usernameLabel')}
-                  defaultValue={initialUserChoices?.username}
-                  validate={(value) => !value && t('errors.usernameEmpty')}
-                  wrapperProps={{
-                    noMargin: true,
-                    fullWidth: true,
-                  }}
-                  labelProps={{
-                    center: true,
-                  }}
-                  maxLength={50}
-                />
-              </VStack>
-            </Form>
-          </div>
-        </div>
-      </div>
+    <Screen layout="centered" footer={false}>
+      <CenteredContent title={t('join.heading')}>
+        <PreJoin
+          persistUserChoices
+          onSubmit={onSubmit}
+          micLabel={t('join.audioinput.label')}
+          camLabel={t('join.videoinput.label')}
+          joinLabel={t('join.joinLabel')}
+          userLabel={t('join.usernameLabel')}
+          defaults={{ username: user?.full_name }}
+        />
+      </CenteredContent>
    </Screen>
  )
 }
@@ -1,123 +0,0 @@
-import { Button } from '@/primitives'
-import { useMediaDeviceSelect } from '@livekit/components-react'
-import { RiCameraSwitchLine } from '@remixicon/react'
-import { useEffect, useState } from 'react'
-import { ButtonProps } from 'react-aria-components'
-import { useTranslation } from 'react-i18next'
-
-enum FacingMode {
-  USER = 'user',
-  ENVIRONMENT = 'environment',
-}
-
-export const CameraSwitchButton = (props: Partial<ButtonProps>) => {
-  const { t } = useTranslation('rooms')
-
-  const { devices, activeDeviceId, setActiveMediaDevice } =
-    useMediaDeviceSelect({
-      kind: 'videoinput',
-      requestPermissions: true,
-    })
-
-  // getCapabilities type is not available.
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const getDeviceFacingMode = (device: any): string[] => {
-    if (!device.getCapabilities) {
-      return []
-    }
-    const capabilities = device.getCapabilities()
-    if (!capabilities) {
-      return []
-    }
-    if (typeof capabilities.facingMode !== 'object') {
-      return []
-    }
-    return capabilities.facingMode
-  }
-
-  const detectCurrentFacingMode = (): FacingMode | null => {
-    if (!activeDeviceId) {
-      return null
-    }
-    const activeDevice = devices.find(
-      (device) => device.deviceId === activeDeviceId
-    )
-    if (!activeDevice) {
-      return null
-    }
-    const facingMode = getDeviceFacingMode(activeDevice)
-    if (facingMode.indexOf(FacingMode.USER) >= 0) {
-      return FacingMode.USER
-    }
-    if (facingMode.indexOf(FacingMode.ENVIRONMENT) >= 0) {
-      return FacingMode.ENVIRONMENT
-    }
-    return null
-  }
-
-  const guessCurrentFacingMode = () => {
-    const facingMode = detectCurrentFacingMode()
-    if (facingMode) {
-      return facingMode
-    }
-    // We consider by default if we have no clue that the user camera is used.
-    return FacingMode.USER
-  }
-
-  const [facingMode, setFacingMode] = useState<FacingMode | null>()
-
-  /**
-   * Before setting the initial value of facingMode we need to wait for devices to
-   * be loaded ( because in detectCurrentFacingMode we need to find the active device
-   * in the devices list ), which is not the case at first render.
-   */
-  useEffect(() => {
-    if (devices.length == 0) {
-      return
-    }
-    if (facingMode) {
-      return
-    }
-
-    setFacingMode(guessCurrentFacingMode())
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [devices])
-
-  const getUserDevice = (
-    facingMode: FacingMode
-  ): MediaDeviceInfo | undefined => {
-    return devices.find((device) => {
-      return getDeviceFacingMode(device).indexOf(facingMode) >= 0
-    })
-  }
-
-  const toggle = () => {
-    let target: FacingMode
-    if (facingMode === FacingMode.USER) {
-      target = FacingMode.ENVIRONMENT
-    } else {
-      target = FacingMode.USER
-    }
-    const device = getUserDevice(target)
-    if (device) {
-      setActiveMediaDevice(device.deviceId)
-      setFacingMode(target)
-    } else {
-      console.error('Cannot get user device with facingMode ' + target)
-    }
-  }
-  return (
-    <Button
-      onPress={(e) => {
-        toggle()
-        props.onPress?.(e)
-      }}
-      variant="primaryTextDark"
-      aria-label={t('options.items.switchCamera')}
-      tooltip={t('options.items.switchCamera')}
-      description={true}
-    >
-      <RiCameraSwitchLine size={20} />
-    </Button>
-  )
-}
@@ -1,20 +0,0 @@
-import { RiAccountBoxLine } from '@remixicon/react'
-import { MenuItem } from 'react-aria-components'
-import { useTranslation } from 'react-i18next'
-import { menuRecipe } from '@/primitives/menuRecipe'
-import { useSidePanel } from '../../../hooks/useSidePanel'
-
-export const EffectsMenuItem = () => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
-  const { toggleEffects } = useSidePanel()
-
-  return (
-    <MenuItem
-      onAction={() => toggleEffects()}
-      className={menuRecipe({ icon: true, variant: 'dark' }).item}
-    >
-      <RiAccountBoxLine size={20} />
-      {t('effects')}
-    </MenuItem>
-  )
-}
@@ -1,20 +0,0 @@
-import { RiMegaphoneLine } from '@remixicon/react'
-import { MenuItem } from 'react-aria-components'
-import { useTranslation } from 'react-i18next'
-import { menuRecipe } from '@/primitives/menuRecipe'
-import { GRIST_FORM } from '@/utils/constants'
-
-export const FeedbackMenuItem = () => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
-
-  return (
-    <MenuItem
-      href={GRIST_FORM}
-      target="_blank"
-      className={menuRecipe({ icon: true, variant: 'dark' }).item}
-    >
-      <RiMegaphoneLine size={20} />
-      {t('feedback')}
-    </MenuItem>
-  )
-}
@@ -1,34 +0,0 @@
-import { RiFullscreenExitLine, RiFullscreenLine } from '@remixicon/react'
-import { MenuItem } from 'react-aria-components'
-import { useTranslation } from 'react-i18next'
-import { menuRecipe } from '@/primitives/menuRecipe'
-import { useFullScreen } from '../../../hooks/useFullScreen'
-
-export const FullScreenMenuItem = () => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
-  const { toggleFullScreen, isCurrentlyFullscreen, isFullscreenAvailable } =
-    useFullScreen()
-
-  if (!isFullscreenAvailable) {
-    return null
-  }
-
-  return (
-    <MenuItem
-      onAction={() => toggleFullScreen()}
-      className={menuRecipe({ icon: true, variant: 'dark' }).item}
-    >
-      {isCurrentlyFullscreen ? (
-        <>
-          <RiFullscreenExitLine size={20} />
-          {t('fullscreen.exit')}
-        </>
-      ) : (
-        <>
-          <RiFullscreenLine size={20} />
-          {t('fullscreen.enter')}
-        </>
-      )}
-    </MenuItem>
-  )
-}
@@ -8,7 +8,7 @@ export const OptionsButton = () => {

  return (
    <>
-      <Menu variant="dark">
+      <Menu>
        <Button
          square
          variant="primaryDark"
@@ -1,12 +1,21 @@
-import { Menu as RACMenu, MenuSection } from 'react-aria-components'
+import {
+  RiAccountBoxLine,
+  RiMegaphoneLine,
+  RiSettings3Line,
+} from '@remixicon/react'
+import { MenuItem, Menu as RACMenu, MenuSection } from 'react-aria-components'
+import { useTranslation } from 'react-i18next'
 import { Separator } from '@/primitives/Separator'
-import { FullScreenMenuItem } from './FullScreenMenuItem'
-import { SettingsMenuItem } from './SettingsMenuItem'
-import { FeedbackMenuItem } from './FeedbackMenuItem'
-import { EffectsMenuItem } from './EffectsMenuItem'
+import { useSidePanel } from '../../../hooks/useSidePanel'
+import { menuRecipe } from '@/primitives/menuRecipe.ts'
+import { useSettingsDialog } from '../SettingsDialogContext'
+import { GRIST_FORM } from '@/utils/constants'

 // @todo try refactoring it to use MenuList component
 export const OptionsMenuItems = () => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
+  const { toggleEffects } = useSidePanel()
+  const { setDialogOpen } = useSettingsDialog()
  return (
    <RACMenu
      style={{
@@ -15,13 +24,31 @@ export const OptionsMenuItems = () => {
      }}
    >
      <MenuSection>
-        <FullScreenMenuItem />
-        <EffectsMenuItem />
+        <MenuItem
+          onAction={() => toggleEffects()}
+          className={menuRecipe({ icon: true }).item}
+        >
+          <RiAccountBoxLine size={20} />
+          {t('effects')}
+        </MenuItem>
      </MenuSection>
      <Separator />
      <MenuSection>
-        <FeedbackMenuItem />
-        <SettingsMenuItem />
+        <MenuItem
+          href={GRIST_FORM}
+          target="_blank"
+          className={menuRecipe({ icon: true }).item}
+        >
+          <RiMegaphoneLine size={20} />
+          {t('feedbacks')}
+        </MenuItem>
+        <MenuItem
+          className={menuRecipe({ icon: true }).item}
+          onAction={() => setDialogOpen(true)}
+        >
+          <RiSettings3Line size={20} />
+          {t('settings')}
+        </MenuItem>
      </MenuSection>
    </RACMenu>
  )
@@ -1,20 +0,0 @@
-import { RiSettings3Line } from '@remixicon/react'
-import { MenuItem } from 'react-aria-components'
-import { useTranslation } from 'react-i18next'
-import { menuRecipe } from '@/primitives/menuRecipe'
-import { useSettingsDialog } from '../SettingsDialogContext'
-
-export const SettingsMenuItem = () => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'options.items' })
-  const { setDialogOpen } = useSettingsDialog()
-
-  return (
-    <MenuItem
-      className={menuRecipe({ icon: true, variant: 'dark' }).item}
-      onAction={() => setDialogOpen(true)}
-    >
-      <RiSettings3Line size={20} />
-      {t('settings')}
-    </MenuItem>
-  )
-}
@@ -46,9 +46,9 @@ export const ScreenShareToggle = ({
      {...props}
    >
      <Div position="relative">
-        <RiRectangleLine size={24} />
+        <RiRectangleLine size={28} />
        <Icon
-          size={14}
+          size={16}
          style={{
            position: 'absolute',
            top: '50%',
@@ -13,14 +13,12 @@ import {
  RiVideoOffLine,
  RiVideoOnLine,
 } from '@remixicon/react'
-import { LocalAudioTrack, LocalVideoTrack, Track } from 'livekit-client'
+import { Track } from 'livekit-client'

 import { Shortcut } from '@/features/shortcuts/types'

 import { ToggleDevice } from '@/features/rooms/livekit/components/controls/ToggleDevice.tsx'
 import { css } from '@/styled-system/css'
-import { ButtonRecipeProps } from '@/primitives/buttonRecipe'
-import { useEffect } from 'react'

 export type ToggleSource = Exclude<
  Track.Source,
@@ -67,22 +65,12 @@ const selectToggleDeviceConfig: SelectToggleDeviceConfigMap = {

 type SelectToggleDeviceProps<T extends ToggleSource> =
  UseTrackToggleProps<T> & {
-    track?: LocalAudioTrack | LocalVideoTrack | undefined
-    initialDeviceId?: string
    onActiveDeviceChange: (deviceId: string) => void
    source: SelectToggleSource
-    variant?: NonNullable<ButtonRecipeProps>['variant']
-    menuVariant?: 'dark' | 'light'
-    hideMenu?: boolean
  }

 export const SelectToggleDevice = <T extends ToggleSource>({
-  track,
-  initialDeviceId,
  onActiveDeviceChange,
-  hideMenu,
-  variant = 'primaryDark',
-  menuVariant = 'light',
  ...props
 }: SelectToggleDeviceProps<T>) => {
  const config = selectToggleDeviceConfig[props.source]
@@ -93,19 +81,7 @@ export const SelectToggleDevice = <T extends ToggleSource>({
  const trackProps = useTrackToggle(props)

  const { devices, activeDeviceId, setActiveMediaDevice } =
-    useMediaDeviceSelect({ kind: config.kind, track })
-
-  /**
-   * When providing only track outside of a room context, activeDeviceId is undefined.
-   * So we need to initialize it with the initialDeviceId.
-   * nb: I don't understand why useMediaDeviceSelect cannot infer it from track device id.
-   */
-  useEffect(() => {
-    if (initialDeviceId !== undefined) {
-      setActiveMediaDevice(initialDeviceId)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [setActiveMediaDevice])
+    useMediaDeviceSelect({ kind: config.kind })

  const selectLabel = t('choose', { keyPrefix: `join.${config.kind}` })

@@ -116,43 +92,29 @@ export const SelectToggleDevice = <T extends ToggleSource>({
        gap: '1px',
      })}
    >
-      <ToggleDevice
-        {...trackProps}
-        config={config}
-        variant={variant}
-        toggleButtonProps={{
-          ...(hideMenu
-            ? {
-                groupPosition: undefined,
-              }
-            : {}),
-        }}
-      />
-      {!hideMenu && (
-        <Menu variant={menuVariant}>
-          <Button
-            tooltip={selectLabel}
-            aria-label={selectLabel}
-            groupPosition="right"
-            square
-            variant={trackProps.enabled ? variant : 'error2'}
-          >
-            <RiArrowDownSLine />
-          </Button>
-          <MenuList
-            items={devices.map((d) => ({
-              value: d.deviceId,
-              label: d.label,
-            }))}
-            selectedItem={activeDeviceId}
-            onAction={(value) => {
-              setActiveMediaDevice(value as string)
-              onActiveDeviceChange(value as string)
-            }}
-            variant={menuVariant}
-          />
-        </Menu>
-      )}
+      <ToggleDevice {...trackProps} config={config} />
+      <Menu>
+        <Button
+          tooltip={selectLabel}
+          aria-label={selectLabel}
+          groupPosition="right"
+          square
+          variant={trackProps.enabled ? 'primaryDark' : 'error2'}
+        >
+          <RiArrowDownSLine />
+        </Button>
+        <MenuList
+          items={devices.map((d) => ({
+            value: d.deviceId,
+            label: d.label,
+          }))}
+          selectedItem={activeDeviceId}
+          onAction={(value) => {
+            setActiveMediaDevice(value as string)
+            onActiveDeviceChange(value as string)
+          }}
+        />
+      </Menu>
    </div>
  )
 }
@@ -4,14 +4,10 @@ import { useTranslation } from 'react-i18next'
 import { Crisp } from 'crisp-sdk-web'
 import { useEffect, useState } from 'react'
 import { ToggleButtonProps } from '@/primitives/ToggleButton'
-import { useIsSupportEnabled } from '@/features/support/hooks/useSupport'

 export const SupportToggle = ({ onPress, ...props }: ToggleButtonProps) => {
  const { t } = useTranslation('rooms', { keyPrefix: 'controls' })
-
-  const [isOpened, setIsOpened] = useState(() => {
-    return window?.$crisp?.is?.('chat:opened') || false
-  })
+  const [isOpened, setIsOpened] = useState($crisp.is('chat:opened'))

  useEffect(() => {
    if (!Crisp) {
@@ -30,12 +26,6 @@ export const SupportToggle = ({ onPress, ...props }: ToggleButtonProps) => {
    }
  }, [])

-  const isSupportEnabled = useIsSupportEnabled()
-
-  if (!isSupportEnabled) {
-    return
-  }
-
  return (
    <ToggleButton
      square
@@ -6,28 +6,18 @@ import { useTranslation } from 'react-i18next'
 import { SelectToggleDeviceConfig } from './SelectToggleDevice'
 import useLongPress from '@/features/shortcuts/useLongPress'
 import { ActiveSpeaker } from '@/features/rooms/components/ActiveSpeaker'
-import {
-  useIsSpeaking,
-  useLocalParticipant,
-  useMaybeRoomContext,
-} from '@livekit/components-react'
-import { ButtonRecipeProps } from '@/primitives/buttonRecipe'
-import { ToggleButtonProps } from '@/primitives/ToggleButton'
+import { useIsSpeaking, useLocalParticipant } from '@livekit/components-react'

 export type ToggleDeviceProps = {
  enabled: boolean
  toggle: () => void
  config: SelectToggleDeviceConfig
-  variant?: NonNullable<ButtonRecipeProps>['variant']
-  toggleButtonProps?: Partial<ToggleButtonProps>
 }

 export const ToggleDevice = ({
  config,
  enabled,
  toggle,
-  variant = 'primaryDark',
-  toggleButtonProps,
 }: ToggleDeviceProps) => {
  const { t } = useTranslation('rooms', { keyPrefix: 'join' })

@@ -58,29 +48,24 @@ export const ToggleDevice = ({

  const Icon = enabled ? iconOn : iconOff

-  const context = useMaybeRoomContext()
-  if (kind === 'audioinput' && pushToTalk && context) {
-    return <ActiveSpeakerWrapper />
+  const { localParticipant } = useLocalParticipant()
+  const isSpeaking = useIsSpeaking(localParticipant)
+
+  if (kind === 'audioinput' && pushToTalk) {
+    return <ActiveSpeaker isSpeaking={isSpeaking} pushToTalk />
  }

  return (
    <ToggleButton
      isSelected={!enabled}
-      variant={enabled ? variant : 'error2'}
+      variant={enabled ? 'primaryDark' : 'error2'}
      shySelected
      onPress={() => toggle()}
      aria-label={toggleLabel}
      tooltip={toggleLabel}
      groupPosition="left"
-      {...toggleButtonProps}
    >
      <Icon />
    </ToggleButton>
  )
 }
-
-const ActiveSpeakerWrapper = () => {
-  const { localParticipant } = useLocalParticipant()
-  const isSpeaking = useIsSpeaking(localParticipant)
-  return <ActiveSpeaker isSpeaking={isSpeaking} pushToTalk />
-}
@@ -7,7 +7,7 @@ import { css } from '@/styled-system/css'
 import { ToggleButtonProps } from '@/primitives/ToggleButton'

 export const TranscriptToggle = ({
-  variant = 'primaryTextDark',
+  variant = 'primaryDark',
  onPress,
  ...props
 }: ToggleButtonProps) => {
@@ -1,68 +0,0 @@
-// We use vendor prefix properties
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
-
-import { useState } from 'react'
-
-export function useFullScreen() {
-  const getIsFullscreen = () => {
-    return !!(
-      document.fullscreenElement ||
-      document.webkitFullscreenElement ||
-      document.mozFullScreenElement ||
-      document.msFullscreenElement
-    )
-  }
-
-  const [isFullscreenAvailable] = useState(
-    () =>
-      document.fullscreenEnabled ||
-      document.webkitFullscreenEnabled ||
-      document.mozFullScreenEnabled ||
-      document.msFullscreenEnabled
-  )
-
-  const enterFullscreen = async () => {
-    try {
-      const docEl = document.documentElement
-      if (docEl.requestFullscreen) {
-        await docEl.requestFullscreen()
-      } else if (docEl.webkitRequestFullscreen) {
-        await docEl.webkitRequestFullscreen()
-      } else if (docEl.msRequestFullscreen) {
-        await docEl.msRequestFullscreen()
-      }
-    } catch (error) {
-      console.error('Error entering fullscreen:', error)
-    }
-  }
-
-  const exitFullscreen = async () => {
-    try {
-      if (document.exitFullscreen) {
-        await document.exitFullscreen()
-      } else if (document.webkitExitFullscreen) {
-        await document.webkitExitFullscreen()
-      } else if (document.msExitFullscreen) {
-        await document.msExitFullscreen()
-      }
-    } catch (error) {
-      console.error('Error exiting fullscreen:', error)
-    }
-  }
-
-  const toggleFullScreen = async () => {
-    const isCurrentlyFullscreen = getIsFullscreen()
-    if (isCurrentlyFullscreen) {
-      await exitFullscreen()
-    } else {
-      await enterFullscreen()
-    }
-  }
-
-  return {
-    isCurrentlyFullscreen: getIsFullscreen(),
-    isFullscreenAvailable,
-    toggleFullScreen,
-  }
-}
@@ -8,8 +8,10 @@ import { HandToggle } from '../../components/controls/HandToggle'
 import { ScreenShareToggle } from '../../components/controls/ScreenShareToggle'
 import { OptionsButton } from '../../components/controls/Options/OptionsButton'
 import { StartMediaButton } from '../../components/controls/StartMediaButton'
-import { MoreOptions } from './MoreOptions'
-import { useRef } from 'react'
+import { ChatToggle } from '../../components/controls/ChatToggle'
+import { ParticipantsToggle } from '../../components/controls/Participants/ParticipantsToggle'
+import { SupportToggle } from '../../components/controls/SupportToggle'
+import { TranscriptToggle } from '../../components/controls/TranscriptToggle'

 export function DesktopControlBar({
  onDeviceError,
@@ -19,11 +21,9 @@ export function DesktopControlBar({
  saveVideoInputDeviceId,
 }: ControlBarAuxProps) {
  const browserSupportsScreenSharing = supportsScreenSharing()
-  const desktopControlBarEl = useRef<HTMLDivElement>(null)
  return (
    <>
      <div
-        ref={desktopControlBarEl}
        className={css({
          width: '100vw',
          display: 'flex',
@@ -62,7 +62,6 @@ export function DesktopControlBar({
            onActiveDeviceChange={(deviceId) =>
              saveAudioInputDeviceId(deviceId ?? '')
            }
-            menuVariant="dark"
          />
          <SelectToggleDevice
            source={Track.Source.Camera}
@@ -73,7 +72,6 @@ export function DesktopControlBar({
            onActiveDeviceChange={(deviceId) =>
              saveVideoInputDeviceId(deviceId ?? '')
            }
-            menuVariant="dark"
          />
          {browserSupportsScreenSharing && (
            <ScreenShareToggle
@@ -87,7 +85,21 @@ export function DesktopControlBar({
          <LeaveButton />
          <StartMediaButton />
        </div>
-        <MoreOptions parentElement={desktopControlBarEl} />
+        <div
+          className={css({
+            display: 'flex',
+            justifyContent: 'flex-end',
+            flex: '1 1 33%',
+            alignItems: 'center',
+            gap: '0.5rem',
+            paddingRight: '0.25rem',
+          })}
+        >
+          <ChatToggle />
+          <ParticipantsToggle />
+          <TranscriptToggle />
+          <SupportToggle />
+        </div>
      </div>
    </>
  )
@@ -23,7 +23,6 @@ import { LinkButton } from '@/primitives'
 import { useSettingsDialog } from '../../components/controls/SettingsDialogContext'
 import { ResponsiveMenu } from './ResponsiveMenu'
 import { TranscriptToggle } from '../../components/controls/TranscriptToggle'
-import { CameraSwitchButton } from '../../components/controls/CameraSwitchButton'

 export function MobileControlBar({
  onDeviceError,
@@ -56,7 +55,7 @@ export function MobileControlBar({
          className={css({
            display: 'flex',
            justifyContent: 'space-between',
-            width: '330px',
+            width: '422px',
          })}
        >
          <LeaveButton />
@@ -69,7 +68,6 @@ export function MobileControlBar({
            onActiveDeviceChange={(deviceId) =>
              saveAudioInputDeviceId(deviceId ?? '')
            }
-            hideMenu={true}
          />
          <SelectToggleDevice
            source={Track.Source.Camera}
@@ -80,7 +78,6 @@ export function MobileControlBar({
            onActiveDeviceChange={(deviceId) =>
              saveVideoInputDeviceId(deviceId ?? '')
            }
-            hideMenu={true}
          />
          <HandToggle />
          <Button
@@ -157,8 +154,8 @@ export function MobileControlBar({
            <LinkButton
              href="https://grist.incubateur.net/o/docs/forms/1YrfNP1QSSy8p2gCxMFnSf/4"
              variant="primaryTextDark"
-              tooltip={t('options.items.feedback')}
-              aria-label={t('options.items.feedback')}
+              tooltip={t('options.items.feedbacks')}
+              aria-label={t('options.items.feedbacks')}
              description={true}
              target="_blank"
              onPress={() => setIsMenuOpened(false)}
@@ -177,7 +174,6 @@ export function MobileControlBar({
            >
              <RiSettings3Line size={20} />
            </Button>
-            <CameraSwitchButton onPress={() => setIsMenuOpened(false)} />
          </div>
        </div>
      </ResponsiveMenu>
@@ -1,87 +0,0 @@
-import { css } from '@/styled-system/css'
-import { ChatToggle } from '../../components/controls/ChatToggle'
-import { ParticipantsToggle } from '../../components/controls/Participants/ParticipantsToggle'
-import { SupportToggle } from '../../components/controls/SupportToggle'
-import { TranscriptToggle } from '../../components/controls/TranscriptToggle'
-import { useSize } from '../../hooks/useResizeObserver'
-import { useState, RefObject } from 'react'
-import { Dialog, DialogTrigger, Popover } from 'react-aria-components'
-import { Button } from '@/primitives'
-import { ToggleButtonProps } from '@/primitives/ToggleButton'
-import { RiArrowDownSLine, RiArrowUpSLine } from '@remixicon/react'
-import { useTranslation } from 'react-i18next'
-
-const CONTROL_BAR_BREAKPOINT = 750
-
-const NavigationControls = ({ onPress }: Partial<ToggleButtonProps>) => (
-  <>
-    <ChatToggle onPress={onPress} />
-    <ParticipantsToggle onPress={onPress} />
-    <TranscriptToggle onPress={onPress} />
-    <SupportToggle onPress={onPress} />
-  </>
-)
-
-export const LateralMenu = () => {
-  const { t } = useTranslation('rooms')
-  const [isOpen, setIsOpen] = useState(false)
-
-  const handlePress = () => setIsOpen(!isOpen)
-  const handleClose = () => setIsOpen(false)
-
-  return (
-    <DialogTrigger isOpen={isOpen} onOpenChange={setIsOpen}>
-      <Button
-        square
-        variant="secondaryDark"
-        aria-label={t('controls.moreOptions')}
-        tooltip={t('controls.moreOptions')}
-        onPress={handlePress}
-      >
-        {isOpen ? <RiArrowDownSLine /> : <RiArrowUpSLine />}
-      </Button>
-      <Popover>
-        <Dialog
-          className={css({
-            width: '65px',
-            backgroundColor: 'primaryDark.50',
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            borderRadius: '4px',
-            paddingTop: '10px',
-            gap: '0.5rem',
-          })}
-        >
-          <NavigationControls onPress={handleClose} />
-        </Dialog>
-      </Popover>
-    </DialogTrigger>
-  )
-}
-
-export const MoreOptions = ({
-  parentElement,
-}: {
-  parentElement: RefObject<HTMLDivElement>
-}) => {
-  const { width: parentWidth } = useSize(parentElement)
-  return (
-    <div
-      className={css({
-        display: 'flex',
-        justifyContent: 'flex-end',
-        flex: '1 1 33%',
-        alignItems: 'center',
-        gap: '0.5rem',
-        paddingRight: '0.25rem',
-      })}
-    >
-      {parentWidth > CONTROL_BAR_BREAKPOINT ? (
-        <NavigationControls />
-      ) : (
-        <LateralMenu />
-      )}
-    </div>
-  )
-}
@@ -1,53 +0,0 @@
-export enum ClientMessageType {
-  ROOM_CREATED = 'ROOM_CREATED',
-}
-
-export class SdkReverseClient {
-  /**
-   * IDEA: Use API Key. Must be based on some sort of credentials ? No needs for now as now security
-   * issues are plausible.
-   */
-  static getAllowTargetOrigin() {
-    return '*'
-  }
-
-  static post(type: ClientMessageType, data: unknown = {}) {
-    window.parent.postMessage(
-      {
-        type,
-        data,
-      },
-      SdkReverseClient.getAllowTargetOrigin()
-    )
-  }
-
-  static broadcastAuthentication() {
-    const bc = new BroadcastChannel('APP_CHANNEL')
-    bc.postMessage({ type: 'AUTHENTICATED' })
-
-    /**
-     * This means the parent window has authenticated has successfully refetched user, then we can close the popup.
-     */
-    bc.onmessage = (event) => {
-      if (event.data.type === 'AUTHENTICATED_ACK') {
-        window.close()
-      }
-    }
-  }
-
-  static waitForAuthenticationAck() {
-    return new Promise<void>((resolve) => {
-      const bc = new BroadcastChannel('APP_CHANNEL')
-      bc.onmessage = async (event) => {
-        if (event.data.type === 'AUTHENTICATED') {
-          resolve()
-          bc.postMessage({ type: 'AUTHENTICATED_ACK' })
-        }
-      }
-    })
-  }
-
-  static ensureAuth() {
-    // TODO: ...
-  }
-}
@@ -1,116 +0,0 @@
-import { Button } from '@/primitives/Button'
-import { useTranslation } from 'react-i18next'
-import { usePersistentUserChoices } from '@livekit/components-react'
-import { useState } from 'react'
-import { getRouteUrl } from '@/navigation/getRouteUrl'
-import { css } from '@/styled-system/css'
-import { RiCheckLine, RiFileCopyLine } from '@remixicon/react'
-import { VisioIcon } from '@/assets/VisioIcon'
-import { generateRoomId, useCreateRoom } from '../../rooms'
-import { ClientMessageType, SdkReverseClient } from '../SdkReverseClient'
-import { authUrl, useUser } from '@/features/auth'
-
-export const SdkCreateButton = () => {
-  const { isLoggedIn, ...other } = useUser()
-  const { t } = useTranslation('sdk', { keyPrefix: 'createButton' })
-  const [roomUrl, setRoomUrl] = useState<string>()
-  const [isLoading, setIsLoading] = useState(false)
-  const {
-    userChoices: { username },
-  } = usePersistentUserChoices()
-
-  const { mutateAsync: createRoom } = useCreateRoom()
-
-  const startSSO = () => {
-    SdkReverseClient.waitForAuthenticationAck().then(async () => {
-      await other.refetch()
-      submitCreateRoom()
-    })
-    const params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
-width=400,height=900,left=100,top=100`
-    window.open(new URL('authenticate/', authUrl()).href, '', params)
-  }
-
-  const submitCreateRoom = () => {
-    setIsLoading(true)
-    setTimeout(() => {
-      const slug = generateRoomId()
-      createRoom({ slug, username }).then((data) => {
-        const roomUrlTmp = getRouteUrl('room', data.slug)
-        setRoomUrl(roomUrlTmp)
-        setIsLoading(false)
-        SdkReverseClient.post(ClientMessageType.ROOM_CREATED, {
-          url: roomUrlTmp,
-        })
-      })
-    }, 0)
-  }
-
-  const submit = () => {
-    if (isLoggedIn) {
-      submitCreateRoom()
-    } else {
-      startSSO()
-    }
-  }
-
-  return (
-    <div
-      className={css({
-        paddingTop: '3px',
-        paddingLeft: '3px',
-      })}
-    >
-      {roomUrl ? (
-        <RoomUrl roomUrl={roomUrl} />
-      ) : (
-        <Button
-          variant="primaryDark"
-          aria-label={t('label')}
-          onPress={submit}
-          data-attr="sdk-create"
-          loading={isLoading}
-          icon={<VisioIcon />}
-        >
-          {t('label')}
-        </Button>
-      )}
-    </div>
-  )
-}
-
-const RoomUrl = ({ roomUrl }: { roomUrl: string }) => {
-  const [isCopied, setIsCopied] = useState(false)
-
-  const copy = () => {
-    navigator.clipboard.writeText(roomUrl!)
-    setIsCopied(true)
-    setTimeout(() => setIsCopied(false), 1000)
-  }
-
-  return (
-    <div
-      className={css({
-        display: 'flex',
-        alignItems: 'center',
-        gap: '0.5rem',
-      })}
-    >
-      <span
-        className={css({
-          color: 'greyscale.600',
-        })}
-      >
-        {roomUrl}
-      </span>
-      <Button
-        variant={isCopied ? 'success' : 'quaternaryText'}
-        data-attr="sdk-create-copy"
-        onPress={copy}
-        square
-      >
-        {isCopied ? <RiCheckLine /> : <RiFileCopyLine />}
-      </Button>
-    </div>
-  )
-}
@@ -1,7 +1,6 @@
 import { useEffect } from 'react'
 import { Crisp } from 'crisp-sdk-web'
 import { ApiUser } from '@/features/auth/api/ApiUser'
-import { useConfig } from '@/api/useConfig'

 export const initializeSupportSession = (user: ApiUser) => {
  if (!Crisp.isCrispInjected()) return
@@ -30,8 +29,3 @@ export const useSupport = ({ id }: useSupportProps) => {

  return null
 }
-
-export const useIsSupportEnabled = () => {
-  const { data } = useConfig()
-  return !!data?.support?.id
-}
@@ -24,12 +24,7 @@
    "toggleOff": "",
    "toggleOn": "",
    "usernameHint": "",
-    "usernameLabel": "",
-    "errors": {
-      "usernameEmpty": ""
-    },
-    "cameraDisabled": "",
-    "cameraStarting": ""
+    "usernameLabel": ""
  },
  "leaveRoomPrompt": "",
  "shareDialog": {
@@ -80,21 +75,15 @@
      "open": "",
      "closed": ""
    },
-    "support": "",
-    "moreOptions": ""
+    "support": ""
  },
  "options": {
    "buttonLabel": "",
    "items": {
-      "feedback": "",
+      "feedbacks": "",
      "settings": "",
      "username": "",
-      "effects": "",
-      "switchCamera": "",
-      "fullscreen": {
-        "enter": "",
-        "exit": ""
-      }
+      "effects": ""
    }
  },
  "effects": {
@@ -18,18 +18,13 @@
      "enable": "Enable microphone",
      "label": "Microphone"
    },
-    "heading": "Join the meeting",
+    "heading": "Verify your settings",
    "joinLabel": "Join",
    "joinMeeting": "Join meeting",
    "toggleOff": "Click to turn off",
    "toggleOn": "Click to turn on",
    "usernameHint": "Shown to other participants",
-    "usernameLabel": "Your name",
-    "errors": {
-      "usernameEmpty": "Your name cannot be empty"
-    },
-    "cameraDisabled": "Camera is disabled.",
-    "cameraStarting": "Camera is starting."
+    "usernameLabel": "Your name"
  },
  "leaveRoomPrompt": "This will make you leave the meeting.",
  "shareDialog": {
@@ -79,21 +74,15 @@
      "open": "Hide AI assistant",
      "closed": "Show AI assistant"
    },
-    "support": "Support",
-    "moreOptions": "More options"
+    "support": "Support"
  },
  "options": {
    "buttonLabel": "More Options",
    "items": {
-      "feedback": "Give us feedback",
+      "feedbacks": "Give us feedbacks",
      "settings": "Settings",
      "username": "Update Your Name",
-      "effects": "Apply effects",
-      "switchCamera": "Switch camera",
-      "fullscreen": {
-        "enter": "Fullscreen",
-        "exit": "Exit fullscreen mode"
-      }
+      "effects": "Apply effects"
    }
  },
  "effects": {
@@ -18,18 +18,13 @@
      "enable": "Activer le micro",
      "label": "Microphone"
    },
-    "heading": "Rejoindre la réunion",
+    "heading": "Vérifiez vos paramètres",
    "joinLabel": "Rejoindre",
    "joinMeeting": "Rejoindre la réjoindre",
    "toggleOff": "Cliquez pour désactiver",
    "toggleOn": "Cliquez pour activer",
    "usernameHint": "Affiché aux autres participants",
-    "usernameLabel": "Votre nom",
-    "errors": {
-      "usernameEmpty": "Votre nom ne peut pas être vide"
-    },
-    "cameraDisabled": "La caméra est désactivée.",
-    "cameraStarting": "La caméra va démarrer."
+    "usernameLabel": "Votre nom"
  },
  "leaveRoomPrompt": "Revenir à l'accueil vous fera quitter la réunion.",
  "shareDialog": {
@@ -79,21 +74,15 @@
      "open": "Masquer l'assistant IA",
      "closed": "Afficher l'assistant IA"
    },
-    "support": "Support",
-    "moreOptions": "Plus d'options"
+    "support": "Support"
  },
  "options": {
    "buttonLabel": "Plus d'options",
    "items": {
-      "feedback": "Partager votre avis",
+      "feedbacks": "Partager votre avis",
      "settings": "Paramètres",
      "username": "Choisir votre nom",
-      "effects": "Appliquer des effets",
-      "switchCamera": "Changer de caméra",
-      "fullscreen": {
-        "enter": "Plein écran",
-        "exit": "Quitter le mode plein écran"
-      }
+      "effects": "Appliquer des effets"
    }
  },
  "effects": {
@@ -1,5 +0,0 @@
-{
-  "createButton": {
-    "label": "Créer un lien Visio"
-  }
-}
@@ -30,7 +30,7 @@ const box = cva({
      },
    },
    variant: {
-      light: {
+      default: {
        borderWidth: '1px',
        borderStyle: 'solid',
        borderColor: 'box.border',
@@ -46,10 +46,6 @@ const box = cva({
        backgroundColor: 'box.bg',
        color: 'control.text',
      },
-      dark: {
-        backgroundColor: 'primaryDark.50',
-        borderColord: 'primaryDark.50',
-      },
    },
    size: {
      default: {
@@ -61,7 +57,7 @@ const box = cva({
    },
  },
  defaultVariants: {
-    variant: 'light',
+    variant: 'default',
    size: 'default',
  },
 })
@@ -6,15 +6,12 @@ import { type RecipeVariantProps } from '@/styled-system/css'
 import { buttonRecipe, type ButtonRecipe } from './buttonRecipe'
 import { TooltipWrapper, type TooltipWrapperProps } from './TooltipWrapper'
 import { ReactNode } from 'react'
-import { Loader } from './Loader'

 export type ButtonProps = RecipeVariantProps<ButtonRecipe> &
  RACButtonsProps &
  TooltipWrapperProps & {
    // Use tooltip as description below the button.
    description?: boolean
-  } & {
-    icon?: ReactNode
  }

 export const Button = ({
@@ -23,16 +20,13 @@ export const Button = ({
  ...props
 }: ButtonProps) => {
  const [variantProps, componentProps] = buttonRecipe.splitVariantProps(props)
-  const { className, ...remainingComponentProps } = componentProps

  return (
    <TooltipWrapper tooltip={tooltip} tooltipType={tooltipType}>
      <RACButton
-        className={[buttonRecipe(variantProps), className].join(' ')}
-        {...(remainingComponentProps as RACButtonsProps)}
+        className={buttonRecipe(variantProps)}
+        {...(componentProps as RACButtonsProps)}
      >
-        {!props.loading && props.icon}
-        {props.loading && <Loader />}
        {componentProps.children as ReactNode}
        {props.description && <span>{tooltip}</span>}
      </RACButton>
@@ -25,31 +25,11 @@ const FieldWrapper = styled('div', {
    marginBottom: 'textfield',
    minWidth: 0,
  },
-  variants: {
-    noMargin: {
-      true: {
-        marginBottom: 0,
-      },
-    },
-    fullWidth: {
-      true: {
-        width: '100%',
-      },
-    },
-  },
 })

 const StyledLabel = styled(Label, {
  base: {
    display: 'block',
-    fontSize: '0.75rem',
-  },
-  variants: {
-    center: {
-      true: {
-        textAlign: 'center',
-      },
-    },
  },
 })

@@ -100,8 +80,6 @@ type FieldProps<T extends object> = (
 ) & {
  label: string
  description?: string
-  wrapperProps?: React.ComponentProps<typeof FieldWrapper>
-  labelProps?: React.ComponentProps<typeof StyledLabel>
 }

 /**
@@ -126,7 +104,7 @@ export const Field = <T extends object>({
 }: FieldProps<T>) => {
  const LabelAndDescription = (
    <>
-      <StyledLabel {...props.labelProps}>{label}</StyledLabel>
+      <StyledLabel>{label}</StyledLabel>
      <FieldDescription slot="description">{description}</FieldDescription>
    </>
  )
@@ -140,7 +118,7 @@ export const Field = <T extends object>({

  if (type === 'text') {
    return (
-      <FieldWrapper {...props.wrapperProps}>
+      <FieldWrapper>
        <RACTextField
          validate={validate as unknown as TextFieldProps['validate']}
          {...(props as PartialTextFieldProps)}
@@ -155,7 +133,7 @@ export const Field = <T extends object>({

  if (type === 'checkbox') {
    return (
-      <FieldWrapper {...props.wrapperProps}>
+      <FieldWrapper>
        <Checkbox
          validate={validate as unknown as CheckboxProps['validate']}
          description={description}
@@ -169,7 +147,7 @@ export const Field = <T extends object>({

  if (type === 'checkboxGroup') {
    return (
-      <FieldWrapper {...props.wrapperProps}>
+      <FieldWrapper>
        <CheckboxGroup
          validate={validate as unknown as CheckboxGroupProps['validate']}
          {...(props as PartialCheckboxGroupProps)}
@@ -192,7 +170,7 @@ export const Field = <T extends object>({

  if (type === 'radioGroup') {
    return (
-      <FieldWrapper {...props.wrapperProps}>
+      <FieldWrapper>
        <RadioGroup
          validate={validate as unknown as RadioGroupProps['validate']}
          {...(props as PartialRadioGroupProps)}
@@ -211,7 +189,7 @@ export const Field = <T extends object>({

  if (type === 'select') {
    return (
-      <FieldWrapper {...props.wrapperProps}>
+      <FieldWrapper>
        <Select
          validate={validate as unknown as SelectProps<T>['validate']}
          {...(props as PartialSelectProps<T>)}
@@ -3,7 +3,6 @@ import { Form as RACForm, type FormProps } from 'react-aria-components'
 import { useTranslation } from 'react-i18next'
 import { HStack } from '@/styled-system/jsx'
 import { Button, useCloseDialog } from '@/primitives'
-import { ButtonProps } from '@/primitives/Button'

 /**
 * From wrapper that exposes form data on submit and adds submit/cancel buttons
@@ -14,7 +13,6 @@ import { ButtonProps } from '@/primitives/Button'
 export const Form = ({
  onSubmit,
  submitLabel,
-  submitButtonProps,
  withCancelButton = true,
  onCancelButtonPress,
  children,
@@ -27,7 +25,6 @@ export const Form = ({
    event: FormEvent<HTMLFormElement>
  ) => void
  submitLabel: string
-  submitButtonProps?: ButtonProps
  withCancelButton?: boolean
  onCancelButtonPress?: () => void
 }) => {
@@ -50,7 +47,7 @@ export const Form = ({
    >
      {children}
      <HStack gap="gutter">
-        <Button type="submit" variant="primary" {...submitButtonProps}>
+        <Button type="submit" variant="primary">
          {submitLabel}
        </Button>
        {!!onCancel && (
@@ -1,12 +1,10 @@
-import { Text, TextProps } from './Text'
+import { Text } from './Text'

 export const H = ({
  children,
  lvl,
  ...props
-}: React.HTMLAttributes<HTMLHeadingElement> & {
-  lvl: 1 | 2 | 3
-} & TextProps) => {
+}: React.HTMLAttributes<HTMLHeadingElement> & { lvl: 1 | 2 | 3 }) => {
  const tag = `h${lvl}` as const
  return (
    <Text as={tag} variant={tag} {...props}>
@@ -1,45 +0,0 @@
-import { cva } from '@/styled-system/css'
-
-const loader = cva({
-  base: {
-    borderRadius: '50%',
-    position: 'relative',
-    animation: 'rotate 1s linear infinite',
-    '&:before, &:after': {
-      content: '""',
-      boxSizing: 'border-box',
-      position: 'absolute',
-      inset: '0',
-      borderRadius: '50%',
-      borderStyle: 'solid',
-      borderColor: 'white',
-    },
-    _before: {
-      animation: 'prixClipFix 2s linear infinite',
-    },
-    _after: {
-      borderColor: 'white',
-      animation:
-        'prixClipFix 2s linear infinite, rotate 0.5s linear infinite reverse',
-      inset: 6,
-    },
-  },
-  variants: {
-    size: {
-      small: {
-        width: '24px',
-        height: '24px',
-        '&:before, &:after': {
-          borderWidth: '2px',
-        },
-      },
-    },
-  },
-  defaultVariants: {
-    size: 'small',
-  },
-})
-
-export const Loader = () => {
-  return <div className={loader()}></div>
-}
@@ -8,17 +8,15 @@ import { Box } from './Box'
 */
 export const Menu = ({
  children,
-  variant = 'light',
 }: {
  children: [trigger: ReactNode, menu: ReactNode]
-  variant?: 'dark' | 'light'
 }) => {
  const [trigger, menu] = children
  return (
    <MenuTrigger>
      {trigger}
      <StyledPopover>
-        <Box size="sm" type="popover" variant={variant}>
+        <Box size="sm" type="popover">
          {menu}
        </Box>
      </StyledPopover>
@@ -10,7 +10,6 @@ export const MenuList = <T extends string | number = string>({
  onAction,
  selectedItem,
  items = [],
-  variant = 'light',
  ...menuProps
 }: {
  onAction: (key: T) => void
@@ -19,11 +18,7 @@ export const MenuList = <T extends string | number = string>({
 } & MenuProps<unknown> &
  RecipeVariantProps<typeof menuRecipe>) => {
  const [variantProps] = menuRecipe.splitVariantProps(menuProps)
-  const classes = menuRecipe({
-    extraPadding: true,
-    variant: variant,
-    ...variantProps,
-  })
+  const classes = menuRecipe({ extraPadding: true, ...variantProps })
  return (
    <Menu
      selectionMode={selectedItem !== undefined ? 'single' : undefined}
@@ -4,7 +4,7 @@ import { Separator as RACSeparator } from 'react-aria-components'
 export const Separator = styled(RACSeparator, {
  base: {
    height: '1px',
-    background: 'primaryDark.200',
+    background: 'gray.400',
    margin: '4px 0',
  },
 })
@@ -8,7 +8,6 @@ export const buttonRecipe = cva({
    transition: 'background 200ms, outline 200ms, border-color 200ms',
    cursor: 'pointer',
    border: '1px solid transparent',
-    gap: '0.5rem',
  },
  variants: {
    size: {
@@ -110,21 +109,6 @@ export const buttonRecipe = cva({
          color: 'primaryDark.100 !important',
        },
      },
-      secondaryDark: {
-        backgroundColor: 'primaryDark.50',
-        color: 'white',
-        '&[data-pressed]': {
-          backgroundColor: 'primaryDark.200',
-        },
-        '&[data-hovered]': {
-          backgroundColor: 'primaryDark.100',
-          color: 'white',
-        },
-        '&[data-selected]': {
-          backgroundColor: 'primaryDark.700 !important',
-          color: 'primaryDark.100 !important',
-        },
-      },
      primaryTextDark: {
        backgroundColor: 'transparent',
        color: 'white',
@@ -140,18 +124,6 @@ export const buttonRecipe = cva({
          color: 'primaryDark.100',
        },
      },
-      quaternaryText: {
-        backgroundColor: 'transparent',
-        color: 'greyscale.600',
-        '&[data-hovered]': {
-          backgroundColor: 'greyscale.100',
-          color: 'greyscale.700',
-        },
-        '&[data-pressed]': {
-          backgroundColor: 'greyscale.100',
-          color: 'greyscale.700',
-        },
-      },
      greyscale: {
        backgroundColor: 'transparent',
        color: 'greyscale.400',
@@ -242,9 +214,6 @@ export const buttonRecipe = cva({
        width: 'full',
      },
    },
-    loading: {
-      true: {},
-    },
    // some toggle buttons make more sense without a "pushed button" style when selected because their content changes to mark the state
    shySelected: {
      true: {},
@@ -46,11 +46,7 @@ export const menuRecipe = sva({
          },
        },
      },
-      dark: {
-        item: {
-          color: 'white',
-        },
-      },
+      dark: {},
    },
    extraPadding: {
      true: {
@@ -71,6 +67,6 @@ export const menuRecipe = sva({
    },
  },
  defaultVariants: {
-    variant: 'light',
+    variant: 'dark',
  },
 })
@@ -2,7 +2,7 @@ import { FeedbackRoute, RoomRoute, roomIdPattern } from '@/features/rooms'
 import { HomeRoute } from '@/features/home'

 export const routes: Record<
-  'home' | 'room' | 'feedback' | 'sdkCreateButton',
+  'home' | 'room' | 'feedback',
  {
    name: RouteName
    path: RegExp | string
@@ -38,34 +38,3 @@ body:has(.lk-video-conference) #crisp-chatbox > div > a {
    transform: translateY(0);
  }
 }
-
-/**
- * Loader animations.
- */
-
-@keyframes rotate {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes prixClipFix {
-  0% {
-    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
-  }
-  25% {
-    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
-  }
-  50% {
-    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
-  }
-  75% {
-    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
-  }
-  100% {
-    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
-  }
-}
@@ -10,7 +10,6 @@ export default defineConfig(({ mode }) => {
    server: {
      port: parseInt(env.VITE_PORT) || 3000,
      host: env.VITE_HOST || 'localhost',
-      allowedHosts: ['.nip.io'],
    },
  }
 })
@@ -14,7 +14,7 @@
    "build": "npm run build-mjml-to-html && npm run build-html-to-plain-text"
  },
  "volta": {
-    "node": "22.13.1"
+    "node": "22.11.0"
  },
  "repository": "https://github.com/numerique-gouv/meet",
  "author": "DINUM",
@@ -1,24 +0,0 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dist-ssr
-*.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
@@ -1,50 +0,0 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
-
- Configure the top-level `parserOptions` property like this:
-
-```js
-export default tseslint.config({
-  languageOptions: {
-    // other options...
-    parserOptions: {
-      project: ['./tsconfig.node.json', './tsconfig.app.json'],
-      tsconfigRootDir: import.meta.dirname,
-    },
-  },
-})
-```
-
- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
- Optionally add `...tseslint.configs.stylisticTypeChecked`
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
-
-```js
-// eslint.config.js
-import react from 'eslint-plugin-react'
-
-export default tseslint.config({
-  // Set the react version
-  settings: { react: { version: '18.3' } },
-  plugins: {
-    // Add the react plugin
-    react,
-  },
-  rules: {
-    // other rules...
-    // Enable its recommended rules
-    ...react.configs.recommended.rules,
-    ...react.configs['jsx-runtime'].rules,
-  },
-})
-```
@@ -1,28 +0,0 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
-
-export default tseslint.config(
-  { ignores: ['dist'] },
-  {
-    extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ['**/*.{ts,tsx}'],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-    },
-    plugins: {
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
-    },
-    rules: {
-      ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': [
-        'warn',
-        { allowConstantExport: true },
-      ],
-    },
-  },
-)
@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Visio SDK Demo</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
@@ -1,29 +0,0 @@
-{
-  "name": "consumer",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "lint": "eslint .",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "react": "18.3.1",
-    "react-dom": "18.3.1"
-  },
-  "devDependencies": {
-    "@eslint/js": "9.17.0",
-    "@types/react": "18.3.12",
-    "@types/react-dom": "18.3.1",
-    "@vitejs/plugin-react": "4.3.4",
-    "eslint": "8.57.0",
-    "eslint-plugin-react-hooks": "5.1.0",
-    "eslint-plugin-react-refresh": "0.4.18",
-    "globals": "15.14.0",
-    "typescript": "5.7.3",
-    "typescript-eslint": "8.18.2",
-    "vite": "6.0.11"
-  }
-}
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
@@ -1,5 +0,0 @@
-#root {
-  margin: 0 auto;
-
-  text-align: center;
-}
@@ -1,42 +0,0 @@
-import { VisioCreateButton } from "@gouvfr-lasuite/visio-sdk";
-import "./App.css";
-import { useState } from "react";
-
-function App() {
-  const [roomUrl, setRoomUrl] = useState("");
-
-  return (
-    <form className="form">
-      <div className="header">
-        <h2>Create event</h2>
-        <span>Visio demo app</span>
-      </div>
-      <div className="group">
-        <label>Subject</label>
-        <input type="text" />
-      </div>
-      <div className="group">
-        <label>Place</label>
-        <input type="text" />
-      </div>
-      <div className="group">
-        <label>Visioconference</label>
-        <VisioCreateButton onRoomCreated={setRoomUrl} />
-      </div>
-      <div className="group">
-        <label>Description</label>
-        <textarea />
-      </div>
-      <button
-        type="button"
-        onClick={() => {
-          alert("Room url: " + roomUrl);
-        }}
-      >
-        Create
-      </button>
-    </form>
-  );
-}
-
-export default App;
@@ -1,74 +0,0 @@
-* {
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
-    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  box-sizing: border-box;
-  color: rgb(9, 9, 11);
-}
-
-body {
-  background-color: oklch(0.985 0 0);
-  display: flex;
-  justify-content: center;
-  padding-top: 2rem;
-}
-
-h2 {
-  margin: 0;
-}
-
-span {
-  font-size: 14px;
-  color: oklch(0.372 0.044 257.287);
-}
-
-.form {
-  display: flex;
-  flex-direction: column;
-  width: 500px;
-  gap: 1rem;
-  border: 1px solid #e5e7eb;
-  background-color: white;
-  border-radius: 1rem;
-  padding: 3rem;
-}
-
-.header {
-  margin-bottom: 2rem;
-}
-
-.group {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 0.5rem;
-}
-
-label {
-  color: rgb(9, 9, 11);
-  font-weight: 500;
-  font-size: 14px;
-}
-
-input,
-textarea {
-  border: 1px rgb(228, 228, 231) solid;
-  border-radius: 6px;
-  height: 36px;
-  width: 100%;
-  padding: 0.75rem;
-}
-
-textarea {
-  height: 200px;
-}
-
-button {
-  background-color: rgb(45, 45, 70);
-  color: white;
-  height: 46px;
-  border-radius: 4px;
-  font-size: 16px;
-  font-weight: 300;
-  cursor: pointer;
-}
@@ -1,10 +0,0 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.tsx'
-
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-)
@@ -1 +0,0 @@
-/// <reference types="vite/client" />
@@ -1,26 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["src"]
-}
@@ -1,7 +0,0 @@
-{
-  "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ]
-}
@@ -1,24 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "target": "ES2022",
-    "lib": ["ES2023"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["vite.config.ts"]
-}
@@ -1,7 +0,0 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-
-// https://vite.dev/config/
-export default defineConfig({
-  plugins: [react()],
-})
@@ -1,8 +0,0 @@
-# Changesets
-
-Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
-with multi-package repos, or single-package repos to help you version and publish your code. You can
-find the full documentation for it [in our repository](https://github.com/changesets/changesets)
-
-We have a quick list of common questions to get you started engaging with this project in
-[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)
@@ -1,11 +0,0 @@
-{
-  "$schema": "https://unpkg.com/@changesets/config@3.0.5/schema.json",
-  "changelog": "@changesets/cli/changelog",
-  "commit": false,
-  "fixed": [],
-  "linked": [],
-  "access": "restricted",
-  "baseBranch": "main",
-  "updateInternalDependencies": "patch",
-  "ignore": []
-}
@@ -1 +0,0 @@
-VITE_VISIO_SDK_URL=https://visio.numerique.gouv.fr/sdk
@@ -1,21 +0,0 @@
-module.exports = {
-  root: true,
-  env: { browser: true, es2020: true },
-  extends: [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:react-hooks/recommended",
-    "plugin:@tanstack/eslint-plugin-query/recommended",
-    "plugin:jsx-a11y/recommended",
-    "prettier",
-  ],
-  ignorePatterns: ["dist", ".eslintrc.cjs", "styled-system"],
-  parser: "@typescript-eslint/parser",
-  plugins: ["react-refresh"],
-  rules: {
-    "react-refresh/only-export-components": [
-      "warn",
-      { allowConstantExport: true },
-    ],
-  },
-};
@@ -1,24 +0,0 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dist-ssr
-*.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
@@ -1,5 +0,0 @@
-{
-  "semi": false,
-  "trailingComma": "es5",
-  "singleQuote": true
-}
@@ -1,7 +0,0 @@
-# @gouvfr-lasuite/visio-sdk
-
-## 0.0.1
-
-### Major Changes
-
- Create library with VisioCreateButton
@@ -1,17 +0,0 @@
-# Contributing
-
-## Release
-
-1. Run `npm run build`
-
-2. Update CHANGELOG.md according to the Major / Minor / Patch semver convention.
-
-3. Based on semver upgrade the package version in `package.json`.
-
-4. Commit the changes and create a PR named "🔖(release) version packages".
-
-5. Run `npx @changesets/cli publish`. It will publish the new version of the package to NPM and create a git tag.
-
-6. Run `git push origin tag @gouvfr-lasuite/visio-sdk@<VERSION>`
-
-7. Tell everyone 🎉 !
@@ -1,30 +0,0 @@
-<div align="center">
-
-# 🎥 Visio SDK
-
-**Easily open a widget to browse user files on any of your project**
-
-<img src="docs/demo.gif" alt="" />
-
-**As simple as**
-
-</div>
-
-```ts
-import { VisioCreateButton } from "@gouvfr-lasuite/visio-sdk";
-
-function App() {
-  const [roomUrl, setRoomUrl] = useState();
-
-  return <VisioCreateButton onRoomCreated={setRoomUrl} />;
-}
-```
-
-## Installation
-
-To install, you can use npm or yarn:
-
-```
-$ npm install --save @gouvfr-lasuite/visio-sdk
-$ yarn add @gouvfr-lasuite/visio-sdk
-```
@@ -1,52 +0,0 @@
-{
-  "name": "@gouvfr-lasuite/visio-sdk",
-  "private": false,
-  "publishConfig": {
-    "access": "public"
-  },
-  "version": "0.0.1",
-  "type": "module",
-  "main": "./dist/visio-sdk.umd.cjs",
-  "module": "./dist/visio-sdk.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/visio-sdk.js",
-      "require": "./dist/visio-sdk.umd.cjs"
-    }
-  },
-  "files": [
-    "dist/"
-  ],
-  "scripts": {
-    "dev": "vite build -w --mode development",
-    "build": "tsc -b && vite build",
-    "lint": "eslint . --ext ts,tsx",
-    "format": "prettier --write ./src",
-    "check": "prettier --check ./src"
-  },
-  "dependencies": {
-    "react": "18.3.1",
-    "react-dom": "18.3.1"
-  },
-  "devDependencies": {
-    "@tanstack/eslint-plugin-query": "5.64.2",
-    "@types/node": "20.14.2",
-    "@types/react": "18.3.3",
-    "@types/react-dom": "18.3.0",
-    "@typescript-eslint/eslint-plugin": "7.15.0",
-    "@typescript-eslint/parser": "7.15.0",
-    "@vitejs/plugin-react-swc": "3.5.0",
-    "eslint": "8.57.0",
-    "eslint-config-prettier": "10.0.1",
-    "eslint-plugin-react-hooks": "4.6.2",
-    "eslint-plugin-react-refresh": "0.4.7",
-    "eslint-plugin-jsx-a11y": "6.10.2",
-    "sass": "1.83.4",
-    "prettier": "3.4.2",
-    "typescript": "5.4.5",
-    "vite": "5.3.4",
-    "vite-plugin-dts": "3.9.1"
-  }
-}
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
@@ -1,3 +0,0 @@
-export const DEFAULT_CONFIG = {
-  url: import.meta.env.VITE_VISIO_SDK_URL,
-}
@@ -1,7 +0,0 @@
-import { DEFAULT_CONFIG } from '@/Config'
-
-export type ConfigType = typeof DEFAULT_CONFIG
-
-export enum ClientMessageType {
-  ROOM_CREATED = 'ROOM_CREATED',
-}
@@ -1,41 +0,0 @@
-import { DEFAULT_CONFIG } from '@/Config'
-import { ClientMessageType } from '@/Types'
-import { useEffect } from 'react'
-
-export const VisioCreateButton = ({
-  onRoomCreated,
-}: {
-  onRoomCreated: (roomUrl: string) => void
-}) => {
-  useEffect(() => {
-    const onMessage = (event: MessageEvent) => {
-      // Make sure it is the correct origin.
-      if (event.origin !== new URL(DEFAULT_CONFIG.url).origin) {
-        return
-      }
-      if (event.data.type === ClientMessageType.ROOM_CREATED) {
-        const data = event.data.data
-        const roomUrl = data.url
-        onRoomCreated(roomUrl)
-      }
-    }
-
-    window.addEventListener('message', onMessage)
-    return () => {
-      window.removeEventListener('message', onMessage)
-    }
-  }, [onRoomCreated])
-
-  return (
-    // eslint-disable-next-line jsx-a11y/iframe-has-title
-    <iframe
-      allow="clipboard-read; clipboard-write"
-      src={DEFAULT_CONFIG.url + '/create-button'}
-      style={{
-        width: '100%',
-        height: '52px',
-        border: 'none',
-      }}
-    ></iframe>
-  )
-}
@@ -1,3 +0,0 @@
-/* eslint-disable react-refresh/only-export-components */
-export * from '@/Types'
-export * from '@/create/VisioCreateButton'
@@ -1,9 +0,0 @@
-/// <reference types="vite/client" />
-
-interface ImportMetaEnv {
-  readonly VITE_VISIO_SDK_URL: string
-}
-
-interface ImportMeta {
-  readonly env: ImportMetaEnv
-}
@@ -1,36 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable", "WebWorker"],
-    "module": "esnext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": false,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-
-    /* Local */
-    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true,
-
-    "baseUrl": "./src",
-    "paths": {
-      "@/*": ["./*"]
-    }
-  },
-  "include": ["src"]
-}
@@ -1,11 +0,0 @@
-{
-  "files": [],
-  "references": [
-    {
-      "path": "./tsconfig.app.json"
-    },
-    {
-      "path": "./tsconfig.node.json"
-    }
-  ]
-}
@@ -1,13 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "noEmit": true
-  },
-  "include": ["vite.config.ts"]
-}
@@ -1,35 +0,0 @@
-import path, { resolve } from "path";
-
-import react from "@vitejs/plugin-react-swc";
-import { AliasOptions, defineConfig } from "vite";
-import dts from "vite-plugin-dts";
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [
-    react(),
-    dts({ tsconfigPath: "./tsconfig.app.json", rollupTypes: true }),
-  ],
-  resolve: {
-    alias: {
-      "@": path.resolve(__dirname, "src"),
-    } as AliasOptions,
-  },
-  build: {
-    lib: {
-      entry: resolve(__dirname, "src/index.tsx"),
-      name: "visio-sdk",
-      fileName: "visio-sdk",
-    },
-    rollupOptions: {
-      external: ["react", "react-dom"],
-      output: {
-        globals: {
-          react: "React",
-          "react-dom": "ReactDOM",
-        },
-      },
-    },
-    copyPublicDir: false,
-  },
-});
@@ -1,11 +0,0 @@
-{
-  "name": "sdk",
-  "version": "0.0.0",
-  "author": "",
-  "license": "ISC",
-  "description": "",
-  "workspaces": [
-    "./library",
-    "./consumer"
-  ]
-}
@@ -9,15 +9,15 @@ dependencies = [
    "pydantic-settings>=2.1.0",
    "celery==5.4.0",
    "redis==5.2.1",
-    "minio==7.2.15",
-    "openai==1.60.2",
+    "minio==7.2.14",
+    "openai==1.59.7",
    "requests==2.32.3",
-    "sentry-sdk[fastapi, celery]==2.20.0",
+    "sentry-sdk[fastapi, celery]==2.19.2",
 ]

 [project.optional-dependencies]
 dev = [
-    "ruff==0.9.3",
+    "ruff==0.9.1",
 ]

 [build-system]
				`@@ -1 +0,0 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
				`@@ -1 +0,0 @@`
				`VITE_VISIO_SDK_URL=https://visio.numerique.gouv.fr/sdk`