📱(frontend) enhance control bar responsiveness for better UX

Implemented collapsible advanced options to maintain usability on narrow screens
following GMeet's UX pattern. Dialog and popover components were chosen
based on GMeet choices, though this introduces potential accessibility concerns
that should be addressed in future iterations.

Current implementation uses JS for breakpoint handling due to challenges with
Panda CSS's pure CSS approach. This workaround was necessary to resolve a
persistent issue where the popover remained open after window expansion beyond
750px, even after the lateral menu trigger was removed from view.

Technical debt note: Code needs refinement, particularly around breakpoint
management and component architecture. Prioritized shipping over perfection to
meet immediate responsive design needs.

src/backend/pyproject.toml

@@ -25,7 +25,7 @@ license = { file = "LICENSE" }
 readme = "README.md"
 requires-python = ">=3.10"
 dependencies = [
-    "boto3==1.36.6",
+    "boto3==1.36.2",
     "Brotli==1.1.0",
     "brevo-python==1.1.2",
     "celery[redis]==5.4.0",
@@ -83,7 +83,7 @@ dev = [
     "pytest-icdiff==0.9",
     "pytest-xdist==3.6.1",
     "responses==0.25.6",
-    "ruff==0.9.3",
+    "ruff==0.9.2",
     "types-requests==2.32.0.20241016",
 ]
 

src/frontend/package-lock.json

@@ -8,7 +8,7 @@
       "name": "meet",
       "version": "0.1.12",
       "dependencies": {
-        "@livekit/components-react": "2.8.1",
+        "@livekit/components-react": "2.8.0",
         "@livekit/components-styles": "1.1.4",
         "@livekit/track-processors": "0.3.3",
         "@pandacss/preset-panda": "0.51.1",
@@ -17,25 +17,25 @@
         "@tanstack/react-query": "5.64.2",
         "crisp-sdk-web": "1.0.25",
         "hoofd": "1.7.3",
-        "i18next": "24.2.2",
+        "i18next": "24.2.1",
         "i18next-browser-languagedetector": "8.0.2",
         "i18next-parser": "9.1.0",
         "i18next-resources-to-backend": "1.2.1",
         "livekit-client": "2.8.1",
-        "posthog-js": "1.210.2",
+        "posthog-js": "1.207.0",
         "react": "18.3.1",
         "react-aria-components": "1.6.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",
+        "@types/node": "22.10.7",
         "@types/react": "18.3.12",
         "@types/react-dom": "18.3.1",
         "@typescript-eslint/eslint-plugin": "8.21.0",
@@ -49,7 +49,7 @@
         "postcss": "8.5.1",
         "prettier": "3.4.2",
         "typescript": "5.7.3",
-        "vite": "6.0.11",
+        "vite": "6.0.10",
         "vite-tsconfig-paths": "5.1.4"
       }
     },
