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

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

.github/workflows/deploy.yml

@@ -11,34 +11,17 @@ jobs:
   notify-argocd:
     runs-on: ubuntu-latest
     steps:
-      -
-        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: "meet,secrets"
       -
         name: Checkout repository
         uses: actions/checkout@v4
-        with:
-          submodules: recursive
-          token: ${{ steps.app-token.outputs.token }}
-      -
-        name: Load sops secrets
-        uses: rouja/actions-sops@main
-        with:
-          secret-file: secrets/numerique-gouv/meet/secrets.enc.env
-          age-key: ${{ secrets.SOPS_PRIVATE }}
       -
         name: Call argocd github webhook
         run: |
           data='{"ref": "'$GITHUB_REF'","repository": {"html_url":"'$GITHUB_SERVER_URL'/'$GITHUB_REPOSITORY'"}}'
-          sig=$(echo -n ${data} | openssl dgst -sha1 -hmac ''${ARGOCD_WEBHOOK_SECRET}'' | awk '{print "X-Hub-Signature: sha1="$2}')
-          curl -X POST -H 'X-GitHub-Event:push' -H "Content-Type: application/json" -H "${sig}" --data "${data}" $ARGOCD_WEBHOOK_URL
-          sig=$(echo -n ${data} | openssl dgst -sha1 -hmac ''${ARGOCD_PRODUCTION_WEBHOOK_SECRET}'' | awk '{print "X-Hub-Signature: sha1="$2}')
-          curl -X POST -H 'X-GitHub-Event:push' -H "Content-Type: application/json" -H "${sig}" --data "${data}" $ARGOCD_PRODUCTION_WEBHOOK_URL
+          sig=$(echo -n ${data} | openssl dgst -sha1 -hmac ''${{ secrets.ARGOCD_WEBHOOK_SECRET }}'' | awk '{print "X-Hub-Signature: sha1="$2}')
+          curl -X POST -H 'X-GitHub-Event:push' -H "Content-Type: application/json" -H "${sig}" --data "${data}" ${{ vars.ARGOCD_WEBHOOK_URL }}
+          sig=$(echo -n ${data} | openssl dgst -sha1 -hmac ''${{ secrets.ARGOCD_PRODUCTION_WEBHOOK_SECRET }}'' | awk '{print "X-Hub-Signature: sha1="$2}')
+          curl -X POST -H 'X-GitHub-Event:push' -H "Content-Type: application/json" -H "${sig}" --data "${data}" ${{ secrets.ARGOCD_PRODUCTION_WEBHOOK_URL }}
 
   start-test-on-preprod:
     needs:

.github/workflows/docker-hub.yml

@@ -19,26 +19,9 @@ jobs:
   build-and-push-backend:
     runs-on: ubuntu-latest
     steps:
-      -
-        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: "meet,secrets"
       -
         name: Checkout repository
         uses: actions/checkout@v4
-        with:
-          submodules: recursive
-          token: ${{ steps.app-token.outputs.token }}
-      -
-        name: Load sops secrets
-        uses: rouja/actions-sops@main
-        with:
-          secret-file: secrets/numerique-gouv/meet/secrets.enc.env
-          age-key: ${{ secrets.SOPS_PRIVATE }}
       -
         name: Docker meta
         id: meta
@@ -48,7 +31,7 @@ jobs:
       -
         name: Login to DockerHub
         if: github.event_name != 'pull_request'
-        run: echo "$DOCKER_HUB_PASSWORD" | docker login -u "$DOCKER_HUB_USER" --password-stdin
+        run: echo "${{ secrets.DOCKER_HUB_PASSWORD }}" | docker login -u "${{ secrets.DOCKER_HUB_USER }}" --password-stdin
       -
         name: Run trivy scan
         uses: numerique-gouv/action-trivy-cache@main
@@ -69,26 +52,9 @@ jobs:
   build-and-push-frontend:
     runs-on: ubuntu-latest
     steps:
-      -
-        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: "meet,secrets"
       -
         name: Checkout repository
         uses: actions/checkout@v4
-        with:
-          submodules: recursive
-          token: ${{ steps.app-token.outputs.token }}
-      -
-        name: Load sops secrets
-        uses: rouja/actions-sops@main
-        with:
-          secret-file: secrets/numerique-gouv/meet/secrets.enc.env
-          age-key: ${{ secrets.SOPS_PRIVATE }}
       -
         name: Docker meta
         id: meta
@@ -98,7 +64,7 @@ jobs:
       -
         name: Login to DockerHub
         if: github.event_name != 'pull_request'
-        run: echo "$DOCKER_HUB_PASSWORD" | docker login -u "$DOCKER_HUB_USER" --password-stdin
+        run: echo "${{ secrets.DOCKER_HUB_PASSWORD }}" | docker login -u "${{ secrets.DOCKER_HUB_USER }}" --password-stdin
       -
         name: Run trivy scan
         uses: numerique-gouv/action-trivy-cache@main
@@ -120,26 +86,9 @@ jobs:
   build-and-push-summary:
     runs-on: ubuntu-latest
     steps:
-      -
-        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: "meet,secrets"
       -
         name: Checkout repository
         uses: actions/checkout@v4
-        with:
-          submodules: recursive
-          token: ${{ steps.app-token.outputs.token }}
-      -
-        name: Load sops secrets
-        uses: rouja/actions-sops@main
-        with:
-          secret-file: secrets/numerique-gouv/meet/secrets.enc.env
-          age-key: ${{ secrets.SOPS_PRIVATE }}
       -
         name: Docker meta
         id: meta
@@ -149,7 +98,7 @@ jobs:
       -
         name: Login to DockerHub
         if: github.event_name != 'pull_request'
-        run: echo "$DOCKER_HUB_PASSWORD" | docker login -u "$DOCKER_HUB_USER" --password-stdin
+        run: echo "${{ secrets.DOCKER_HUB_PASSWORD }}" | docker login -u "${{ secrets.DOCKER_HUB_USER }}" --password-stdin
       -
         name: Build and push
         uses: docker/build-push-action@v6
@@ -162,39 +111,20 @@ jobs:
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
 
-
   notify-argocd:
     needs:
       - build-and-push-frontend
       - build-and-push-backend
       - build-and-push-summary
     runs-on: ubuntu-latest
-    if: |
-      github.event_name != 'pull_request'
+    if: github.event_name != 'pull_request'
     steps:
-      -
-        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: "meet,secrets"
       -
         name: Checkout repository
         uses: actions/checkout@v4
-        with:
-          submodules: recursive
-          token: ${{ steps.app-token.outputs.token }}
-      -
-        name: Load sops secrets
-        uses: rouja/actions-sops@main
-        with:
-          secret-file: secrets/numerique-gouv/meet/secrets.enc.env
-          age-key: ${{ secrets.SOPS_PRIVATE }}
       -
         name: Call argocd github webhook
         run: |
-          data='{"ref": "'$GITHUB_REF'","repository": {"html_url":"'$GITHUB_SERVER_URL'/'$GITHUB_REPOSITORY'"}}'
-          sig=$(echo -n ${data} | openssl dgst -sha1 -hmac ''${ARGOCD_WEBHOOK_SECRET}'' | awk '{print "X-Hub-Signature: sha1="$2}')
-          curl -X POST -H 'X-GitHub-Event:push' -H "Content-Type: application/json" -H "${sig}" --data "${data}" $ARGOCD_WEBHOOK_URL
+          data='{"ref": "'$GITHUB_REF'","repository": {"html_url":"'$GITHUB_SERVER_URL'/numerique-gouv/lasuite-deploiement"}}'
+          sig=$(echo -n ${data} | openssl dgst -sha1 -hmac "${{ secrets.ARGOCD_PREPROD_WEBHOOK_SECRET }}" | awk '{print "X-Hub-Signature: sha1="$2}')
+          curl -X POST -H 'X-GitHub-Event:push' -H "Content-Type: application/json" -H "${sig}" --data "${data}" ${{ vars.ARGOCD_PREPROD_WEBHOOK_URL }}

.github/workflows/meet.yml

@@ -175,25 +175,56 @@ jobs:
       - name: Check format
         run: cd src/frontend/ && npm run check
 
+  lint-sdk:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: src/sdk/library
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Check linting
+        run: npm run lint
+
+      - name: Check format
+        run: npm run check
+
+  build-sdk:
+    runs-on: ubuntu-latest
+    needs: lint-sdk
+    defaults:
+      run:
+        working-directory: src/sdk/library
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build SDK
+        run: 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

.github/workflows/release-helm-chart.yaml

@@ -2,30 +2,12 @@ name: Release Chart
 run-name: Release Chart
 
 on:
-  pull_request:
-    branches:
-      - 'main'
   push:
     paths:
