🔖(minor) bump release to 0.1.4

The current design is inefficient, using two separate approaches to manage
the app state and determine which widget is open. This inconsistency affects
the user experience and overall design quality.

Soon, only one container will be open/close, and its content will be toggle,
using an extensible system.

As a quick fix, I’ve added basic logic to ensure that opening one widget
automatically closes any other open widgets, such as the chat or participants
widget. This is a temporary measure to fix state management until a
more robust solution can be implemented.

.github/workflows/meet.yml

@@ -160,6 +160,21 @@ jobs:
       - name: Run tests
         run: ~/.local/bin/pytest -n 2
 
+  lint-front:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Install dependencies
+        run: cd src/frontend/ && npm ci
+
+      - name: Check linting
+        run: cd src/frontend/ && npm run lint
+
+      - name: Check format
+        run: cd src/frontend/ && npm run check
+
   i18n-crowdin:
     runs-on: ubuntu-latest
     steps:

Makefile

@@ -48,7 +48,7 @@ WAIT_DB             = @$(COMPOSE_RUN) dockerize -wait tcp://$(DB_HOST):$(DB_PORT
 
 # -- Backend
 MANAGE              = $(COMPOSE_RUN_APP) python manage.py
-MAIL_YARN           = $(COMPOSE_RUN) -w /app/src/mail node yarn # FIXME : use npm
+MAIL_NPM            = $(COMPOSE_RUN) -w /app/src/mail node npm
 
 # -- Frontend
 PATH_FRONT          = ./src/frontend
@@ -259,19 +259,19 @@ i18n-generate-and-upload: \
 # -- Mail generator
 
 mails-build: ## Convert mjml files to html and text
-	@$(MAIL_YARN) build
+	@$(MAIL_NPM) run build
 .PHONY: mails-build
 
 mails-build-html-to-plain-text: ## Convert html files to text
-	@$(MAIL_YARN) build-html-to-plain-text
+	@$(MAIL_NPM) run build-html-to-plain-text
 .PHONY: mails-build-html-to-plain-text
 
 mails-build-mjml-to-html:	## Convert mjml files to html and text
-	@$(MAIL_YARN) build-mjml-to-html
+	@$(MAIL_NPM) run build-mjml-to-html
 .PHONY: mails-build-mjml-to-html
 
 mails-install: ## install the mail generator
-	@$(MAIL_YARN) install
+	@$(MAIL_NPM) install
 .PHONY: mails-install
 
 

bin/_config.sh

@@ -5,7 +5,6 @@ set -eo pipefail
 REPO_DIR="$(cd "$( dirname "${BASH_SOURCE[0]}" )/.." && pwd)"
 UNSET_USER=0
 
-TERRAFORM_DIRECTORY="./env.d/terraform"
 COMPOSE_FILE="${REPO_DIR}/docker-compose.yml"
 COMPOSE_PROJECT="meet"
 
@@ -92,66 +91,3 @@ function _dc_exec() {
 function _django_manage() {
     _dc_run "app-dev" python manage.py "$@"
 }
-
-# _set_openstack_project: select an OpenStack project from the openrc files defined in the
-# terraform directory.
-#
-# usage: _set_openstack_project
-#
-# If necessary the script will prompt the user to choose a project from those available
-function _set_openstack_project() {
-
-    declare prompt
-    declare -a projects
-    declare -i default=1
-    declare -i choice=0
-    declare -i n_projects
-
-    # List projects by looking in the "./env.d/terraform" directory
-    # and store them in an array
-    read -r -a projects <<< "$(
-        find "${TERRAFORM_DIRECTORY}" -maxdepth 1 -mindepth 1 -type d |
-        sed 's|'"${TERRAFORM_DIRECTORY}\/"'||' |
-        xargs
-    )"
-    nb_projects=${#projects[@]}
-
-    if [[ ${nb_projects} -le 0 ]]; then
-        echo "There are no OpenStack projects defined..." >&2
-        echo "To add one, create a subdirectory in \"${TERRAFORM_DIRECTORY}\" with the name" \
-            "of your project and copy your \"openrc.sh\" file into it." >&2
-        exit 10
-    fi
-
-    if [[ ${nb_projects} -gt 1 ]]; then
-        prompt="Select an OpenStack project to target:\\n"
-        for (( i=0; i<nb_projects; i++ )); do
-            prompt+="[$((i+1))] ${projects[$i]}"
-            if [[ $((i+1)) -eq ${default} ]]; then
-                prompt+=" (default)"
-            fi
-            prompt+="\\n"
-        done
-        prompt+="If your OpenStack project is not listed, add it to the \"env.d/terraform\" directory.\\n"
-        prompt+="Your choice: "
-        read -r -p "$(echo -e "${prompt}")" choice
-
-        if [[ ${choice} -gt nb_projects ]]; then
-            (>&2 echo "Invalid choice ${choice} (should be <= ${nb_projects})")
-            exit 11
-        fi
-
-        if [[ ${choice} -le 0 ]]; then
-            choice=${default}
-        fi
-    fi
-
-    project=${projects[$((choice-1))]}
-    # Check that the openrc.sh file exists for this project
-    if [ ! -f "${TERRAFORM_DIRECTORY}/${project}/openrc.sh" ]; then
-        (>&2 echo "Missing \"openrc.sh\" file in \"${TERRAFORM_DIRECTORY}/${project}\". Check documentation.")
-        exit 12
-    fi
-
-    echo "${project}"
-}

bin/state

@@ -1,25 +0,0 @@
-#!/usr/bin/env bash
-set -eo pipefail
-
-source "$(dirname "${BASH_SOURCE[0]}")/_config.sh"
-
-project=$(_set_openstack_project)
-echo "Using \"${project}\" project..."
-
-source "${TERRAFORM_DIRECTORY}/${project}/openrc.sh"
-
-# Run Terraform commands in the Hashicorp docker container via docker compose
-# shellcheck disable=SC2068
-DOCKER_USER="$(id -u):$(id -g)" \
-    PROJECT="${project}" \
-    docker compose run --rm \
-    -e OS_AUTH_URL \
-    -e OS_IDENTITY_API_VERSION \
-    -e OS_USER_DOMAIN_NAME \
-    -e OS_PROJECT_DOMAIN_NAME \
-    -e OS_TENANT_ID \
-    -e OS_TENANT_NAME \
-    -e OS_USERNAME \
-    -e OS_PASSWORD \
-    -e OS_REGION_NAME \
-    terraform-state "$@"

bin/terraform

@@ -1,26 +0,0 @@
-#!/usr/bin/env bash
-set -eo pipefail
-
-source "$(dirname "${BASH_SOURCE[0]}")/_config.sh"
-
-project=$(_set_openstack_project)
-echo "Using \"${project}\" project..."
-
-source "${TERRAFORM_DIRECTORY}/${project}/openrc.sh"
-
-# Run Terraform commands in the Hashicorp docker container via docker compose
-# shellcheck disable=SC2068
-DOCKER_USER="$(id -u):$(id -g)" \
-    PROJECT="${project}" \
-    docker compose run --rm \
-    -e OS_AUTH_URL \
-    -e OS_IDENTITY_API_VERSION \
-    -e OS_USER_DOMAIN_NAME \
-    -e OS_PROJECT_DOMAIN_NAME \
-    -e OS_TENANT_ID \
-    -e OS_TENANT_NAME \
-    -e OS_USERNAME \
-    -e OS_PASSWORD \
-    -e OS_REGION_NAME \
-    -e TF_VAR_user_name \
-    terraform "$@"

docs/release.md

@@ -3,20 +3,28 @@
 Whenever we are cooking a new release (e.g. `4.18.1`) we should follow a standard procedure described below:
 
 1.  Create a new branch named: `release/4.18.1`.
-2.  Bump the release number for backend project, frontend projects, and Helm files:
+   2.  Bump the release number for backend project, frontend projects, and Helm files:
 
-    - for backend, update the version number by hand in `pyproject.toml`,
-    - for each frontend projects (`src/frontend`, `src/mail`), run `npm version 4.18.1` in their directory. This will update both their `package.json` and `package-lock.json` for you,
-    - for Helm, update Docker image tag in files located at `src/helm/env.d` for both `preprod` and `production` environments:
+       - for backend, update the version number by hand in `pyproject.toml`,
+       - for each frontend projects (`src/frontend`, `src/mail`), run `npm version 4.18.1` in their directory. This will update both their `package.json` and `package-lock.json` for you,
+       - for Helm, update Docker image tag in files located at `src/helm/env.d` for both `preprod` and `production` environments:
 
-      ```yaml
-      image:
-        repository: lasuite/meet-backend
-        pullPolicy: Always
-        tag: "v4.18.1" # Replace with your new version number, without forgetting the "v" prefix
-      ```
+         ```yaml
+         image:
+           repository: lasuite/meet-backend
+           pullPolicy: Always
+           tag: "v4.18.1" # Replace with your new version number, without forgetting the "v" prefix
+      
+         ...
+      
+         frontend:
+           image:
+             repository: lasuite/meet-frontend
+             pullPolicy: Always
+             tag: "v4.18.1" # Replace with your new version number, without forgetting the "v" prefix
+         ```
 
-      The new images don't exist _yet_: they will be created automatically later in the process.
+         The new images don't exist _yet_: they will be created automatically later in the process.
 
 3.  ~~Update the project's `Changelog` following the [keepachangelog](https://keepachangelog.com/en/0.3.0/) recommendations~~ _we don't keep a changelog yet for now as the project is still in its infancy. Soon™!_
 4.  Commit your changes with the following format: the 🔖 release emoji, the type of release (patch/minor/patch) and the release version:

scripts/updatekeys.sh

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

src/backend/core/api/serializers.py

@@ -123,7 +123,7 @@ class RoomSerializer(serializers.ModelSerializer):
         if role is not None or instance.is_public:
             slug = f"{instance.id!s}".replace("-", "")
 
-            username = request.GET.get("username", None)
+            username = request.query_params.get("username", None)
 
             output["livekit"] = {
                 "url": settings.LIVEKIT_CONFIGURATION["url"],

src/backend/core/migrations/0003_alter_room_configuration.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.0.7 on 2024-08-07 14:38
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('core', '0002_create_pg_trgm_extension'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='room',
+            name='configuration',
+            field=models.JSONField(blank=True, default=dict, help_text='Values for Visio parameters to configure the room.', verbose_name='Visio room configuration'),
+        )
+    ]

src/backend/core/migrations/0004_alter_user_language.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.0.7 on 2024-08-07 14:39
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('core', '0003_alter_room_configuration'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='user',
+            name='language',
+            field=models.CharField(choices="(('en-us', 'English'), ('fr-fr', 'French'))", default='en-us', help_text='The language in which the user wants to see the interface.', max_length=10, verbose_name='language'),
+        ),
+    ]