@@ -436,7 +436,6 @@
     },
     "node_modules/@clack/prompts/node_modules/is-unicode-supported": {
       "version": "1.3.0",
-      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -1241,9 +1240,9 @@
       }
     },
     "node_modules/@livekit/components-react": {
-      "version": "2.8.1",
-      "resolved": "https://registry.npmjs.org/@livekit/components-react/-/components-react-2.8.1.tgz",
-      "integrity": "sha512-XpuDu7iDMcN4pkV8CYNzHf9hLNdYOeEtbmCr7Zesy6Au3BxUl4aS1Ajmg0b75Rx7zTlkyCJt9Lm4VrEqbJCI6Q==",
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@livekit/components-react/-/components-react-2.8.0.tgz",
+      "integrity": "sha512-Zgt2zv+j2gWJad0mcTDR8cS6KQNXYfAeOL9Si5Lb2Q2k3iPUJinPDMqubM6btnduhkPjy+EF4kA8bNAY0xu4Ig==",
       "license": "Apache-2.0",
       "dependencies": {
         "@livekit/components-core": "0.12.1",
@@ -3880,9 +3879,9 @@
       "integrity": "sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ=="
     },
     "node_modules/@types/node": {
-      "version": "22.10.10",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.10.tgz",
-      "integrity": "sha512-X47y/mPNzxviAGY5TcYPtYL8JsY3kAq2n8fMmKoRCxq/c4v4pyGNCzM2R6+M5/umG4ZfHuT+sgqDYqWc9rJ6ww==",
+      "version": "22.10.7",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.7.tgz",
+      "integrity": "sha512-V09KvXxFiutGp6B7XkpaDXlNadZxrzajcY50EuoLIpQ6WWYCSvf19lVIazzfIzQvhUN2HjX12spLojTnhuKlGg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -6396,9 +6395,9 @@
       }
     },
     "node_modules/i18next": {
-      "version": "24.2.2",
-      "resolved": "https://registry.npmjs.org/i18next/-/i18next-24.2.2.tgz",
-      "integrity": "sha512-NE6i86lBCKRYZa5TaUDkU5S4HFgLIEJRLr3Whf2psgaxBleQ2LC1YW1Vc+SCgkAW7VEzndT6al6+CzegSUHcTQ==",
+      "version": "24.2.1",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-24.2.1.tgz",
+      "integrity": "sha512-Q2wC1TjWcSikn1VAJg13UGIjc+okpFxQTxjVAymOnSA3RpttBQNMPf2ovcgoFVsV4QNxTfNZMAxorXZXsk4fBA==",
       "funding": [
         {
           "type": "individual",
@@ -8445,9 +8444,9 @@
       "license": "MIT"
     },
     "node_modules/posthog-js": {
-      "version": "1.210.2",
-      "resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.210.2.tgz",
-      "integrity": "sha512-rIbn/h9ur7uA0PS4dClOr9w6txLfHS94yh9yafA5VM2eXToM951XtMYtIQ6bi6wFzpvpFvTQFeYLQ/9/xZ59AQ==",
+      "version": "1.207.0",
+      "resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.207.0.tgz",
+      "integrity": "sha512-Sx+xamhg1/iKGAtUNh3uAUtAAza4j/yBhxcfUxfqR++WrZdw0V6nmh7LSfVNl7+QVl2qmiPSoZA7z+5ojaWDDQ==",
       "license": "MIT",
       "dependencies": {
         "core-js": "^3.38.1",
@@ -8504,10 +8503,9 @@
       }
     },
     "node_modules/proxy-compare": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/proxy-compare/-/proxy-compare-3.0.1.tgz",
-      "integrity": "sha512-V9plBAt3qjMlS1+nC8771KNf6oJ12gExvaxnNzN/9yVRLdTv/lc+oJlnSzrdYDAvBfTStPCoiaCOTmTs0adv7Q==",
-      "license": "MIT"
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/proxy-compare/-/proxy-compare-3.0.0.tgz",
+      "integrity": "sha512-y44MCkgtZUCT9tZGuE278fB7PWVf7fRYy0vbRXAts2o5F0EfC4fIQrvQQGBJo1WJbFcVLXzApOscyJuZqHQc1w=="
     },
     "node_modules/punycode": {
       "version": "2.3.1",
@@ -9793,12 +9791,12 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
     "node_modules/valtio": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/valtio/-/valtio-2.1.3.tgz",
-      "integrity": "sha512-q+dVczY5zf7kO39JPVq2qR0VXMeEpF1t+P1njHU7hAhwgtyVa/p38YmgyHZq2IQYwnkNrkvh412k4sfDmcIJ2g==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/valtio/-/valtio-2.1.2.tgz",
+      "integrity": "sha512-fhekN5Rq7dvHULHHBlJeXHrQDl0Jj9GXfNavCm3gkD06crGchaG1nf/J7gSlfZU2wPcRdVS5jBKWHtE2NNz97A==",
       "license": "MIT",
       "dependencies": {
-        "proxy-compare": "^3.0.1"
+        "proxy-compare": "^3.0.0"
       },
       "engines": {
         "node": ">=12.20.0"
@@ -9892,9 +9890,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "6.0.11",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-6.0.11.tgz",
-      "integrity": "sha512-4VL9mQPKoHy4+FE0NnRE/kbY51TOfaknxAjt3fJbGJxhIpBZiqVzlZDEesWWsuREXHwNdAoOFZ9MkPEVXczHwg==",
+      "version": "6.0.10",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-6.0.10.tgz",
+      "integrity": "sha512-MEszunEcMo6pFsfXN1GhCFQqnE25tWRH0MA4f0Q7uanACi4y1Us+ZGpTMnITwCTnYzB2b9cpmnelTlxgTBmaBA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -10584,10 +10582,9 @@
       }
     },
     "node_modules/wouter": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/wouter/-/wouter-3.4.0.tgz",
-      "integrity": "sha512-Qx4L+EnYk7AF+pNU9TM+lQtkceL5Qm+oDZU9720DUx+/7K6v7fnlHnRLI78KjEbCqdGFeroW5P0M1t8WYSloQA==",
-      "license": "Unlicense",
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/wouter/-/wouter-3.3.5.tgz",
+      "integrity": "sha512-bx3fLQAMn+EhYbBdY3W1gw9ZfO/uchudxYMwOIBzF3HVgqNEEIT199vEoh7FLTC0Vz5+rpMO6NdFsOkGX1QQCw==",
       "dependencies": {
         "mitt": "^3.0.1",
         "regexparam": "^3.0.0",

src/frontend/package.json

@@ -13,7 +13,7 @@
     "check": "prettier --check ./src"
   },
   "dependencies": {
-    "@livekit/components-react": "2.8.1",
+    "@livekit/components-react": "2.8.0",
     "@livekit/components-styles": "1.1.4",
     "@livekit/track-processors": "0.3.3",
     "@pandacss/preset-panda": "0.51.1",
@@ -22,25 +22,25 @@
     "@tanstack/react-query": "5.64.2",
     "crisp-sdk-web": "1.0.25",
     "hoofd": "1.7.3",
-    "i18next": "24.2.2",
+    "i18next": "24.2.1",
     "i18next-browser-languagedetector": "8.0.2",
     "i18next-parser": "9.1.0",
     "i18next-resources-to-backend": "1.2.1",
     "livekit-client": "2.8.1",
-    "posthog-js": "1.210.2",
+    "posthog-js": "1.207.0",
     "react": "18.3.1",
     "react-aria-components": "1.6.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",
+    "@types/node": "22.10.7",
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
     "@typescript-eslint/eslint-plugin": "8.21.0",
@@ -54,7 +54,7 @@
     "postcss": "8.5.1",
     "prettier": "3.4.2",
     "typescript": "5.7.3",
-    "vite": "6.0.11",
+    "vite": "6.0.10",
     "vite-tsconfig-paths": "5.1.4"
   }
 }

src/frontend/src/features/home/routes/Home.tsx

@@ -9,6 +9,7 @@ import { useUser, UserAware } from '@/features/auth'
 import { JoinMeetingDialog } from '../components/JoinMeetingDialog'
 import { ProConnectButton } from '@/components/ProConnectButton'
 import { useCreateRoom } from '@/features/rooms'
+import { usePersistentUserChoices } from '@livekit/components-react'
 import { RiAddLine, RiLink } from '@remixicon/react'
 import { LaterMeetingDialog } from '@/features/home/components/LaterMeetingDialog'
 import { IntroSlider } from '@/features/home/components/IntroSlider'
@@ -17,7 +18,6 @@ import { ReactNode, useState } from 'react'
 
 import { css } from '@/styled-system/css'
 import { menuRecipe } from '@/primitives/menuRecipe.ts'