-      - ./src/helm/meet/**
+      - src/helm/meet/**
 
 jobs:
-  lint-helmfile:
-    runs-on: ubuntu-latest
-    container:
-      image: ghcr.io/helmfile/helmfile:latest
-    steps:
-      - uses: numerique-gouv/action-helmfile-lint@main
-        with:
-          app-id: ${{ secrets.APP_ID }}
-          age-key: ${{ secrets.SOPS_PRIVATE }}
-          private-key: ${{ secrets.PRIVATE_KEY }}
-          helmfile-src: "src/helm"
-          repositories: "meet,secrets"
-
   release:
-    needs: helmfile-lint
-    if: github.event_name == 'push'
     permissions:
       contents: write
     runs-on: ubuntu-latest
@@ -47,5 +29,5 @@ jobs:
         uses: numerique-gouv/helm-gh-pages@add-overwrite-option
         with:
           charts_dir: ./src/helm
-          linting: off
+          linting: on
           token: ${{ secrets.GITHUB_TOKEN }}

CHANGELOG.md

@@ -1,3 +1,4 @@
+
 # Changelog
 
 All notable changes to this project will be documented in this file.

Makefile

@@ -301,34 +301,8 @@ build-k8s-cluster: ## build the kubernetes cluster using kind
 	./bin/start-kind.sh
 .PHONY: build-k8s-cluster
 
-install-secret: ## install the kubernetes secrets from Vaultwarden
-	if kubectl -n meet get secrets bitwarden-cli-visio; then \
-		echo "Secret already present"; \
-	else \
-		echo "Please provide the following information:"; \
-		read -p "Enter your vaultwarden email login: " LOGIN; \
-		read -p "Enter your vaultwarden password: " PASSWORD; \
-		read -p "Enter your vaultwarden server url: " URL; \
-		echo "\nCreate vaultwarden secret"; \
-		echo "apiVersion: v1" > /tmp/secret.yaml; \
-		echo "kind: Secret" >> /tmp/secret.yaml; \
-		echo "metadata:" >> /tmp/secret.yaml; \
-		echo "  name: bitwarden-cli-visio" >> /tmp/secret.yaml; \
-		echo "  namespace: meet" >> /tmp/secret.yaml; \
-		echo "type: Opaque" >> /tmp/secret.yaml; \
-		echo "stringData:" >> /tmp/secret.yaml; \
-		echo "  BW_HOST: $$URL" >> /tmp/secret.yaml; \
-		echo "  BW_PASSWORD: $$PASSWORD" >> /tmp/secret.yaml; \
-		echo "  BW_USERNAME: $$LOGIN" >> /tmp/secret.yaml; \
-		kubectl -n meet apply -f /tmp/secret.yaml;\
-		rm -f /tmp/secret.yaml; \
-		helm repo add external-secrets https://charts.external-secrets.io; \
-		helm upgrade --install external-secrets \
-      external-secrets/external-secrets \
-       -n meet \
-       --create-namespace \
-       --set installCRDs=true; \
-	fi
+install-external-secrets: ## install the kubernetes secrets from Vaultwarden
+	./bin/install-external-secrets.sh
 .PHONY: build-k8s-cluster
 
 start-tilt: ## start the kubernetes cluster using kind

bin/Tiltfile

@@ -1,6 +1,10 @@
 load('ext://uibutton', 'cmd_button', 'bool_input', 'location')
 load('ext://namespace', 'namespace_create', 'namespace_inject')
 namespace_create('meet')
+
+def clean_old_images(image_name):
+    local('docker images -q %s | tail -n +2 | xargs -r docker rmi' % image_name)
+
 docker_build(
     'localhost:5001/meet-backend:latest',
     context='..',
@@ -15,6 +19,7 @@ docker_build(
         )
     ]
 )
+clean_old_images('localhost:5001/meet-backend')
 
 docker_build(
     'localhost:5001/meet-frontend:latest',
@@ -26,6 +31,7 @@ docker_build(
         sync('../src/frontend', '/home/frontend'),
     ]
 )
+clean_old_images('localhost:5001/meet-frontend')
 
 docker_build(
     'localhost:5001/meet-summary:latest',
@@ -37,6 +43,7 @@ docker_build(
         sync('../src/summary', '/home/summary'),
     ]
 )
+clean_old_images('localhost:5001/meet-summary')
 
 k8s_yaml(local('cd ../src/helm && helmfile -n meet -e ${DEV_ENV:-dev} template .'))
 

bin/install-external-secrets.sh

@@ -0,0 +1,90 @@
+#!/usr/bin/env bash
+set -o errexit
+
+CURRENT_DIR=$(pwd)
+NAMESPACE=${1:-meet}
+SECRET_NAME=${2:-bitwarden-cli-meet}
+TEMP_SECRET_FILE=$(mktemp)
+
+
+cleanup() {
+    rm -f "${TEMP_SECRET_FILE}"
+}
+trap cleanup EXIT
+
+
+# Check if kubectl is available
+check_prerequisites() {
+    if ! command -v kubectl &> /dev/null; then
+        echo "Error: kubectl is not installed or not in PATH"
+        exit 1
+    fi
+}
+
+# Check if secret already exists
+check_secret_exists() {
+    kubectl -n "${NAMESPACE}" get secrets "${SECRET_NAME}" &> /dev/null
+}
+
+
+# Collect user input securely
+get_user_input() {
+    echo "Please provide the following information:"
+    read -p "Enter your Vaultwarden email login: " LOGIN
+    read -s -p "Enter your Vaultwarden password: " PASSWORD
+    echo
+    read -p "Enter your Vaultwarden server url: " URL
+}
+
+# Create and apply the secret
+create_secret() {
+    cat > "${TEMP_SECRET_FILE}" << EOF
+apiVersion: v1
+kind: Secret
+metadata:
+  name: ${SECRET_NAME}
+  namespace: ${NAMESPACE}
+type: Opaque
+stringData:
+  BW_HOST: ${URL}
+  BW_PASSWORD: ${PASSWORD}
+  BW_USERNAME: ${LOGIN}
+EOF
+
+    kubectl -n "${NAMESPACE}" apply -f "${TEMP_SECRET_FILE}"
+}
+
+# Install external-secrets using Helm
+install_external_secrets() {
+    if ! kubectl get ns external-secrets &>/dev/null; then
+        echo "Installing external-secrets…"
+        helm repo add external-secrets https://charts.external-secrets.io
+        helm upgrade --install external-secrets \
+            external-secrets/external-secrets \
+            -n external-secrets \
+            --create-namespace \
+            --set installCRDs=true
+    else
+        echo "External secrets already deployed"
+    fi
+}
+
+main() {
+    check_prerequisites
+
+    if check_secret_exists; then
+        echo "Secret '${SECRET_NAME}' already present in namespace '${NAMESPACE}'"
+        exit 0
+    fi
+
+    echo -e ${TEMP_SECRET_FILE}
+
+    get_user_input
+    echo -e "\nCreating Vaultwarden secret…"
+    create_secret
+    install_external_secrets
+
+    echo "Secret installation completed successfully"
+}
+
+main "$@"

bin/install-hooks.sh

@@ -1,4 +1,4 @@
-#!/bin/bash
+#!/usr/bin/env bash
 
 mkdir -p "$(dirname -- "${BASH_SOURCE[0]}")/../.git/hooks/"
 PRE_COMMIT_FILE="$(dirname -- "${BASH_SOURCE[0]}")/../.git/hooks/pre-commit"

bin/start-kind.sh

@@ -1,3 +1,3 @@
-#!/bin/bash
+#!/usr/bin/env bash
 
 curl https://raw.githubusercontent.com/numerique-gouv/tools/refs/heads/main/kind/create_cluster.sh | bash -s -- meet

bin/update-git-submodule.sh

@@ -1,4 +1,4 @@
-#!/bin/bash
+#!/usr/bin/env bash
 
 git submodule update --init --recursive
 git submodule foreach 'git fetch origin; git checkout $(git rev-parse --abbrev-ref HEAD); git reset --hard origin/$(git rev-parse --abbrev-ref HEAD); git submodule update --recursive; git clean -dfx'

bin/update-keys.sh

@@ -1,3 +1,3 @@
-#!/bin/bash
+#!/usr/bin/env bash
 
 find . -name "*.enc.*" -exec sops updatekeys -y {} \;

bin/validate-helm-configuration.sh

@@ -1,4 +1,4 @@
-#!/bin/bash
+#!/usr/bin/env bash
 
 set -e
 

renovate.json

@@ -14,7 +14,7 @@
       "groupName": "ignored js dependencies",
       "matchManagers": ["npm"],
       "matchPackageNames": [
-        "eslint"
+        "eslint", "react", "react-dom", "@types/react-dom", "@types/react", "react-i18next"
       ]
     }
   ]

src/backend/core/migrations/0010_alter_resourceaccess_options_alter_user_options.py

@@ -0,0 +1,21 @@
+# Generated by Django 5.1.4 on 2025-01-13 12:25
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('core', '0009_alter_recording_status'),
+    ]
+
+    operations = [
+        migrations.AlterModelOptions(
+            name='resourceaccess',
+            options={'ordering': ('-created_at',), 'verbose_name': 'Resource access', 'verbose_name_plural': 'Resource accesses'},
+        ),
+        migrations.AlterModelOptions(
+            name='user',
+            options={'ordering': ('-created_at',), 'verbose_name': 'user', 'verbose_name_plural': 'users'},
+        ),
+    ]

src/backend/meet/settings.py

@@ -459,13 +459,9 @@ class Base(Configuration):
 
     # Marketing and communication settings
     SIGNUP_NEW_USER_TO_MARKETING_EMAIL = values.BooleanValue(
-        False,
-        environ_name="SIGNUP_NEW_USERS_TO_NEWSLETTER",
+        False,  # When enabled, new users are automatically added to mailing list.
+        environ_name="SIGNUP_NEW_USER_TO_MARKETING_EMAIL",
         environ_prefix=None,
-        help_text=(
-            "When enabled, new users are automatically added to mailing list "
-            "for product updates, marketing communications, and customized emails. "
-        ),
     )
     MARKETING_SERVICE_CLASS = values.Value(
         "core.services.marketing_service.BrevoMarketingService",

src/backend/pyproject.toml

@@ -7,7 +7,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "meet"
-version = "0.1.12"
+version = "0.1.14"
 authors = [{ "name" = "DINUM", "email" = "dev@mail.numerique.gouv.fr" }]
 classifiers = [
     "Development Status :: 5 - Production/Stable",
@@ -25,7 +25,7 @@ license = { file = "LICENSE" }
 readme = "README.md"
 requires-python = ">=3.10"
 dependencies = [
-    "boto3==1.35.90",
+    "boto3==1.36.6",
     "Brotli==1.1.0",
     "brevo-python==1.1.2",
     "celery[redis]==5.4.0",
@@ -37,7 +37,7 @@ dependencies = [
     "django-redis==5.4.0",
     "django-storages[s3]==1.14.4",
     "django-timezone-field>=5.1",
-    "django==5.1.4",
+    "django==5.1.5",
     "djangorestframework==3.15.2",
     "drf_spectacular==0.28.0",
     "dockerflow==2024.4.2",
@@ -48,11 +48,11 @@ dependencies = [
     "june-analytics-python==2.3.0",
     "markdown==3.7",
     "nested-multipart-parser==1.5.0",
-    "psycopg[binary]==3.2.3",
+    "psycopg[binary]==3.2.4",
     "PyJWT==2.10.1",
     "python-frontmatter==1.1.0",
     "requests==2.32.3",
-    "sentry-sdk==2.19.2",
+    "sentry-sdk==2.20.0",
     "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.3",
+    "pyfakefs==5.7.4",
     "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.3",
-    "ruff==0.8.4",
+    "responses==0.25.6",
+    "ruff==0.9.3",
     "types-requests==2.32.0.20241016",
 ]
 

src/frontend/Dockerfile

@@ -34,6 +34,11 @@ RUN npm run build
 # ---- Front-end image ----
 FROM nginxinc/nginx-unprivileged:1.26-alpine AS frontend-production
 
+USER root
+RUN apk update && apk upgrade libssl3 libcrypto3
+
+USER nginx
+
 # Un-privileged user running the application
 ARG DOCKER_USER
 USER ${DOCKER_USER}

src/frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "meet",
   "private": true,
-  "version": "0.1.12",
+  "version": "0.1.14",
   "type": "module",
   "scripts": {
     "dev": "panda codegen && vite",
@@ -13,48 +13,48 @@
     "check": "prettier --check ./src"
   },
   "dependencies": {
-    "@livekit/components-react": "2.6.9",
+    "@livekit/components-react": "2.8.1",
     "@livekit/components-styles": "1.1.4",
-    "@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",
+    "@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",
     "crisp-sdk-web": "1.0.25",
-    "hoofd": "1.7.1",
-    "i18next": "24.0.2",
-    "i18next-browser-languagedetector": "8.0.0",
-    "i18next-parser": "9.0.2",
+    "hoofd": "1.7.3",
+    "i18next": "24.2.2",
+    "i18next-browser-languagedetector": "8.0.2",
+    "i18next-parser": "9.1.0",
     "i18next-resources-to-backend": "1.2.1",
-    "livekit-client": "2.6.3",
-    "posthog-js": "1.188.0",
+    "livekit-client": "2.8.1",
+    "posthog-js": "1.210.2",
     "react": "18.3.1",
-    "react-aria-components": "1.5.0",
+    "react-aria-components": "1.6.0",
     "react-dom": "18.3.1",
     "react-i18next": "15.1.1",
     "use-sound": "4.0.3",
-    "valtio": "2.1.2",
-    "wouter": "3.3.5"
+    "valtio": "2.1.3",
+    "wouter": "3.4.0"
   },
   "devDependencies": {
-    "@pandacss/dev": "0.48.0",
-    "@tanstack/eslint-plugin-query": "5.61.3",
-    "@tanstack/react-query-devtools": "5.61.3",
-    "@types/node": "22.9.3",
+    "@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/react": "18.3.12",
     "@types/react-dom": "18.3.1",
-    "@typescript-eslint/eslint-plugin": "8.15.0",
-    "@typescript-eslint/parser": "8.15.0",
-    "@vitejs/plugin-react": "4.3.3",
+    "@typescript-eslint/eslint-plugin": "8.21.0",
+    "@typescript-eslint/parser": "8.21.0",
+    "@vitejs/plugin-react": "4.3.4",
     "eslint": "8.57.0",
-    "eslint-config-prettier": "9.1.0",
+    "eslint-config-prettier": "10.0.1",
     "eslint-plugin-jsx-a11y": "6.10.2",
-    "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"
+    "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"
   }
 }

src/frontend/panda.config.ts

@@ -121,6 +121,32 @@ const config: Config = {
         '50%': { opacity: '0.65' },
         '100%': { opacity: '1' },
       },
+      rotate: {
+        '0%': {
+          transform: 'rotate(0deg)',
+        },
+        '100%': {
+          transform: 'rotate(360deg)',
+        },
+      },
+      prixClipFix: {
+        '0%': {
+          clipPath: 'polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)',
+        },
+        '25%': {
+          clipPath: 'polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)',
+        },
+        '50%': {
+          clipPath:
+            'polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)',
+        },
+        '75%': {
+          clipPath: 'polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)',
+        },
+        '100%': {
+          clipPath: 'polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)',
+        },
+      },
     },
     tokens: defineTokens({
       /* we take a few things from the panda preset but for now we clear out some stuff.

src/frontend/src/App.tsx

@@ -5,7 +5,7 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { QueryClientProvider } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 import { useLang } from 'hoofd'
-import { Switch, Route } from 'wouter'
+import { Switch, Route, useLocation } from 'wouter'
 import { I18nProvider } from 'react-aria-components'
 import { Layout } from './layout/Layout'
 import { NotFoundScreen } from './components/NotFoundScreen'
@@ -13,10 +13,35 @@ import { routes } from './routes'
 import './i18n/init'
 import { queryClient } from '@/api/queryClient'
 import { AppInitialization } from '@/components/AppInitialization'
+import { SdkCreateButton } from './features/sdk/routes/CreateButton'
+
+const SDK_BASE_ROUTE = '/sdk'
 
 function App() {
   const { i18n } = useTranslation()
   useLang(i18n.language)
+
+  const [location] = useLocation()
+  const isSDKRoute = location.startsWith(SDK_BASE_ROUTE)
+
+  if (isSDKRoute) {
+    return (
+      <QueryClientProvider client={queryClient}>
+        <Suspense fallback={null}>
+          <I18nProvider locale={i18n.language}>
+            <Switch>
+              <Route path={SDK_BASE_ROUTE} nest>
+                <Route path="/create-button">
+                  <SdkCreateButton />
+                </Route>
+              </Route>
+            </Switch>
+          </I18nProvider>
+        </Suspense>
+      </QueryClientProvider>
+    )
+  }
+
   return (
     <QueryClientProvider client={queryClient}>
       <AppInitialization />

src/frontend/src/assets/VisioIcon.tsx

@@ -0,0 +1,24 @@
+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>
+  )
+}

src/frontend/src/components/NotFoundScreen.tsx

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

src/frontend/src/features/auth/api/fetchUser.ts

@@ -10,7 +10,13 @@ import { attemptSilentLogin, canAttemptSilentLogin } from '../utils/silentLogin'
  * Here our wrapper just returns false in that case, without triggering an error:
  * this is done to prevent unnecessary query retries with react query
  */