src/backend/core/models.py

@@ -296,7 +296,7 @@ class Room(Resource):
 
     configuration = models.JSONField(
         blank=True,
-        default={},
+        default=dict,
         verbose_name=_("Visio room configuration"),
         help_text=_("Values for Visio parameters to configure the room."),
     )

src/backend/core/utils.py

@@ -11,7 +11,7 @@ from livekit.api import AccessToken, VideoGrants
 
 
 def generate_token(room: str, user, username: Optional[str] = None) -> str:
-    """Generate a Livekit access token for a user in a specific room.
+    """Generate a LiveKit access token for a user in a specific room.
 
     Args:
         room (str): The name of the room.
@@ -22,10 +22,10 @@ def generate_token(room: str, user, username: Optional[str] = None) -> str:
     Returns:
         str: The LiveKit JWT access token.
     """
-
     video_grants = VideoGrants(
         room=room,
         room_join=True,
+        can_update_own_metadata=True,
         can_publish_sources=[
             "camera",
             "microphone",
@@ -34,18 +34,21 @@ def generate_token(room: str, user, username: Optional[str] = None) -> str:
         ],
     )
 
-    token = AccessToken(
-        api_key=settings.LIVEKIT_CONFIGURATION["api_key"],
-        api_secret=settings.LIVEKIT_CONFIGURATION["api_secret"],
-    ).with_grants(video_grants)
-
     if user.is_anonymous:
-        token.with_identity(str(uuid4()))
+        identity = str(uuid4())
         default_username = "Anonymous"
     else:
-        token.with_identity(user.sub)
+        identity = str(user.sub)
         default_username = str(user)
 
-    token.with_name(username or default_username)
+    token = (
+        AccessToken(
+            api_key=settings.LIVEKIT_CONFIGURATION["api_key"],
+            api_secret=settings.LIVEKIT_CONFIGURATION["api_secret"],
+        )
+        .with_grants(video_grants)
+        .with_identity(identity)
+        .with_name(username or default_username)
+    )
 
     return token.to_jwt()

src/backend/meet/settings.py

@@ -12,6 +12,7 @@ https://docs.djangoproject.com/en/3.1/ref/settings/
 
 import json
 import os
+from socket import gethostbyname, gethostname
 
 from django.utils.translation import gettext_lazy as _
 
@@ -71,6 +72,7 @@ class Base(Configuration):
     # Security
     ALLOWED_HOSTS = values.ListValue([])
     SECRET_KEY = values.Value(None)
+    SILENCED_SYSTEM_CHECKS = values.ListValue([])
 
     # Application definition
     ROOT_URLCONF = "meet.urls"
@@ -513,7 +515,11 @@ class Production(Base):
     """
 
     # Security
-    ALLOWED_HOSTS = values.ListValue(None)
+    ALLOWED_HOSTS = [
+        *values.ListValue([], environ_name="ALLOWED_HOSTS"),
+        gethostbyname(gethostname()),
+    ]
+
     CSRF_TRUSTED_ORIGINS = values.ListValue([])
     SECURE_BROWSER_XSS_FILTER = True
     SECURE_CONTENT_TYPE_NOSNIFF = True

src/backend/pyproject.toml

@@ -7,7 +7,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "meet"
-version = "0.1.3"
+version = "0.1.4"
 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.34.153",
+    "boto3==1.34.154",
     "Brotli==1.1.0",
     "celery[redis]==5.4.0",
     "django-configurations==2.5.1",

src/frontend/.eslintrc.cjs

@@ -7,6 +7,7 @@ module.exports = {
     'plugin:react-hooks/recommended',
     'plugin:@tanstack/eslint-plugin-query/recommended',
     'plugin:jsx-a11y/recommended',
+    'prettier'
   ],
   ignorePatterns: ['dist', '.eslintrc.cjs', 'styled-system'],
   parser: '@typescript-eslint/parser',