-import { usePersistentUserChoices } from '@/features/rooms/livekit/hooks/usePersistentUserChoices'
 
 const Columns = ({ children }: { children?: ReactNode }) => {
   return (
@@ -32,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',
         },

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

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
-import { LiveKitRoom } from '@livekit/components-react'
+import { LiveKitRoom, type LocalUserChoices } from '@livekit/components-react'
 import { Room, RoomOptions } from 'livekit-client'
 import { keys } from '@/api/queryKeys'
 import { queryClient } from '@/api/queryClient'
@@ -12,11 +12,10 @@ import { fetchRoom } from '../api/fetchRoom'
 import { ApiRoom } from '../api/ApiRoom'
 import { useCreateRoom } from '../api/createRoom'
 import { InviteDialog } from './InviteDialog'
+
 import { VideoConference } from '../livekit/prefabs/VideoConference'
 import posthog from 'posthog-js'
 import { css } from '@/styled-system/css'
-import { LocalUserChoices } from '../routes/Room'
-import { BackgroundBlurFactory } from '../livekit/components/blur'
 
 export const Conference = ({
   roomId,
@@ -112,13 +111,7 @@ export const Conference = ({
           token={data?.livekit?.token}
           connect={true}
           audio={userConfig.audioEnabled}
-          video={
-            userConfig.videoEnabled && {
-              processor: BackgroundBlurFactory.deserializeProcessor(
-                userConfig.processorSerialized
-              ),
-            }
-          }
+          video={userConfig.videoEnabled}
           connectOptions={connectOptions}
           className={css({
             backgroundColor: 'primaryDark.50 !important',

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

@@ -1,361 +1,30 @@
 import { useTranslation } from 'react-i18next'
-import { usePreviewTracks } 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'
-import { Button, Dialog } from '@/primitives'
-import { LocalUserChoices } from '../routes/Room'
-import { Heading } from 'react-aria-components'
-import { RiImageCircleAiFill } from '@remixicon/react'
-import { EffectsConfiguration } from '../livekit/components/effects/EffectsConfiguration'
-import { usePersistentUserChoices } from '../livekit/hooks/usePersistentUserChoices'
-import { BackgroundBlurFactory } from '../livekit/components/blur'
-
-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,
-    saveProcessorSerialized,
-  } = usePersistentUserChoices({})
-
-  const [audioDeviceId, setAudioDeviceId] = useState<string>(
-    initialUserChoices.audioDeviceId
-  )
-  const [videoDeviceId, setVideoDeviceId] = useState<string>(
-    initialUserChoices.videoDeviceId
-  )
-  const [username, setUsername] = useState<string>(initialUserChoices.username)
-  const [processor, setProcessor] = useState(
-    BackgroundBlurFactory.deserializeProcessor(
-      initialUserChoices.processorSerialized
-    )
-  )
-
-  useEffect(() => {
-    saveAudioInputDeviceId(audioDeviceId)
-  }, [audioDeviceId, saveAudioInputDeviceId])
-
-  useEffect(() => {
-    saveVideoInputDeviceId(videoDeviceId)
-  }, [videoDeviceId, saveVideoInputDeviceId])
-
-  useEffect(() => {
-    saveUsername(username)
-  }, [username, saveUsername])
-  useEffect(() => {
-    saveProcessorSerialized(processor?.serialize())
-  }, [processor, saveProcessorSerialized])
-
-  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,
-      processorSerialized: processor?.serialize(),
-    })
-  }
-
-  const [isEffectsOpen, setEffectsOpen] = useState(false)
-
-  const openEffects = () => {
-    setEffectsOpen(true)
-  }
-
-  // This hook is used to setup the persisted user choice processor on initialization.
-  // So it's on purpose that processor is not included in the deps.
-  // We just want to wait for the videoTrack to be loaded to apply the default processor.
-  useEffect(() => {
-    if (processor && videoTrack && !videoTrack.getProcessor()) {
-      videoTrack.setProcessor(processor)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [videoTrack])
+  const { t } = useTranslation('rooms')
+  const { user } = useUser()
 
   return (
-    <Screen footer={false}>
-      <Dialog
-        isOpen={isEffectsOpen}
-        onOpenChange={setEffectsOpen}
-        role="dialog"
-        type="flex"
-        size="large"
-      >
-        <Heading
-          slot="title"
-          level={1}
-          className={css({
-            textStyle: 'h1',
-            marginBottom: '1.5rem',
-          })}
-        >
-          {t('effects.title')}
-        </Heading>
-        <EffectsConfiguration
-          videoTrack={videoTrack}
-          onSubmit={(processor) => {
-            setProcessor(processor)
-          }}
+    <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 }}
         />
-      </Dialog>
-      <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
-                className={css({
-                  position: 'absolute',
-                  left: 0,
-                  right: 0,
-                  bottom: 0,
-                  height: '20%',
-                  backgroundImage:
-                    'linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(255,255,255,0) 100%)',
-                })}
-              ></div>
-              <div
-                className={css({
-                  position: 'absolute',
-                  right: 0,
-                  bottom: '0',
-                  padding: '1rem',
-                })}
-              >
-                <Button
-                  variant="whiteCircle"
-                  onPress={openEffects}
-                  tooltip={t('effects.description')}
-                  aria-label={t('effects.description')}
-                >
-                  <RiImageCircleAiFill size={24} />
-                </Button>
-              </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>
+      </CenteredContent>
     </Screen>
   )
 }

src/frontend/src/features/rooms/livekit/components/Effects.tsx

@@ -1,21 +1,13 @@
-import { LocalVideoTrack } from 'livekit-client'
 import { useEffect, useRef, useState } from 'react'
+import { useLocalParticipant } from '@livekit/components-react'
+import { LocalVideoTrack } from 'livekit-client'
+import { Text, P, ToggleButton, Div, H } from '@/primitives'
 import { useTranslation } from 'react-i18next'
+import { HStack, styled, VStack } from '@/styled-system/jsx'
 import {
   BackgroundBlurFactory,
   BackgroundBlurProcessorInterface,
-} from '../blur'
-import { css } from '@/styled-system/css'
-import { Text, P, ToggleButton, H } from '@/primitives'
-import { HStack, styled } from '@/styled-system/jsx'
-
-enum BlurRadius {
-  NONE = 0,
-  LIGHT = 5,
-  NORMAL = 10,
-}
-
-const isSupported = BackgroundBlurFactory.isSupported()
+} from './blur/index'
 
 const Information = styled('div', {
   base: {
@@ -27,49 +19,50 @@ const Information = styled('div', {
   },
 })
 
-export const EffectsConfiguration = ({
-  videoTrack,
-  onSubmit,
-  layout = 'horizontal',
-}: {
-  videoTrack: LocalVideoTrack
-  onSubmit?: (processor?: BackgroundBlurProcessorInterface) => void
-  layout?: 'vertical' | 'horizontal'
-}) => {
-  const videoRef = useRef<HTMLVideoElement>(null)
+enum BlurRadius {
+  NONE = 0,
+  LIGHT = 5,
+  NORMAL = 10,
+}
+
+const isSupported = BackgroundBlurFactory.isSupported()
+
+export const Effects = () => {
   const { t } = useTranslation('rooms', { keyPrefix: 'effects' })
+  const { isCameraEnabled, cameraTrack, localParticipant } =
+    useLocalParticipant()
+  const videoRef = useRef<HTMLVideoElement>(null)
   const [processorPending, setProcessorPending] = useState(false)
 
-  useEffect(() => {
-    const videoElement = videoRef.current
-    if (!videoElement) return
+  const localCameraTrack = cameraTrack?.track as LocalVideoTrack
 
-    const attachVideoTrack = async () => videoTrack?.attach(videoElement)
-    attachVideoTrack()
+  const getProcessor = () => {
+    return localCameraTrack?.getProcessor() as BackgroundBlurProcessorInterface
+  }
 
-    return () => {
-      if (!videoElement) return
-      videoTrack.detach(videoElement)
-    }
-  }, [videoTrack, videoTrack?.isMuted])
+  const getBlurRadius = (): BlurRadius => {
+    const processor = getProcessor()
+    return processor?.options.blurRadius || BlurRadius.NONE
+  }
 
   const toggleBlur = async (blurRadius: number) => {
-    if (!videoTrack) return
+    if (!isCameraEnabled) await localParticipant.setCameraEnabled(true)
+    if (!localCameraTrack) return
+
     setProcessorPending(true)
+
     const processor = getProcessor()
     const currentBlurRadius = getBlurRadius()
+
     try {
       if (blurRadius == currentBlurRadius && processor) {
-        await videoTrack.stopProcessor()
-        onSubmit?.(undefined)
+        await localCameraTrack.stopProcessor()
       } else if (!processor) {
-        const newProcessor = BackgroundBlurFactory.getProcessor({ blurRadius })!
-        await videoTrack.setProcessor(newProcessor)
-        onSubmit?.(newProcessor)
+        await localCameraTrack.setProcessor(
+          BackgroundBlurFactory.getProcessor({ blurRadius })!
+        )
       } else {
         processor?.update({ blurRadius })
-        // We want to trigger onSubmit when options changes so the parent component is aware of it.
-        onSubmit?.(processor)
       }
     } catch (error) {
       console.error('Error applying blur:', error)
@@ -78,17 +71,21 @@ export const EffectsConfiguration = ({
     }
   }
 
-  const getProcessor = () => {
-    return videoTrack?.getProcessor() as BackgroundBlurProcessorInterface
-  }
+  useEffect(() => {
+    const videoElement = videoRef.current
+    if (!videoElement) return
 
-  const getBlurRadius = (): BlurRadius => {
-    const processor = getProcessor()
-    return processor?.options.blurRadius || BlurRadius.NONE
-  }
+    const attachVideoTrack = async () => localCameraTrack?.attach(videoElement)
+    attachVideoTrack()
+
+    return () => {
+      if (!videoElement) return
+      localCameraTrack.detach(videoElement)
+    }
+  }, [localCameraTrack, isCameraEnabled])
 
   const isSelected = (blurRadius: BlurRadius) => {
-    return getBlurRadius() == blurRadius
+    return isCameraEnabled && getBlurRadius() == blurRadius
   }
 
   const tooltipLabel = (blurRadius: BlurRadius) => {
@@ -96,82 +93,55 @@ export const EffectsConfiguration = ({
   }
 
   return (
-    <div
-      className={css(
-        layout === 'vertical'
-          ? {
-              display: 'flex',
-              flexDirection: 'column',
-              gap: '0.5rem',
-            }
-          : {
-              display: 'flex',
-              gap: '1.5rem',
-              flexDirection: 'column',
-              md: {
-                flexDirection: 'row',
-              },
-            }
-      )}
-    >
-      <div
-        className={css({
-          width: '100%',
-          aspectRatio: 16 / 9,
-        })}
-      >
-        {videoTrack && !videoTrack.isMuted ? (
-          <video
-            ref={videoRef}
-            width="100%"
-            muted
+    <VStack padding="0 1.5rem" overflowY="scroll">
+      {localCameraTrack && isCameraEnabled ? (
+        <video
+          ref={videoRef}
+          width="100%"
+          muted
+          style={{
+            transform: 'rotateY(180deg)',
+            minHeight: '175px',
+            borderRadius: '8px',
+          }}
+        />
+      ) : (
+        <div
+          style={{
+            width: '100%',
+            height: '174px',
+            display: 'flex',
+            backgroundColor: 'black',
+            justifyContent: 'center',
+            flexDirection: 'column',
+          }}
+        >
+          <P
             style={{
-              transform: 'rotateY(180deg)',
-              minHeight: '175px',
-              borderRadius: '8px',
-            }}
-          />
-        ) : (
-          <div
-            style={{
-              width: '100%',
-              height: '100%',
-              display: 'flex',
-              backgroundColor: 'black',
-              justifyContent: 'center',
-              flexDirection: 'column',
+              color: 'white',
+              textAlign: 'center',
+              textWrap: 'balance',
+              marginBottom: 0,
             }}
           >
-            <P
-              style={{
-                color: 'white',
-                textAlign: 'center',
-                textWrap: 'balance',
-                marginBottom: 0,
-              }}
-            >
-              {t('activateCamera')}
-            </P>
-          </div>
-        )}
-      </div>
-      <div
-        className={css(
-          layout === 'horizontal'
-            ? {
-                md: {
-                  borderLeft: '1px solid #dadce0',
-                  paddingLeft: '1.5rem',
-                },
-              }
-            : {}
-        )}
+            {t('activateCamera')}
+          </P>
+        </div>
+      )}
+      <Div
+        alignItems={'left'}
+        width={'100%'}
+        style={{
+          border: '1px solid #dadce0',
+          borderRadius: '8px',
+          margin: '0 .625rem',
+          padding: '0.5rem 1rem',
+        }}
       >
         <H
           lvl={3}
           style={{
             marginBottom: '0.4rem',
-            fontWeight: 'bold',
           }}
         >
           {t('heading')}
@@ -203,9 +173,16 @@ export const EffectsConfiguration = ({
           <Text variant="sm">{t('notAvailable')}</Text>
         )}
         <Information>
-          <Text variant="sm">⚠︎ {t('experimental')}</Text>
+          <Text
+            variant="sm"
+            style={{
+              textWrap: 'balance',
+            }}
+          >
+            ⚠︎ {t('experimental')}
+          </Text>
         </Information>
-      </div>
-    </div>
+      </Div>
+    </VStack>
   )
 }

src/frontend/src/features/rooms/livekit/components/SidePanel.tsx

@@ -8,9 +8,9 @@ import { useTranslation } from 'react-i18next'
 import { ParticipantsList } from './controls/Participants/ParticipantsList'
 import { useSidePanel } from '../hooks/useSidePanel'
 import { ReactNode } from 'react'
+import { Effects } from './Effects'
 import { Chat } from '../prefabs/Chat'
 import { Transcript } from './Transcript'
-import { Effects } from './effects/Effects'
 
 type StyledSidePanelProps = {
   title: string

src/frontend/src/features/rooms/livekit/components/blur/BackgroundBlurCustomProcessor.ts

@@ -11,11 +11,7 @@ import {
   TIMEOUT_TICK,
   timerWorkerScript,
 } from './TimerWorker'
-import {
-  BackgroundBlurProcessorInterface,
-  BackgroundOptions,
-  ProcessorType,
-} from '.'
+import { BackgroundBlurProcessorInterface, BackgroundOptions } from '.'
 
 const PROCESSING_WIDTH = 256
 const PROCESSING_HEIGHT = 144
@@ -282,15 +278,4 @@ export class BackgroundBlurCustomProcessor
     this.timerWorker?.terminate()
     this.imageSegmenter?.close()
   }
-
-  clone() {
-    return new BackgroundBlurCustomProcessor(this.options)
-  }
-
-  serialize() {
-    return {
-      type: ProcessorType.BLUR,
-      options: this.options,
-    }
-  }
 }

src/frontend/src/features/rooms/livekit/components/blur/BackgroundBlurTrackProcessorJsWrapper.ts

@@ -4,11 +4,7 @@ import {
   ProcessorWrapper,
 } from '@livekit/track-processors'
 import { ProcessorOptions, Track } from 'livekit-client'
-import {
-  BackgroundBlurProcessorInterface,
-  BackgroundOptions,
-  ProcessorType,
-} from '.'
+import { BackgroundBlurProcessorInterface, BackgroundOptions } from '.'
 
 /**
  * This is simply a wrapper around track-processor-js Processor
@@ -22,11 +18,8 @@ export class BackgroundBlurTrackProcessorJsWrapper
 
   processor: ProcessorWrapper<BackgroundOptions>
 
-  opts: BackgroundOptions
-
   constructor(opts: BackgroundOptions) {
     this.processor = BackgroundBlur(opts.blurRadius)
-    this.opts = opts
   }
 
   async init(opts: ProcessorOptions<Track.Kind>) {
@@ -52,17 +45,4 @@ export class BackgroundBlurTrackProcessorJsWrapper
   get options() {
     return (this.processor.transformer as BackgroundTransformer).options
   }
-
-  clone() {
-    return new BackgroundBlurTrackProcessorJsWrapper({
-      blurRadius: this.options!.blurRadius,
-    })
-  }
-
-  serialize() {
-    return {
-      type: ProcessorType.BLUR,
-      options: this.options,
-    }
-  }
 }

src/frontend/src/features/rooms/livekit/components/blur/index.ts

@@ -7,21 +7,10 @@ export type BackgroundOptions = {
   blurRadius?: number
 }
 
-export interface ProcessorSerialized {
-  type: ProcessorType
-  options: BackgroundOptions
-}
-
 export interface BackgroundBlurProcessorInterface
   extends TrackProcessor<Track.Kind> {
   update(opts: BackgroundOptions): void
   options: BackgroundOptions
-  clone(): BackgroundBlurProcessorInterface
-  serialize(): ProcessorSerialized
-}
-
-export enum ProcessorType {
-  BLUR = 'blur',
 }
 
 export class BackgroundBlurFactory {
@@ -31,22 +20,13 @@ export class BackgroundBlurFactory {
     )
   }
 
-  static getProcessor(
-    opts: BackgroundOptions
-  ): BackgroundBlurProcessorInterface | undefined {
+  static getProcessor(opts: BackgroundOptions) {
     if (ProcessorWrapper.isSupported) {
       return new BackgroundBlurTrackProcessorJsWrapper(opts)
     }
     if (BackgroundBlurCustomProcessor.isSupported) {
       return new BackgroundBlurCustomProcessor(opts)
     }
-    return undefined
-  }
-
-  static deserializeProcessor(data?: ProcessorSerialized) {
-    if (data?.type === ProcessorType.BLUR) {
-      return BackgroundBlurFactory.getProcessor(data?.options)
-    }
-    return undefined
+    return null
   }
 }

src/frontend/src/features/rooms/livekit/components/controls/Options/EffectsMenuItem.tsx

@@ -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>
-  )
-}

src/frontend/src/features/rooms/livekit/components/controls/Options/FeedbackMenuItem.tsx

@@ -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>
-  )
-}

src/frontend/src/features/rooms/livekit/components/controls/Options/FullScreenMenuItem.tsx

@@ -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>
-  )
-}

src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenuItems.tsx

@@ -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, variant: 'dark' }).item}
+        >
+          <RiAccountBoxLine size={20} />
+          {t('effects')}
+        </MenuItem>
       </MenuSection>
       <Separator />
       <MenuSection>
-        <FeedbackMenuItem />
-        <SettingsMenuItem />
+        <MenuItem
+          href={GRIST_FORM}
+          target="_blank"
+          className={menuRecipe({ icon: true, variant: 'dark' }).item}
+        >
+          <RiMegaphoneLine size={20} />
+          {t('feedback')}
+        </MenuItem>
+        <MenuItem
+          className={menuRecipe({ icon: true, variant: 'dark' }).item}
+          onAction={() => setDialogOpen(true)}
+        >
+          <RiSettings3Line size={20} />
+          {t('settings')}
+        </MenuItem>
       </MenuSection>
     </RACMenu>
   )

src/frontend/src/features/rooms/livekit/components/controls/Options/SettingsMenuItem.tsx

@@ -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>
-  )
-}

src/frontend/src/features/rooms/livekit/components/controls/SelectToggleDevice.tsx

@@ -13,21 +13,12 @@ import {
   RiVideoOffLine,
   RiVideoOnLine,
 } from '@remixicon/react'
-import {
-  LocalAudioTrack,
-  LocalVideoTrack,
-  Track,
-  VideoCaptureOptions,
-} 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'
-import { usePersistentUserChoices } from '../../hooks/usePersistentUserChoices'
-import { BackgroundBlurFactory } from '../blur'
 
 export type ToggleSource = Exclude<
   Track.Source,
@@ -74,22 +65,16 @@ 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
+    variant?: 'dark' | 'light'
   }
 
 export const SelectToggleDevice = <T extends ToggleSource>({
-  track,
-  initialDeviceId,
   onActiveDeviceChange,
   hideMenu,
-  variant = 'primaryDark',
-  menuVariant = 'light',
+  variant = 'light',
   ...props
 }: SelectToggleDeviceProps<T>) => {
   const config = selectToggleDeviceConfig[props.source]
@@ -99,53 +84,8 @@ export const SelectToggleDevice = <T extends ToggleSource>({
   const { t } = useTranslation('rooms', { keyPrefix: 'join' })
   const trackProps = useTrackToggle(props)
 
-  const { userChoices } = usePersistentUserChoices({})
-
-  const toggle = () => {
-    if (props.source === Track.Source.Camera) {
-      /**
-       * We need to make sure that we apply the in-memory processor when re-enabling the camera.
-       * Before, we had the following bug:
-       * 1 - Configure a processor on join screen
-       * 2 - Turn off camera on join screen
-       * 3 - Join the room
-       * 4 - Turn on the camera
-       * 5 - No processor is applied to the camera
-       * Expected: The processor is applied.
-       *
-       * See https://github.com/numerique-gouv/meet/pull/309#issuecomment-2622404121
-       */
-      const processor = BackgroundBlurFactory.deserializeProcessor(
-        userChoices.processorSerialized
-      )
-
-      const toggle = trackProps.toggle as (
-        forceState: boolean,
-        captureOptions: VideoCaptureOptions
-      ) => Promise<void>
-
-      toggle(!trackProps.enabled, {
-        processor: processor,
-      } as VideoCaptureOptions)
-    } else {
-      trackProps.toggle()
-    }
-  }
-
   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}` })
 
@@ -159,8 +99,6 @@ export const SelectToggleDevice = <T extends ToggleSource>({
       <ToggleDevice
         {...trackProps}
         config={config}
-        variant={variant}
-        toggle={toggle}
         toggleButtonProps={{
           ...(hideMenu
             ? {
@@ -170,13 +108,13 @@ export const SelectToggleDevice = <T extends ToggleSource>({
         }}
       />
       {!hideMenu && (
-        <Menu variant={menuVariant}>
+        <Menu variant={variant}>
           <Button
             tooltip={selectLabel}
             aria-label={selectLabel}
             groupPosition="right"
             square
-            variant={trackProps.enabled ? variant : 'error2'}
+            variant={trackProps.enabled ? 'primaryDark' : 'error2'}
           >
             <RiArrowDownSLine />
           </Button>
@@ -190,7 +128,7 @@ export const SelectToggleDevice = <T extends ToggleSource>({
               setActiveMediaDevice(value as string)
               onActiveDeviceChange(value as string)
             }}
-            variant={menuVariant}
+            variant={variant}
           />
         </Menu>
       )}

src/frontend/src/features/rooms/livekit/components/controls/SupportToggle.tsx

@@ -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

src/frontend/src/features/rooms/livekit/components/controls/ToggleDevice.tsx

@@ -6,19 +6,13 @@ 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 { useIsSpeaking, useLocalParticipant } from '@livekit/components-react'
 import { ToggleButtonProps } from '@/primitives/ToggleButton'
 
 export type ToggleDeviceProps = {
   enabled: boolean
   toggle: () => void
   config: SelectToggleDeviceConfig
-  variant?: NonNullable<ButtonRecipeProps>['variant']
   toggleButtonProps?: Partial<ToggleButtonProps>
 }
 
@@ -26,7 +20,6 @@ export const ToggleDevice = ({
   config,
   enabled,
   toggle,
-  variant = 'primaryDark',
   toggleButtonProps,
 }: ToggleDeviceProps) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'join' })
@@ -58,15 +51,17 @@ 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}
@@ -78,9 +73,3 @@ export const ToggleDevice = ({
     </ToggleButton>
   )
 }
-
-const ActiveSpeakerWrapper = () => {
-  const { localParticipant } = useLocalParticipant()
-  const isSpeaking = useIsSpeaking(localParticipant)
-  return <ActiveSpeaker isSpeaking={isSpeaking} pushToTalk />
-}

src/frontend/src/features/rooms/livekit/components/effects/Effects.tsx

@@ -1,27 +0,0 @@
-import { useLocalParticipant } from '@livekit/components-react'
-import { LocalVideoTrack } from 'livekit-client'
-import { css } from '@/styled-system/css'
-import { EffectsConfiguration } from './EffectsConfiguration'
-import { usePersistentUserChoices } from '../../hooks/usePersistentUserChoices'
-
-export const Effects = () => {
-  const { cameraTrack } = useLocalParticipant()
-  const localCameraTrack = cameraTrack?.track as LocalVideoTrack
-  const { saveProcessorSerialized } = usePersistentUserChoices()
-
-  return (
-    <div
-      className={css({
-        padding: '0 1.5rem',
-      })}
-    >
-      <EffectsConfiguration
-        videoTrack={localCameraTrack}
-        layout="vertical"
-        onSubmit={(processor) =>
-          saveProcessorSerialized(processor?.serialize())
-        }
-      />
-    </div>
-  )
-}

src/frontend/src/features/rooms/livekit/hooks/useFullScreen.ts

@@ -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,
-  }
-}

src/frontend/src/features/rooms/livekit/hooks/usePersistentUserChoices.ts

@@ -1,56 +0,0 @@
-import { UsePersistentUserChoicesOptions } from '@livekit/components-react'
-import React from 'react'
-import { LocalUserChoices } from '../../routes/Room'
-import { saveUserChoices, loadUserChoices } from '@livekit/components-core'
-import { ProcessorSerialized } from '../components/blur'
-
-/**
- * From @livekit/component-react
- *
- * A hook that provides access to user choices stored in local storage, such as
- * selected media devices and their current state (on or off), as well as the user name.
- * @alpha
- */
-export function usePersistentUserChoices(
-  options: UsePersistentUserChoicesOptions = {}
-) {
-  const [userChoices, setSettings] = React.useState<LocalUserChoices>(
-    loadUserChoices(options.defaults, options.preventLoad ?? false)
-  )
-
-  const saveAudioInputEnabled = React.useCallback((isEnabled: boolean) => {
-    setSettings((prev) => ({ ...prev, audioEnabled: isEnabled }))
-  }, [])
-  const saveVideoInputEnabled = React.useCallback((isEnabled: boolean) => {
-    setSettings((prev) => ({ ...prev, videoEnabled: isEnabled }))
-  }, [])
-  const saveAudioInputDeviceId = React.useCallback((deviceId: string) => {
-    setSettings((prev) => ({ ...prev, audioDeviceId: deviceId }))
-  }, [])
-  const saveVideoInputDeviceId = React.useCallback((deviceId: string) => {
-    setSettings((prev) => ({ ...prev, videoDeviceId: deviceId }))
-  }, [])
-  const saveUsername = React.useCallback((username: string) => {
-    setSettings((prev) => ({ ...prev, username: username }))
-  }, [])
-  const saveProcessorSerialized = React.useCallback(
-    (processorSerialized?: ProcessorSerialized) => {
-      setSettings((prev) => ({ ...prev, processorSerialized }))
-    },
-    []
-  )
-
-  React.useEffect(() => {
-    saveUserChoices(userChoices, options.preventSave ?? false)
-  }, [userChoices, options.preventSave])
-
-  return {
-    userChoices,
-    saveAudioInputEnabled,
-    saveVideoInputEnabled,
-    saveAudioInputDeviceId,
-    saveVideoInputDeviceId,
-    saveUsername,
-    saveProcessorSerialized,
-  }
-}

src/frontend/src/features/rooms/livekit/prefabs/ControlBar/ControlBar.tsx

@@ -1,11 +1,11 @@
 import { Track } from 'livekit-client'
 import * as React from 'react'
+import { usePersistentUserChoices } from '@livekit/components-react'
 
 import { MobileControlBar } from './MobileControlBar'
 import { DesktopControlBar } from './DesktopControlBar'
 import { SettingsDialogProvider } from '../../components/controls/SettingsDialogContext'
 import { useIsMobile } from '@/utils/useIsMobile'
-import { usePersistentUserChoices } from '../../hooks/usePersistentUserChoices'
 
 /** @public */
 export type ControlBarControls = {

src/frontend/src/features/rooms/livekit/prefabs/ControlBar/DesktopControlBar.tsx

@@ -62,7 +62,7 @@ export function DesktopControlBar({
             onActiveDeviceChange={(deviceId) =>
               saveAudioInputDeviceId(deviceId ?? '')
             }
-            menuVariant="dark"
+            variant="dark"
           />
           <SelectToggleDevice
             source={Track.Source.Camera}
@@ -73,7 +73,7 @@ export function DesktopControlBar({
             onActiveDeviceChange={(deviceId) =>
               saveVideoInputDeviceId(deviceId ?? '')
             }
-            menuVariant="dark"
+            variant="dark"
           />
           {browserSupportsScreenSharing && (
             <ScreenShareToggle

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

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import {
   usePersistentUserChoices,
-  type LocalUserChoices as LocalUserChoicesLK,
+  type LocalUserChoices,
 } from '@livekit/components-react'
 import { useParams } from 'wouter'
 import { ErrorScreen } from '@/components/ErrorScreen'
@@ -9,11 +9,6 @@ import { useUser, UserAware } from '@/features/auth'
 import { Conference } from '../components/Conference'
 import { Join } from '../components/Join'
 import { useKeyboardShortcuts } from '@/features/shortcuts/useKeyboardShortcuts'
-import { ProcessorSerialized } from '../livekit/components/blur'
-
-export type LocalUserChoices = LocalUserChoicesLK & {
-  processorSerialized?: ProcessorSerialized
-}
 
 export const Room = () => {
   const { isLoggedIn } = useUser()

src/frontend/src/features/settings/components/tabs/AccountTab.tsx

@@ -1,13 +1,15 @@
 import { A, Badge, Button, DialogProps, Field, H, P } from '@/primitives'
 import { Trans, useTranslation } from 'react-i18next'
-import { useRoomContext } from '@livekit/components-react'
+import {
+  usePersistentUserChoices,
+  useRoomContext,
+} from '@livekit/components-react'
 import { logoutUrl, useUser } from '@/features/auth'
 import { css } from '@/styled-system/css'
 import { TabPanel, TabPanelProps } from '@/primitives/Tabs'
 import { HStack } from '@/styled-system/jsx'
 import { useState } from 'react'
 import { ProConnectButton } from '@/components/ProConnectButton'
-import { usePersistentUserChoices } from '@/features/rooms/livekit/hooks/usePersistentUserChoices'
 
 export type AccountTabProps = Pick<DialogProps, 'onOpenChange'> &
   Pick<TabPanelProps, 'id'>

src/frontend/src/features/support/hooks/useSupport.tsx

@@ -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,18 +29,3 @@ export const useSupport = ({ id }: useSupportProps) => {
 
   return null
 }
-
-// Some users may block Crisp chat widget with browser ad blockers or anti-tracking plugins
-// So we need to safely check if Crisp is available and not blocked
-const isCrispAvailable = () => {
-  try {
-    return !!window?.$crisp?.is
-  } catch {
-    return false
-  }
-}
-
-export const useIsSupportEnabled = () => {
-  const { data } = useConfig()
-  return !!data?.support?.id && isCrispAvailable()
-}

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

@@ -24,12 +24,7 @@
     "toggleOff": "",
     "toggleOn": "",
     "usernameHint": "",
-    "usernameLabel": "",
-    "errors": {
-      "usernameEmpty": ""
-    },
-    "cameraDisabled": "",
-    "cameraStarting": ""
+    "usernameLabel": ""
   },
   "leaveRoomPrompt": "",
   "shareDialog": {
@@ -90,11 +85,7 @@
       "settings": "",
       "username": "",
       "effects": "",
-      "switchCamera": "",
-      "fullscreen": {
-        "enter": "",
-        "exit": ""
-      }
+      "switchCamera": ""
     }
   },
   "effects": {

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

@@ -18,22 +18,13 @@
       "enable": "Enable microphone",
       "label": "Microphone"
     },
-    "effects": {
-      "description": "Apply effects",
-      "title": "Effects"
-    },
-    "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": {
@@ -93,11 +84,7 @@
       "settings": "Settings",
       "username": "Update Your Name",
       "effects": "Apply effects",
-      "switchCamera": "Switch camera",
-      "fullscreen": {
-        "enter": "Fullscreen",
-        "exit": "Exit fullscreen mode"
-      }
+      "switchCamera": "Switch camera"
     }
   },
   "effects": {

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

@@ -18,22 +18,13 @@
       "enable": "Activer le micro",
       "label": "Microphone"
     },
-    "heading": "Rejoindre la réunion",
-    "effects": {
-      "description": "Appliquer des effets",
-      "title": "Effets"
-    },
+    "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": {
@@ -93,11 +84,7 @@
       "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"
-      }
+      "switchCamera": "Changer de caméra"
     }
   },
   "effects": {

src/frontend/src/primitives/Dialog.tsx

@@ -11,7 +11,6 @@ import {
 import { Div, Button, Box, VerticallyOffCenter } from '@/primitives'
 import { text } from './Text'
 import { MutableRefObject } from 'react'
-import { css } from '@/styled-system/css'
 
 const StyledModalOverlay = styled(ModalOverlay, {
   base: {
@@ -49,24 +48,6 @@ const StyledRACDialog = styled(RACDialog, {
   },
 })
 
-const ModalContent = styled('div', {
-  base: {
-    margin: 'auto',
-  },
-  variants: {
-    size: {
-      full: {
-        width: 'fit-content',
-        maxWidth: '100%',
-      },
-      large: {
-        width: '100%',
-        xl: { width: '1200px' },
-      },
-    },
-  },
-})
-
 export type DialogProps = RACDialogProps & {
   title?: string
   onClose?: () => void
@@ -82,7 +63,6 @@ export type DialogProps = RACDialogProps & {
   onOpenChange?: (isOpen: boolean) => void
   type?: 'flex'
   innerRef?: MutableRefObject<HTMLDivElement | null>
-  size?: 'full' | 'large'
 }
 
 export const Dialog = ({
@@ -92,7 +72,6 @@ export const Dialog = ({
   isOpen,
   onOpenChange,
   innerRef,
-  size = 'full',
   ...dialogProps
 }: DialogProps) => {
   const isAlert = dialogProps['role'] === 'alertdialog'
@@ -115,16 +94,9 @@ export const Dialog = ({
         <StyledRACDialog {...dialogProps}>
           {({ close }) => (
             <VerticallyOffCenter>
-              <ModalContent size={size}>
+              <Div margin="auto" width="fit-content" maxWidth="full">
                 <Div margin="1rem" pointerEvents="auto">
-                  <Box
-                    size="sm"
-                    type={boxType}
-                    ref={innerRef}
-                    className={css({
-                      padding: '1.5rem',
-                    })}
-                  >
+                  <Box size="sm" type={boxType} ref={innerRef}>
                     {!!title && (
                       <Heading
                         slot="title"
@@ -152,7 +124,7 @@ export const Dialog = ({
                     )}
                   </Box>
                 </Div>
-              </ModalContent>
+              </Div>
             </VerticallyOffCenter>
           )}
         </StyledRACDialog>

src/frontend/src/primitives/Field.tsx

@@ -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>)}

src/frontend/src/primitives/Form.tsx

@@ -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 && (

src/frontend/src/primitives/H.tsx

@@ -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}>

src/frontend/src/primitives/buttonRecipe.ts

@@ -73,19 +73,6 @@ export const buttonRecipe = cva({
           color: 'greyscale.400',
         },
       },
-      whiteCircle: {
-        color: 'white',
-        border: '1px white solid',
-        width: '56px',
-        height: '56px',
-        borderRadius: '100%',
-        '&[data-hovered]': {
-          backgroundColor: 'greyscale.100/20',
-        },
-        '&[data-pressed]': {
-          backgroundColor: 'greyscale.100/50',
-        },
-      },
       tertiary: {
         backgroundColor: 'primary.100',
         color: 'primary.800',

src/frontend/vite.config.ts

@@ -10,7 +10,6 @@ export default defineConfig(({ mode }) => {
     server: {
       port: parseInt(env.VITE_PORT) || 3000,
       host: env.VITE_HOST || 'localhost',
-      allowedHosts: ['.nip.io'],
     },
   }
 })

src/mail/package.json

@@ -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.13.0"
   },
   "repository": "https://github.com/numerique-gouv/meet",
   "author": "DINUM",

src/summary/pyproject.toml

@@ -10,14 +10,14 @@ dependencies = [
     "celery==5.4.0",
     "redis==5.2.1",
     "minio==7.2.15",
-    "openai==1.60.2",
+    "openai==1.59.8",
     "requests==2.32.3",
     "sentry-sdk[fastapi, celery]==2.20.0",
 ]
 
 [project.optional-dependencies]
 dev = [
-    "ruff==0.9.3",
+    "ruff==0.9.2",
 ]
 
 [build-system]