-export const fetchUser = (): Promise<ApiUser | false> => {
+export const fetchUser = (
+  opts: {
+    attemptSilent?: boolean
+  } = {
+    attemptSilent: true,
+  }
+): Promise<ApiUser | false> => {
   return new Promise((resolve, reject) => {
     fetchApi<ApiUser>('/users/me')
       .then(resolve)
@@ -19,7 +25,7 @@ export const fetchUser = (): Promise<ApiUser | false> => {
         if (error instanceof ApiError && error.statusCode === 401) {
           // make sure to not resolve the promise while trying to silent login
           // so that consumers of fetchUser don't think the work already ended
-          if (canAttemptSilentLogin()) {
+          if (opts.attemptSilent && canAttemptSilentLogin()) {
             attemptSilentLogin(300)
           } else {
             resolve(false)

src/frontend/src/features/auth/api/useUser.tsx

@@ -11,10 +11,15 @@ import { initializeSupportSession } from '@/features/support/hooks/useSupport'
  *
  * `isLoggedIn` is undefined while query is loading and true/false when it's done
  */
-export const useUser = () => {
+export const useUser = (
+  opts: {
+    fetchUserOptions?: Parameters<typeof fetchUser>[0]
+  } = {}
+) => {
   const query = useQuery({
+    // eslint-disable-next-line @tanstack/query/exhaustive-deps
     queryKey: [keys.user],
-    queryFn: fetchUser,
+    queryFn: () => fetchUser(opts.fetchUserOptions),
     staleTime: Infinity,
   })
 

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

@@ -9,15 +9,16 @@ 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'
 import { MoreLink } from '@/features/home/components/MoreLink'
-import { ReactNode, useState } from 'react'
+import { ReactNode, useEffect, useState } from 'react'
 
 import { css } from '@/styled-system/css'
 import { menuRecipe } from '@/primitives/menuRecipe.ts'
+import { usePersistentUserChoices } from '@/features/rooms/livekit/hooks/usePersistentUserChoices'
+import { SdkReverseClient } from '@/features/sdk/SdkReverseClient'
 
 const Columns = ({ children }: { children?: ReactNode }) => {
   return (
@@ -32,10 +33,10 @@ const Columns = ({ children }: { children?: ReactNode }) => {
         justifyContent: 'normal',
         padding: '0 1rem',
         width: 'calc(100% - 2rem)',
-        '@media(prefers-reduced-motion: reduce)': {
+        _motionReduce: {
           opacity: 1,
         },
-        '@media(prefers-reduced-motion: no-preference)': {
+        _motionSafe: {
           opacity: 0,
           animation: '.5s ease-in fade 0s forwards',
         },
@@ -156,6 +157,18 @@ 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>

src/frontend/src/features/notifications/MainNotificationToast.tsx

@@ -1,16 +1,99 @@
-import { useEffect } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useRoomContext } from '@livekit/components-react'
-import { Participant, RoomEvent } from 'livekit-client'
+import { Participant, RemoteParticipant, RoomEvent } from 'livekit-client'
 import { ToastProvider, toastQueue } from './components/ToastProvider'
 import { NotificationType } from './NotificationType'
+import { NotificationDuration } from './NotificationDuration'
 import { Div } from '@/primitives'
-import { isMobileBrowser } from '@livekit/components-core'
+import { ChatMessage, isMobileBrowser } from '@livekit/components-core'
 import { useNotificationSound } from '@/features/notifications/hooks/useSoundNotification'
+import { Reaction } from '@/features/rooms/livekit/components/controls/ReactionsToggle'
+import {
+  ANIMATION_DURATION,
+  ReactionPortals,
+} from '@/features/rooms/livekit/components/ReactionPortal'
+import { useTranslation } from 'react-i18next'
 
 export const MainNotificationToast = () => {
   const room = useRoomContext()
   const { triggerNotificationSound } = useNotificationSound()
 
+  const [reactions, setReactions] = useState<Reaction[]>([])
+  const instanceIdRef = useRef(0)
+
+  useEffect(() => {
+    const handleChatMessage = (
+      chatMessage: ChatMessage,
+      participant?: Participant | undefined
+    ) => {
+      if (!participant || participant.isLocal) return
+      triggerNotificationSound(NotificationType.MessageReceived)
+      toastQueue.add(
+        {
+          participant: participant,
+          message: chatMessage.message,
+          type: NotificationType.MessageReceived,
+        },
+        { timeout: NotificationDuration.MESSAGE }
+      )
+    }
+    room.on(RoomEvent.ChatMessage, handleChatMessage)
+    return () => {
+      room.off(RoomEvent.ChatMessage, handleChatMessage)
+    }
+  }, [room, triggerNotificationSound])
+
+  const handleEmoji = (emoji: string, participant: Participant) => {
+    if (!emoji) return
+    const id = instanceIdRef.current++
+    setReactions((prev) => [
+      ...prev,
+      {
+        id,
+        emoji,
+        participant,
+      },
+    ])
+    setTimeout(() => {
+      setReactions((prev) => prev.filter((instance) => instance.id !== id))
+    }, ANIMATION_DURATION)
+  }
+
+  useEffect(() => {
+    const handleDataReceived = (
+      payload: Uint8Array,
+      participant?: RemoteParticipant
+    ) => {
+      const decoder = new TextDecoder()
+      const notificationPayload = JSON.parse(decoder.decode(payload))
+      const notificationType = notificationPayload.type
+      const data = notificationPayload.data
+
+      if (!participant) return
+
+      switch (notificationType) {
+        case NotificationType.ParticipantMuted:
+          toastQueue.add(
+            {
+              participant,
+              type: NotificationType.ParticipantMuted,
+            },
+            { timeout: NotificationDuration.ALERT }
+          )
+          break
+        case NotificationType.ReactionReceived:
+          handleEmoji(data?.emoji, participant)
+          break
+        default:
+          return
+      }
+    }
+    room.on(RoomEvent.DataReceived, handleDataReceived)
+    return () => {
+      room.off(RoomEvent.DataReceived, handleDataReceived)
+    }
+  }, [room])
+
   useEffect(() => {
     const showJoinNotification = (participant: Participant) => {
       if (isMobileBrowser()) {
@@ -23,7 +106,7 @@ export const MainNotificationToast = () => {
           type: NotificationType.ParticipantJoined,
         },
         {
-          timeout: 5000,
+          timeout: NotificationDuration.PARTICIPANT_JOINED,
         }
       )
     }
@@ -82,7 +165,7 @@ export const MainNotificationToast = () => {
             participant,
             type: NotificationType.HandRaised,
           },
-          { timeout: 5000 }
+          { timeout: NotificationDuration.HAND_RAISED }
         )
       }
     }
@@ -104,9 +187,14 @@ export const MainNotificationToast = () => {
     }
   }, [room])
 
+  // Without this line, when the component first renders,
+  // the 'notifications' namespace might not be loaded yet
+  useTranslation(['notifications'])
+
   return (
     <Div position="absolute" bottom={0} right={5} zIndex={1000}>
       <ToastProvider />
+      <ReactionPortals reactions={reactions} />
     </Div>
   )
 }

src/frontend/src/features/notifications/NotificationDuration.ts

@@ -0,0 +1,15 @@
+export enum ToastDuration {
+  SHORT = 3000,
+  MEDIUM = 4000,
+  LONG = 5000,
+  EXTRA_LONG = 7000,
+}
+
+export const NotificationDuration = {
+  ALERT: ToastDuration.SHORT,
+  MESSAGE: ToastDuration.LONG,
+  PARTICIPANT_JOINED: ToastDuration.LONG,
+  HAND_RAISED: ToastDuration.LONG,
+  LOWER_HAND: ToastDuration.EXTRA_LONG,
+  REACTION_RECEIVED: ToastDuration.SHORT,
+} as const

src/frontend/src/features/notifications/NotificationPayload.ts

@@ -0,0 +1,8 @@
+import { NotificationType } from './NotificationType'
+
+export interface NotificationPayload {
+  type: NotificationType
+  data?: {
+    emoji?: string
+  }
+}

src/frontend/src/features/notifications/NotificationType.ts

@@ -1,5 +1,8 @@
 export enum NotificationType {
   ParticipantJoined = 'participantJoined',
   HandRaised = 'handRaised',
-  // todo - implement message received notification
+  ParticipantMuted = 'participantMuted',
+  MessageReceived = 'messageReceived',
+  LowerHand = 'lowerHand',
+  ReactionReceived = 'reactionReceived',
 }

src/frontend/src/features/notifications/components/ToastLowerHand.tsx

@@ -0,0 +1,45 @@
+import { useToast } from '@react-aria/toast'
+import { useRef } from 'react'
+
+import { StyledToastContainer, ToastProps } from './Toast'
+import { HStack } from '@/styled-system/jsx'
+import { useTranslation } from 'react-i18next'
+import { Button } from '@/primitives'
+
+export function ToastLowerHand({ state, ...props }: ToastProps) {
+  const { t } = useTranslation('notifications', { keyPrefix: 'lowerHand' })
+  const ref = useRef(null)
+  const { toastProps, contentProps } = useToast(props, state, ref)
+  const toast = props.toast
+
+  const handleDismiss = () => {
+    // Clear onClose handler to prevent lowering the hand when user dismisses
+    toast.onClose = undefined
+    state.close(toast.key)
+  }
+
+  return (
+    <StyledToastContainer {...toastProps} ref={ref}>
+      <HStack
+        justify="center"
+        alignItems="center"
+        {...contentProps}
+        padding={14}
+        gap={0}
+      >
+        <p>{t('auto')}</p>
+        <Button
+          size="sm"
+          variant="text"
+          style={{
+            color: '#60a5fa',
+            marginLeft: '0.5rem',
+          }}
+          onPress={() => handleDismiss()}
+        >
+          {t('dismiss')}
+        </Button>
+      </HStack>
+    </StyledToastContainer>
+  )
+}

src/frontend/src/features/notifications/components/ToastMessageReceived.tsx

@@ -0,0 +1,74 @@
+import { useToast } from '@react-aria/toast'
+import { useEffect, useRef } from 'react'
+
+import { StyledToastContainer, ToastProps } from './Toast'
+import { Text } from '@/primitives'
+import { RiMessage2Line } from '@remixicon/react'
+import { useSidePanel } from '@/features/rooms/livekit/hooks/useSidePanel'
+import { Button as RACButton } from 'react-aria-components'
+import { css } from '@/styled-system/css'
+import { useTranslation } from 'react-i18next'
+
+export function ToastMessageReceived({ state, ...props }: ToastProps) {
+  const { t } = useTranslation('notifications')
+  const ref = useRef(null)
+  const { toastProps } = useToast(props, state, ref)
+
+  const toast = props.toast
+
+  const participant = toast.content.participant
+  const message = toast.content.message
+
+  const { isChatOpen, toggleChat } = useSidePanel()
+
+  useEffect(() => {
+    if (isChatOpen) {
+      state.close(toast.key)
+    }
+  }, [isChatOpen, toast, state])
+
+  if (isChatOpen) return null
+
+  return (
+    <StyledToastContainer {...toastProps} ref={ref}>
+      <RACButton onPress={() => toggleChat()} aria-label={t('openChat')}>
+        <div
+          className={css({
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'start',
+            padding: '14px',
+            gap: '0.75rem',
+            textAlign: 'start',
+            width: '150px',
+            md: {
+              width: '260px',
+            },
+          })}
+        >
+          <div
+            className={css({
+              display: 'flex',
+              flexDirection: 'row',
+              justifyContent: 'start',
+              gap: '0.5rem',
+            })}
+          >
+            <RiMessage2Line
+              size={20}
+              className={css({
+                color: 'primary.300',
+                marginTop: '3px',
+              })}
+              aria-hidden="true"
+            />
+            <span>{participant.name}</span>
+          </div>
+          <Text margin={false} centered={false} wrap={'pretty'} fullWidth>
+            {message}
+          </Text>
+        </div>
+      </RACButton>
+    </StyledToastContainer>
+  )
+}

src/frontend/src/features/notifications/components/ToastMuted.tsx

@@ -0,0 +1,26 @@
+import { useToast } from '@react-aria/toast'
+import { useRef } from 'react'
+
+import { StyledToastContainer, ToastProps } from './Toast'
+import { HStack } from '@/styled-system/jsx'
+import { useTranslation } from 'react-i18next'
+
+export function ToastMuted({ state, ...props }: ToastProps) {
+  const { t } = useTranslation('notifications')
+  const ref = useRef(null)
+  const { toastProps, contentProps } = useToast(props, state, ref)
+  const participant = props.toast.content.participant
+  return (
+    <StyledToastContainer {...toastProps} ref={ref}>
+      <HStack
+        justify="center"
+        alignItems="center"
+        {...contentProps}
+        padding={14}
+        gap={0}
+      >
+        {t('muted', { name: participant.name })}
+      </HStack>
+    </StyledToastContainer>
+  )
+}

src/frontend/src/features/notifications/components/ToastRegion.tsx

@@ -1,30 +1,52 @@
 import { AriaToastRegionProps, useToastRegion } from '@react-aria/toast'
-import type { ToastState } from '@react-stately/toast'
+import type { QueuedToast, ToastState } from '@react-stately/toast'
 import { Toast } from './Toast'
 import { useRef } from 'react'
 import { NotificationType } from '../NotificationType'
 import { ToastJoined } from './ToastJoined'
 import { ToastData } from './ToastProvider'
-import { ToastRaised } from '@/features/notifications/components/ToastRaised.tsx'
+import { ToastRaised } from './ToastRaised'
+import { ToastMuted } from './ToastMuted'
+import { ToastMessageReceived } from './ToastMessageReceived'
+import { ToastLowerHand } from './ToastLowerHand'
 
 interface ToastRegionProps extends AriaToastRegionProps {
   state: ToastState<ToastData>
 }
 
+const renderToast = (
+  toast: QueuedToast<ToastData>,
+  state: ToastState<ToastData>
+) => {
+  switch (toast.content?.type) {
+    case NotificationType.ParticipantJoined:
+      return <ToastJoined key={toast.key} toast={toast} state={state} />
+
+    case NotificationType.HandRaised:
+      return <ToastRaised key={toast.key} toast={toast} state={state} />
+
+    case NotificationType.ParticipantMuted:
+      return <ToastMuted key={toast.key} toast={toast} state={state} />
+
+    case NotificationType.MessageReceived:
+      return (
+        <ToastMessageReceived key={toast.key} toast={toast} state={state} />
+      )
+
+    case NotificationType.LowerHand:
+      return <ToastLowerHand key={toast.key} toast={toast} state={state} />
+
+    default:
+      return <Toast key={toast.key} toast={toast} state={state} />
+  }
+}
+
 export function ToastRegion({ state, ...props }: ToastRegionProps) {
   const ref = useRef(null)
   const { regionProps } = useToastRegion(props, state, ref)
   return (
     <div {...regionProps} ref={ref} className="toast-region">
-      {state.visibleToasts.map((toast) => {
-        if (toast.content?.type === NotificationType.ParticipantJoined) {
-          return <ToastJoined key={toast.key} toast={toast} state={state} />
-        }
-        if (toast.content?.type === NotificationType.HandRaised) {
-          return <ToastRaised key={toast.key} toast={toast} state={state} />
-        }
-        return <Toast key={toast.key} toast={toast} state={state} />
-      })}
+      {state.visibleToasts.map((toast) => renderToast(toast, state))}
     </div>
   )
 }

src/frontend/src/features/notifications/utils.ts

@@ -0,0 +1,28 @@
+import { toastQueue } from './components/ToastProvider'
+import { NotificationType } from './NotificationType'
+import { NotificationDuration } from './NotificationDuration'
+import { Participant } from 'livekit-client'
+
+export const showLowerHandToast = (
+  participant: Participant,
+  onClose: () => void
+) => {
+  toastQueue.add(
+    {
+      participant,
+      type: NotificationType.LowerHand,
+    },
+    {
+      timeout: NotificationDuration.LOWER_HAND,
+      onClose,
+    }
+  )
+}
+
+export const closeLowerHandToasts = () => {
+  toastQueue.visibleToasts.forEach((toast) => {
+    if (toast.content.type === NotificationType.LowerHand) {
+      toastQueue.close(toast.key)
+    }
+  })
+}

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, type LocalUserChoices } from '@livekit/components-react'
+import { LiveKitRoom } from '@livekit/components-react'
 import { Room, RoomOptions } from 'livekit-client'
 import { keys } from '@/api/queryKeys'
 import { queryClient } from '@/api/queryClient'
@@ -12,10 +12,11 @@ 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 { BackgroundProcessorFactory } from '../livekit/components/blur'
 
 export const Conference = ({
   roomId,
@@ -31,7 +32,7 @@ export const Conference = ({
   useEffect(() => {
     posthog.capture('visit-room', { slug: roomId })
   }, [roomId])
-  const fetchKey = [keys.room, roomId, userConfig.username]
+  const fetchKey = [keys.room, roomId]
 
   const {
     mutateAsync: createRoom,
@@ -48,6 +49,7 @@ export const Conference = ({
     isError: isFetchError,
     data,
   } = useQuery({
+    /* eslint-disable @tanstack/query/exhaustive-deps */
     queryKey: fetchKey,
     staleTime: 6 * 60 * 60 * 1000, // By default, LiveKit access tokens expire 6 hours after generation
     initialData: initialRoomData,
@@ -111,7 +113,13 @@ export const Conference = ({
           token={data?.livekit?.token}
           connect={true}
           audio={userConfig.audioEnabled}
-          video={userConfig.videoEnabled}
+          video={
+            userConfig.videoEnabled && {
+              processor: BackgroundProcessorFactory.deserializeProcessor(
+                userConfig.processorSerialized
+              ),
+            }
+          }
           connectOptions={connectOptions}
           className={css({
             backgroundColor: 'primaryDark.50 !important',

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

@@ -1,30 +1,390 @@
 import { useTranslation } from 'react-i18next'
-import { PreJoin, type LocalUserChoices } from '@livekit/components-react'
+import { usePreviewTracks } from '@livekit/components-react'
+import { css } from '@/styled-system/css'
 import { Screen } from '@/layout/Screen'
-import { CenteredContent } from '@/layout/CenteredContent'
-import { useUser } from '@/features/auth'
+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 { Button, Dialog, Text, Form } from '@/primitives'
+import { HStack, VStack } from '@/styled-system/jsx'
+import { LocalUserChoices } from '../routes/Room'
+import { Heading } from 'react-aria-components'
+import { RiImageCircleAiFill } from '@remixicon/react'
+import {
+  EffectsConfiguration,
+  EffectsConfigurationProps,
+} from '../livekit/components/effects/EffectsConfiguration'
+import { usePersistentUserChoices } from '../livekit/hooks/usePersistentUserChoices'
+import { BackgroundProcessorFactory } from '../livekit/components/blur'
+import { isMobileBrowser } from '@livekit/components-core'
+
+const onError = (e: Error) => console.error('ERROR', e)
+
+const Effects = ({
+  videoTrack,
+  onSubmit,
+}: Pick<EffectsConfigurationProps, 'videoTrack' | 'onSubmit'>) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'join.effects' })
+  const [isDialogOpen, setIsDialogOpen] = useState(false)
+  const openDialog = () => setIsDialogOpen(true)
+
+  if (!BackgroundProcessorFactory.isSupported() || isMobileBrowser()) {
+    return
+  }
+
+  return (
+    <>
+      <Dialog
+        isOpen={isDialogOpen}
+        onOpenChange={setIsDialogOpen}
+        role="dialog"
+        type="flex"
+        size="large"
+      >
+        <Heading
+          slot="title"
+          level={1}
+          className={css({
+            textStyle: 'h1',
+            marginBottom: '0.25rem',
+          })}
+        >
+          {t('title')}
+        </Heading>
+        <Text
+          variant="subTitle"
+          className={css({
+            marginBottom: '1.5rem',
+          })}
+        >
+          {t('subTitle')}
+        </Text>
+        <EffectsConfiguration videoTrack={videoTrack} onSubmit={onSubmit} />
+      </Dialog>
+      <div
+        className={css({
+          position: 'absolute',
+          right: 0,
+          bottom: '0',
+          padding: '1rem',
+          zIndex: '1',
+        })}
+      >
+        <Button
+          variant="whiteCircle"
+          onPress={openDialog}
+          tooltip={t('description')}
+          aria-label={t('description')}
+        >
+          <RiImageCircleAiFill size={24} />
+        </Button>
+      </div>
+      <div
+        className={css({
+          position: 'absolute',
+          left: 0,
+          right: 0,
+          bottom: 0,
+          height: '20%',
+          backgroundImage:
+            'linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(255,255,255,0) 100%)',
+          borderBottomRadius: '1rem',
+        })}
+      />
+    </>
+  )
+}
 
 export const Join = ({
   onSubmit,
 }: {
   onSubmit: (choices: LocalUserChoices) => void
 }) => {
-  const { t } = useTranslation('rooms')
-  const { user } = useUser()
+  const { t } = useTranslation('rooms', { keyPrefix: 'join' })
+
+  const {
+    userChoices: initialUserChoices,
+    saveAudioInputDeviceId,
+    saveVideoInputDeviceId,
+    saveUsername,
+    saveProcessorSerialized,
+  } = usePersistentUserChoices({})
+
+  const [audioEnabled, setAudioEnabled] = useState(true)
+  const [videoEnabled, setVideoEnabled] = useState(true)
+  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(
+    BackgroundProcessorFactory.deserializeProcessor(
+      initialUserChoices.processorSerialized
+    )
+  )
+
+  useEffect(() => {
+    saveAudioInputDeviceId(audioDeviceId)
+  }, [audioDeviceId, saveAudioInputDeviceId])
+
+  useEffect(() => {
+    saveVideoInputDeviceId(videoDeviceId)
+  }, [videoDeviceId, saveVideoInputDeviceId])
+
+  useEffect(() => {
+    saveUsername(username)
+  }, [username, saveUsername])
+
+  useEffect(() => {
+    saveProcessorSerialized(processor?.serialize())
+  }, [
+    processor,
+    saveProcessorSerialized,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    JSON.stringify(processor?.serialize()),
+  ])
+
+  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(),
+    })
+  }
+
+  // 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])
 
   return (
-    <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 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: '100%',
+                    height: '100%',
+                    objectFit: 'cover',
+                    transform: 'rotateY(180deg)',
+                    opacity: 0,
+                    transition: 'opacity 0.3s ease-in-out',
+                    borderRadius: '1rem',
+                  })}
+                  disablePictureInPicture
+                  disableRemotePlayback
+                />
+              ) : (
+                <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>
+              )}
+              <Effects videoTrack={videoTrack} onSubmit={setProcessor} />
+            </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>
   )
 }

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

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next'
 import { styled, VStack } from '@/styled-system/jsx'
 import { usePostHog } from 'posthog-js/react'
 import { PostHog } from 'posthog-js'
+import { Button as RACButton } from 'react-aria-components'
 
 const Card = styled('div', {
   base: {
@@ -170,7 +171,7 @@ const RateQuality = ({
       <H lvl={3}>{t('question')}</H>
       <Bar>
         {[...Array(maxRating)].map((_, index) => (
-          <Button
+          <RACButton
             key={index}
             onPress={() => handleRatingClick(index + 1)}
             className={ratingButtonRecipe({
@@ -179,7 +180,7 @@ const RateQuality = ({
             })}
           >
             {index + 1}
-          </Button>
+          </RACButton>
         ))}
       </Bar>
       <div

src/frontend/src/features/rooms/livekit/api/muteParticipant.ts

@@ -3,11 +3,27 @@ import Source = Track.Source
 import { fetchServerApi } from './fetchServerApi'
 import { buildServerApiUrl } from './buildServerApiUrl'
 import { useRoomData } from '../hooks/useRoomData'
+import { useRoomContext } from '@livekit/components-react'
+import { NotificationType } from '@/features/notifications/NotificationType'
+import { NotificationPayload } from '@/features/notifications/NotificationPayload'
 
 export const useMuteParticipant = () => {
   const data = useRoomData()
+  const room = useRoomContext()
 
-  const muteParticipant = (participant: Participant) => {
+  const notifyParticipant = async (participant: Participant) => {
+    const encoder = new TextEncoder()
+    const payload: NotificationPayload = {
+      type: NotificationType.ParticipantMuted,
+    }
+    const data = encoder.encode(JSON.stringify(payload))
+    await room.localParticipant.publishData(data, {
+      reliable: true,
+      destinationIdentities: [participant.identity],
+    })
+  }
+
+  const muteParticipant = async (participant: Participant) => {
     if (!data || !data?.livekit) {
       throw new Error('Room data is not available')
     }
@@ -18,22 +34,33 @@ export const useMuteParticipant = () => {
     if (!trackSid) {
       throw new Error('Missing audio track')
     }
-    return fetchServerApi(
-      buildServerApiUrl(
-        data.livekit.url,
-        'twirp/livekit.RoomService/MutePublishedTrack'
-      ),
-      data.livekit.token,
-      {
-        method: 'POST',
-        body: JSON.stringify({
-          room: data.livekit.room,
-          identity: participant.identity,
-          muted: true,
-          track_sid: trackSid,
-        }),
-      }
-    )
+
+    try {
+      const response = await fetchServerApi(
+        buildServerApiUrl(
+          data.livekit.url,
+          'twirp/livekit.RoomService/MutePublishedTrack'
+        ),
+        data.livekit.token,
+        {
+          method: 'POST',
+          body: JSON.stringify({
+            room: data.livekit.room,
+            identity: participant.identity,
+            muted: true,
+            track_sid: trackSid,
+          }),
+        }
+      )
+
+      await notifyParticipant(participant)
+
+      return response
+    } catch (error) {
+      console.error(
+        `Failed to mute participant ${participant.identity}: ${error instanceof Error ? error.message : 'Unknown error'}`
+      )
+    }
   }
   return { muteParticipant }
 }

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

@@ -1,189 +0,0 @@
-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 {
-  BackgroundBlur,
-  BackgroundOptions,
-  ProcessorWrapper,
-  BackgroundTransformer,
-} from '@livekit/track-processors'
-
-const Information = styled('div', {
-  base: {
-    backgroundColor: 'orange.50',
-    borderRadius: '4px',
-    padding: '0.75rem 0.75rem',
-    marginTop: '0.8rem',
-    alignItems: 'start',
-  },
-})
-
-enum BlurRadius {
-  NONE = 0,
-  LIGHT = 5,
-  NORMAL = 10,
-}
-
-export const Effects = () => {
-  const { t } = useTranslation('rooms', { keyPrefix: 'effects' })
-  const { isCameraEnabled, cameraTrack, localParticipant } =
-    useLocalParticipant()
-  const videoRef = useRef<HTMLVideoElement>(null)
-  const [processorPending, setProcessorPending] = useState(false)
-
-  const localCameraTrack = cameraTrack?.track as LocalVideoTrack
-
-  const getProcessor = () => {
-    return localCameraTrack?.getProcessor() as ProcessorWrapper<BackgroundOptions>
-  }
-
-  const getBlurRadius = (): BlurRadius => {
-    const processor = getProcessor()
-    return (
-      (processor?.transformer as BackgroundTransformer)?.options?.blurRadius ||
-      BlurRadius.NONE
-    )
-  }
-
-  const toggleBlur = async (blurRadius: number) => {
-    if (!isCameraEnabled) await localParticipant.setCameraEnabled(true)
-    if (!localCameraTrack) return
-
-    setProcessorPending(true)
-
-    const processor = getProcessor()
-    const currentBlurRadius = getBlurRadius()
-
-    try {
-      if (blurRadius == currentBlurRadius && processor) {
-        await localCameraTrack.stopProcessor()
-      } else if (!processor) {
-        await localCameraTrack.setProcessor(BackgroundBlur(blurRadius))
-      } else {
-        await processor?.updateTransformerOptions({ blurRadius })
-      }
-    } catch (error) {
-      console.error('Error applying blur:', error)
-    } finally {
-      setProcessorPending(false)
-    }
-  }
-
-  useEffect(() => {
-    const videoElement = videoRef.current
-    if (!videoElement) return
-
-    const attachVideoTrack = async () => localCameraTrack?.attach(videoElement)
-    attachVideoTrack()
-
-    return () => {
-      if (!videoElement) return
-      localCameraTrack.detach(videoElement)
-    }
-  }, [localCameraTrack, isCameraEnabled])
-
-  const isSelected = (blurRadius: BlurRadius) => {
-    return isCameraEnabled && getBlurRadius() == blurRadius
-  }
-
-  const tooltipLabel = (blurRadius: BlurRadius) => {
-    return t(`blur.${isSelected(blurRadius) ? 'clear' : 'apply'}`)
-  }
-
-  return (
-    <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={{
-              color: 'white',
-              textAlign: 'center',
-              textWrap: 'balance',
-              marginBottom: 0,
-            }}
-          >
-            {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',
-          }}
-        >
-          {t('heading')}
-        </H>
-        {ProcessorWrapper.isSupported ? (
-          <HStack>
-            <ToggleButton
-              size={'sm'}
-              aria-label={tooltipLabel(BlurRadius.LIGHT)}
-              tooltip={tooltipLabel(BlurRadius.LIGHT)}
-              isDisabled={processorPending}
-              onPress={async () => await toggleBlur(BlurRadius.LIGHT)}
-              isSelected={isSelected(BlurRadius.LIGHT)}
-            >
-              {t('blur.light')}
-            </ToggleButton>
-            <ToggleButton
-              size={'sm'}
-              aria-label={tooltipLabel(BlurRadius.NORMAL)}
-              tooltip={tooltipLabel(BlurRadius.NORMAL)}
-              isDisabled={processorPending}
-              onPress={async () => await toggleBlur(BlurRadius.NORMAL)}
-              isSelected={isSelected(BlurRadius.NORMAL)}
-            >
-              {t('blur.normal')}
-            </ToggleButton>
-          </HStack>
-        ) : (
-          <Text variant="sm">{t('notAvailable')}</Text>
-        )}
-        <Information>
-          <Text
-            variant="sm"
-            style={{
-              textWrap: 'balance',
-            }}
-          >
-            ⚠︎ {t('experimental')}
-          </Text>
-        </Information>
-      </Div>
-    </VStack>
-  )
-}

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

@@ -0,0 +1,148 @@
+import { css } from '@/styled-system/css'
+import { Button, Text } from '@/primitives'
+import { useMemo, useRef } from 'react'
+import { ScreenSharePreferenceStore } from '@/stores/ScreenSharePreferences'
+import { useSnapshot } from 'valtio'
+import { useLocalParticipant } from '@livekit/components-react'
+import { useSize } from '../hooks/useResizeObserver'
+import { TrackReferenceOrPlaceholder } from '@livekit/components-core'
+import { useTranslation } from 'react-i18next'
+
+export const FullScreenShareWarning = ({
+  trackReference,
+}: {
+  trackReference: TrackReferenceOrPlaceholder
+}) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'fullScreenWarning' })
+
+  const warningContainerRef = useRef<HTMLDivElement>(null)
+  const { width: containerWidth } = useSize(warningContainerRef)
+  const { localParticipant } = useLocalParticipant()
+  const screenSharePreferences = useSnapshot(ScreenSharePreferenceStore)
+
+  const isFullScreenSharing = useMemo(() => {
+    if (trackReference?.source !== 'screen_share') return false
+
+    const mediaStreamTrack = trackReference.publication?.track?.mediaStreamTrack
+
+    if (!mediaStreamTrack) return false
+
+    // Method 1: Display Surface Check (Chrome & Edge)
+    const trackSettings = mediaStreamTrack.getSettings()
+    if (trackSettings?.displaySurface) {
+      return trackSettings.displaySurface === 'monitor'
+    }
+
+    // Method 2: Track Constraints Check
+    const constraints = mediaStreamTrack.getConstraints()
+    if (constraints?.displaySurface) {
+      return constraints.displaySurface === 'monitor'
+    }
+
+    // Method 3: Label Analysis (Firefox, Safari)
+    const trackLabel = mediaStreamTrack.label.toLowerCase()
+    const fullScreenIndicators = [
+      'monitor',
+      'screen',
+      'display',
+      'entire screen',
+      'full screen',
+    ]
+    return fullScreenIndicators.some((indicator) =>
+      trackLabel.includes(indicator)
+    )
+  }, [trackReference])
+
+  const shouldShowWarning =
+    screenSharePreferences.enabled && isFullScreenSharing
+
+  const handleStopScreenShare = async () => {
+    if (!localParticipant.isScreenShareEnabled) return
+    await localParticipant.setScreenShareEnabled(false, {}, {})
+  }
+
+  const handleDismissWarning = () => {
+    ScreenSharePreferenceStore.enabled = false
+  }
+
+  if (!shouldShowWarning) return null
+
+  return (
+    <div
+      className={css({
+        position: 'absolute',
+        zIndex: '1000',
+        height: '100%',
+        width: '100%',
+      })}
+      ref={warningContainerRef}
+    >
+      {(!containerWidth || containerWidth >= 300) && (
+        <div
+          className={css({
+            position: 'absolute',
+            zIndex: '1000',
+            height: '100%',
+            width: '100%',
+            backgroundColor: 'rgba(22, 22, 34, 0.9)',
+            padding: '2rem',
+          })}
+        >
+          <div
+            className={css({
+              display: 'flex',
+              justifyContent: 'space-between',
+              flexDirection: 'column',
+              gap: '1rem',
+              md: {
+                flexDirection: 'row',
+              },
+            })}
+          >
+            <Text
+              style={{
+                color: 'white',
+                flexBasis: '55%',
+                fontWeight: '500',
+              }}
+              margin={false}
+              wrap={'pretty'}
+            >
+              {t('message')}
+            </Text>
+            <div
+              className={css({
+                display: 'flex',
+                flexDirection: 'row',
+                gap: '1rem',
+              })}
+            >
+              <Button
+                variant="tertiary"
+                size="sm"
+                style={{
+                  height: 'fit-content',
+                }}
+                onPress={async () => {
+                  await handleStopScreenShare()
+                }}
+              >
+                {t('stop')}
+              </Button>
+              <Button
+                variant="primaryTextDark"
+                size="sm"
+                style={{
+                  height: 'fit-content',
+                }}
+                onPress={() => handleDismissWarning()}
+              >
+                {t('ignore')}
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,36 @@
+import { useTranslation } from 'react-i18next'
+import { Button, Dialog, P } from '@/primitives'
+import { HStack } from '@/styled-system/jsx'
+
+export const MuteAlertDialog = ({
+  isOpen,
+  onClose,
+  onSubmit,
+  name,
+}: {
+  isOpen: boolean
+  onClose: () => void
+  onSubmit: () => void
+  name: string
+}) => {
+  const { t } = useTranslation('rooms', {
+    keyPrefix: 'participants.muteParticipantAlert',
+  })
+  return (
+    <Dialog
+      isOpen={isOpen}
+      role="alertdialog"
+      aria-label={t('heading', { name })}
+    >
+      <P>{t('description', { name })}</P>
+      <HStack gap={1}>
+        <Button variant="text" size="sm" onPress={onClose}>
+          {t('cancel')}
+        </Button>
+        <Button variant="text" size="sm" onPress={onSubmit}>
+          {t('confirm')}
+        </Button>
+      </HStack>
+    </Dialog>
+  )
+}

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

@@ -1,7 +1,6 @@
 import {
   AudioTrack,
   ConnectionQualityIndicator,
-  FocusToggle,
   LockLockedIcon,
   ParticipantName,
   ParticipantTileProps,
@@ -23,11 +22,13 @@ import {
   TrackReferenceOrPlaceholder,
 } from '@livekit/components-core'
 import { Track } from 'livekit-client'
-import { ParticipantPlaceholder } from '@/features/rooms/livekit/components/ParticipantPlaceholder'
 import { RiHand } from '@remixicon/react'
-import { useRaisedHand } from '@/features/rooms/livekit/hooks/useRaisedHand'
+import { useRaisedHand } from '../hooks/useRaisedHand'
 import { HStack } from '@/styled-system/jsx'
-import { MutedMicIndicator } from '@/features/rooms/livekit/components/MutedMicIndicator'
+import { MutedMicIndicator } from './MutedMicIndicator'
+import { ParticipantPlaceholder } from './ParticipantPlaceholder'
+import { ParticipantTileFocus } from './ParticipantTileFocus'
+import { FullScreenShareWarning } from './FullScreenShareWarning'
 
 export function TrackRefContextIfNeeded(
   props: React.PropsWithChildren<{
@@ -100,6 +101,7 @@ export const ParticipantTile: (
     <div ref={ref} style={{ position: 'relative' }} {...elementProps}>
       <TrackRefContextIfNeeded trackRef={trackReference}>
         <ParticipantContextIfNeeded participant={trackReference.participant}>
+          <FullScreenShareWarning trackReference={trackReference} />
           {children ?? (
             <>
               {isTrackReference(trackReference) &&
@@ -173,7 +175,9 @@ export const ParticipantTile: (
               )}
             </>
           )}
-          {!disableMetadata && <FocusToggle trackRef={trackReference} />}
+          {!disableMetadata && (
+            <ParticipantTileFocus trackRef={trackReference} />
+          )}
         </ParticipantContextIfNeeded>
       </TrackRefContextIfNeeded>
     </div>

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

@@ -0,0 +1,224 @@
+import { css } from '@/styled-system/css'
+import { HStack } from '@/styled-system/jsx'
+import { Button } from '@/primitives'
+import {
+  RiFullscreenLine,
+  RiImageCircleAiFill,
+  RiMicLine,
+  RiMicOffLine,
+  RiPushpin2Line,
+  RiUnpinLine,
+} from '@remixicon/react'
+import {
+  useFocusToggle,
+  useTrackMutedIndicator,
+} from '@livekit/components-react'
+import { useTranslation } from 'react-i18next'
+import { TrackReferenceOrPlaceholder } from '@livekit/components-core'
+import { useEffect, useRef, useState } from 'react'
+import { useSidePanel } from '../hooks/useSidePanel'
+import { useFullScreen } from '../hooks/useFullScreen'
+import { Participant, Track } from 'livekit-client'
+import { MuteAlertDialog } from './MuteAlertDialog'
+import { useMuteParticipant } from '../api/muteParticipant'
+
+const ZoomButton = ({
+  trackRef,
+}: {
+  trackRef: TrackReferenceOrPlaceholder
+}) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'participantTileFocus' })
+  const { toggleFullScreen, isFullscreenAvailable } = useFullScreen({
+    trackRef,
+  })
+
+  if (!isFullscreenAvailable) {
+    return
+  }
+
+  return (
+    <Button
+      size="sm"
+      variant="primaryTextDark"
+      square
+      tooltip={t('fullScreen')}
+      onPress={() => toggleFullScreen()}
+    >
+      <RiFullscreenLine />
+    </Button>
+  )
+}
+
+const FocusButton = ({
+  trackRef,
+}: {
+  trackRef: TrackReferenceOrPlaceholder
+}) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'participantTileFocus' })
+  const { mergedProps, inFocus } = useFocusToggle({
+    trackRef,
+    props: {},
+  })
+  return (
+    <Button
+      size="sm"
+      variant="primaryTextDark"
+      square
+      tooltip={inFocus ? t('pin.disable') : t('pin.enable')}
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      onPress={(event) => mergedProps?.onClick?.(event as any)}
+    >
+      {inFocus ? <RiUnpinLine /> : <RiPushpin2Line />}
+    </Button>
+  )
+}
+
+const EffectsButton = () => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'participantTileFocus' })
+  const { isEffectsOpen, toggleEffects } = useSidePanel()
+  return (
+    <Button
+      size={'sm'}
+      variant={'primaryTextDark'}
+      square
+      tooltip={t('effects')}
+      onPress={() => !isEffectsOpen && toggleEffects()}
+    >
+      <RiImageCircleAiFill />
+    </Button>
+  )
+}
+
+const MuteButton = ({ participant }: { participant: Participant }) => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'participantTileFocus' })
+
+  const { isMuted } = useTrackMutedIndicator({
+    participant: participant,
+    source: Track.Source.Microphone,
+  })
+
+  const { muteParticipant } = useMuteParticipant()
+  const [isAlertOpen, setIsAlertOpen] = useState(false)
+
+  const name = participant.name || participant.identity
+
+  return (
+    <>
+      <Button
+        isDisabled={isMuted}
+        size={'sm'}
+        variant={'primaryTextDark'}
+        square
+        onPress={() => setIsAlertOpen(true)}
+        tooltip={t('muteParticipant', { name })}
+      >
+        {!isMuted ? <RiMicLine /> : <RiMicOffLine />}
+      </Button>
+      <MuteAlertDialog
+        isOpen={isAlertOpen}
+        onSubmit={() =>
+          muteParticipant(participant).then(() => setIsAlertOpen(false))
+        }
+        onClose={() => setIsAlertOpen(false)}
+        name={name}
+      />
+    </>
+  )
+}
+
+const MOUSE_IDLE_TIME = 3000
+
+export const ParticipantTileFocus = ({
+  trackRef,
+}: {
+  trackRef: TrackReferenceOrPlaceholder
+}) => {
+  const [hovered, setHovered] = useState(false)
+  const [opacity, setOpacity] = useState(0)
+
+  const idleTimerRef = useRef<number | null>(null)
+  const [isIdleRef, setIsIdleRef] = useState(false)
+
+  useEffect(() => {
+    if (hovered && !isIdleRef) {
+      // Wait for next frame to ensure element is mounted
+      requestAnimationFrame(() => {
+        setOpacity(0.6)
+      })
+    } else {
+      setOpacity(0)
+    }
+  }, [hovered, isIdleRef])
+
+  const handleMouseMove = () => {
+    if (idleTimerRef.current) {
+      window.clearTimeout(idleTimerRef.current)
+    }
+    idleTimerRef.current = window.setTimeout(() => {
+      setIsIdleRef(true)
+    }, MOUSE_IDLE_TIME)
+    setIsIdleRef(false)
+  }
+
+  const participant = trackRef.participant
+
+  const isScreenShare = trackRef.source == Track.Source.ScreenShare
+  const isLocal = trackRef.participant.isLocal
+
+  return (
+    <div
+      className={css({
+        position: 'absolute',
+        left: '0',
+        top: '0',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: '100%',
+        height: '100%',
+      })}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      onMouseMove={handleMouseMove}
+    >
+      {hovered && (
+        <div
+          className={css({
+            backgroundColor: 'primaryDark.50',
+            transition: 'opacity 200ms linear',
+            zIndex: 1,
+            borderRadius: '0.25rem',
+            display: 'flex',
+            _hover: {
+              opacity: '0.95 !important',
+            },
+          })}
+          style={{ opacity }}
+        >
+          <HStack
+            gap={0.5}
+            className={css({
+              padding: '0.5rem',
+              _hover: {
+                opacity: '1 !important',
+              },
+            })}
+          >
+            <FocusButton trackRef={trackRef} />
+            {!isScreenShare ? (
+              <>
+                {participant.isLocal ? (
+                  <EffectsButton />
+                ) : (
+                  <MuteButton participant={participant} />
+                )}
+              </>
+            ) : (
+              !isLocal && <ZoomButton trackRef={trackRef} />
+            )}
+          </HStack>
+        </div>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,143 @@
+import { createPortal } from 'react-dom'
+import { useState, useEffect, useMemo } from 'react'
+import { Text } from '@/primitives'
+import { css } from '@/styled-system/css'
+import { Participant } from 'livekit-client'
+import { useTranslation } from 'react-i18next'
+import { Reaction } from '@/features/rooms/livekit/components/controls/ReactionsToggle'
+
+export const ANIMATION_DURATION = 3000
+export const ANIMATION_DISTANCE = 300
+export const FADE_OUT_THRESHOLD = 0.7
+export const REACTION_SPAWN_WIDTH_RATIO = 0.2
+export const INITIAL_POSITION = 200
+
+interface FloatingReactionProps {
+  emoji: string
+  name?: string
+  speed?: number
+  scale?: number
+}
+
+export function FloatingReaction({
+  emoji,
+  name,
+  speed = 1,
+  scale = 1,
+}: FloatingReactionProps) {
+  const [deltaY, setDeltaY] = useState(0)
+  const [opacity, setOpacity] = useState(1)
+
+  const left = useMemo(
+    () => Math.random() * window.innerWidth * REACTION_SPAWN_WIDTH_RATIO,
+    []
+  )
+
+  useEffect(() => {
+    let start: number | null = null
+    function animate(timestamp: number) {
+      if (start === null) start = timestamp
+      const elapsed = timestamp - start
+      if (elapsed < 0) {
+        setOpacity(0)
+      } else {
+        const progress = Math.min(elapsed / ANIMATION_DURATION, 1)
+        const distance = ANIMATION_DISTANCE * speed
+        const newY = progress * distance
+        setDeltaY(newY)
+        if (progress > FADE_OUT_THRESHOLD) {
+          setOpacity(1 - (progress - FADE_OUT_THRESHOLD) / 0.3)
+        }
+      }
+      if (elapsed < ANIMATION_DURATION) {
+        requestAnimationFrame(animate)
+      }
+    }
+    const req = requestAnimationFrame(animate)
+    return () => cancelAnimationFrame(req)
+  }, [speed])
+
+  return (
+    <div
+      className={css({
+        fontSize: '3rem',
+        position: 'absolute',
+        display: 'flex',
+        alignItems: 'center',
+        flexDirection: 'column',
+      })}
+      style={{
+        left: left,
+        bottom: INITIAL_POSITION + deltaY,
+        transform: `scale(${scale})`,
+        opacity: opacity,
+      }}
+    >
+      <span
+        className={css({
+          lineHeight: '45px',
+        })}
+      >
+        {emoji}
+      </span>
+      {name && (
+        <Text
+          variant="sm"
+          className={css({
+            backgroundColor: 'primaryDark.100',
+            color: 'white',
+            textAlign: 'center',
+            borderRadius: '20px',
+            paddingX: '0.5rem',
+            paddingY: '0.15rem',
+            boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
+            lineHeight: '14px',
+          })}
+        >
+          {name}
+        </Text>
+      )}
+    </div>
+  )
+}
+
+export function ReactionPortal({
+  emoji,
+  participant,
+}: {
+  emoji: string
+  participant: Participant
+}) {
+  const { t } = useTranslation('rooms', { keyPrefix: 'controls.reactions' })
+  const speed = useMemo(() => Math.random() * 1.5 + 0.5, [])
+  const scale = useMemo(() => Math.max(Math.random() + 0.5, 1), [])
+  return createPortal(
+    <div
+      className={css({
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        pointerEvents: 'none',
+      })}
+    >
+      <FloatingReaction
+        emoji={emoji}
+        speed={speed}
+        scale={scale}
+        name={participant?.isLocal ? t('you') : participant.name}
+      />
+    </div>,
+    document.body
+  )
+}
+
+export const ReactionPortals = ({ reactions }: { reactions: Reaction[] }) =>
+  reactions.map((instance) => (
+    <ReactionPortal
+      key={instance.id}
+      emoji={instance.emoji}
+      participant={instance.participant}
+    />
+  ))

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/BackgroundBlurTrackProcessorJsWrapper.ts

@@ -0,0 +1,68 @@
+import {
+  BackgroundBlur,
+  BackgroundTransformer,
+  ProcessorWrapper,
+} from '@livekit/track-processors'
+import { ProcessorOptions, Track } from 'livekit-client'
+import {
+  BackgroundProcessorInterface,
+  BackgroundOptions,
+  ProcessorType,
+} from '.'
+
+/**
+ * This is simply a wrapper around track-processor-js Processor
+ * in order to be compatible with a common interface BackgroundBlurProcessorInterface
+ * used accross the project.
+ */
+export class BackgroundBlurTrackProcessorJsWrapper
+  implements BackgroundProcessorInterface
+{
+  name: string = 'blur'
+
+  processor: ProcessorWrapper<BackgroundOptions>
+
+  opts: BackgroundOptions
+
+  constructor(opts: BackgroundOptions) {
+    this.processor = BackgroundBlur(opts.blurRadius)
+    this.opts = opts
+  }
+
+  async init(opts: ProcessorOptions<Track.Kind>) {
+    return this.processor.init(opts)
+  }
+
+  async restart(opts: ProcessorOptions<Track.Kind>) {
+    return this.processor.restart(opts)
+  }
+
+  async destroy() {
+    return this.processor.destroy()
+  }
+
+  update(opts: BackgroundOptions): void {
+    this.processor.updateTransformerOptions(opts)
+  }
+
+  get processedTrack() {
+    return this.processor.processedTrack
+  }
+
+  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/BackgroundCustomProcessor.ts

@@ -0,0 +1,368 @@
+import { ProcessorOptions, Track } from 'livekit-client'
+import posthog from 'posthog-js'
+import {
+  FilesetResolver,
+  ImageSegmenter,
+  ImageSegmenterResult,
+} from '@mediapipe/tasks-vision'
+import {
+  CLEAR_TIMEOUT,
+  SET_TIMEOUT,
+  TIMEOUT_TICK,
+  timerWorkerScript,
+} from './TimerWorker'
+import {
+  BackgroundProcessorInterface,
+  BackgroundOptions,
+  ProcessorType,
+} from '.'
+
+const PROCESSING_WIDTH = 256
+const PROCESSING_HEIGHT = 144
+
+const SEGMENTATION_MASK_CANVAS_ID = 'background-blur-local-segmentation'
+const BLUR_CANVAS_ID = 'background-blur-local'
+
+const DEFAULT_BLUR = '10'
+
+/**
+ * This implementation of video blurring is made to be run on CPU for browser that are
+ * not compatible with track-processor-js.
+ *
+ * It also make possible to run blurring on browser that does not implement MediaStreamTrackGenerator and
+ * MediaStreamTrackProcessor.
+ */
+export class BackgroundCustomProcessor implements BackgroundProcessorInterface {
+  options: BackgroundOptions
+  name: string
+  processedTrack?: MediaStreamTrack | undefined
+
+  source?: MediaStreamTrack
+  sourceSettings?: MediaTrackSettings
+  videoElement?: HTMLVideoElement
+  videoElementLoaded?: boolean
+
+  // Canvas containg the video processing result, of which we extract as stream.
+  outputCanvas?: HTMLCanvasElement
+  outputCanvasCtx?: CanvasRenderingContext2D
+
+  imageSegmenter?: ImageSegmenter
+  imageSegmenterResult?: ImageSegmenterResult
+
+  // Canvas used for resizing video source and projecting mask.
+  segmentationMaskCanvas?: HTMLCanvasElement
+  segmentationMaskCanvasCtx?: CanvasRenderingContext2D
+
+  // Mask containg the inference result.
+  segmentationMask?: ImageData
+
+  // The resized image of the video source.
+  sourceImageData?: ImageData
+
+  timerWorker?: Worker
+
+  type: ProcessorType
+  virtualBackgroundImage?: HTMLImageElement
+
+  constructor(opts: BackgroundOptions) {
+    this.name = 'blur'
+    this.options = opts
+
+    if (this.options.blurRadius) {
+      this.type = ProcessorType.BLUR
+    } else {
+      this.type = ProcessorType.VIRTUAL
+    }
+  }
+
+  static get isSupported() {
+    return navigator.userAgent.toLowerCase().includes('firefox')
+  }
+
+  async init(opts: ProcessorOptions<Track.Kind>) {
+    if (!opts.element) {
+      throw new Error('Element is required for processing')
+    }
+
+    this.source = opts.track as MediaStreamTrack
+    this.sourceSettings = this.source!.getSettings()
+    this.videoElement = opts.element as HTMLVideoElement
+
+    this._initVirtualBackgroundImage()
+    this._createMainCanvas()
+    this._createMaskCanvas()
+
+    const stream = this.outputCanvas!.captureStream()
+    const tracks = stream.getVideoTracks()
+    if (tracks.length == 0) {
+      throw new Error('No tracks found for processing')
+    }
+    this.processedTrack = tracks[0]
+
+    this.segmentationMask = new ImageData(PROCESSING_WIDTH, PROCESSING_HEIGHT)
+    await this.initSegmenter()
+    this._initWorker()
+
+    posthog.capture('firefox-blurring-init')
+  }
+
+  _initVirtualBackgroundImage() {
+    const needsUpdate =
+      this.options.imagePath &&
+      this.virtualBackgroundImage &&
+      this.virtualBackgroundImage.src !== this.options.imagePath
+    if (this.options.imagePath || needsUpdate) {
+      this.virtualBackgroundImage = document.createElement('img')
+      this.virtualBackgroundImage.crossOrigin = 'anonymous'
+      this.virtualBackgroundImage.src = this.options.imagePath!
+    }
+  }
+
+  update(opts: BackgroundOptions): void {
+    this.options = opts
+    this._initVirtualBackgroundImage()
+  }
+
+  _initWorker() {
+    this.timerWorker = new Worker(timerWorkerScript, {
+      name: 'Blurring',
+    })
+    this.timerWorker.onmessage = (data) => this.onTimerMessage(data)
+    // When hiding camera then showing it again, the onloadeddata callback is not fired again.
+    if (this.videoElementLoaded) {
+      this.timerWorker!.postMessage({
+        id: SET_TIMEOUT,
+        timeMs: 1000 / 30,
+      })
+    } else {
+      this.videoElement!.onloadeddata = () => {
+        this.videoElementLoaded = true
+        this.timerWorker!.postMessage({
+          id: SET_TIMEOUT,
+          timeMs: 1000 / 30,
+        })
+      }
+    }
+  }
+
+  onTimerMessage(response: { data: { id: number } }) {
+    if (response.data.id === TIMEOUT_TICK) {
+      this.process()
+    }
+  }
+
+  async initSegmenter() {
+    const vision = await FilesetResolver.forVisionTasks(
+      'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/wasm'
+    )
+    this.imageSegmenter = await ImageSegmenter.createFromOptions(vision, {
+      baseOptions: {
+        modelAssetPath:
+          'https://storage.googleapis.com/mediapipe-models/image_segmenter/selfie_segmenter_landscape/float16/latest/selfie_segmenter_landscape.tflite',
+        delegate: 'CPU', // Use CPU for Firefox.
+      },
+      runningMode: 'VIDEO',
+      outputCategoryMask: true,
+      outputConfidenceMasks: false,
+    })
+  }
+
+  /**
+   * Resize the source video to the processing resolution.
+   */
+  async sizeSource() {
+    this.segmentationMaskCanvasCtx?.drawImage(
+      this.videoElement!,
+      0,
+      0,
+      this.videoElement!.videoWidth,
+      this.videoElement!.videoHeight,
+      0,
+      0,
+      PROCESSING_WIDTH,
+      PROCESSING_HEIGHT
+    )
+
+    this.sourceImageData = this.segmentationMaskCanvasCtx?.getImageData(
+      0,
+      0,
+      PROCESSING_WIDTH,
+      PROCESSING_WIDTH
+    )
+  }
+
+  /**
+   * Run the segmentation.
+   */
+  async segment() {
+    const startTimeMs = performance.now()
+    return new Promise<void>((resolve) => {
+      this.imageSegmenter!.segmentForVideo(
+        this.sourceImageData!,
+        startTimeMs,
+        (result: ImageSegmenterResult) => {
+          this.imageSegmenterResult = result
+          resolve()
+        }
+      )
+    })
+  }
+
+  /**
+   * TODO: future improvement with WebGL.
+   */
+  async blur() {
+    const mask = this.imageSegmenterResult!.categoryMask!.getAsUint8Array()
+    for (let i = 0; i < mask.length; ++i) {
+      this.segmentationMask!.data[i * 4 + 3] = 255 - mask[i]
+    }
+
+    this.segmentationMaskCanvasCtx!.putImageData(this.segmentationMask!, 0, 0)
+
+    this.outputCanvasCtx!.globalCompositeOperation = 'copy'
+    this.outputCanvasCtx!.filter = 'blur(8px)'
+
+    // Put opacity mask.
+    this.outputCanvasCtx!.drawImage(
+      this.segmentationMaskCanvas!,
+      0,
+      0,
+      PROCESSING_WIDTH,
+      PROCESSING_HEIGHT,
+      0,
+      0,
+      this.videoElement!.videoWidth,
+      this.videoElement!.videoHeight
+    )
+
+    // Draw clear body.
+    this.outputCanvasCtx!.globalCompositeOperation = 'source-in'
+    this.outputCanvasCtx!.filter = 'none'
+    this.outputCanvasCtx!.drawImage(this.videoElement!, 0, 0)
+
+    // Draw blurry background.
+    this.outputCanvasCtx!.globalCompositeOperation = 'destination-over'
+    this.outputCanvasCtx!.filter = `blur(${this.options.blurRadius ?? DEFAULT_BLUR}px)`
+    this.outputCanvasCtx!.drawImage(this.videoElement!, 0, 0)
+  }
+
+  /**
+   * TODO: future improvement with WebGL.
+   */
+  async drawVirtualBackground() {
+    const mask = this.imageSegmenterResult!.categoryMask!.getAsUint8Array()
+    for (let i = 0; i < mask.length; ++i) {
+      this.segmentationMask!.data[i * 4 + 3] = 255 - mask[i]
+    }
+
+    this.segmentationMaskCanvasCtx!.putImageData(this.segmentationMask!, 0, 0)
+
+    this.outputCanvasCtx!.globalCompositeOperation = 'copy'
+    this.outputCanvasCtx!.filter = 'blur(8px)'
+
+    // Put opacity mask.
+    this.outputCanvasCtx!.drawImage(
+      this.segmentationMaskCanvas!,
+      0,
+      0,
+      PROCESSING_WIDTH,
+      PROCESSING_HEIGHT,
+      0,
+      0,
+      this.videoElement!.videoWidth,
+      this.videoElement!.videoHeight
+    )
+
+    // Draw clear body.
+    this.outputCanvasCtx!.globalCompositeOperation = 'source-in'
+    this.outputCanvasCtx!.filter = 'none'
+    this.outputCanvasCtx!.drawImage(this.videoElement!, 0, 0)
+
+    // Draw virtual background.
+    this.outputCanvasCtx!.globalCompositeOperation = 'destination-over'
+    this.outputCanvasCtx!.drawImage(
+      this.virtualBackgroundImage!,
+      0,
+      0,
+      this.outputCanvas!.width,
+      this.outputCanvas!.height
+    )
+  }
+
+  async process() {
+    await this.sizeSource()
+    await this.segment()
+
+    if (this.options.blurRadius) {
+      await this.blur()
+    } else {
+      await this.drawVirtualBackground()
+    }
+    this.timerWorker!.postMessage({
+      id: SET_TIMEOUT,
+      timeMs: 1000 / 30,
+    })
+  }
+
+  _createMainCanvas() {
+    this.outputCanvas = document.querySelector(
+      'canvas#background-blur-local'
+    ) as HTMLCanvasElement
+    if (!this.outputCanvas) {
+      this.outputCanvas = this._createCanvas(
+        BLUR_CANVAS_ID,
+        this.sourceSettings!.width!,
+        this.sourceSettings!.height!
+      )
+    }
+    this.outputCanvasCtx = this.outputCanvas.getContext('2d')!
+  }
+
+  _createMaskCanvas() {
+    this.segmentationMaskCanvas = document.querySelector(
+      `#${SEGMENTATION_MASK_CANVAS_ID}`
+    ) as HTMLCanvasElement
+    if (!this.segmentationMaskCanvas) {
+      this.segmentationMaskCanvas = this._createCanvas(
+        SEGMENTATION_MASK_CANVAS_ID,
+        PROCESSING_WIDTH,
+        PROCESSING_HEIGHT
+      )
+    }
+    this.segmentationMaskCanvasCtx =
+      this.segmentationMaskCanvas.getContext('2d')!
+  }
+
+  _createCanvas(id: string, width: number, height: number) {
+    const element = document.createElement('canvas')
+    element.setAttribute('id', id)
+    element.setAttribute('width', '' + width)
+    element.setAttribute('height', '' + height)
+    return element
+  }
+
+  async restart(opts: ProcessorOptions<Track.Kind>) {
+    await this.destroy()
+    return this.init(opts)
+  }
+
+  async destroy() {
+    this.timerWorker?.postMessage({
+      id: CLEAR_TIMEOUT,
+    })
+
+    this.timerWorker?.terminate()
+    this.imageSegmenter?.close()
+  }
+
+  clone() {
+    return new BackgroundCustomProcessor(this.options)
+  }
+
+  serialize() {
+    return {
+      type: this.type,
+      options: this.options,
+    }
+  }
+}

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

@@ -0,0 +1,61 @@
+import { ProcessorOptions, Track } from 'livekit-client'
+import {
+  BackgroundOptions,
+  BackgroundProcessorInterface,
+  ProcessorType,
+} from '.'
+import {
+  BackgroundTransformer,
+  ProcessorWrapper,
+  VirtualBackground,
+} from '@livekit/track-processors'
+
+export class BackgroundVirtualTrackProcessorJsWrapper
+  implements BackgroundProcessorInterface
+{
+  name = 'virtual'
+
+  processor: ProcessorWrapper<BackgroundOptions>
+
+  opts: BackgroundOptions
+
+  constructor(opts: BackgroundOptions) {
+    this.processor = VirtualBackground(opts.imagePath!)
+    this.opts = opts
+  }
+
+  async init(opts: ProcessorOptions<Track.Kind>) {
+    return this.processor.init(opts)
+  }
+
+  async restart(opts: ProcessorOptions<Track.Kind>) {
+    return this.processor.restart(opts)
+  }
+
+  async destroy() {
+    return this.processor.destroy()
+  }
+
+  update(opts: BackgroundOptions): void {
+    this.processor.updateTransformerOptions(opts)
+  }
+
+  get processedTrack() {
+    return this.processor.processedTrack
+  }
+
+  get options() {
+    return (this.processor.transformer as BackgroundTransformer).options
+  }
+
+  clone() {
+    return new BackgroundVirtualTrackProcessorJsWrapper(this.options)
+  }
+
+  serialize() {
+    return {
+      type: ProcessorType.VIRTUAL,
+      options: this.options,
+    }
+  }
+}

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

@@ -0,0 +1,71 @@
+/**
+ * From https://github.com/jitsi/jitsi-meet
+ */
+
+/**
+ * SET_TIMEOUT constant is used to set interval and it is set in
+ * the id property of the request.data property. TimeMs property must
+ * also be set.
+ *
+ * ```
+ * //Request.data example:
+ * {
+ *      id: SET_TIMEOUT,
+ *      timeMs: 33
+ * }
+ * ```
+ */
+export const SET_TIMEOUT = 1
+
+/**
+ * CLEAR_TIMEOUT constant is used to clear the interval and it is set in
+ * the id property of the request.data property.
+ *
+ * ```
+ * {
+ *      id: CLEAR_TIMEOUT
+ * }
+ * ```
+ */
+export const CLEAR_TIMEOUT = 2
+
+/**
+ * TIMEOUT_TICK constant is used as response and it is set in the id property.
+ *
+ * ```
+ * {
+ *      id: TIMEOUT_TICK
+ * }
+ * ```
+ */
+export const TIMEOUT_TICK = 3
+
+/**
+ * The following code is needed as string to create a URL from a Blob.
+ * The URL is then passed to a WebWorker. Reason for this is to enable
+ * use of setInterval that is not throttled when tab is inactive.
+ */
+const code = `
+    var timer;
+
+    onmessage = function(request) {
+        switch (request.data.id) {
+        case ${SET_TIMEOUT}: {
+            timer = setTimeout(() => {
+                postMessage({ id: ${TIMEOUT_TICK} });
+            }, request.data.timeMs);
+            break;
+        }
+        case ${CLEAR_TIMEOUT}: {
+            if (timer) {
+                clearTimeout(timer);
+            }
+            break;
+        }
+        }
+    };
+`
+
+export const timerWorkerScript = URL.createObjectURL(
+  new Blob([code], { type: 'application/javascript' })
+)

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

@@ -0,0 +1,63 @@
+import { ProcessorWrapper } from '@livekit/track-processors'
+import { Track, TrackProcessor } from 'livekit-client'
+import { BackgroundBlurTrackProcessorJsWrapper } from './BackgroundBlurTrackProcessorJsWrapper'
+import { BackgroundCustomProcessor } from './BackgroundCustomProcessor'
+import { BackgroundVirtualTrackProcessorJsWrapper } from './BackgroundVirtualTrackProcessorJsWrapper'
+
+export type BackgroundOptions = {
+  blurRadius?: number
+  imagePath?: string
+}
+
+export interface ProcessorSerialized {
+  type: ProcessorType
+  options: BackgroundOptions
+}
+
+export interface BackgroundProcessorInterface
+  extends TrackProcessor<Track.Kind> {
+  update(opts: BackgroundOptions): void
+  options: BackgroundOptions
+  clone(): BackgroundProcessorInterface
+  serialize(): ProcessorSerialized
+}
+
+export enum ProcessorType {
+  BLUR = 'blur',
+  VIRTUAL = 'virtual',
+}
+
+export class BackgroundProcessorFactory {
+  static isSupported() {
+    return ProcessorWrapper.isSupported || BackgroundCustomProcessor.isSupported
+  }
+
+  static getProcessor(
+    type: ProcessorType,
+    opts: BackgroundOptions
+  ): BackgroundProcessorInterface | undefined {
+    if (type === ProcessorType.BLUR) {
+      if (ProcessorWrapper.isSupported) {
+        return new BackgroundBlurTrackProcessorJsWrapper(opts)
+      }
+      if (BackgroundCustomProcessor.isSupported) {
+        return new BackgroundCustomProcessor(opts)
+      }
+    } else if (type === ProcessorType.VIRTUAL) {
+      if (ProcessorWrapper.isSupported) {
+        return new BackgroundVirtualTrackProcessorJsWrapper(opts)
+      }
+      if (BackgroundCustomProcessor.isSupported) {
+        return new BackgroundCustomProcessor(opts)
+      }
+    }
+    return undefined
+  }
+
+  static deserializeProcessor(data?: ProcessorSerialized) {
+    if (data?.type) {
+      return BackgroundProcessorFactory.getProcessor(data?.type, data?.options)
+    }
+    return undefined
+  }
+}

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

@@ -0,0 +1,123 @@
+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>
+  )
+}

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

@@ -4,6 +4,13 @@ import { ToggleButton } from '@/primitives'
 import { css } from '@/styled-system/css'
 import { useRoomContext } from '@livekit/components-react'
 import { useRaisedHand } from '@/features/rooms/livekit/hooks/useRaisedHand'
+import { useEffect, useRef, useState } from 'react'
+import {
+  closeLowerHandToasts,
+  showLowerHandToast,
+} from '@/features/notifications/utils'
+
+const SPEAKING_DETECTION_DELAY = 3000
 
 export const HandToggle = () => {
   const { t } = useTranslation('rooms', { keyPrefix: 'controls.hand' })
@@ -13,6 +20,39 @@ export const HandToggle = () => {
     participant: room.localParticipant,
   })
 
+  const isSpeaking = room.localParticipant.isSpeaking
+  const speakingTimerRef = useRef<NodeJS.Timeout | null>(null)
+  const [hasShownToast, setHasShownToast] = useState(false)
+
+  const resetToastState = () => {
+    setHasShownToast(false)
+  }
+
+  useEffect(() => {
+    if (isHandRaised) return
+    closeLowerHandToasts()
+  }, [isHandRaised])
+
+  useEffect(() => {
+    const shouldShowToast = isSpeaking && isHandRaised && !hasShownToast
+
+    if (shouldShowToast && !speakingTimerRef.current) {
+      speakingTimerRef.current = setTimeout(() => {
+        setHasShownToast(true)
+        const onClose = () => {
+          if (isHandRaised) toggleRaisedHand()
+          resetToastState()
+        }
+        showLowerHandToast(room.localParticipant, onClose)
+      }, SPEAKING_DETECTION_DELAY)
+    }
+    if ((!isSpeaking || !isHandRaised) && speakingTimerRef.current) {
+      clearTimeout(speakingTimerRef.current)
+      speakingTimerRef.current = null
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isSpeaking, isHandRaised, hasShownToast, toggleRaisedHand])
+
   const tooltipLabel = isHandRaised ? 'lower' : 'raise'
 
   return (
@@ -28,7 +68,10 @@ export const HandToggle = () => {
         aria-label={t(tooltipLabel)}
         tooltip={t(tooltipLabel)}
         isSelected={isHandRaised}
-        onPress={() => toggleRaisedHand()}
+        onPress={() => {
+          toggleRaisedHand()
+          resetToastState()
+        }}
         data-attr={`controls-hand-${tooltipLabel}`}
       >
         <RiHand />

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

@@ -0,0 +1,20 @@
+import { RiImageCircleAiFill } 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}
+    >
+      <RiImageCircleAiFill size={20} />
+      {t('effects')}
+    </MenuItem>
+  )
+}

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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,34 @@
+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/OptionsButton.tsx

@@ -8,7 +8,7 @@ export const OptionsButton = () => {
 
   return (
     <>
-      <Menu>
+      <Menu variant="dark">
         <Button
           square
           variant="primaryDark"

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

@@ -1,21 +1,12 @@
-import {
-  RiAccountBoxLine,
-  RiMegaphoneLine,
-  RiSettings3Line,
-} from '@remixicon/react'
-import { MenuItem, Menu as RACMenu, Section } from 'react-aria-components'
-import { useTranslation } from 'react-i18next'
+import { Menu as RACMenu, MenuSection } from 'react-aria-components'
 import { Separator } from '@/primitives/Separator'
-import { useSidePanel } from '../../../hooks/useSidePanel'
-import { menuRecipe } from '@/primitives/menuRecipe.ts'
-import { useSettingsDialog } from '../SettingsDialogContext'
-import { GRIST_FORM } from '@/utils/constants'
+import { FullScreenMenuItem } from './FullScreenMenuItem'
+import { SettingsMenuItem } from './SettingsMenuItem'
+import { FeedbackMenuItem } from './FeedbackMenuItem'
+import { EffectsMenuItem } from './EffectsMenuItem'
 
 // @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={{
@@ -23,33 +14,15 @@ export const OptionsMenuItems = () => {
         width: '300px',
       }}
     >
-      <Section>
-        <MenuItem
-          onAction={() => toggleEffects()}
-          className={menuRecipe({ icon: true }).item}
-        >
-          <RiAccountBoxLine size={20} />
-          {t('effects')}
-        </MenuItem>
-      </Section>
+      <MenuSection>
+        <FullScreenMenuItem />
+        <EffectsMenuItem />
+      </MenuSection>
       <Separator />
-      <Section>
-        <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>
-      </Section>
+      <MenuSection>
+        <FeedbackMenuItem />
+        <SettingsMenuItem />
+      </MenuSection>
     </RACMenu>
   )
 }

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

@@ -0,0 +1,20 @@
+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/Participants/ParticipantListItem.tsx

@@ -13,36 +13,10 @@ import {
 } from '@livekit/components-react'
 import Source = Track.Source
 import { RiMicFill, RiMicOffFill } from '@remixicon/react'
-import { Button, Dialog, P } from '@/primitives'
+import { Button } from '@/primitives'
 import { useState } from 'react'
 import { useMuteParticipant } from '@/features/rooms/livekit/api/muteParticipant'
-
-const MuteAlertDialog = ({
-  isOpen,
-  onClose,
-  onSubmit,
-  name,
-}: {
-  isOpen: boolean
-  onClose: () => void
-  onSubmit: () => void
-  name: string
-}) => {
-  const { t } = useTranslation('rooms')
-  return (
-    <Dialog isOpen={isOpen} role="alertdialog">
-      <P>{t('participants.muteParticipantAlert.description', { name })}</P>
-      <HStack gap={1}>
-        <Button variant="text" size="sm" onPress={onClose}>
-          {t('participants.muteParticipantAlert.cancel')}
-        </Button>
-        <Button variant="text" size="sm" onPress={onSubmit}>
-          {t('participants.muteParticipantAlert.confirm')}
-        </Button>
-      </HStack>
-    </Dialog>
-  )
-}
+import { MuteAlertDialog } from '../../MuteAlertDialog'
 
 type MicIndicatorProps = {
   participant: Participant
@@ -118,7 +92,6 @@ export const ParticipantListItem = ({
     <HStack
       role="listitem"
       justify="space-between"
-      key={participant.identity}
       id={participant.identity}
       className={css({
         padding: '0.25rem 0',

src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsList.tsx

@@ -56,7 +56,10 @@ export const ParticipantsList = () => {
             heading={t('raisedHands')}
             participants={raisedHandParticipants}
             renderParticipant={(participant) => (
-              <HandRaisedListItem participant={participant} />
+              <HandRaisedListItem
+                key={participant.identity}
+                participant={participant}
+              />
             )}
             action={() => (
               <LowerAllHandsButton participants={raisedHandParticipants} />
@@ -68,7 +71,10 @@ export const ParticipantsList = () => {
         heading={t('contributors')}
         participants={sortedParticipants}
         renderParticipant={(participant) => (
-          <ParticipantListItem participant={participant} />
+          <ParticipantListItem
+            key={participant.identity}
+            participant={participant}
+          />
         )}
       />
     </Div>

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

@@ -0,0 +1,94 @@
+import { useTranslation } from 'react-i18next'
+import { RiEmotionLine } from '@remixicon/react'
+import { useState, useRef } from 'react'
+import { css } from '@/styled-system/css'
+import { useRoomContext } from '@livekit/components-react'
+import { Menu, ToggleButton, Button } from '@/primitives'
+import { NotificationType } from '@/features/notifications/NotificationType'
+import { NotificationPayload } from '@/features/notifications/NotificationPayload'
+import {
+  ANIMATION_DURATION,
+  ReactionPortals,
+} from '@/features/rooms/livekit/components/ReactionPortal'
+import { Toolbar as RACToolbar } from 'react-aria-components'
+import { Participant } from 'livekit-client'
+
+const EMOJIS = ['👍', '👎', '👏', '❤️', '😂', '😮', '🎉']
+
+export interface Reaction {
+  id: number
+  emoji: string
+  participant: Participant
+}
+
+export const ReactionsToggle = () => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'controls.reactions' })
+  const [reactions, setReactions] = useState<Reaction[]>([])
+  const instanceIdRef = useRef(0)
+  const room = useRoomContext()
+
+  const sendReaction = async (emoji: string) => {
+    const encoder = new TextEncoder()
+    const payload: NotificationPayload = {
+      type: NotificationType.ReactionReceived,
+      data: {
+        emoji: emoji,
+      },
+    }
+    const data = encoder.encode(JSON.stringify(payload))
+    await room.localParticipant.publishData(data, { reliable: true })
+
+    const newReaction = {
+      id: instanceIdRef.current++,
+      emoji,
+      participant: room.localParticipant,
+    }
+    setReactions((prev) => [...prev, newReaction])
+
+    // Remove this reaction after animation
+    setTimeout(() => {
+      setReactions((prev) =>
+        prev.filter((instance) => instance.id !== newReaction.id)
+      )
+    }, ANIMATION_DURATION)
+  }
+
+  return (
+    <>
+      <Menu variant="dark" placement="top">
+        <ToggleButton
+          square
+          variant="primaryDark"
+          aria-label={t('button')}
+          tooltip={t('button')}
+        >
+          <RiEmotionLine />
+        </ToggleButton>
+        <RACToolbar
+          className={css({
+            display: 'flex',
+          })}
+        >
+          {EMOJIS.map((emoji, index) => (
+            <Button
+              key={index}
+              onPress={() => sendReaction(emoji)}
+              aria-label={t('send', { emoji })}
+              variant="quaternaryText"
+              size="sm"
+            >
+              <span
+                className={css({
+                  fontSize: '20px',
+                })}
+              >
+                {emoji}
+              </span>
+            </Button>
+          ))}
+        </RACToolbar>
+      </Menu>
+      <ReactionPortals reactions={reactions} />
+    </>
+  )
+}

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

@@ -46,9 +46,9 @@ export const ScreenShareToggle = ({
       {...props}
     >
       <Div position="relative">
-        <RiRectangleLine size={28} />
+        <RiRectangleLine size={24} />
         <Icon
-          size={16}
+          size={14}
           style={{
             position: 'absolute',
             top: '50%',

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

@@ -13,12 +13,21 @@ import {
   RiVideoOffLine,
   RiVideoOnLine,
 } from '@remixicon/react'
-import { Track } from 'livekit-client'
+import {
+  LocalAudioTrack,
+  LocalVideoTrack,
+  Track,
+  VideoCaptureOptions,
+} 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 { BackgroundProcessorFactory } from '../blur'
 
 export type ToggleSource = Exclude<
   Track.Source,
@@ -65,12 +74,22 @@ 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]
@@ -80,8 +99,53 @@ 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 = BackgroundProcessorFactory.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 })
+    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])
 
   const selectLabel = t('choose', { keyPrefix: `join.${config.kind}` })
 
@@ -92,29 +156,44 @@ export const SelectToggleDevice = <T extends ToggleSource>({
         gap: '1px',
       })}
     >
-      <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>
+      <ToggleDevice
+        {...trackProps}
+        config={config}
+        variant={variant}
+        toggle={toggle}
+        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>
+      )}
     </div>
   )
 }

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

@@ -4,10 +4,14 @@ 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($crisp.is('chat:opened'))
+
+  const [isOpened, setIsOpened] = useState(() => {
+    return window?.$crisp?.is?.('chat:opened') || false
+  })
 
   useEffect(() => {
     if (!Crisp) {
@@ -26,6 +30,12 @@ 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,18 +6,28 @@ 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 } from '@livekit/components-react'
+import {
+  useIsSpeaking,
+  useLocalParticipant,
+  useMaybeRoomContext,
+} from '@livekit/components-react'
+import { ButtonRecipeProps } from '@/primitives/buttonRecipe'
+import { ToggleButtonProps } from '@/primitives/ToggleButton'
 
 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' })
 
@@ -48,24 +58,29 @@ export const ToggleDevice = ({
 
   const Icon = enabled ? iconOn : iconOff
 
-  const { localParticipant } = useLocalParticipant()
-  const isSpeaking = useIsSpeaking(localParticipant)
-
-  if (kind === 'audioinput' && pushToTalk) {
-    return <ActiveSpeaker isSpeaking={isSpeaking} pushToTalk />
+  const context = useMaybeRoomContext()
+  if (kind === 'audioinput' && pushToTalk && context) {
+    return <ActiveSpeakerWrapper />
   }
 
   return (
     <ToggleButton
       isSelected={!enabled}
-      variant={enabled ? 'primaryDark' : 'error2'}
+      variant={enabled ? variant : '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 />
+}

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

@@ -7,7 +7,7 @@ import { css } from '@/styled-system/css'
 import { ToggleButtonProps } from '@/primitives/ToggleButton'
 
 export const TranscriptToggle = ({
-  variant = 'primaryDark',
+  variant = 'primaryTextDark',
   onPress,
   ...props
 }: ToggleButtonProps) => {

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

@@ -0,0 +1,27 @@
+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/components/effects/EffectsConfiguration.tsx

@@ -0,0 +1,370 @@
+import { LocalVideoTrack, Track } from 'livekit-client'
+import { useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  BackgroundProcessorFactory,
+  BackgroundProcessorInterface,
+  ProcessorType,
+} from '../blur'
+import { css } from '@/styled-system/css'
+import { Text, P, ToggleButton, H } from '@/primitives'
+import { styled } from '@/styled-system/jsx'
+import { BackgroundOptions } from '@livekit/track-processors'
+import { BlurOn } from '@/components/icons/BlurOn'
+import { BlurOnStrong } from '@/components/icons/BlurOnStrong'
+import { useTrackToggle } from '@livekit/components-react'
+import { Loader } from '@/primitives/Loader'
+import { useSyncAfterDelay } from '@/hooks/useSyncAfterDelay'
+import { RiProhibited2Line } from '@remixicon/react'
+
+enum BlurRadius {
+  NONE = 0,
+  LIGHT = 5,
+  NORMAL = 10,
+}
+
+const isSupported = BackgroundProcessorFactory.isSupported()
+
+const Information = styled('div', {
+  base: {
+    backgroundColor: 'orange.50',
+    borderRadius: '4px',
+    padding: '0.75rem 0.75rem',
+    alignItems: 'start',
+  },
+})
+
+export type EffectsConfigurationProps = {
+  videoTrack: LocalVideoTrack
+  onSubmit?: (processor?: BackgroundProcessorInterface) => void
+  layout?: 'vertical' | 'horizontal'
+}
+
+export const EffectsConfiguration = ({
+  videoTrack,
+  onSubmit,
+  layout = 'horizontal',
+}: EffectsConfigurationProps) => {
+  const videoRef = useRef<HTMLVideoElement>(null)
+  const { t } = useTranslation('rooms', { keyPrefix: 'effects' })
+  const { toggle, enabled } = useTrackToggle({ source: Track.Source.Camera })
+  const [processorPending, setProcessorPending] = useState(false)
+  const processorPendingReveal = useSyncAfterDelay(processorPending)
+
+  useEffect(() => {
+    const videoElement = videoRef.current
+    if (!videoElement) return
+
+    const attachVideoTrack = async () => videoTrack?.attach(videoElement)
+    attachVideoTrack()
+
+    return () => {
+      if (!videoElement) return
+      videoTrack.detach(videoElement)
+    }
+  }, [videoTrack, videoTrack?.isMuted])
+
+  const clearEffect = async () => {
+    await videoTrack.stopProcessor()
+    onSubmit?.(undefined)
+  }
+
+  const toggleEffect = async (
+    type: ProcessorType,
+    options: BackgroundOptions
+  ) => {
+    setProcessorPending(true)
+    if (!videoTrack) {
+      /**
+       * Special case: if no video track is available, then we must pass directly the processor into the
+       * toggle call. Otherwise, the rest of the function below would not have a videoTrack to call
+       * setProcessor on.
+       *
+       * We arrive in this condition when we enter the room with the camera already off.
+       */
+      const newProcessorTmp = BackgroundProcessorFactory.getProcessor(
+        type,
+        options
+      )!
+      await toggle(true, {
+        processor: newProcessorTmp,
+      })
+      setTimeout(() => setProcessorPending(false))
+      return
+    }
+
+    if (!enabled) {
+      await toggle(true)
+    }
+
+    const processor = getProcessor()
+    try {
+      if (isSelected(type, options)) {
+        // Stop processor.
+        await clearEffect()
+      } else if (!processor || processor.serialize().type !== type) {
+        // Change processor.
+        const newProcessor = BackgroundProcessorFactory.getProcessor(
+          type,
+          options
+        )!
+        await videoTrack.setProcessor(newProcessor)
+        onSubmit?.(newProcessor)
+      } else {
+        // Update processor.
+        processor?.update(options)
+        // We want to trigger onSubmit when options changes so the parent component is aware of it.
+        onSubmit?.(processor)
+      }
+    } catch (error) {
+      console.error('Error applying effect:', error)
+    } finally {
+      // Without setTimeout the DOM is not refreshing when updating the options.
+      setTimeout(() => setProcessorPending(false))
+    }
+  }
+
+  const getProcessor = () => {
+    return videoTrack?.getProcessor() as BackgroundProcessorInterface
+  }
+
+  const isSelected = (type: ProcessorType, options: BackgroundOptions) => {
+    const processor = getProcessor()
+    const processorSerialized = processor?.serialize()
+    return (
+      !!processor &&
+      processorSerialized.type === type &&
+      JSON.stringify(processorSerialized.options) === JSON.stringify(options)
+    )
+  }
+
+  const tooltipLabel = (type: ProcessorType, options: BackgroundOptions) => {
+    return t(`${type}.${isSelected(type, options) ? 'clear' : 'apply'}`)
+  }
+
+  return (
+    <div
+      className={css(
+        layout === 'vertical'
+          ? {
+              display: 'flex',
+              flexDirection: 'column',
+              gap: '1.5rem',
+            }
+          : {
+              display: 'flex',
+              gap: '1.5rem',
+              flexDirection: 'column',
+              md: {
+                flexDirection: 'row',
+                overflow: 'hidden',
+              },
+            }
+      )}
+    >
+      <div
+        className={css({
+          width: '100%',
+          aspectRatio: 16 / 9,
+          position: 'relative',
+        })}
+      >
+        {videoTrack && !videoTrack.isMuted ? (
+          <video
+            ref={videoRef}
+            width="100%"
+            muted
+            style={{
+              transform: 'rotateY(180deg)',
+              minHeight: '175px',
+              borderRadius: '8px',
+            }}
+          />
+        ) : (
+          <div
+            style={{
+              width: '100%',
+              height: '100%',
+              display: 'flex',
+              backgroundColor: 'black',
+              justifyContent: 'center',
+              flexDirection: 'column',
+            }}
+          >
+            <P
+              style={{
+                color: 'white',
+                textAlign: 'center',
+                textWrap: 'balance',
+                marginBottom: 0,
+              }}
+            >
+              {t('activateCamera')}
+            </P>
+          </div>
+        )}
+        {processorPendingReveal && (
+          <div
+            className={css({
+              position: 'absolute',
+              right: '8px',
+              bottom: '8px',
+            })}
+          >
+            <Loader />
+          </div>
+        )}
+      </div>
+      <div
+        className={css(
+          layout === 'horizontal'
+            ? {
+                md: {
+                  borderLeft: '1px solid #dadce0',
+                  paddingLeft: '1.5rem',
+                  width: '420px',
+                  flexShrink: 0,
+                },
+              }
+            : {}
+        )}
+      >
+        {isSupported ? (
+          <>
+            <div>
+              <div>
+                <H
+                  lvl={3}
+                  style={{
+                    marginBottom: '1rem',
+                  }}
+                  variant="bodyXsBold"
+                >
+                  {t('blur.title')}
+                </H>
+                <div
+                  className={css({
+                    display: 'flex',
+                    gap: '1.25rem',
+                  })}
+                >
+                  <ToggleButton
+                    variant="bigSquare"
+                    onPress={async () => {
+                      await clearEffect()
+                    }}
+                    isSelected={!getProcessor()}
+                    isDisabled={processorPendingReveal}
+                  >
+                    <RiProhibited2Line />
+                  </ToggleButton>
+                  <ToggleButton
+                    variant="bigSquare"
+                    aria-label={tooltipLabel(ProcessorType.BLUR, {
+                      blurRadius: BlurRadius.LIGHT,
+                    })}
+                    tooltip={tooltipLabel(ProcessorType.BLUR, {
+                      blurRadius: BlurRadius.LIGHT,
+                    })}
+                    isDisabled={processorPendingReveal}
+                    onChange={async () =>
+                      await toggleEffect(ProcessorType.BLUR, {
+                        blurRadius: BlurRadius.LIGHT,
+                      })
+                    }
+                    isSelected={isSelected(ProcessorType.BLUR, {
+                      blurRadius: BlurRadius.LIGHT,
+                    })}
+                  >
+                    <BlurOn />
+                  </ToggleButton>
+                  <ToggleButton
+                    variant="bigSquare"
+                    aria-label={tooltipLabel(ProcessorType.BLUR, {
+                      blurRadius: BlurRadius.NORMAL,
+                    })}
+                    tooltip={tooltipLabel(ProcessorType.BLUR, {
+                      blurRadius: BlurRadius.NORMAL,
+                    })}
+                    isDisabled={processorPendingReveal}
+                    onChange={async () =>
+                      await toggleEffect(ProcessorType.BLUR, {
+                        blurRadius: BlurRadius.NORMAL,
+                      })
+                    }
+                    isSelected={isSelected(ProcessorType.BLUR, {
+                      blurRadius: BlurRadius.NORMAL,
+                    })}
+                  >
+                    <BlurOnStrong />
+                  </ToggleButton>
+                </div>
+              </div>
+              <div
+                className={css({
+                  marginTop: '1.5rem',
+                })}
+              >
+                <H
+                  lvl={3}
+                  style={{
+                    marginBottom: '1rem',
+                  }}
+                  variant="bodyXsBold"
+                >
+                  {t('virtual.title')}
+                </H>
+                <div
+                  className={css({
+                    display: 'flex',
+                    gap: '1.25rem',
+                    flexWrap: 'wrap',
+                  })}
+                >
+                  {[...Array(8).keys()].map((i) => {
+                    const imagePath = `/assets/backgrounds/${i + 1}.jpg`
+                    const thumbnailPath = `/assets/backgrounds/thumbnails/${i + 1}.jpg`
+                    return (
+                      <ToggleButton
+                        key={i}
+                        variant="bigSquare"
+                        aria-label={tooltipLabel(ProcessorType.VIRTUAL, {
+                          imagePath,
+                        })}
+                        tooltip={tooltipLabel(ProcessorType.VIRTUAL, {
+                          imagePath,
+                        })}
+                        isDisabled={processorPendingReveal}
+                        onChange={async () =>
+                          await toggleEffect(ProcessorType.VIRTUAL, {
+                            imagePath,
+                          })
+                        }
+                        isSelected={isSelected(ProcessorType.VIRTUAL, {
+                          imagePath,
+                        })}
+                        className={css({
+                          bgSize: 'cover',
+                        })}
+                        style={{
+                          backgroundImage: `url(${thumbnailPath})`,
+                        }}
+                      ></ToggleButton>
+                    )
+                  })}
+                </div>
+              </div>
+            </div>
+            <Information className={css({ marginTop: '1rem' })}>
+              <Text variant="sm">⚠︎ {t('experimental')}</Text>
+            </Information>
+          </>
+        ) : (
+          <Information>
+            <Text variant="sm">{t('notAvailable')}</Text>
+          </Information>
+        )}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,91 @@
+// We use vendor prefix properties
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+
+import { useMemo, useState } from 'react'
+import { TrackReferenceOrPlaceholder } from '@livekit/components-core'
+
+export function useFullScreen({
+  trackRef,
+}: {
+  trackRef?: TrackReferenceOrPlaceholder
+}) {
+  const videoElement = useMemo(() => {
+    const elements = trackRef?.publication?.track?.attachedElements
+
+    if (!elements) return
+
+    // Find the visible video element
+    const likeKitElement = elements.find((el) =>
+      el.classList.contains('lk-participant-media-video')
+    )
+
+    if (!likeKitElement) {
+      console.warn('Could not find LiveKit-managed video element')
+      return elements[0] || null
+    }
+
+    return likeKitElement
+  }, [trackRef])
+
+  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 = videoElement || 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

@@ -0,0 +1,56 @@
+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/hooks/useRaisedHand.ts

@@ -19,5 +19,5 @@ export function useRaisedHand({ participant }: useRaisedHandProps) {
     }
   }
 
-  return { isHandRaised: parsedMetadata.raised, toggleRaisedHand }
+  return { isHandRaised: parsedMetadata.raised || false, toggleRaisedHand }
 }

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

@@ -1,12 +1,10 @@
 import { ApiRoom } from '@/features/rooms/api/ApiRoom'
-import { useRoomContext } from '@livekit/components-react'
 import { useParams } from 'wouter'
 import { keys } from '@/api/queryKeys'
 import { queryClient } from '@/api/queryClient'
 
 export const useRoomData = (): ApiRoom | undefined => {
-  const room = useRoomContext()
   const { roomId } = useParams()
-  const queryKey = [keys.room, roomId, room.localParticipant.name]
+  const queryKey = [keys.room, roomId]
   return queryClient.getQueryData<ApiRoom>(queryKey)
 }

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

@@ -4,14 +4,13 @@ import { css } from '@/styled-system/css'
 import { LeaveButton } from '../../components/controls/LeaveButton'
 import { SelectToggleDevice } from '../../components/controls/SelectToggleDevice'
 import { Track } from 'livekit-client'
+import { ReactionsToggle } from '../../components/controls/ReactionsToggle'
 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 { 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 { MoreOptions } from './MoreOptions'
+import { useRef } from 'react'
 
 export function DesktopControlBar({
   onDeviceError,
@@ -21,9 +20,11 @@ export function DesktopControlBar({
   saveVideoInputDeviceId,
 }: ControlBarAuxProps) {
   const browserSupportsScreenSharing = supportsScreenSharing()
+  const desktopControlBarEl = useRef<HTMLDivElement>(null)
   return (
     <>
       <div
+        ref={desktopControlBarEl}
         className={css({
           width: '100vw',
           display: 'flex',
@@ -62,6 +63,7 @@ export function DesktopControlBar({
             onActiveDeviceChange={(deviceId) =>
               saveAudioInputDeviceId(deviceId ?? '')
             }
+            menuVariant="dark"
           />
           <SelectToggleDevice
             source={Track.Source.Camera}
@@ -72,7 +74,9 @@ export function DesktopControlBar({
             onActiveDeviceChange={(deviceId) =>
               saveVideoInputDeviceId(deviceId ?? '')
             }
+            menuVariant="dark"
           />
+          <ReactionsToggle />
           {browserSupportsScreenSharing && (
             <ScreenShareToggle
               onDeviceError={(error) =>
@@ -85,21 +89,7 @@ export function DesktopControlBar({
           <LeaveButton />
           <StartMediaButton />
         </div>
-        <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>
+        <MoreOptions parentElement={desktopControlBarEl} />
       </div>
     </>
   )

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

@@ -23,6 +23,7 @@ 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,
@@ -55,7 +56,7 @@ export function MobileControlBar({
           className={css({
             display: 'flex',
             justifyContent: 'space-between',
-            width: '422px',
+            width: '330px',
           })}
         >
           <LeaveButton />
@@ -68,6 +69,7 @@ export function MobileControlBar({
             onActiveDeviceChange={(deviceId) =>
               saveAudioInputDeviceId(deviceId ?? '')
             }
+            hideMenu={true}
           />
           <SelectToggleDevice
             source={Track.Source.Camera}
@@ -78,6 +80,7 @@ export function MobileControlBar({
             onActiveDeviceChange={(deviceId) =>
               saveVideoInputDeviceId(deviceId ?? '')
             }
+            hideMenu={true}
           />
           <HandToggle />
           <Button
@@ -154,8 +157,8 @@ export function MobileControlBar({
             <LinkButton
               href="https://grist.incubateur.net/o/docs/forms/1YrfNP1QSSy8p2gCxMFnSf/4"
               variant="primaryTextDark"
-              tooltip={t('options.items.feedbacks')}
-              aria-label={t('options.items.feedbacks')}
+              tooltip={t('options.items.feedback')}
+              aria-label={t('options.items.feedback')}
               description={true}
               target="_blank"
               onPress={() => setIsMenuOpened(false)}
@@ -174,6 +177,7 @@ export function MobileControlBar({
             >
               <RiSettings3Line size={20} />
             </Button>
+            <CameraSwitchButton onPress={() => setIsMenuOpened(false)} />
           </div>
         </div>
       </ResponsiveMenu>

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

@@ -0,0 +1,87 @@
+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>
+  )
+}

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

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import {
   usePersistentUserChoices,
-  type LocalUserChoices,
+  type LocalUserChoices as LocalUserChoicesLK,
 } from '@livekit/components-react'
 import { useParams } from 'wouter'
 import { ErrorScreen } from '@/components/ErrorScreen'
@@ -9,6 +9,11 @@ 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/sdk/SdkReverseClient.tsx

@@ -0,0 +1,84 @@
+import { authUrl, useUser } from '../auth'
+
+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 there are no security
+   * plausible at the moment.
+   */
+  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' })
+        }
+      }
+    })
+  }
+}
+
+/**
+ * Returns a function to be awaited in order to make sure the user is logged in.
+ * If not logged-in it opens a popup with the connection flow, the promise returned is resolved
+ * once logged-in.
+ *
+ * To be used in SDK scope.
+ */
+export function useEnsureAuth() {
+  const { isLoggedIn, ...other } = useUser({
+    fetchUserOptions: { attemptSilent: false },
+  })
+
+  const startSSO = () => {
+    return new Promise<void>((resolve) => {
+      SdkReverseClient.waitForAuthenticationAck().then(async () => {
+        await other.refetch()
+        resolve()
+      })
+      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 ensureAuth = async () => {
+    if (!isLoggedIn) {
+      await startSSO()
+    }
+  }
+
+  return { ensureAuth }
+}

src/frontend/src/features/sdk/routes/CreateButton.tsx

@@ -0,0 +1,103 @@
+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,
+  useEnsureAuth,
+} from '../SdkReverseClient'
+
+export const SdkCreateButton = () => {
+  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 { ensureAuth } = useEnsureAuth()
+
+  const submitCreateRoom = async () => {
+    setIsLoading(true)
+    const slug = generateRoomId()
+    const data = await createRoom({ slug, username })
+    const roomUrlTmp = getRouteUrl('room', data.slug)
+    setRoomUrl(roomUrlTmp)
+    setIsLoading(false)
+    SdkReverseClient.post(ClientMessageType.ROOM_CREATED, {
+      url: roomUrlTmp,
+    })
+  }
+
+  const submit = async () => {
+    await ensureAuth()
+    submitCreateRoom()
+  }
+
+  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>
+  )
+}

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

@@ -1,15 +1,13 @@
 import { A, Badge, Button, DialogProps, Field, H, P } from '@/primitives'
 import { Trans, useTranslation } from 'react-i18next'
-import {
-  usePersistentUserChoices,
-  useRoomContext,
-} from '@livekit/components-react'
+import { 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'>