src/frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "meet",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "meet",
-      "version": "0.1.3",
+      "version": "0.1.4",
       "dependencies": {
         "@livekit/components-react": "2.3.3",
         "@livekit/components-styles": "1.0.12",
@@ -37,10 +37,12 @@
         "@typescript-eslint/parser": "7.13.1",
         "@vitejs/plugin-react": "4.3.1",
         "eslint": "8.57.0",
+        "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-jsx-a11y": "6.9.0",
         "eslint-plugin-react-hooks": "4.6.2",
         "eslint-plugin-react-refresh": "0.4.7",
         "postcss": "8.4.39",
+        "prettier": "3.3.3",
         "typescript": "5.5.2",
         "vite": "5.3.1",
         "vite-tsconfig-paths": "4.3.2"
@@ -452,6 +454,7 @@
     },
     "node_modules/@clack/prompts/node_modules/is-unicode-supported": {
       "version": "1.3.0",
+      "dev": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -1588,6 +1591,21 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/@pandacss/node/node_modules/prettier": {
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz",
+      "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/@pandacss/parser": {
       "version": "0.41.0",
       "resolved": "https://registry.npmjs.org/@pandacss/parser/-/parser-0.41.0.tgz",
@@ -5700,6 +5718,18 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/eslint-config-prettier": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz",
+      "integrity": "sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==",
+      "dev": true,
+      "bin": {
+        "eslint-config-prettier": "bin/cli.js"
+      },
+      "peerDependencies": {
+        "eslint": ">=7.0.0"
+      }
+    },
     "node_modules/eslint-plugin-jsx-a11y": {
       "version": "6.9.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.9.0.tgz",
@@ -8919,9 +8949,9 @@
       }
     },
     "node_modules/prettier": {
-      "version": "3.2.5",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz",
-      "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==",
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
+      "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
       "dev": true,
       "bin": {
         "prettier": "bin/prettier.cjs"

src/frontend/package.json

@@ -1,14 +1,16 @@
 {
   "name": "meet",
   "private": true,
-  "version": "0.1.3",
+  "version": "0.1.4",
   "type": "module",
   "scripts": {
     "dev": "panda codegen && vite",
     "build": "panda codegen && tsc -b && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
-    "i18n:extract": "npx i18next -c i18next-parser.config.json"
+    "i18n:extract": "npx i18next -c i18next-parser.config.json",
+    "format": "prettier --write ./src",
+    "check": "prettier --check ./src"
   },
   "dependencies": {
     "@livekit/components-react": "2.3.3",
@@ -40,10 +42,12 @@
     "@typescript-eslint/parser": "7.13.1",
     "@vitejs/plugin-react": "4.3.1",
     "eslint": "8.57.0",
+    "eslint-config-prettier": "9.1.0",
     "eslint-plugin-jsx-a11y": "6.9.0",
     "eslint-plugin-react-hooks": "4.6.2",
     "eslint-plugin-react-refresh": "0.4.7",
     "postcss": "8.4.39",
+    "prettier": "3.3.3",
     "typescript": "5.5.2",
     "vite": "5.3.1",
     "vite-tsconfig-paths": "4.3.2"

src/frontend/src/App.tsx

@@ -10,9 +10,8 @@ import { Layout } from './layout/Layout'
 import { NotFoundScreen } from './components/NotFoundScreen'
 import { routes } from './routes'
 import './i18n/init'
-import { silenceLiveKitLogs } from "@/utils/livekit.ts";
-import { queryClient } from "@/api/queryClient";
-
+import { silenceLiveKitLogs } from '@/utils/livekit.ts'
+import { queryClient } from '@/api/queryClient'
 
 function App() {
   const { i18n } = useTranslation()

src/frontend/src/api/queryClient.ts

@@ -1,3 +1,3 @@
-import { QueryClient } from "@tanstack/react-query";
+import { QueryClient } from '@tanstack/react-query'
 
 export const queryClient = new QueryClient()

src/frontend/src/components/ErrorScreen.tsx

@@ -4,7 +4,10 @@ import { useTranslation } from 'react-i18next'
 import { Center } from '@/styled-system/jsx'
 import { Text } from '@/primitives'
 
-export const ErrorScreen = ({ title, body }: {
+export const ErrorScreen = ({
+  title,
+  body,
+}: {
   title?: string
   body?: string
 }) => {

src/frontend/src/features/auth/utils/authUrl.ts

@@ -4,5 +4,7 @@ export const authUrl = ({
   silent = false,
   returnTo = window.location.href,
 } = {}) => {
-  return apiUrl(`/authenticate?silent=${encodeURIComponent(silent)}&returnTo=${encodeURIComponent(returnTo)}`)
+  return apiUrl(
+    `/authenticate?silent=${encodeURIComponent(silent)}&returnTo=${encodeURIComponent(returnTo)}`
+  )
 }

src/frontend/src/features/auth/utils/silentLogin.ts

@@ -1,20 +1,20 @@
-import { authUrl } from "@/features/auth";
+import { authUrl } from '@/features/auth'
 
 const SILENT_LOGIN_RETRY_KEY = 'silent-login-retry'
 
 const isRetryAllowed = () => {
-  const lastRetryDate = localStorage.getItem(SILENT_LOGIN_RETRY_KEY);
+  const lastRetryDate = localStorage.getItem(SILENT_LOGIN_RETRY_KEY)
   if (!lastRetryDate) {
-    return true;
+    return true
   }
-  const now = new Date();
+  const now = new Date()
   return now.getTime() > Number(lastRetryDate)
 }
 
 const setNextRetryTime = (retryIntervalInSeconds: number) => {
   const now = new Date()
-  const nextRetryTime = now.getTime() + (retryIntervalInSeconds * 1000);
-  localStorage.setItem(SILENT_LOGIN_RETRY_KEY, String(nextRetryTime));
+  const nextRetryTime = now.getTime() + retryIntervalInSeconds * 1000
+  localStorage.setItem(SILENT_LOGIN_RETRY_KEY, String(nextRetryTime))
 }
 
 const initiateSilentLogin = () => {

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

@@ -9,18 +9,23 @@ import { generateRoomId } from '@/features/rooms'
 import { authUrl, useUser, UserAware } from '@/features/auth'
 import { JoinMeetingDialog } from '../components/JoinMeetingDialog'
 import { useCreateRoom } from '@/features/rooms'
+import { usePersistentUserChoices } from '@livekit/components-react'
 
 export const Home = () => {
   const { t } = useTranslation('home')
   const { isLoggedIn } = useUser()
 
+  const {
+    userChoices: { username },
+  } = usePersistentUserChoices()
+
   const { mutateAsync: createRoom } = useCreateRoom({
     onSuccess: (data) => {
       navigateTo('room', data.slug, {
         state: { create: true, initialRoomData: data },
       })
-    }
-  });
+    },
+  })
 
   return (
     <UserAware>
@@ -43,9 +48,9 @@ export const Home = () => {
               onPress={
                 isLoggedIn
                   ? async () => {
-                    const slug = generateRoomId()
-                    await createRoom({slug})
-                  }
+                      const slug = generateRoomId()
+                      await createRoom({ slug, username })
+                    }
                   : undefined
               }
               href={isLoggedIn ? undefined : authUrl()}

src/frontend/src/features/rooms/api/ApiRoom.ts

@@ -9,6 +9,6 @@ export type ApiRoom = {
     token: string
   }
   configuration?: {
-    [key: string]: string | number | boolean;
+    [key: string]: string | number | boolean
   }
 }

src/frontend/src/features/rooms/api/createRoom.ts

@@ -1,25 +1,30 @@
-import { useMutation, UseMutationOptions } from "@tanstack/react-query";
-import { fetchApi } from '@/api/fetchApi';
-import { ApiError } from "@/api/ApiError";
-import { ApiRoom } from "./ApiRoom";
+import { useMutation, UseMutationOptions } from '@tanstack/react-query'
+import { fetchApi } from '@/api/fetchApi'
+import { ApiError } from '@/api/ApiError'
+import { ApiRoom } from './ApiRoom'
 
 export interface CreateRoomParams {
-  slug: string;
+  slug: string
+  username?: string
 }
 
-const createRoom = ({slug}: CreateRoomParams): Promise<ApiRoom> => {
-  return fetchApi(`rooms/`, {
+const createRoom = ({
+  slug,
+  username = '',
+}: CreateRoomParams): Promise<ApiRoom> => {
+  return fetchApi(`rooms/?username=${encodeURIComponent(username)}`, {
     method: 'POST',
     body: JSON.stringify({
       name: slug,
     }),
   })
-};
+}
 
-
-export function useCreateRoom(options?: UseMutationOptions<ApiRoom, ApiError, CreateRoomParams>) {
+export function useCreateRoom(
+  options?: UseMutationOptions<ApiRoom, ApiError, CreateRoomParams>
+) {
   return useMutation<ApiRoom, ApiError, CreateRoomParams>({
     mutationFn: createRoom,
     onSuccess: options?.onSuccess,
-  });
+  })
 }

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

@@ -4,7 +4,6 @@ import { useTranslation } from 'react-i18next'
 import {
   formatChatMessageLinks,
   LiveKitRoom,
-  VideoConference,
   type LocalUserChoices,
 } from '@livekit/components-react'
 import { Room, RoomOptions } from 'livekit-client'
@@ -19,6 +18,8 @@ import { ApiRoom } from '../api/ApiRoom'
 import { useCreateRoom } from '../api/createRoom'
 import { InviteDialog } from './InviteDialog'
 
+import { VideoConference } from '../livekit/prefabs/VideoConference'
+
 export const Conference = ({
   roomId,
   userConfig,
@@ -32,14 +33,23 @@ export const Conference = ({
 }) => {
   const fetchKey = [keys.room, roomId, userConfig.username]
 
-  const { mutateAsync: createRoom, status: createStatus, isError: isCreateError} = useCreateRoom({
+  const {
+    mutateAsync: createRoom,
+    status: createStatus,
+    isError: isCreateError,
+  } = useCreateRoom({
     onSuccess: (data) => {
       queryClient.setQueryData(fetchKey, data)
     },
-  });
+  })
 
-  const { status: fetchStatus, isError: isFetchError, data } = useQuery({
+  const {
+    status: fetchStatus,
+    isError: isFetchError,
+    data,
+  } = useQuery({
     queryKey: fetchKey,
+    staleTime: 6 * 60 * 60 * 1000, // By default, LiveKit access tokens expire 6 hours after generation
     enabled: !initialRoomData,
     initialData: initialRoomData,
     queryFn: () =>
@@ -48,7 +58,7 @@ export const Conference = ({
         username: userConfig.username,
       }).catch((error) => {
         if (error.statusCode == '404') {
-          createRoom({slug: roomId})
+          createRoom({ slug: roomId, username: userConfig.username })
         }
       }),
     retry: false,
@@ -92,12 +102,17 @@ export const Conference = ({
   const { t } = useTranslation('rooms')
   if (isCreateError) {
     // this error screen should be replaced by a proper waiting room for anonymous user.
-    return <ErrorScreen title={t('error.createRoom.heading')} body={t('error.createRoom.body')} />
+    return (
+      <ErrorScreen
+        title={t('error.createRoom.heading')}
+        body={t('error.createRoom.body')}
+      />
+    )
   }
 
   return (
     <QueryAware status={isFetchError ? createStatus : fetchStatus}>
-      <Screen>
+      <Screen header={false}>
         <LiveKitRoom
           room={room}
           serverUrl={data?.livekit?.url}
@@ -106,9 +121,7 @@ export const Conference = ({
           audio={userConfig.audioEnabled}
           video={userConfig.videoEnabled}
         >
-          <VideoConference
-            chatMessageFormatter={formatChatMessageLinks}
-          />
+          <VideoConference chatMessageFormatter={formatChatMessageLinks} />
           {showInviteDialog && (
             <InviteDialog
               isOpen={showInviteDialog}

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

@@ -0,0 +1,56 @@
+import { useTranslation } from 'react-i18next'
+import { RiChat1Line } from '@remixicon/react'
+import { Button } from '@/primitives'
+import { css } from '@/styled-system/css'
+import { useLayoutContext } from '@livekit/components-react'
+import { useSnapshot } from 'valtio'
+import { participantsStore } from '@/stores/participants'
+
+export const ChatToggle = () => {
+  const { t } = useTranslation('rooms')
+
+  const { dispatch, state } = useLayoutContext().widget
+  const tooltipLabel = state?.showChat ? 'open' : 'closed'
+
+  const participantsSnap = useSnapshot(participantsStore)
+  const showParticipants = participantsSnap.showParticipants
+
+  return (
+    <div
+      className={css({
+        position: 'relative',
+        display: 'inline-block',
+      })}
+    >
+      <Button
+        toggle
+        square
+        legacyStyle
+        aria-label={t(`controls.chat.${tooltipLabel}`)}
+        tooltip={t(`controls.chat.${tooltipLabel}`)}
+        isSelected={state?.showChat}
+        onPress={() => {
+          if (showParticipants) participantsStore.showParticipants = false
+          if (dispatch) dispatch({ msg: 'toggle_chat' })
+        }}
+      >
+        <RiChat1Line />
+      </Button>
+      {!!state?.unreadMessages && (
+        <div
+          className={css({
+            position: 'absolute',
+            top: '-.25rem',
+            right: '-.25rem',
+            width: '1rem',
+            height: '1rem',
+            backgroundColor: 'red',
+            borderRadius: '50%',
+            zIndex: 1,
+            border: '2px solid #d1d5db',
+          })}
+        />
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,22 @@
+import { useTranslation } from 'react-i18next'
+import { RiMore2Line } from '@remixicon/react'
+import { Button } from '@/primitives'
+import { OptionsMenu } from '@/features/rooms/livekit/components/controls/Options/OptionsMenu.tsx'
+import { MenuTrigger } from 'react-aria-components'
+
+export const OptionsButton = () => {
+  const { t } = useTranslation('rooms')
+  return (
+    <MenuTrigger>
+      <Button
+        square
+        legacyStyle
+        aria-label={t('options.buttonLabel')}
+        tooltip={t('options.buttonLabel')}
+      >
+        <RiMore2Line />
+      </Button>
+      <OptionsMenu />
+    </MenuTrigger>
+  )
+}

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

@@ -0,0 +1,118 @@
+import { useTranslation } from 'react-i18next'
+import {
+  RiFeedbackLine,
+  RiQuestionLine,
+  RiSettings3Line,
+  RiUser5Line,
+} from '@remixicon/react'
+import { useState } from 'react'
+import { styled } from '@/styled-system/jsx'
+import {
+  Menu as RACMenu,
+  MenuItem as RACMenuItem,
+  Popover as RACPopover,
+  Separator as RACSeparator,
+} from 'react-aria-components'
+import { SettingsDialog } from '@/features/settings'
+import { UsernameDialog } from '../../dialogs/UsernameDialog'
+
+// Styled components to be refactored
+const StyledMenu = styled(RACMenu, {
+  base: {
+    maxHeight: 'inherit',
+    boxSizing: 'border-box',
+    overflow: 'auto',
+    padding: '2px',
+    minWidth: '150px',
+    outline: 'none',
+  },
+})
+
+const StyledMenuItem = styled(RACMenuItem, {
+  base: {
+    margin: '2px',
+    padding: '0.286rem 0.571rem',
+    borderRadius: '6px',
+    outline: 'none',
+    cursor: 'default',
+    color: 'black',
+    fontSize: '1.072rem',
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '20px',
+    forcedColorAdjust: 'none',
+    '&[data-focused]': {
+      color: 'primary.text',
+      backgroundColor: 'primary',
+      outline: 'none!',
+    },
+  },
+})
+
+const StyledPopover = styled(RACPopover, {
+  base: {
+    border: '1px solid #9ca3af',
+    boxShadow: '0 8px 20px rgba(0, 0, 0, 0.1)',
+    borderRadius: '4px',
+    background: 'white',
+    color: 'var(--text-color)',
+    outline: 'none',
+    minWidth: '112px',
+    width: '300px',
+  },
+})
+
+const StyledSeparator = styled(RACSeparator, {
+  base: {
+    height: '1px',
+    background: '#9ca3af',
+    margin: '2px 4px',
+  },
+})
+
+type DialogState = 'username' | 'settings' | null
+
+export const OptionsMenu = () => {
+  const { t } = useTranslation('rooms')
+  const [dialogOpen, setDialogOpen] = useState<DialogState>(null)
+  return (
+    <>
+      <StyledPopover>
+        <StyledMenu>
+          <StyledMenuItem onAction={() => setDialogOpen('username')}>
+            <RiUser5Line size={18} />
+            {t('options.items.username')}
+          </StyledMenuItem>
+          <StyledSeparator />
+          <StyledMenuItem
+            href="https://tchap.gouv.fr/#/room/!aGImQayAgBLjSBycpm:agent.dinum.tchap.gouv.fr?via=agent.dinum.tchap.gouv.fr"
+            target="_blank"
+          >
+            <RiQuestionLine size={18} />
+            {t('options.items.support')}
+          </StyledMenuItem>
+          <StyledMenuItem
+            href="https://grist.incubateur.net/o/docs/forms/1YrfNP1QSSy8p2gCxMFnSf/4"
+            target="_blank"
+          >
+            <RiFeedbackLine size={18} />
+            {t('options.items.feedbacks')}
+          </StyledMenuItem>
+          <StyledMenuItem onAction={() => setDialogOpen('settings')}>
+            <RiSettings3Line size={18} />
+            {t('options.items.settings')}
+          </StyledMenuItem>
+        </StyledMenu>
+      </StyledPopover>
+      <UsernameDialog
+        isOpen={dialogOpen === 'username'}
+        onOpenChange={(v) => !v && setDialogOpen(null)}
+      />
+      <SettingsDialog
+        isOpen={dialogOpen === 'settings'}
+        onOpenChange={(v) => !v && setDialogOpen(null)}
+      />
+    </>
+  )
+}

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

@@ -0,0 +1,160 @@
+import { css } from '@/styled-system/css'
+import * as React from 'react'
+import { useParticipants } from '@livekit/components-react'
+
+import { Heading } from 'react-aria-components'
+import { Box, Button, Div } from '@/primitives'
+import { HStack, VStack } from '@/styled-system/jsx'
+import { Text, text } from '@/primitives/Text'
+import { RiCloseLine } from '@remixicon/react'
+import { capitalize } from '@/utils/capitalize'
+import { participantsStore } from '@/stores/participants'
+import { useTranslation } from 'react-i18next'
+import { allParticipantRoomEvents } from '@/features/rooms/livekit/constants/events'
+
+export type AvatarProps = React.HTMLAttributes<HTMLSpanElement> & {
+  name: string
+  size?: number
+}
+
+// TODO - extract inline styling in a centralized styling file, and avoid magic numbers
+export const Avatar = ({ name, size = 32 }: AvatarProps) => (
+  <div
+    className={css({
+      minWidth: `${size}px`,
+      minHeight: `${size}px`,
+      backgroundColor: '#3498db',
+      borderRadius: '50%',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      fontSize: '1.25rem',
+      userSelect: 'none',
+      cursor: 'default',
+      color: 'white',
+    })}
+  >
+    {name?.trim()?.charAt(0).toUpperCase()}
+  </div>
+)
+
+// TODO: Optimize rendering performance, especially for longer participant lists, even though they are generally short.
+export const ParticipantsList = () => {
+  const { t } = useTranslation('rooms')
+
+  // Preferred using the 'useParticipants' hook rather than the separate remote and local hooks,
+  // because the 'useLocalParticipant' hook does not update the participant's information when their
+  // metadata/name changes. The LiveKit team has marked this as a TODO item in the code.
+  const participants = useParticipants({
+    updateOnlyOn: allParticipantRoomEvents,
+  })
+
+  const formattedParticipants = participants.map((participant) => ({
+    name: participant.name || participant.identity,
+    id: participant.identity,
+  }))
+
+  const sortedRemoteParticipants = formattedParticipants
+    .slice(1)
+    .sort((a, b) => a.name.localeCompare(b.name))
+
+  const allParticipants = [
+    formattedParticipants[0], // first participant returned by the hook, is always the local one
+    ...sortedRemoteParticipants,
+  ]
+
+  // TODO - extract inline styling in a centralized styling file, and avoid magic numbers
+  return (
+    <Box
+      size="sm"
+      minWidth="300px"
+      className={css({
+        overflow: 'hidden',
+        display: 'flex',
+        flexDirection: 'column',
+        margin: '1.5rem 1.5rem 1.5rem 0',
+      })}
+    >
+      <Heading slot="title" level={3} className={text({ variant: 'h2' })}>
+        <span>{t('participants.heading')}</span>{' '}
+        <span
+          className={css({
+            marginLeft: '0.75rem',
+            fontWeight: 'normal',
+            fontSize: '1rem',
+          })}
+        >
+          {participants?.length}
+        </span>
+      </Heading>
+      <Div position="absolute" top="5" right="5">
+        <Button
+          invisible
+          size="xs"
+          onPress={() => (participantsStore.showParticipants = false)}
+          aria-label={t('participants.closeButton')}
+          tooltip={t('participants.closeButton')}
+        >
+          <RiCloseLine />
+        </Button>
+      </Div>
+      {participants?.length && (
+        <VStack
+          role="list"
+          className={css({
+            alignItems: 'start',
+            gap: 'none',
+            overflowY: 'scroll',
+            overflowX: 'hidden',
+            minHeight: 0,
+            flexGrow: 1,
+            display: 'flex',
+          })}
+        >
+          {allParticipants.map((participant, index) => (
+            <HStack
+              role="listitem"
+              key={participant.id}
+              id={participant.id}
+              className={css({
+                padding: '0.25rem 0',
+              })}
+            >
+              <Avatar name={participant.name} />
+              <Text
+                variant={'sm'}
+                className={css({
+                  userSelect: 'none',
+                  cursor: 'default',
+                  display: 'flex',
+                })}
+              >
+                <span
+                  className={css({
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    maxWidth: '120px',
+                    display: 'block',
+                  })}
+                >
+                  {capitalize(participant.name)}
+                </span>
+                {index === 0 && (
+                  <span
+                    className={css({
+                      marginLeft: '.25rem',
+                      whiteSpace: 'nowrap',
+                    })}
+                  >
+                    ({t('participants.you')})
+                  </span>
+                )}
+              </Text>
+            </HStack>
+          ))}
+        </VStack>
+      )}
+    </Box>
+  )
+}

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

@@ -0,0 +1,75 @@
+import { useTranslation } from 'react-i18next'
+import { RiGroupLine, RiInfinityLine } from '@remixicon/react'
+import { Button } from '@/primitives'
+import { css } from '@/styled-system/css'
+import { useLayoutContext, useParticipants } from '@livekit/components-react'
+import { useSnapshot } from 'valtio'
+import { participantsStore } from '@/stores/participants'
+
+export const ParticipantsToggle = () => {
+  const { t } = useTranslation('rooms')
+
+  const { dispatch, state } = useLayoutContext().widget
+
+  /**
+   * Context could not be used due to inconsistent refresh behavior.
+   * The 'numParticipant' property on the room only updates when the room's metadata changes,
+   * resulting in a delay compared to the participant list's actual refresh rate.
+   */
+  const participants = useParticipants()
+  const numParticipants = participants?.length
+
+  const participantsSnap = useSnapshot(participantsStore)
+  const showParticipants = participantsSnap.showParticipants
+
+  const tooltipLabel = showParticipants ? 'open' : 'closed'
+
+  return (
+    <div
+      className={css({
+        position: 'relative',
+        display: 'inline-block',
+      })}
+    >
+      <Button
+        toggle
+        square
+        legacyStyle
+        aria-label={t(`controls.participants.${tooltipLabel}`)}
+        tooltip={t(`controls.participants.${tooltipLabel}`)}
+        isSelected={showParticipants}
+        onPress={() => {
+          if (dispatch && state?.showChat) dispatch({ msg: 'toggle_chat' })
+          participantsStore.showParticipants = !showParticipants
+        }}
+      >
+        <RiGroupLine />
+      </Button>
+      <div
+        className={css({
+          position: 'absolute',
+          top: '-.25rem',
+          right: '-.25rem',
+          width: '1.25rem',
+          height: '1.25rem',
+          backgroundColor: 'gray',
+          borderRadius: '50%',
+          color: 'white',
+          fontSize: '0.75rem',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          textAlign: 'center',
+          zIndex: 1,
+          userSelect: 'none',
+        })}
+      >
+        {numParticipants < 100 ? (
+          numParticipants || 1
+        ) : (
+          <RiInfinityLine size={10} />
+        )}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,52 @@
+import {
+  useRoomContext,
+  useStartAudio,
+  useStartVideo,
+} from '@livekit/components-react'
+import React from 'react'
+
+/** @public */
+export interface AllowMediaPlaybackProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  label?: string
+}
+
+/**
+ * The `StartMediaButton` component is only visible when the browser blocks media playback. This is due to some browser implemented autoplay policies.
+ * To start media playback, the user must perform a user-initiated event such as clicking this button.
+ * As soon as media playback starts, the button hides itself again.
+ *
+ * @example
+ * ```tsx
+ * <LiveKitRoom>
+ *   <StartMediaButton label="Click to allow media playback" />
+ * </LiveKitRoom>
+ * ```
+ *
+ * @see Autoplay policy on MDN web docs: {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Best_practices#autoplay_policy}
+ * @public
+ */
+export const StartMediaButton: (
+  props: AllowMediaPlaybackProps & React.RefAttributes<HTMLButtonElement>
+) => React.ReactNode = /* @__PURE__ */ React.forwardRef<
+  HTMLButtonElement,
+  AllowMediaPlaybackProps
+>(function StartMediaButton({ label, ...props }: AllowMediaPlaybackProps, ref) {
+  const room = useRoomContext()
+  const { mergedProps: audioProps, canPlayAudio } = useStartAudio({
+    room,
+    props,
+  })
+  const { mergedProps, canPlayVideo } = useStartVideo({
+    room,
+    props: audioProps,
+  })
+  const { style, ...restProps } = mergedProps
+  style.display = canPlayAudio && canPlayVideo ? 'none' : 'block'
+
+  return (
+    <button ref={ref} style={style} {...restProps}>
+      {label ?? `Start ${!canPlayAudio ? 'Audio' : 'Video'}`}
+    </button>
+  )
+})

src/frontend/src/features/rooms/livekit/components/dialogs/UsernameDialog.tsx

@@ -0,0 +1,44 @@
+import { useTranslation } from 'react-i18next'
+import { Field, Form, Dialog, DialogProps } from '@/primitives'
+import {
+  usePersistentUserChoices,
+  useRoomContext,
+} from '@livekit/components-react'
+
+export type UsernameDialogProps = Pick<DialogProps, 'isOpen' | 'onOpenChange'>
+
+export const UsernameDialog = (props: UsernameDialogProps) => {
+  const { t } = useTranslation('rooms')
+  const { saveUsername } = usePersistentUserChoices()
+
+  const ctx = useRoomContext()
+  return (
+    <Dialog title={t('options.username.heading')} {...props}>
+      <Form
+        onSubmit={(data) => {
+          const { username } = data as { username: string }
+          ctx.localParticipant.setName(username)
+          saveUsername(username)
+          const { onOpenChange } = props
+          if (onOpenChange) {
+            onOpenChange(false)
+          }
+        }}
+        submitLabel={t('options.username.submitLabel')}
+      >
+        <Field
+          type="text"
+          name="username"
+          label={t('options.username.label')}
+          description={t('options.username.description')}
+          defaultValue={ctx.localParticipant.name}
+          validate={(value) => {
+            return !value ? (
+              <p>{t('options.username.validationError')}</p>
+            ) : null
+          }}
+        />
+      </Form>
+    </Dialog>
+  )
+}

src/frontend/src/features/rooms/livekit/constants/events.ts

@@ -0,0 +1,33 @@
+import { RoomEvent } from 'livekit-client'
+
+// Issue: 'allRemoteParticipantRoomEvents' is not exposed or importable. One event is missing
+// to trigger the real-time update of participants when they change their name.
+// This code is duplicated from LiveKit.
+export const allRemoteParticipantRoomEvents = [
+  RoomEvent.ConnectionStateChanged,
+  RoomEvent.RoomMetadataChanged,
+
+  RoomEvent.ActiveSpeakersChanged,
+  RoomEvent.ConnectionQualityChanged,
+
+  RoomEvent.ParticipantConnected,
+  RoomEvent.ParticipantDisconnected,
+  RoomEvent.ParticipantPermissionsChanged,
+  RoomEvent.ParticipantMetadataChanged,
+  RoomEvent.ParticipantNameChanged, // This element is missing in LiveKit and causes problems
+
+  RoomEvent.TrackMuted,
+  RoomEvent.TrackUnmuted,
+  RoomEvent.TrackPublished,
+  RoomEvent.TrackUnpublished,
+  RoomEvent.TrackStreamStateChanged,
+  RoomEvent.TrackSubscriptionFailed,
+  RoomEvent.TrackSubscriptionPermissionChanged,
+  RoomEvent.TrackSubscriptionStatusChanged,
+]
+
+export const allParticipantRoomEvents = [
+  ...allRemoteParticipantRoomEvents,
+  RoomEvent.LocalTrackPublished,
+  RoomEvent.LocalTrackUnpublished,
+]

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

@@ -0,0 +1,46 @@
+import * as React from 'react'
+/**
+ * Implementation used from https://github.com/juliencrn/usehooks-ts
+ *
+ * @internal
+ */
+export function useMediaQuery(query: string): boolean {
+  const getMatches = (query: string): boolean => {
+    // Prevents SSR issues
+    if (typeof window !== 'undefined') {
+      return window.matchMedia(query).matches
+    }
+    return false
+  }
+
+  const [matches, setMatches] = React.useState<boolean>(getMatches(query))
+
+  function handleChange() {
+    setMatches(getMatches(query))
+  }
+
+  React.useEffect(() => {
+    const matchMedia = window.matchMedia(query)
+
+    // Triggered at the first client-side load and if query changes
+    handleChange()
+
+    // Listen matchMedia
+    if (matchMedia.addListener) {
+      matchMedia.addListener(handleChange)
+    } else {
+      matchMedia.addEventListener('change', handleChange)
+    }
+
+    return () => {
+      if (matchMedia.removeListener) {
+        matchMedia.removeListener(handleChange)
+      } else {
+        matchMedia.removeEventListener('change', handleChange)
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [query])
+
+  return matches
+}

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

@@ -0,0 +1,196 @@
+import { Track } from 'livekit-client'
+import * as React from 'react'
+
+import { supportsScreenSharing } from '@livekit/components-core'
+
+import {
+  DisconnectButton,
+  LeaveIcon,
+  MediaDeviceMenu,
+  TrackToggle,
+  useMaybeLayoutContext,
+  usePersistentUserChoices,
+} from '@livekit/components-react'
+
+import { mergeProps } from '@/utils/mergeProps.ts'
+import { StartMediaButton } from '../components/controls/StartMediaButton'
+import { useMediaQuery } from '../hooks/useMediaQuery'
+import { useTranslation } from 'react-i18next'
+import { OptionsButton } from '../components/controls/Options/OptionsButton'
+import { ParticipantsToggle } from '@/features/rooms/livekit/components/controls/Participants/ParticipantsToggle'
+import { ChatToggle } from '@/features/rooms/livekit/components/controls/ChatToggle'
+
+/** @public */
+export type ControlBarControls = {
+  microphone?: boolean
+  camera?: boolean
+  chat?: boolean
+  screenShare?: boolean
+  leave?: boolean
+  settings?: boolean
+}
+
+/** @public */
+export interface ControlBarProps extends React.HTMLAttributes<HTMLDivElement> {
+  onDeviceError?: (error: { source: Track.Source; error: Error }) => void
+  variation?: 'minimal' | 'verbose' | 'textOnly'
+  controls?: ControlBarControls
+  /**
+   * If `true`, the user's device choices will be persisted.
+   * This will enables the user to have the same device choices when they rejoin the room.
+   * @defaultValue true
+   * @alpha
+   */
+  saveUserChoices?: boolean
+}
+
+/**
+ * The `ControlBar` prefab gives the user the basic user interface to control their
+ * media devices (camera, microphone and screen share), open the `Chat` and leave the room.
+ *
+ * @remarks
+ * This component is build with other LiveKit components like `TrackToggle`,
+ * `DeviceSelectorButton`, `DisconnectButton` and `StartAudio`.
+ *
+ * @example
+ * ```tsx
+ * <LiveKitRoom>
+ *   <ControlBar />
+ * </LiveKitRoom>
+ * ```
+ * @public
+ */
+export function ControlBar({
+  variation,
+  saveUserChoices = true,
+  onDeviceError,
+  ...props
+}: ControlBarProps) {
+  const { t } = useTranslation('rooms')
+  const [isChatOpen, setIsChatOpen] = React.useState(false)
+  const layoutContext = useMaybeLayoutContext()
+  React.useEffect(() => {
+    if (layoutContext?.widget.state?.showChat !== undefined) {
+      setIsChatOpen(layoutContext?.widget.state?.showChat)
+    }
+  }, [layoutContext?.widget.state?.showChat])
+
+  const isTooLittleSpace = useMediaQuery(
+    `(max-width: ${isChatOpen ? 1000 : 760}px)`
+  )
+
+  const defaultVariation = isTooLittleSpace ? 'minimal' : 'verbose'
+  variation ??= defaultVariation
+
+  const showIcon = React.useMemo(
+    () => variation === 'minimal' || variation === 'verbose',
+    [variation]
+  )
+  const showText = React.useMemo(
+    () => variation === 'textOnly' || variation === 'verbose',
+    [variation]
+  )
+
+  const browserSupportsScreenSharing = supportsScreenSharing()
+
+  const [isScreenShareEnabled, setIsScreenShareEnabled] = React.useState(false)
+
+  const onScreenShareChange = React.useCallback(
+    (enabled: boolean) => {
+      setIsScreenShareEnabled(enabled)
+    },
+    [setIsScreenShareEnabled]
+  )
+
+  const htmlProps = mergeProps({ className: 'lk-control-bar' }, props)
+
+  const {
+    saveAudioInputEnabled,
+    saveVideoInputEnabled,
+    saveAudioInputDeviceId,
+    saveVideoInputDeviceId,
+  } = usePersistentUserChoices({ preventSave: !saveUserChoices })
+
+  const microphoneOnChange = React.useCallback(
+    (enabled: boolean, isUserInitiated: boolean) =>
+      isUserInitiated ? saveAudioInputEnabled(enabled) : null,
+    [saveAudioInputEnabled]
+  )
+
+  const cameraOnChange = React.useCallback(
+    (enabled: boolean, isUserInitiated: boolean) =>
+      isUserInitiated ? saveVideoInputEnabled(enabled) : null,
+    [saveVideoInputEnabled]
+  )
+
+  return (
+    <div {...htmlProps}>
+      <div className="lk-button-group">
+        <TrackToggle
+          source={Track.Source.Microphone}
+          showIcon={showIcon}
+          onChange={microphoneOnChange}
+          onDeviceError={(error) =>
+            onDeviceError?.({ source: Track.Source.Microphone, error })
+          }
+        >
+          {showText && t('controls.microphone')}
+        </TrackToggle>
+        <div className="lk-button-group-menu">
+          <MediaDeviceMenu
+            kind="audioinput"
+            onActiveDeviceChange={(_kind, deviceId) =>
+              saveAudioInputDeviceId(deviceId ?? '')
+            }
+          />
+        </div>
+      </div>
+      <div className="lk-button-group">
+        <TrackToggle
+          source={Track.Source.Camera}
+          showIcon={showIcon}
+          onChange={cameraOnChange}
+          onDeviceError={(error) =>
+            onDeviceError?.({ source: Track.Source.Camera, error })
+          }
+        >
+          {showText && t('controls.camera')}
+        </TrackToggle>
+        <div className="lk-button-group-menu">
+          <MediaDeviceMenu
+            kind="videoinput"
+            onActiveDeviceChange={(_kind, deviceId) =>
+              saveVideoInputDeviceId(deviceId ?? '')
+            }
+          />
+        </div>
+      </div>
+      {browserSupportsScreenSharing && (
+        <TrackToggle
+          source={Track.Source.ScreenShare}
+          captureOptions={{ audio: true, selfBrowserSurface: 'include' }}
+          showIcon={showIcon}
+          onChange={onScreenShareChange}
+          onDeviceError={(error) =>
+            onDeviceError?.({ source: Track.Source.ScreenShare, error })
+          }
+        >
+          {showText &&
+            t(
+              isScreenShareEnabled
+                ? 'controls.stopScreenShare'
+                : 'controls.shareScreen'
+            )}
+        </TrackToggle>
+      )}
+      <ChatToggle />
+      <ParticipantsToggle />
+      <OptionsButton />
+      <DisconnectButton>
+        {showIcon && <LeaveIcon />}
+        {showText && t('controls.leave')}
+      </DisconnectButton>
+      <StartMediaButton />
+    </div>
+  )
+}

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

@@ -0,0 +1,222 @@
+import type {
+  MessageDecoder,
+  MessageEncoder,
+  TrackReferenceOrPlaceholder,
+  WidgetState,
+} from '@livekit/components-core'
+import {
+  isEqualTrackRef,
+  isTrackReference,
+  isWeb,
+  log,
+} from '@livekit/components-core'
+import { RoomEvent, Track } from 'livekit-client'
+import * as React from 'react'
+
+import {
+  CarouselLayout,
+  ConnectionStateToast,
+  FocusLayout,
+  FocusLayoutContainer,
+  GridLayout,
+  LayoutContextProvider,
+  ParticipantTile,
+  RoomAudioRenderer,
+  MessageFormatter,
+  usePinnedTracks,
+  useTracks,
+  useCreateLayoutContext,
+  Chat,
+} from '@livekit/components-react'
+
+import { ControlBar } from './ControlBar'
+import { styled } from '@/styled-system/jsx'
+import { cva } from '@/styled-system/css'
+import { ParticipantsList } from '@/features/rooms/livekit/components/controls/Participants/ParticipantsList'
+import { useSnapshot } from 'valtio'
+import { participantsStore } from '@/stores/participants'
+
+const LayoutWrapper = styled(
+  'div',
+  cva({
+    base: {
+      position: 'relative',
+      display: 'flex',
+      width: '100%',
+      height: 'calc(100% - var(--lk-control-bar-height))',
+    },
+  })
+)
+
+/**
+ * @public
+ */
+export interface VideoConferenceProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  chatMessageFormatter?: MessageFormatter
+  chatMessageEncoder?: MessageEncoder
+  chatMessageDecoder?: MessageDecoder
+  /** @alpha */
+  SettingsComponent?: React.ComponentType
+}
+
+/**
+ * The `VideoConference` ready-made component is your drop-in solution for a classic video conferencing application.
+ * It provides functionality such as focusing on one participant, grid view with pagination to handle large numbers
+ * of participants, basic non-persistent chat, screen sharing, and more.
+ *
+ * @remarks
+ * The component is implemented with other LiveKit components like `FocusContextProvider`,
+ * `GridLayout`, `ControlBar`, `FocusLayoutContainer` and `FocusLayout`.
+ * You can use this components as a starting point for your own custom video conferencing application.
+ *
+ * @example
+ * ```tsx
+ * <LiveKitRoom>
+ *   <VideoConference />
+ * <LiveKitRoom>
+ * ```
+ * @public
+ */
+export function VideoConference({
+  chatMessageFormatter,
+  chatMessageDecoder,
+  chatMessageEncoder,
+  ...props
+}: VideoConferenceProps) {
+  const [widgetState, setWidgetState] = React.useState<WidgetState>({
+    showChat: false,
+    unreadMessages: 0,
+    showSettings: false,
+  })
+  const lastAutoFocusedScreenShareTrack =
+    React.useRef<TrackReferenceOrPlaceholder | null>(null)
+
+  const tracks = useTracks(
+    [
+      { source: Track.Source.Camera, withPlaceholder: true },
+      { source: Track.Source.ScreenShare, withPlaceholder: false },
+    ],
+    { updateOnlyOn: [RoomEvent.ActiveSpeakersChanged], onlySubscribed: false }
+  )
+
+  const widgetUpdate = (state: WidgetState) => {
+    log.debug('updating widget state', state)
+    setWidgetState(state)
+  }
+
+  const layoutContext = useCreateLayoutContext()
+
+  const screenShareTracks = tracks
+    .filter(isTrackReference)
+    .filter((track) => track.publication.source === Track.Source.ScreenShare)
+
+  const focusTrack = usePinnedTracks(layoutContext)?.[0]
+  const carouselTracks = tracks.filter(
+    (track) => !isEqualTrackRef(track, focusTrack)
+  )
+
+  /* eslint-disable react-hooks/exhaustive-deps */
+  // Code duplicated from LiveKit; this warning will be addressed in the refactoring.
+  React.useEffect(() => {
+    // If screen share tracks are published, and no pin is set explicitly, auto set the screen share.
+    if (
+      screenShareTracks.some((track) => track.publication.isSubscribed) &&
+      lastAutoFocusedScreenShareTrack.current === null
+    ) {
+      log.debug('Auto set screen share focus:', {
+        newScreenShareTrack: screenShareTracks[0],
+      })
+      layoutContext.pin.dispatch?.({
+        msg: 'set_pin',
+        trackReference: screenShareTracks[0],
+      })
+      lastAutoFocusedScreenShareTrack.current = screenShareTracks[0]
+    } else if (
+      lastAutoFocusedScreenShareTrack.current &&
+      !screenShareTracks.some(
+        (track) =>
+          track.publication.trackSid ===
+          lastAutoFocusedScreenShareTrack.current?.publication?.trackSid
+      )
+    ) {
+      log.debug('Auto clearing screen share focus.')
+      layoutContext.pin.dispatch?.({ msg: 'clear_pin' })
+      lastAutoFocusedScreenShareTrack.current = null
+    }
+    if (focusTrack && !isTrackReference(focusTrack)) {
+      const updatedFocusTrack = tracks.find(
+        (tr) =>
+          tr.participant.identity === focusTrack.participant.identity &&
+          tr.source === focusTrack.source
+      )
+      if (
+        updatedFocusTrack !== focusTrack &&
+        isTrackReference(updatedFocusTrack)
+      ) {
+        layoutContext.pin.dispatch?.({
+          msg: 'set_pin',
+          trackReference: updatedFocusTrack,
+        })
+      }
+    }
+  }, [
+    screenShareTracks
+      .map(
+        (ref) => `${ref.publication.trackSid}_${ref.publication.isSubscribed}`
+      )
+      .join(),
+    focusTrack?.publication?.trackSid,
+    tracks,
+  ])
+  /* eslint-enable react-hooks/exhaustive-deps */
+
+  const participantsSnap = useSnapshot(participantsStore)
+  const showParticipants = participantsSnap.showParticipants
+
+  return (
+    <div className="lk-video-conference" {...props}>
+      {isWeb() && (
+        <LayoutContextProvider
+          value={layoutContext}
+          // onPinChange={handleFocusStateChange}
+          onWidgetChange={widgetUpdate}
+        >
+          <div className="lk-video-conference-inner">
+            <LayoutWrapper>
+              {!focusTrack ? (
+                <div
+                  className="lk-grid-layout-wrapper"
+                  style={{ height: 'auto' }}
+                >
+                  <GridLayout tracks={tracks}>
+                    <ParticipantTile />
+                  </GridLayout>
+                </div>
+              ) : (
+                <div className="lk-focus-layout-wrapper">
+                  <FocusLayoutContainer>
+                    <CarouselLayout tracks={carouselTracks}>
+                      <ParticipantTile />
+                    </CarouselLayout>
+                    {focusTrack && <FocusLayout trackRef={focusTrack} />}
+                  </FocusLayoutContainer>
+                </div>
+              )}
+              <Chat
+                style={{ display: widgetState.showChat ? 'grid' : 'none' }}
+                messageFormatter={chatMessageFormatter}
+                messageEncoder={chatMessageEncoder}
+                messageDecoder={chatMessageDecoder}
+              />
+              {showParticipants && <ParticipantsList />}
+            </LayoutWrapper>
+            <ControlBar />
+          </div>
+        </LayoutContextProvider>
+      )}
+      <RoomAudioRenderer />
+      <ConnectionStateToast />
+    </div>
+  )
+}

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

@@ -8,7 +8,9 @@ export const FeedbackRoute = () => {
   return (
     <Screen layout="centered">
       <CenteredContent title={t('feedback.heading')} withBackButton>
-        <Text as="p" variant="h3" centered>{t('feedback.body')}</Text>
+        <Text as="p" variant="h3" centered>
+          {t('feedback.body')}
+        </Text>
       </CenteredContent>
     </Screen>
   )

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

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import {
   usePersistentUserChoices,
   type LocalUserChoices,
@@ -19,6 +19,19 @@ export const Room = () => {
   const mode = isLoggedIn && history.state?.create ? 'create' : 'join'
   const skipJoinScreen = isLoggedIn && mode === 'create'
 
+  const clearRouterState = () => {
+    if (window?.history?.state) {
+      window.history.replaceState({}, '')
+    }
+  }
+
+  useEffect(() => {
+    window.addEventListener('beforeunload', clearRouterState)
+    return () => {
+      window.removeEventListener('beforeunload', clearRouterState)
+    }
+  }, [])
+
   if (!roomId) {
     return <ErrorScreen />
   }

src/frontend/src/features/settings/components/SettingsDialog.tsx

@@ -1,12 +1,38 @@
-import { useTranslation } from 'react-i18next'
+import { Trans, useTranslation } from 'react-i18next'
 import { useLanguageLabels } from '@/i18n/useLanguageLabels'
-import { Dialog, Field, H } from '@/primitives'
+import { A, Badge, Dialog, type DialogProps, Field, H, P } from '@/primitives'
+import { authUrl, logoutUrl, useUser } from '@/features/auth'
 
-export const SettingsDialog = () => {
+export type SettingsDialogProps = Pick<DialogProps, 'isOpen' | 'onOpenChange'>
+
+export const SettingsDialog = (props: SettingsDialogProps) => {
   const { t, i18n } = useTranslation('settings')
+  const { user, isLoggedIn } = useUser()
   const { languagesList, currentLanguage } = useLanguageLabels()
   return (
-    <Dialog title={t('dialog.heading')}>
+    <Dialog title={t('dialog.heading')} {...props}>
+      <H lvl={2}>{t('account.heading')}</H>
+      {isLoggedIn ? (
+        <>
+          <P>
+            <Trans
+              i18nKey="settings:account.currentlyLoggedAs"
+              values={{ user: user?.email }}
+              components={[<Badge />]}
+            />
+          </P>
+          <P>
+            <A href={logoutUrl()}>{t('logout', { ns: 'global' })}</A>
+          </P>
+        </>
+      ) : (
+        <>
+          <P>{t('account.youAreNotLoggedIn')}</P>
+          <P>
+            <A href={authUrl()}>{t('login', { ns: 'global' })}</A>
+          </P>
+        </>
+      )}
       <H lvl={2}>{t('language.heading')}</H>
       <Field
         type="select"

src/frontend/src/layout/Header.tsx

@@ -74,7 +74,9 @@ export const Header = () => {
                   {user.email}
                 </Button>
                 <PopoverList
-                  items={[{ key: 'logout', value: 'logout', label: t('logout') }]}
+                  items={[
+                    { key: 'logout', value: 'logout', label: t('logout') },
+                  ]}
                   onAction={(value) => {
                     if (value === 'logout') {
                       window.location.href = logoutUrl()

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

@@ -22,5 +22,41 @@
       "heading": "",
       "body": ""
     }
+  },
+  "controls": {
+    "microphone": "",
+    "camera": "",
+    "shareScreen": "",
+    "stopScreenShare": "",
+    "chat": {
+      "open": "",
+      "closed": ""
+    },
+    "leave": "",
+    "participants": {
+      "open": "",
+      "closed": ""
+    }
+  },
+  "options": {
+    "buttonLabel": "",
+    "items": {
+      "feedbacks": "",
+      "support": "",
+      "settings": "",
+      "username": ""
+    },
+    "username": {
+      "heading": "",
+      "label": "",
+      "description": "",
+      "validationError": "",
+      "submitLabel": ""
+    }
+  },
+  "participants": {
+    "heading": "",
+    "closeButton": "",
+    "you": ""
   }
 }

src/frontend/src/locales/de/settings.json

@@ -1,4 +1,9 @@
 {
+  "account": {
+    "currentlyLoggedAs": "",
+    "heading": "",
+    "youAreNotLoggedIn": ""
+  },
   "dialog": {
     "heading": ""
   },

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

@@ -22,5 +22,41 @@
       "heading": "Authentication Required",
       "body": "This room has not been created yet. Please authenticate to create it or wait for an authenticated user to do so."
     }
+  },
+  "controls": {
+    "microphone": "Microphone",
+    "camera": "Camera",
+    "shareScreen": "Share screen",
+    "stopScreenShare": "Stop screen share",
+    "chat": {
+      "open": "Close the chat",
+      "closed": "Open the chat"
+    },
+    "leave": "Leave",
+    "participants": {
+      "open": "Hide everyone",
+      "closed": "See everyone"
+    }
+  },
+  "options": {
+    "buttonLabel": "More Options",
+    "items": {
+      "feedbacks": "Give us feedbacks",
+      "support": "Get Help on Tchap",
+      "settings": "Settings",
+      "username": "Update Your Name"
+    },
+    "username": {
+      "heading": "Update Your Name",
+      "label": "Your Name",
+      "description": "All other participants will see this name.",
+      "validationError": "Name cannot be empty.",
+      "submitLabel": "Save"
+    }
+  },
+  "participants": {
+    "heading": "Participants",
+    "closeButton": "Hide participants",
+    "you": "You"
   }
 }

src/frontend/src/locales/en/settings.json

@@ -1,4 +1,9 @@
 {
+  "account": {
+    "currentlyLoggedAs": "You are currently logged in as <0>{{user}}</0>",
+    "heading": "Account",
+    "youAreNotLoggedIn": "You are not logged in."
+  },
   "dialog": {
     "heading": "Settings"
   },

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

@@ -22,5 +22,41 @@
       "heading": "Authentification requise",
       "body": "Cette réunion n'a pas encore été créée. Veuillez vous authentifier pour la créer ou attendre qu'un utilisateur authentifié le fasse."
     }
+  },
+  "controls": {
+    "microphone": "Microphone",
+    "camera": "Camera",
+    "shareScreen": "Partager l'écran",
+    "stopScreenShare": "Arrêter le partage",
+    "chat": {
+      "open": "Masquer le chat",
+      "closed": "Afficher le chat"
+    },
+    "leave": "Quitter",
+    "participants": {
+      "open": "Masquer les participants",
+      "closed": "Afficher les participants"
+    }
+  },
+  "options": {
+    "buttonLabel": "Plus d'options",
+    "items": {
+      "feedbacks": "Partager votre avis",
+      "support": "Obtenir de l'aide sur Tchap",
+      "settings": "Paramètres",
+      "username": "Choisir votre nom"
+    },
+    "username": {
+      "heading": "Choisir votre nom",
+      "label": "Votre Nom",
+      "description": "Tous les autres participants verront ce nom.",
+      "validationError": "Le nom ne peut pas être vide.",
+      "submitLabel": "Enregistrer"
+    }
+  },
+  "participants": {
+    "heading": "Participants",
+    "closeButton": "Masquer les participants",
+    "you": "Vous"
   }
 }

src/frontend/src/locales/fr/settings.json

@@ -1,4 +1,9 @@
 {
+  "account": {
+    "currentlyLoggedAs": "Vous êtes actuellement connecté en tant que <0>{{user}}</0>",
+    "heading": "Compte",
+    "youAreNotLoggedIn": "Vous n'êtes pas connecté."
+  },
   "dialog": {
     "heading": "Paramètres"
   },

src/frontend/src/primitives/Button.tsx

@@ -1,10 +1,12 @@
 import { type ReactNode } from 'react'
 import {
   Button as RACButton,
+  ToggleButton as RACToggleButton,
   type ButtonProps as RACButtonsProps,
   TooltipTrigger,
   Link,
   LinkProps,
+  ToggleButtonProps as RACToggleButtonProps,
 } from 'react-aria-components'
 import { cva, type RecipeVariantProps } from '@/styled-system/css'
 import { Tooltip } from './Tooltip'
@@ -19,6 +21,9 @@ const button = cva({
     border: '1px solid transparent',
     color: 'colorPalette.text',
     backgroundColor: 'colorPalette',
+    '&[data-selected]': {
+      background: 'colorPalette.active',
+    },
     '&[data-hovered]': {
       backgroundColor: 'colorPalette.hover',
     },
@@ -103,6 +108,24 @@ const button = cva({
         width: 'full',
       },
     },
+    legacyStyle: {
+      true: {
+        borderColor: 'gray.400',
+        '&[data-hovered]': {
+          borderColor: 'gray.500',
+        },
+        '&[data-pressed]': {
+          borderColor: 'gray.500',
+        },
+        '&[data-selected]': {
+          background: '#e5e7eb',
+          borderColor: 'gray.400',
+          '&[data-hovered]': {
+            backgroundColor: 'gray.300',
+          },
+        },
+      },
+    },
   },
   defaultVariants: {
     size: 'default',
@@ -117,7 +140,10 @@ type Tooltip = {
 }
 export type ButtonProps = RecipeVariantProps<typeof button> &
   RACButtonsProps &
-  Tooltip
+  Tooltip & {
+    toggle?: boolean
+    isSelected?: boolean
+  }
 
 type LinkButtonProps = RecipeVariantProps<typeof button> & LinkProps & Tooltip
 
@@ -136,6 +162,18 @@ export const Button = ({
       </TooltipWrapper>
     )
   }
+
+  if ((props as ButtonProps).toggle) {
+    return (
+      <TooltipWrapper tooltip={tooltip} tooltipType={tooltipType}>
+        <RACToggleButton
+          className={button(variantProps)}
+          {...(componentProps as RACToggleButtonProps)}
+        />
+      </TooltipWrapper>
+    )
+  }
+
   return (
     <TooltipWrapper tooltip={tooltip} tooltipType={tooltipType}>
       <RACButton

src/frontend/src/primitives/Dialog.tsx

@@ -107,7 +107,7 @@ export const Dialog = ({
                     ? children({ close })
                     : children}
                   {!isAlert && (
-                    <Div position="absolute" top="0" right="0">
+                    <Div position="absolute" top="5" right="5">
                       <Button
                         invisible
                         size="xs"

src/frontend/src/primitives/PopoverList.tsx

@@ -42,7 +42,7 @@ export const PopoverList = <T extends string | number = string>({
 }: {
   closeOnAction?: boolean
   onAction: (key: T) => void
-  items: Array<string | { key: string, value: T; label: ReactNode }>
+  items: Array<string | { key: string; value: T; label: ReactNode }>
 } & ButtonProps) => {
   const popoverState = useContext(OverlayTriggerStateContext)!
   return (

src/frontend/src/stores/participants.ts

@@ -0,0 +1,9 @@
+import { proxy } from 'valtio'
+
+type State = {
+  showParticipants: boolean
+}
+
+export const participantsStore = proxy<State>({
+  showParticipants: false,
+})

src/frontend/src/utils/capitalize.ts

@@ -0,0 +1,7 @@
+export function capitalize(string: string) {
+  if (!string) {
+    return string
+  }
+  const trimmed = string.trim()
+  return trimmed.charAt(0).toUpperCase() + trimmed.slice(1)
+}

src/frontend/src/utils/livekit.ts

@@ -1,6 +1,5 @@
-import { LogLevel, setLogLevel } from "livekit-client";
-
+import { LogLevel, setLogLevel } from 'livekit-client'
 
 export const silenceLiveKitLogs = (shouldSilenceLogs: boolean) => {
-  setLogLevel(shouldSilenceLogs ? LogLevel.silent : LogLevel.debug);
+  setLogLevel(shouldSilenceLogs ? LogLevel.silent : LogLevel.debug)
 }

src/frontend/src/utils/mergeProps.ts

@@ -0,0 +1,95 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import clsx from 'clsx'
+
+/**
+ * Calls all functions in the order they were chained with the same arguments.
+ * @internal
+ */
+export function chain(...callbacks: any[]): (...args: any[]) => void {
+  return (...args: any[]) => {
+    for (const callback of callbacks) {
+      if (typeof callback === 'function') {
+        try {
+          callback(...args)
+        } catch (e) {
+          console.error(e)
+        }
+      }
+    }
+  }
+}
+
+interface Props {
+  [key: string]: any
+}
+
+// taken from: https://stackoverflow.com/questions/51603250/typescript-3-parameter-list-intersection-type/51604379#51604379
+type TupleTypes<T> = { [P in keyof T]: T[P] } extends { [key: number]: infer V }
+  ? V
+  : never
+type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (
+  k: infer I
+) => void
+  ? I
+  : never
+
+/**
+ * Merges multiple props objects together. Event handlers are chained,
+ * classNames are combined, and ids are deduplicated - different ids
+ * will trigger a side-effect and re-render components hooked up with `useId`.
+ * For all other props, the last prop object overrides all previous ones.
+ * @param args - Multiple sets of props to merge together.
+ * @internal
+ */
+export function mergeProps<T extends Props[]>(
+  ...args: T
+): UnionToIntersection<TupleTypes<T>> {
+  // Start with a base clone of the first argument. This is a lot faster than starting
+  // with an empty object and adding properties as we go.
+  const result: Props = { ...args[0] }
+  for (let i = 1; i < args.length; i++) {
+    const props = args[i]
+    for (const key in props) {
+      const a = result[key]
+      const b = props[key]
+
+      // Chain events
+      if (
+        typeof a === 'function' &&
+        typeof b === 'function' &&
+        // This is a lot faster than a regex.
+        key[0] === 'o' &&
+        key[1] === 'n' &&
+        key.charCodeAt(2) >= /* 'A' */ 65 &&
+        key.charCodeAt(2) <= /* 'Z' */ 90
+      ) {
+        result[key] = chain(a, b)
+
+        // Merge classnames, sometimes classNames are empty string which eval to false, so we just need to do a type check
+      } else if (
+        (key === 'className' || key === 'UNSAFE_className') &&
+        typeof a === 'string' &&
+        typeof b === 'string'
+      ) {
+        result[key] = clsx(a, b)
+      } else {
+        result[key] = b !== undefined ? b : a
+      }
+    }
+  }
+
+  return result as UnionToIntersection<TupleTypes<T>>
+}

src/helm/env.d/dev/values.meet.yaml.gotmpl

@@ -8,9 +8,10 @@ backend:
   envVars:
     DJANGO_CSRF_TRUSTED_ORIGINS: https://meet.127.0.0.1.nip.io,http://meet.127.0.0.1.nip.io
     DJANGO_CONFIGURATION: Production
-    DJANGO_ALLOWED_HOSTS: "*"
+    DJANGO_ALLOWED_HOSTS: meet.127.0.0.1.nip.io
     DJANGO_SECRET_KEY: {{ .Values.djangoSecretKey }}
     DJANGO_SETTINGS_MODULE: meet.settings
+    DJANGO_SILENCED_SYSTEM_CHECKS: security.W004, security.W008
     DJANGO_SUPERUSER_PASSWORD: admin
     DJANGO_EMAIL_HOST: "mailcatcher"
     DJANGO_EMAIL_PORT: 1025

src/helm/env.d/preprod/values.meet.yaml.gotmpl

@@ -1,7 +1,7 @@
 image:
   repository: lasuite/meet-backend
   pullPolicy: Always
-  tag: "v0.1.3"
+  tag: "v0.1.4"
 
 backend:
   migrateJobAnnotations:
@@ -10,7 +10,7 @@ backend:
   envVars:
     DJANGO_CSRF_TRUSTED_ORIGINS: http://meet-preprod.beta.numerique.gouv.fr,https://meet-preprod.beta.numerique.gouv.fr
     DJANGO_CONFIGURATION: Production
-    DJANGO_ALLOWED_HOSTS: "*"
+    DJANGO_ALLOWED_HOSTS: meet-preprod.beta.numerique.gouv.fr
     DJANGO_SUPERUSER_EMAIL:
       secretKeyRef:
         name: backend
@@ -20,6 +20,7 @@ backend:
         name: backend
         key: DJANGO_SECRET_KEY
     DJANGO_SETTINGS_MODULE: meet.settings
+    DJANGO_SILENCED_SYSTEM_CHECKS: security.W004, security.W008
     DJANGO_SUPERUSER_PASSWORD:
       secretKeyRef:
         name: backend
@@ -107,7 +108,7 @@ frontend:
   image:
     repository: lasuite/meet-frontend
     pullPolicy: Always
-    tag: "v0.1.3"
+    tag: "v0.1.4"
 
 ingress:
   enabled: true

src/helm/env.d/production/values.meet.yaml.gotmpl

@@ -1,7 +1,7 @@
 image:
   repository: lasuite/meet-backend
   pullPolicy: Always
-  tag: "v0.1.3"
+  tag: "v0.1.4"
 
 backend:
   migrateJobAnnotations:
@@ -10,12 +10,13 @@ backend:
   envVars:
     DJANGO_CSRF_TRUSTED_ORIGINS: https://meet.numerique.gouv.fr
     DJANGO_CONFIGURATION: Production
-    DJANGO_ALLOWED_HOSTS: "*"
+    DJANGO_ALLOWED_HOSTS: meet.numerique.gouv.fr
     DJANGO_SECRET_KEY:
       secretKeyRef:
         name: backend
         key: DJANGO_SECRET_KEY
     DJANGO_SETTINGS_MODULE: meet.settings
+    DJANGO_SILENCED_SYSTEM_CHECKS: security.W004, security.W008
     DJANGO_SUPERUSER_EMAIL:
       secretKeyRef:
         name: backend
@@ -108,7 +109,7 @@ frontend:
   image:
     repository: lasuite/meet-frontend
     pullPolicy: Always
-    tag: "v0.1.3"
+    tag: "v0.1.4"
 
 ingress:
   enabled: true

src/helm/env.d/staging/values.meet.yaml.gotmpl

@@ -10,7 +10,7 @@ backend:
   envVars:
     DJANGO_CSRF_TRUSTED_ORIGINS: http://meet-staging.beta.numerique.gouv.fr,https://meet-staging.beta.numerique.gouv.fr
     DJANGO_CONFIGURATION: Production
-    DJANGO_ALLOWED_HOSTS: "*"
+    DJANGO_ALLOWED_HOSTS: meet-staging.beta.numerique.gouv.fr
     DJANGO_SECRET_KEY:
       secretKeyRef:
         name: backend

src/helm/meet/values.yaml

@@ -143,10 +143,10 @@ backend:
   probes:
     liveness:
       path: /__heartbeat__
-      initialDelaySeconds: 10
+      initialDelaySeconds: 30
     readiness:
       path: /__lbheartbeat__
-      initialDelaySeconds: 10
+      initialDelaySeconds: 30
 
   ## @param backend.resources Resource requirements for the backend container
   resources: {}

src/mail/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mail_mjml",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "An util to generate html and text django's templates from mjml templates",
   "type": "module",
   "dependencies": {
@@ -11,7 +11,7 @@
   "scripts": {
     "build-mjml-to-html": "bash ./bin/mjml-to-html",
     "build-html-to-plain-text": "bash ./bin/html-to-plain-text",
-    "build": "yarn build-mjml-to-html && yarn build-html-to-plain-text"
+    "build": "npm run build-mjml-to-html && npm run build-html-to-plain-text"
   },
   "volta": {
     "node": "16.15.1"