🔊(backend) update production logger

Configure probes logs as recommended by the Django dockerflow documentation. Updating logger's config, fixed another minor issue, silenced system warnings were still logged when calling the __lbheartbeat__ probe. These warnings are now properly silenced. Incoming requests are now logged in Json. Wdyt @rouja?
🐛(backend) fix dependencies conflicts
2024-08-29 18:22:46 +02:00 · 2024-08-28 11:42:44 +02:00 · 2024-08-28 10:24:20 +02:00 · 2024-08-28 10:24:20 +02:00 · 2024-08-28 10:24:20 +02:00 · 2024-08-28 10:24:20 +02:00
203 changed files with 9379 additions and 2255 deletions
@@ -0,0 +1,33 @@
+name: Download Crowdin translations
+
+on:
+  workflow_dispatch:
+    types: [file-fully-translated]
+
+permissions:
+  contents: write
+  pull-requests: write
+
+jobs:
+  crowdin:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Download Crowdin files
+        uses: crowdin/github-action@v2
+        with:
+          upload_sources: false
+          upload_translations: false
+          download_translations: true
+          localization_branch_name: l10n_crowdin_translations
+          create_pull_request: true
+          pull_request_title: "New Crowdin translations"
+          pull_request_body: "New Crowdin pull request with translations"
+          pull_request_base_branch_name: "main"
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          CROWDIN_PROJECT_ID: ${{ secrets.CROWDIN_PROJECT_ID }}
+          CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}
+          CROWDIN_BASE_PATH: ${{ github.workspace }}
@@ -21,7 +21,7 @@ jobs:
          repositories: "meet,secrets"
      -
        name: Checkout repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
        with:
          submodules: recursive
          token: ${{ steps.app-token.outputs.token }}
@@ -28,7 +28,7 @@ jobs:
          repositories: "meet,secrets"
      -
        name: Checkout repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
        with:
          submodules: recursive
          token: ${{ steps.app-token.outputs.token }}
@@ -72,7 +72,7 @@ jobs:
          repositories: "meet,secrets"
      -
        name: Checkout repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
        with:
          submodules: recursive
          token: ${{ steps.app-token.outputs.token }}
@@ -122,7 +122,7 @@ jobs:
          repositories: "meet,secrets"
      -
        name: Checkout repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
        with:
          submodules: recursive
          token: ${{ steps.app-token.outputs.token }}
@@ -14,7 +14,7 @@ jobs:
    if: github.event_name == 'pull_request' # Makes sense only for pull requests
    steps:
      - name: Checkout repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - name: show
@@ -77,9 +77,9 @@ jobs:
        working-directory: src/backend
    steps:
      - name: Checkout repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
      - name: Install Python
-        uses: actions/setup-python@v3
+        uses: actions/setup-python@v5
        with:
          python-version: "3.10"
      - name: Install development dependencies
@@ -89,7 +89,7 @@ jobs:
      - name: Lint code with ruff
        run: ~/.local/bin/ruff check .
      - name: Lint code with pylint
-        run: ~/.local/bin/pylint .
+        run: ~/.local/bin/pylint meet demo core

  test-back:
    runs-on: ubuntu-latest
@@ -122,9 +122,6 @@ jobs:
      DB_PASSWORD: pass
      DB_PORT: 5432
      STORAGES_STATICFILES_BACKEND: django.contrib.staticfiles.storage.StaticFilesStorage
-      AWS_S3_ENDPOINT_URL: http://localhost:9000
-      AWS_S3_ACCESS_KEY_ID: impress
-      AWS_S3_SECRET_ACCESS_KEY: password
      LIVEKIT_API_SECRET: secret
      LIVEKIT_API_KEY: devkey

@@ -145,7 +142,7 @@ jobs:
          key: mail-templates-${{ hashFiles('src/mail/mjml') }}

      - name: Install Python
-        uses: actions/setup-python@v3
+        uses: actions/setup-python@v5
        with:
          python-version: "3.10"

@@ -163,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:
@@ -176,7 +188,7 @@ jobs:
          repositories: "infrastructure,secrets"
      -
        name: Checkout repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
        with:
          submodules: recursive
          token: ${{ steps.app-token.outputs.token }}
@@ -193,7 +205,7 @@ jobs:
          sudo apt-get install -y gettext

      - name: Install Python
-        uses: actions/setup-python@v3
+        uses: actions/setup-python@v5
        with:
          python-version: "3.10"

@@ -208,22 +220,24 @@ jobs:
        uses: actions/setup-node@v4
        with:
          node-version: "18.x"
-          cache: "yarn"
-          cache-dependency-path: src/frontend/yarn.lock
+          cache: "npm"
+          cache-dependency-path: src/frontend/package-lock.json

      - name: Install dependencies
-        run: cd src/frontend/ && yarn install --frozen-lockfile
+        run: cd src/frontend/ && npm ci

      - name: Extract the frontend translation
        run: make frontend-i18n-extract

      - name: Upload files to Crowdin
-        run: |
-          docker run \
-          --rm \
-          -e CROWDIN_API_TOKEN=$CROWDIN_API_TOKEN \
-          -e CROWDIN_PROJECT_ID=$CROWDIN_PROJECT_ID \
-          -e CROWDIN_BASE_PATH=$CROWDIN_BASE_PATH \
-          -v "${{ github.workspace }}:/app" \
-          crowdin/cli:3.16.0 \
-          crowdin upload sources -c /app/crowdin/config.yml
+        uses: crowdin/github-action@v2
+        with:
+          config: crowdin/config.yml
+          upload_sources: true
+          upload_translations: true
+          download_translations: false
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          CROWDIN_PROJECT_ID: ${{ secrets.CROWDIN_PROJECT_ID }}
+          CROWDIN_BASE_PATH: ${{ github.workspace }}
+          CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}
@@ -50,9 +50,6 @@ node_modules
 # Mails
 src/backend/core/templates/mail/

-# Typescript client
-src/frontend/tsclient
-
 # Swagger
 **/swagger.json

@@ -62,12 +62,17 @@ words=wip
 # For example, use the following regex if you only want to allow email addresses from foo.com
 # regex=[^@]+@foo.com

-[ignore-by-title]
+[ignore-by-title:bots]
 # Allow empty body & wrong title pattern only when bots (pyup/greenkeeper)
 # upgrade dependencies
 regex=^(⬆️.*|Update (.*) from (.*) to (.*)|(chore|fix)\(package\): update .*)$
 ignore=B6,UC1

+[ignore-by-title:releases]
+# Allow empty body for release commits
+regex=^🔖.*$
+ignore=B6
+
 # [ignore-by-body]
 # Ignore certain rules for commits of which the body has a line that matches a regex
 # E.g. Match bodies that have a line that that contain "release"
@@ -48,8 +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
-TSCLIENT_YARN       = $(COMPOSE_RUN) -w /app/src/tsclient node yarn # FIXME : use npm
+MAIL_NPM            = $(COMPOSE_RUN) -w /app/src/mail node npm

 # -- Frontend
 PATH_FRONT          = ./src/frontend
@@ -142,7 +141,7 @@ lint-ruff-check: ## lint back-end python sources with ruff

 lint-pylint: ## lint back-end python sources with pylint only on changed files from main
 	@echo 'lint:pylint started…'
-	bin/pylint --diff-only=origin/main
+	@$(COMPOSE_RUN_APP) pylint meet demo core
 .PHONY: lint-pylint

 test: ## run project tests
@@ -217,7 +216,7 @@ env.d/development/kc_postgresql:
 env.d/development/crowdin:
 	cp -n env.d/development/crowdin.dist env.d/development/crowdin

-crowdin-download: ## Download translated message from crowdin
+crowdin-download: ## Download translated message from Crowdin
 	@$(COMPOSE_RUN_CROWDIN) download -c crowdin/config.yml
 .PHONY: crowdin-download

@@ -225,14 +224,17 @@ crowdin-download-sources: ## Download sources from Crowdin
 	@$(COMPOSE_RUN_CROWDIN) download sources -c crowdin/config.yml
 .PHONY: crowdin-download-sources

-crowdin-upload: ## Upload source translations to crowdin
+crowdin-upload: ## Upload source translations to Crowdin
 	@$(COMPOSE_RUN_CROWDIN) upload sources -c crowdin/config.yml
 .PHONY: crowdin-upload

+crowdin-upload-translations: ## Upload translations to Crowdin
+	@$(COMPOSE_RUN_CROWDIN) upload translations -c crowdin/config.yml
+.PHONY: crowdin-upload-translations
+
 i18n-compile: ## compile all translations
 i18n-compile: \
-	back-i18n-compile \
-	frontend-i18n-compile
+	back-i18n-compile
 .PHONY: i18n-compile

 i18n-generate: ## create the .pot files and extract frontend messages
@@ -257,32 +259,21 @@ 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

-# -- TS client generator
-
-# FIXME : adapt this command
-tsclient-install: ## Install the Typescript API client generator
-	@$(TSCLIENT_YARN) install
-.PHONY: tsclient-install
-
-# FIXME : adapt this command
-tsclient: tsclient-install ## Generate a Typescript API client
-	@$(TSCLIENT_YARN) generate:api:client:local ../frontend/tsclient
-.PHONY: tsclient-install

 # -- Misc
 clean: ## restore repository state as it was freshly cloned
@@ -295,23 +286,16 @@ help:
 	@grep -E '^[a-zA-Z0-9_-]+:.*?## .*$$' $(firstword $(MAKEFILE_LIST)) | sort | awk 'BEGIN {FS = ":.*?## "}; {printf "$(GREEN)%-30s$(RESET) %s\n", $$1, $$2}'
 .PHONY: help

-# FIXME : adapt this command
-frontend-i18n-extract: ## Extract the frontend translation inside a json to be used for crowdin
-	cd $(PATH_FRONT) && yarn i18n:extract
+frontend-i18n-extract: ## Check the frontend code and generate missing translations keys in translation files
+	cd $(PATH_FRONT) && npm run i18n:extract
 .PHONY: frontend-i18n-extract

-# FIXME : adapt this command
-frontend-i18n-generate: ## Generate the frontend json files used for crowdin
+frontend-i18n-generate: ## Generate the frontend json files used for Crowdin
 frontend-i18n-generate: \
 	crowdin-download-sources \
 	frontend-i18n-extract
 .PHONY: frontend-i18n-generate

-# FIXME : adapt this command
-frontend-i18n-compile: ## Format the crowin json files used deploy to the apps
-	cd $(PATH_FRONT) && yarn i18n:deploy
-.PHONY: frontend-i18n-compile
-
 # -- K8S
 build-k8s-cluster: ## build the kubernetes cluster using kind
 	./bin/start-kind.sh
@@ -94,6 +94,56 @@ You first need to create a superuser account:
 $ make superuser
 ```

+### Run application on local Kubernetes
+
+The application is deployed across staging, preprod, and production environments using Kubernetes (K8s).
+Reproducing environment conditions locally is crucial for developing new features or debugging issues.
+
+This is facilitated by [Tilt](https://tilt.dev/) ("Kubernetes for Prod, Tilt for Dev").  Tilt enables smart rebuilds and live updates for services running locally in Kubernetes.  We defined our services in a Tiltfile located at `bin/Tiltfile`.
+
+
+#### Getting Started
+
+Make sure you have installed:
+- kubectl
+- helm
+- helmfile
+- tilt
+
+To build and start the Kubernetes cluster using Kind:
+```shell
+$ make build-k8s-cluster 
+```
+
+Once the Kubernetes cluster is ready, start the application stack locally:
+```shell
+$ make start-tilt
+```
+These commands set up and run your application environment using Tilt for local Kubernetes development.
+
+You can monitor Tilt's at `http://localhost:10350/`. After Tilt actions finish, you can access the app at `https://meet.127.0.0.1.nip.io/`.
+
+#### Debugging frontend
+
+Tilt deploys the `meet-dev` for the frontend by default, to benefit from Vite.js hot reloading while developing. 
+To troubleshoot production issues, please modify the Tiltfile, switch frontend's target to `frontend-production`:
+
+```yaml
+...
+
+docker_build(
+    'localhost:5001/meet-frontend:latest',
+    context='..',
+    dockerfile='../src/frontend/Dockerfile',
+    only=['./src/frontend', './docker', './.dockerignore'],
+    target='frontend-production',  # Update this line when needed
+    live_update=[
+        sync('../src/frontend', '/home/frontend'),
+    ]
+)
+...
+```
+
 ## Contributing

 This project is intended to be community-driven, so please, do not hesitate to
@@ -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}"
-}
@@ -1,38 +0,0 @@
-#!/usr/bin/env bash
-
-# shellcheck source=bin/_config.sh
-source "$(dirname "${BASH_SOURCE[0]}")/_config.sh"
-
-declare diff_from
-declare -a paths
-declare -a args
-
-# Parse options
-for arg in "$@"
-do
-    case $arg in
-        --diff-only=*)
-            diff_from="${arg#*=}"
-            shift
-            ;;
-        -*)
-            args+=("$arg")
-            shift
-            ;;
-        *)
-            paths+=("$arg")
-            shift
-            ;;
-    esac
-done
-
-if [[ -n "${diff_from}" ]]; then
-    # Run pylint only on modified files located in src/backend
-    # (excluding deleted files and migration files)
-    # shellcheck disable=SC2207
-    paths=($(git diff "${diff_from}" --name-only --diff-filter=d -- src/backend ':!**/migrations/*.py' | grep -E '^src/backend/.*\.py$'))
-fi
-
-# Fix docker vs local path when project sources are mounted as a volume
-read -ra paths <<< "$(echo "${paths[@]}" | sed "s|src/backend/||g")"
-_dc_run app-dev pylint "${paths[@]}" "${args[@]}"
@@ -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 "$@"
@@ -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 "$@"
@@ -1,7 +1,7 @@
 #
 # Your crowdin's credentials
 #
-api_token_env: CROWDIN_API_TOKEN
+api_token_env: CROWDIN_PERSONAL_TOKEN
 project_id_env: CROWDIN_PROJECT_ID
 base_path_env: CROWDIN_BASE_PATH

@@ -14,16 +14,17 @@ preserve_hierarchy: true
 #
 # Files configuration
 #
-files: [
- {
-  source : "/backend/locale/django.pot",
-  dest: "/backend-meet.pot",
-  translation : "/backend/locale/%locale_with_underscore%/LC_MESSAGES/django.po"
- },
-  {
-    source: "/frontend/packages/i18n/locales/impress/translations-crowdin.json",
-    dest: "/frontend-impress.json",
-    translation: "/frontend/packages/i18n/locales/impress/%two_letters_code%/translations.json",
-    skip_untranslated_strings: true,
-  },
-]
+files:
+  [
+    {
+      source: "src/backend/locale/django.pot",
+      dest: "/backend-meet.pot",
+      translation: "src/backend/locale/%locale_with_underscore%/LC_MESSAGES/django.po",
+    },
+    {
+      source: "src/frontend/src/locales/fr/**/*",
+      translation: "src/frontend/src/locales/%two_letters_code%/**/%original_file_name%",
+      dest: "/%original_file_name%",
+      skip_untranslated_strings: true,
+    },
+  ]
@@ -100,7 +100,7 @@ services:
    image: jwilder/dockerize

  crowdin:
-    image: crowdin/cli:3.16.0
+    image: crowdin/cli:4.0.0
    volumes:
      - ".:/app"
    env_file:
@@ -0,0 +1,65 @@
+# Releasing a new version
+
+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:
+
+       - 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
+      
+         ...
+      
+         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.
+
+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:
+
+    ```text
+    🔖(minor) bump release to 4.18.0
+    ```
+
+5.  Open a pull request, wait for an approval from your peers and merge it.
+6.  Checkout and pull changes from the `main` branch to ensure you have the latest updates.
+7.  Tag and push your commit:
+
+    ```bash
+    git tag v4.18.1 && git push origin --tags
+    ```
+
+    Doing this triggers the CI and tells it to build the new Docker image versions that you targeted earlier in the Helm files.
+
+8.  Ensure the new [backend](https://hub.docker.com/r/lasuite/meet-frontend/tags) and [frontend](https://hub.docker.com/r/lasuite/meet-frontend/tags) image tags are on Docker Hub.
+9.  The release is now done!
+
+# Deploying
+
+> [!TIP]
+> The `staging` platform is deployed automatically with every update of the `main` branch.
+
+Making a new release doesn't publish it automatically in production.
+
+Deployment is done by ArgoCD. ArgoCD checks for the `production` tag and automatically deploys the production platform with the targeted commit.
+
+To publish, we mark the commit we want with the `production` tag. ArgoCD is then notified that the tag has changed. It then deploys the Docker image tags specified in the Helm files of the targeted commit.
+
+To publish the release you just made:
+
+```bash
+git tag --force production v4.18.1
+git push --force origin production
+```
@@ -1,25 +0,0 @@
-# Api client TypeScript
-
-The backend application can automatically create a TypeScript client to be used in frontend
-applications. It is used in the Meet front application itself.
-
-This client is made with [openapi-typescript-codegen](https://github.com/ferdikoomen/openapi-typescript-codegen)
-and Meet's backend OpenAPI schema (available [here](http://localhost:8071/v1.0/swagger/) if you have the backend running).
-
-## Requirements
-
-We'll need the online OpenAPI schema generated by swagger. Therefore you will first need to
-install the backend application.
-
-## Install openApiClientJs
-
-```sh
-$ cd src/tsclient
-$ yarn install
-```
-
-## Generate the client
-
-```sh
-yarn generate:api:client:local <output_path_for_generated_client>
-```
@@ -18,9 +18,6 @@ MEET_BASE_URL="http://localhost:8072"

 # Media
 STORAGES_STATICFILES_BACKEND=django.contrib.staticfiles.storage.StaticFilesStorage
-AWS_S3_ENDPOINT_URL=http://minio:9000
-AWS_S3_ACCESS_KEY_ID=meet
-AWS_S3_SECRET_ACCESS_KEY=password

 # OIDC
 OIDC_OP_JWKS_ENDPOINT=http://nginx:8083/realms/meet/protocol/openid-connect/certs
@@ -44,3 +41,4 @@ OIDC_AUTH_REQUEST_EXTRA_PARAMS={"acr_values": "eidas1"}
 LIVEKIT_API_SECRET=secret
 LIVEKIT_API_KEY=devkey
 LIVEKIT_API_URL=http://localhost:7880
+ALLOW_UNREGISTERED_ROOMS=False
@@ -1,3 +1,3 @@
-CROWDIN_API_TOKEN=Your-Api-Token
+CROWDIN_PERSONAL_TOKEN=Your-Api-Token
 CROWDIN_PROJECT_ID=Your-Project-Id
-CROWDIN_BASE_PATH=/app/src
+CROWDIN_BASE_PATH=/app
@@ -1,3 +0,0 @@
-#!/bin/bash
-
-find . -name "*.enc.*" -exec sops updatekeys -y {} \;
@@ -1,4 +1,5 @@
 """Admin classes and registrations for core app."""
+
 from django.contrib import admin
 from django.contrib.auth import admin as auth_admin
 from django.utils.translation import gettext_lazy as _
@@ -0,0 +1,58 @@
+"""
+Meet analytics class.
+"""
+
+import uuid
+
+from django.conf import settings
+
+from june import analytics as jAnalytics
+
+
+class Analytics:
+    """Analytics integration
+
+    This class wraps the June analytics code to avoid coupling our code directly
+    with this third-party library. By doing so, we create a generic interface
+    for analytics that can be easily modified or replaced in the future.
+    """
+
+    def __init__(self):
+        key = getattr(settings, "ANALYTICS_KEY", None)
+
+        if key is not None:
+            jAnalytics.write_key = key
+
+        self._enabled = key is not None
+
+    def _is_anonymous_user(self, user):
+        """Check if the user is anonymous."""
+        return user is None or user.is_anonymous
+
+    def identify(self, user, **kwargs):
+        """Identify a user"""
+
+        if self._is_anonymous_user(user) or not self._enabled:
+            return
+
+        traits = kwargs.pop("traits", {})
+        traits.update({"email": user.email_anonymized})
+
+        jAnalytics.identify(user_id=user.sub, traits=traits, **kwargs)
+
+    def track(self, user, **kwargs):
+        """Track an event"""
+
+        if not self._enabled:
+            return
+
+        event_data = {}
+        if self._is_anonymous_user(user):
+            event_data["anonymous_id"] = str(uuid.uuid4())
+        else:
+            event_data["user_id"] = user.sub
+
+        jAnalytics.track(**event_data, **kwargs)
+
+
+analytics = Analytics()
@@ -1,4 +1,5 @@
 """Meet core API endpoints"""
+
 from django.conf import settings
 from django.core.exceptions import ValidationError

@@ -22,6 +23,8 @@ def exception_handler(exc, context):
            detail = exc.message
        elif hasattr(exc, "messages"):
            detail = exc.messages
+        else:
+            detail = ""

        exc = drf_exceptions.ValidationError(detail=detail)

@@ -1,4 +1,5 @@
 """Permission handlers for the Meet core app."""
+
 from rest_framework import permissions

 from ..models import RoleChoices
@@ -1,4 +1,5 @@
 """Client serializers for the Meet core app."""
+
 from django.conf import settings
 from django.utils.translation import gettext_lazy as _

@@ -122,14 +123,16 @@ class RoomSerializer(serializers.ModelSerializer):
        if role is not None or instance.is_public:
            slug = f"{instance.id!s}".replace("-", "")

+            username = request.query_params.get("username", None)
+
            output["livekit"] = {
                "url": settings.LIVEKIT_CONFIGURATION["url"],
                "room": slug,
-                "token": utils.generate_token(room=slug, user=request.user),
+                "token": utils.generate_token(
+                    room=slug, user=request.user, username=username
+                ),
            }

        output["is_administrable"] = is_admin

-        # todo - pass properly livekit configuration
-
        return output
@@ -1,4 +1,5 @@
 """API endpoints"""
+
 import uuid

 from django.conf import settings
@@ -19,6 +20,7 @@ from rest_framework import (

 from core import models, utils

+from ..analytics import analytics
 from . import permissions, serializers

 # pylint: disable=too-many-ancestors
@@ -184,16 +186,26 @@ class RoomViewSet(
        """
        try:
            instance = self.get_object()
+
+            analytics.track(
+                user=self.request.user,
+                event="Get Room",
+                properties={"slug": instance.slug},
+            )
+
        except Http404:
            if not settings.ALLOW_UNREGISTERED_ROOMS:
                raise
            slug = slugify(self.kwargs["pk"])
+            username = request.query_params.get("username", None)
            data = {
                "id": None,
                "livekit": {
                    "url": settings.LIVEKIT_CONFIGURATION["url"],
                    "room": slug,
-                    "token": utils.generate_token(room=slug, user=request.user),
+                    "token": utils.generate_token(
+                        room=slug, user=request.user, username=username
+                    ),
                },
            }
        else:
@@ -206,11 +218,8 @@ class RoomViewSet(
        user = self.request.user

        if user.is_authenticated:
-            # todo - simplify this queryset
            queryset = (
-                self.filter_queryset(self.get_queryset())
-                .filter(Q(users=user))
-                .distinct()
+                self.filter_queryset(self.get_queryset()).filter(users=user).distinct()
            )
        else:
            queryset = self.get_queryset().none()
@@ -232,6 +241,14 @@ class RoomViewSet(
            role=models.RoleChoices.OWNER,
        )

+        analytics.track(
+            user=self.request.user,
+            event="Create Room",
+            properties={
+                "slug": room.slug,
+            },
+        )
+

 class ResourceAccessListModelMixin:
    """List mixin for resource access API."""
@@ -10,6 +10,8 @@ from mozilla_django_oidc.auth import (

 from core.models import User

+from ..analytics import analytics
+

 class OIDCAuthenticationBackend(MozillaOIDCAuthenticationBackend):
    """Custom OpenID Connect (OIDC) Authentication Backend.
@@ -79,6 +81,7 @@ class OIDCAuthenticationBackend(MozillaOIDCAuthenticationBackend):
            else:
                user = None

+        analytics.identify(user=user)
        return user

    def create_user(self, claims):
@@ -1,5 +1,6 @@
 """Authentication Views for the People core app."""

+import copy
 from urllib.parse import urlencode

 from django.contrib import auth
@@ -11,10 +12,18 @@ from django.utils import crypto
 from mozilla_django_oidc.utils import (
    absolutify,
 )
+from mozilla_django_oidc.views import (
+    OIDCAuthenticationCallbackView as MozillaOIDCAuthenticationCallbackView,
+)
+from mozilla_django_oidc.views import (
+    OIDCAuthenticationRequestView as MozillaOIDCAuthenticationRequestView,
+)
 from mozilla_django_oidc.views import (
    OIDCLogoutView as MozillaOIDCOIDCLogoutView,
 )

+from ..analytics import analytics
+

 class OIDCLogoutView(MozillaOIDCOIDCLogoutView):
    """Custom logout view for handling OpenID Connect (OIDC) logout flow.
@@ -91,6 +100,10 @@ class OIDCLogoutView(MozillaOIDCOIDCLogoutView):

        logout_url = self.redirect_url

+        analytics.track(
+            user=request.user,
+            event="Signed Out",
+        )
        if request.user.is_authenticated:
            logout_url = self.construct_oidc_logout_url(request)

@@ -135,3 +148,40 @@ class OIDCLogoutCallbackView(MozillaOIDCOIDCLogoutView):
        auth.logout(request)

        return HttpResponseRedirect(self.redirect_url)
+
+
+class OIDCAuthenticationCallbackView(MozillaOIDCAuthenticationCallbackView):
+    """Custom callback view for handling the silent loging flow."""
+
+    @property
+    def failure_url(self):
+        """Override the failure URL property to handle silent login flow
+
+        A silent login failure (e.g., no active user session) should not be
+        considered as an authentication failure.
+        """
+        if self.request.session.get("silent", None):
+            del self.request.session["silent"]
+            self.request.session.save()
+            return self.success_url
+        return super().failure_url
+
+
+class OIDCAuthenticationRequestView(MozillaOIDCAuthenticationRequestView):
+    """Custom authentication view for handling the silent loging flow."""
+
+    def get_extra_params(self, request):
+        """Handle 'prompt' extra parameter for the silent login flow
+
+        This extra parameter is necessary to distinguish between a standard
+        authentication flow and the silent login flow.
+        """
+        extra_params = self.get_settings("OIDC_AUTH_REQUEST_EXTRA_PARAMS", None)
+        if extra_params is None:
+            extra_params = {}
+        if request.GET.get("silent") == "true":
+            extra_params = copy.deepcopy(extra_params)
+            extra_params.update({"prompt": "none"})
+            request.session["silent"] = True
+            request.session.save()
+        return extra_params
@@ -1,6 +1,7 @@
 """
 Core application enums declaration
 """
+
 from django.conf import global_settings, settings
 from django.utils.translation import gettext_lazy as _

@@ -2,6 +2,7 @@
 """
 Core application factories
 """
+
 from django.conf import settings
 from django.contrib.auth.hashers import make_password
 from django.utils.text import slugify
@@ -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'),
+        )
+    ]
@@ -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'),
+        ),
+    ]
@@ -1,6 +1,7 @@
 """
 Declare and configure the models for the Meet core application
 """
+
 import uuid
 from logging import getLogger

@@ -162,6 +163,13 @@ class User(AbstractBaseUser, BaseModel, auth_models.PermissionsMixin):
        """
        return []

+    @property
+    def email_anonymized(self):
+        """Anonymize the email address by replacing the local part with asterisks."""
+        if not self.email:
+            return ""
+        return f"***@{self.email.split('@')[1]}"
+

 class Resource(BaseModel):
    """Model to define access control"""
@@ -288,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."),
    )
@@ -92,9 +92,12 @@ def test_models_oidc_user_getter_invalid_token(django_assert_num_queries, monkey

    monkeypatch.setattr(OIDCAuthenticationBackend, "get_userinfo", get_userinfo_mocked)

-    with django_assert_num_queries(0), pytest.raises(
-        SuspiciousOperation,
-        match="User info contained no recognizable user identification",
+    with (
+        django_assert_num_queries(0),
+        pytest.raises(
+            SuspiciousOperation,
+            match="User info contained no recognizable user identification",
+        ),
    ):
        klass.get_or_create_user(access_token="test-token", id_token=None, payload=None)

@@ -15,7 +15,13 @@ import pytest
 from rest_framework.test import APIClient

 from core import factories
-from core.authentication.views import OIDCLogoutCallbackView, OIDCLogoutView
+from core.authentication.views import (
+    MozillaOIDCAuthenticationCallbackView,
+    OIDCAuthenticationCallbackView,
+    OIDCAuthenticationRequestView,
+    OIDCLogoutCallbackView,
+    OIDCLogoutView,
+)

 pytestmark = pytest.mark.django_db

@@ -229,3 +235,125 @@ def test_view_logout_callback():

    assert response.status_code == 302
    assert response.url == "/example-logout"
+
+
+@pytest.mark.parametrize("mocked_extra_params_setting", [{"foo": 123}, {}, None])
+def test_view_authentication_default(settings, mocked_extra_params_setting):
+    """By default, authentication request should not trigger silent login."""
+
+    settings.OIDC_AUTH_REQUEST_EXTRA_PARAMS = mocked_extra_params_setting
+
+    user = factories.UserFactory()
+
+    request = RequestFactory().request()
+    request.user = user
+    request.GET = {}
+
+    view = OIDCAuthenticationRequestView()
+    extra_params = view.get_extra_params(request)
+
+    assert extra_params == (mocked_extra_params_setting or {})
+
+
+@pytest.mark.parametrize("mocked_extra_params_setting", [{"foo": 123}, {}, None])
+def test_view_authentication_silent_false(settings, mocked_extra_params_setting):
+    """Ensure setting 'silent' parameter to a random value doesn't trigger the silent login flow."""
+
+    settings.OIDC_AUTH_REQUEST_EXTRA_PARAMS = mocked_extra_params_setting
+
+    user = factories.UserFactory()
+
+    request = RequestFactory().request()
+    request.user = user
+    request.GET = {"silent": "foo"}
+
+    middleware = SessionMiddleware(get_response=lambda x: x)
+    middleware.process_request(request)
+
+    view = OIDCAuthenticationRequestView()
+    extra_params = view.get_extra_params(request)
+
+    assert extra_params == (mocked_extra_params_setting or {})
+    assert not request.session.get("silent")
+
+
+@pytest.mark.parametrize("mocked_extra_params_setting", [{"foo": 123}, {}, None])
+def test_view_authentication_silent_true(settings, mocked_extra_params_setting):
+    """If 'silent' parameter is set to True, the silent login should be triggered."""
+    settings.OIDC_AUTH_REQUEST_EXTRA_PARAMS = mocked_extra_params_setting
+
+    user = factories.UserFactory()
+
+    request = RequestFactory().request()
+    request.user = user
+    request.GET = {"silent": "true"}
+
+    middleware = SessionMiddleware(get_response=lambda x: x)
+    middleware.process_request(request)
+
+    view = OIDCAuthenticationRequestView()
+    extra_params = view.get_extra_params(request)
+    expected_params = {"prompt": "none"}
+
+    assert (
+        extra_params == {**mocked_extra_params_setting, **expected_params}
+        if mocked_extra_params_setting
+        else expected_params
+    )
+    assert request.session.get("silent") is True
+
+
+@mock.patch.object(
+    MozillaOIDCAuthenticationCallbackView,
+    "failure_url",
+    new_callable=mock.PropertyMock,
+    return_value="foo",
+)
+def test_view_callback_failure_url(mocked_failure_url):
+    """Test default behavior of the 'failure_url' property"""
+
+    user = factories.UserFactory()
+
+    request = RequestFactory().request()
+    request.user = user
+
+    middleware = SessionMiddleware(get_response=lambda x: x)
+    middleware.process_request(request)
+
+    view = OIDCAuthenticationCallbackView()
+    view.request = request
+
+    returned_url = view.failure_url
+
+    mocked_failure_url.assert_called_once()
+    assert returned_url == "foo"
+
+
+@mock.patch.object(
+    OIDCAuthenticationCallbackView,
+    "success_url",
+    new_callable=mock.PropertyMock,
+    return_value="foo",
+)
+def test_view_callback_failure_url_silent_login(mocked_success_url):
+    """If a silent login was initiated and failed, it should not be treated as a failure."""
+
+    user = factories.UserFactory()
+
+    request = RequestFactory().request()
+    request.user = user
+
+    middleware = SessionMiddleware(get_response=lambda x: x)
+    middleware.process_request(request)
+
+    request.session["silent"] = True
+    request.session.save()
+
+    view = OIDCAuthenticationCallbackView()
+    view.request = request
+
+    returned_url = view.failure_url
+
+    mocked_success_url.assert_called_once()
+    assert returned_url == "foo"
+    assert not request.session.get("silent")
@@ -1,4 +1,5 @@
 """Fixtures for tests in the Meet core application"""
+
 from unittest import mock

 import pytest
@@ -1,6 +1,7 @@
 """
 Test rooms API endpoints in the Meet core app: create.
 """
+
 import pytest
 from rest_framework.test import APIClient

@@ -1,6 +1,7 @@
 """
 Test rooms API endpoints in the Meet core app: delete.
 """
+
 import pytest
 from rest_framework.test import APIClient

@@ -1,6 +1,7 @@
 """
 Test rooms API endpoints in the Meet core app: list.
 """
+
 from unittest import mock

 import pytest
@@ -1,6 +1,7 @@
 """
 Test rooms API endpoints in the Meet core app: retrieve.
 """
+
 import random
 from unittest import mock

@@ -111,7 +112,9 @@ def test_api_rooms_retrieve_anonymous_unregistered_allowed(mock_token):
        },
    }

-    mock_token.assert_called_once_with(room="unregistered-room", user=AnonymousUser())
+    mock_token.assert_called_once_with(
+        room="unregistered-room", user=AnonymousUser(), username=None
+    )


@override_settings(ALLOW_UNREGISTERED_ROOMS=True)
@@ -141,7 +144,9 @@ def test_api_rooms_retrieve_anonymous_unregistered_allowed_not_normalized(mock_t
        },
    }

-    mock_token.assert_called_once_with(room="reunion", user=AnonymousUser())
+    mock_token.assert_called_once_with(
+        room="reunion", user=AnonymousUser(), username=None
+    )


@override_settings(ALLOW_UNREGISTERED_ROOMS=False)
@@ -153,7 +158,7 @@ def test_api_rooms_retrieve_anonymous_unregistered_not_allowed():
    response = client.get("/api/v1.0/rooms/unregistered-room/")

    assert response.status_code == 404
-    assert response.json() == {"detail": "Not found."}
+    assert response.json() == {"detail": "No Room matches the given query."}


@mock.patch("core.utils.generate_token", return_value="foo")
@@ -229,7 +234,7 @@ def test_api_rooms_retrieve_authenticated_public(mock_token):
        "slug": room.slug,
    }

-    mock_token.assert_called_once_with(room=expected_name, user=user)
+    mock_token.assert_called_once_with(room=expected_name, user=user, username=None)


 def test_api_rooms_retrieve_authenticated():
@@ -327,7 +332,7 @@ def test_api_rooms_retrieve_members(mock_token, django_assert_num_queries):
        "slug": room.slug,
    }

-    mock_token.assert_called_once_with(room=expected_name, user=user)
+    mock_token.assert_called_once_with(room=expected_name, user=user, username=None)


@mock.patch("core.utils.generate_token", return_value="foo")
@@ -400,4 +405,4 @@ def test_api_rooms_retrieve_administrators(mock_token, django_assert_num_queries
        "slug": room.slug,
    }

-    mock_token.assert_called_once_with(room=expected_name, user=user)
+    mock_token.assert_called_once_with(room=expected_name, user=user, username=None)
@@ -1,6 +1,7 @@
 """
 Test rooms API endpoints in the Meet core app: update.
 """
+
 import random

 import pytest
@@ -1,6 +1,7 @@
 """
 Test suite for generated openapi schema.
 """
+
 import json
 from io import StringIO

@@ -0,0 +1,132 @@
+"""
+Test for the Analytics class.
+"""
+
+# pylint: disable=W0212
+
+from unittest.mock import patch
+
+from django.contrib.auth.models import AnonymousUser
+from django.test.utils import override_settings
+
+import pytest
+
+from core.analytics import Analytics
+from core.factories import UserFactory
+
+pytestmark = pytest.mark.django_db
+
+
+@pytest.fixture(name="mock_june_analytics")
+def _mock_june_analytics():
+    with patch("core.analytics.jAnalytics") as mock:
+        yield mock
+
+
+@override_settings(ANALYTICS_KEY="test_key")
+def test_analytics_init_enabled(mock_june_analytics):
+    """Should enable analytics and set the write key correctly when ANALYTICS_KEY is set."""
+    analytics = Analytics()
+    assert analytics._enabled is True
+    assert mock_june_analytics.write_key == "test_key"
+
+
+@override_settings(ANALYTICS_KEY=None)
+def test_analytics_init_disabled():
+    """Should disable analytics when ANALYTICS_KEY is not set."""
+    analytics = Analytics()
+    assert analytics._enabled is False
+
+
+@override_settings(ANALYTICS_KEY="test_key")
+def test_analytics_identify_user(mock_june_analytics):
+    """Should identify a user with the correct traits when analytics is enabled."""
+    user = UserFactory(sub="12345", email="user@example.com")
+    analytics = Analytics()
+    analytics.identify(user)
+    mock_june_analytics.identify.assert_called_once_with(
+        user_id="12345", traits={"email": "***@example.com"}
+    )
+
+
+@override_settings(ANALYTICS_KEY="test_key")
+def test_analytics_identify_user_with_traits(mock_june_analytics):
+    """Should identify a user with additional traits when analytics is enabled."""
+    user = UserFactory(sub="12345", email="user@example.com")
+    analytics = Analytics()
+    analytics.identify(user, traits={"email": "user@example.com", "foo": "foo"})
+    mock_june_analytics.identify.assert_called_once_with(
+        user_id="12345", traits={"email": "***@example.com", "foo": "foo"}
+    )
+
+
+@override_settings(ANALYTICS_KEY=None)
+def test_analytics_identify_not_enabled(mock_june_analytics):
+    """Should not call identify when analytics is not enabled."""
+    user = UserFactory(sub="12345", email="user@example.com")
+    analytics = Analytics()
+    analytics.identify(user)
+    mock_june_analytics.identify.assert_not_called()
+
+
+@override_settings(ANALYTICS_KEY="test_key")
+def test_analytics_identify_no_user(mock_june_analytics):
+    """Should not call identify when the user is None."""
+    analytics = Analytics()
+    analytics.identify(None)
+    mock_june_analytics.identify.assert_not_called()
+
+
+@override_settings(ANALYTICS_KEY="test_key")
+def test_analytics_identify_anonymous_user(mock_june_analytics):
+    """Should not call identify when the user is anonymous."""
+    user = AnonymousUser()
+    analytics = Analytics()
+    analytics.identify(user)
+    mock_june_analytics.identify.assert_not_called()
+
+
+@override_settings(ANALYTICS_KEY="test_key")
+def test_analytics_track_event(mock_june_analytics):
+    """Should track an event with the correct user and event details when analytics is enabled."""
+    user = UserFactory(sub="12345")
+    analytics = Analytics()
+    analytics.track(user, event="test_event", foo="foo")
+    mock_june_analytics.track.assert_called_once_with(
+        user_id="12345", event="test_event", foo="foo"
+    )
+
+
+@override_settings(ANALYTICS_KEY=None)
+def test_analytics_track_event_not_enabled(mock_june_analytics):
+    """Should not call track when analytics is not enabled."""
+    user = UserFactory(sub="12345")
+    analytics = Analytics()
+    analytics.track(user, event="test_event", foo="foo")
+
+    mock_june_analytics.track.assert_not_called()
+
+
+@override_settings(ANALYTICS_KEY="test_key")
+@patch("uuid.uuid4", return_value="test_uuid4")
+def test_analytics_track_event_no_user(mock_uuid4, mock_june_analytics):
+    """Should track an event with a random anonymous user ID when the user is None."""
+    analytics = Analytics()
+    analytics.track(None, event="test_event", foo="foo")
+    mock_june_analytics.track.assert_called_once_with(
+        anonymous_id="test_uuid4", event="test_event", foo="foo"
+    )
+    mock_uuid4.assert_called_once()
+
+
+@override_settings(ANALYTICS_KEY="test_key")
+@patch("uuid.uuid4", return_value="test_uuid4")
+def test_analytics_track_event_anonymous_user(mock_uuid4, mock_june_analytics):
+    """Should track an event with a random anonymous user ID when the user is anonymous."""
+    user = AnonymousUser()
+    analytics = Analytics()
+    analytics.track(user, event="test_event", foo="foo")
+    mock_june_analytics.track.assert_called_once_with(
+        anonymous_id="test_uuid4", event="test_event", foo="foo"
+    )
+    mock_uuid4.assert_called_once()
@@ -1,6 +1,7 @@
 """
 Test resource accesses API endpoints in the Meet core app.
 """
+
 import random
 from unittest import mock
 from uuid import uuid4
@@ -1,6 +1,7 @@
 """
 Test users API endpoints in the Meet core app.
 """
+
 import pytest
 from rest_framework.test import APIClient

@@ -1,6 +1,7 @@
 """
 Unit tests for the ResourceAccess model with user
 """
+
 from django.core.exceptions import ValidationError

 import pytest
@@ -1,6 +1,7 @@
 """
 Unit tests for the Room model
 """
+
 from django.contrib.auth.models import AnonymousUser
 from django.core.exceptions import ValidationError

@@ -1,6 +1,7 @@
 """
 Unit tests for the User model
 """
+
 from unittest import mock

 from django.core.exceptions import ValidationError
@@ -43,3 +44,12 @@ def test_models_users_send_mail_main_missing():
        user.email_user("my subject", "my message")

    assert str(excinfo.value) == "User has no email address."
+
+
+def test_models_users_email_anonymized():
+    """The user's email should be anonymized if it exists."""
+    user = factories.UserFactory(email="john.doe@world.com")
+    assert user.email_anonymized == "***@world.com"
+
+    user = factories.UserFactory(email=None)
+    assert user.email_anonymized == ""
@@ -1,4 +1,5 @@
 """URL configuration for the core app."""
+
 from django.conf import settings
 from django.urls import include, path

@@ -1,7 +1,12 @@
 """
 Utils functions used in the core app
 """
-import string
+
+# ruff: noqa:S311
+
+import json
+import random
+from typing import Optional
 from uuid import uuid4

 from django.conf import settings
@@ -9,21 +14,40 @@ from django.conf import settings
 from livekit.api import AccessToken, VideoGrants


-def generate_token(room: string, user) -> str:
-    """Generate a Livekit access token for a user in a specific room.
+def generate_color(identity: str) -> str:
+    """Generates a consistent HSL color based on a given identity string.
+
+    The function seeds the random generator with the identity's hash,
+    ensuring consistent color output. The HSL format allows fine-tuned control
+    over saturation and lightness, empirically adjusted to produce visually
+    appealing and distinct colors. HSL is preferred over hex to constrain the color
+    range and ensure predictability.
+    """
+
+    random.seed(hash(identity))
+    hue = random.randint(0, 360)
+    saturation = random.randint(50, 75)
+    lightness = random.randint(25, 60)
+
+    return f"hsl({hue}, {saturation}%, {lightness}%)"
+
+
+def generate_token(room: str, user, username: Optional[str] = None) -> str:
+    """Generate a LiveKit access token for a user in a specific room.

    Args:
        room (str): The name of the room.
        user (User): The user which request the access token.
+        username (Optional[str]): The username to be displayed in the room.
+                         If none, a default value will be used.

    Returns:
        str: The LiveKit JWT access token.
    """
-
-    # todo - define the video grants properly based on user and room.
    video_grants = VideoGrants(
        room=room,
        room_join=True,
+        can_update_own_metadata=True,
        can_publish_sources=[
            "camera",
            "microphone",
@@ -32,16 +56,22 @@ def generate_token(room: string, user) -> 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:
-        # todo - allow passing a proper name for not logged-in user
-        token.with_identity(str(uuid4()))
+        identity = str(uuid4())
+        default_username = "Anonymous"
    else:
-        # todo - use user's fullname instead of its email for the displayed name
-        token.with_identity(user.sub).with_name(f"{user!s}")
+        identity = str(user.sub)
+        default_username = str(user)
+
+    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)
+        .with_metadata(json.dumps({"color": generate_color(identity)}))
+    )

    return token.to_jwt()
@@ -1,4 +1,5 @@
 """Management user to create a superuser."""
+
 from django.contrib.auth import get_user_model
 from django.core.management.base import BaseCommand

@@ -2,6 +2,7 @@
 """
 meet's sandbox management script.
 """
+
 import os
 import sys

@@ -1,4 +1,5 @@
 """Meet celery configuration file."""
+
 import os

 from celery import Celery
@@ -9,8 +9,10 @@ https://docs.djangoproject.com/en/3.1/topics/settings/
 For the full list of settings and their values, see
 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 _

@@ -70,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"
@@ -272,6 +275,7 @@ class Base(Configuration):
    # Easy thumbnails
    THUMBNAIL_EXTENSION = "webp"
    THUMBNAIL_TRANSPARENCY_EXTENSION = "webp"
+    THUMBNAIL_DEFAULT_STORAGE_ALIAS = "default"
    THUMBNAIL_ALIASES = {}

    # Celery
@@ -284,6 +288,8 @@ class Base(Configuration):
    SESSION_COOKIE_AGE = 60 * 60 * 12

    # OIDC - Authorization Code Flow
+    OIDC_AUTHENTICATE_CLASS = "core.authentication.views.OIDCAuthenticationRequestView"
+    OIDC_CALLBACK_CLASS = "core.authentication.views.OIDCAuthenticationCallbackView"
    OIDC_CREATE_USER = values.BooleanValue(
        default=True,
        environ_name="OIDC_CREATE_USER",
@@ -344,6 +350,9 @@ class Base(Configuration):
    ALLOW_LOGOUT_GET_METHOD = values.BooleanValue(
        default=True, environ_name="ALLOW_LOGOUT_GET_METHOD", environ_prefix=None
    )
+    OIDC_REDIRECT_FIELD_NAME = values.Value(
+        "returnTo", environ_name="OIDC_REDIRECT_FIELD_NAME", environ_prefix=None
+    )

    # Video conference configuration
    LIVEKIT_CONFIGURATION = {
@@ -359,6 +368,9 @@ class Base(Configuration):
    ALLOW_UNREGISTERED_ROOMS = values.BooleanValue(
        True, environ_name="ALLOW_UNREGISTERED_ROOMS", environ_prefix=None
    )
+    ANALYTICS_KEY = values.Value(
+        None, environ_name="ANALYTICS_KEY", environ_prefix=None
+    )

    # pylint: disable=invalid-name
    @property
@@ -479,6 +491,8 @@ class Test(Base):

    CELERY_TASK_ALWAYS_EAGER = values.BooleanValue(True)

+    ANALYTICS_KEY = None
+
    def __init__(self):
        # pylint: disable=invalid-name
        self.INSTALLED_APPS += ["drf_spectacular_sidecar"]
@@ -502,7 +516,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
@@ -539,6 +557,26 @@ class Production(Base):
        },
    }

+    LOGGING = {
+        "version": 1,
+        "formatters": {
+            "json": {"()": "dockerflow.logging.JsonLogFormatter", "logger_name": "meet"}
+        },
+        "handlers": {
+            "console": {
+                "level": "DEBUG",
+                "class": "logging.StreamHandler",
+                "formatter": "json",
+            },
+        },
+        "loggers": {
+            "request.summary": {
+                "handlers": ["console"],
+                "level": "DEBUG",
+            },
+        },
+    }
+

 class Feature(Production):
    """
@@ -7,7 +7,7 @@ build-backend = "setuptools.build_meta"

 [project]
 name = "meet"
-version = "0.1.0"
+version = "0.1.4"
 authors = [{ "name" = "DINUM", "email" = "dev@mail.numerique.gouv.fr" }]
 classifiers = [
    "Development Status :: 5 - Production/Stable",
@@ -19,44 +19,45 @@ classifiers = [
    "Programming Language :: Python :: 3",
    "Programming Language :: Python :: 3.10",
 ]
-description = "An application to print markdown to pdf from a set of managed templates."
+description = "A simple video and phone conferencing tool, powered by LiveKit"
 keywords = ["Django", "Contacts", "Templates", "RBAC"]
 license = { file = "LICENSE" }
 readme = "README.md"
 requires-python = ">=3.10"
 dependencies = [
-    "boto3==1.33.6",
+    "boto3==1.35.5",
    "Brotli==1.1.0",
-    "celery[redis]==5.3.6",
-    "django-configurations==2.5",
-    "django-cors-headers==4.3.1",
-    "django-countries==7.5.1",
+    "celery[redis]==5.4.0",
+    "django-configurations==2.5.1",
+    "django-cors-headers==4.4.0",
+    "django-countries==7.6.1",
    "django-parler==2.3",
-    "redis==5.0.3",
+    "redis==5.0.8",
    "django-redis==5.4.0",
-    "django-storages[s3]==1.14.2",
+    "django-storages[s3]==1.14.4",
    "django-timezone-field>=5.1",
-    "django==5.0.3",
-    "djangorestframework==3.14.0",
-    "drf_spectacular==0.26.5",
-    "dockerflow==2022.8.0",
-    "easy_thumbnails==2.8.5",
-    "factory_boy==3.3.0",
-    "freezegun==1.5.0",
-    "gunicorn==22.0.0",
-    "jsonschema==4.20.0",
-    "markdown==3.5.1",
+    "django==5.1",
+    "djangorestframework==3.15.2",
+    "drf_spectacular==0.27.2",
+    "dockerflow==2024.4.2",
+    "easy_thumbnails==2.9",
+    "factory_boy==3.3.1",
+    "freezegun==1.5.1",
+    "gunicorn==23.0.0",
+    "jsonschema==4.23.0",
+    "june-analytics-python==2.3.0",
+    "markdown==3.7",
    "nested-multipart-parser==1.5.0",
-    "psycopg[binary]==3.1.14",
-    "PyJWT==2.8.0",
-    "python-frontmatter==1.0.1",
-    "requests==2.31.0",
-    "sentry-sdk==1.38.0",
+    "psycopg[binary]==3.2.1",
+    "PyJWT==2.9.0",
+    "python-frontmatter==1.1.0",
+    "requests==2.32.3",
+    "sentry-sdk==2.13.0",
    "url-normalize==1.4.3",
    "WeasyPrint>=60.2",
-    "whitenoise==6.6.0",
-    "mozilla-django-oidc==4.0.0",
-    "livekit-api==0.5.1",
+    "whitenoise==6.7.0",
+    "mozilla-django-oidc==4.0.1",
+    "livekit-api==0.7.0",
 ]

 [project.urls]
@@ -68,20 +69,20 @@ dependencies = [
 [project.optional-dependencies]
 dev = [
    "django-extensions==3.2.3",
-    "drf-spectacular-sidecar==2023.12.1",
+    "drf-spectacular-sidecar==2024.7.1",
    "ipdb==0.13.13",
-    "ipython==8.18.1",
-    "pyfakefs==5.3.2",
+    "ipython==8.26.0",
+    "pyfakefs==5.6.0",
    "pylint-django==2.5.5",
-    "pylint==3.0.3",
-    "pytest-cov==4.1.0",
-    "pytest-django==4.7.0",
-    "pytest==7.4.3",
-    "pytest-icdiff==0.8",
-    "pytest-xdist==3.5.0",
-    "responses==0.24.1",
-    "ruff==0.1.6",
-    "types-requests==2.31.0.10",
+    "pylint==3.2.6",
+    "pytest-cov==5.0.0",
+    "pytest-django==4.8.0",
+    "pytest==8.3.2",
+    "pytest-icdiff==0.9",
+    "pytest-xdist==3.6.1",
+    "responses==0.25.3",
+    "ruff==0.6.2",
+    "types-requests==2.32.0.20240712",
 ]

 [tool.setuptools]
@@ -100,7 +101,6 @@ exclude = [
    "__pycache__",
    "*/migrations/*",
 ]
-ignore= ["DJ001", "PLR2004"]
 line-length = 88


@@ -121,12 +121,13 @@ select = [
    "SLF", # flake8-self
    "T20", # flake8-print
 ]
+ignore= ["DJ001", "PLR2004"]

 [tool.ruff.lint.isort]
 section-order = ["future","standard-library","django","third-party","meet","first-party","local-folder"]
 sections = { meet=["core"], django=["django"] }

-[tool.ruff.per-file-ignores]
+[tool.ruff.lint.per-file-ignores]
 "**/tests/*" = ["S", "SLF"]

 [tool.pytest.ini_options]
@@ -1,7 +0,0 @@
-#!/usr/bin/env python
-"""Setup file for the meet module. All configuration stands in the setup.cfg file."""
-# coding: utf-8
-
-from setuptools import setup
-
-setup()
@@ -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',
@@ -0,0 +1,8 @@
+{
+  "defaultNamespace": "global",
+  "input": ["src/**/*.{ts,tsx}", "!src/styled-system/**/*", "!src/**/*.d.ts"],
+  "output": "src/locales/$LOCALE/$NAMESPACE.json",
+  "createOldCatalogs": false,
+  "locales": ["en", "fr", "de"],
+  "sort": true
+}
@@ -1,23 +1,34 @@
 {
  "name": "meet",
  "private": true,
-  "version": "0.1.0",
+  "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"
+    "preview": "vite preview",
+    "i18n:extract": "npx i18next -c i18next-parser.config.json",
+    "format": "prettier --write ./src",
+    "check": "prettier --check ./src"
  },
  "dependencies": {
    "@livekit/components-react": "2.3.3",
    "@livekit/components-styles": "1.0.12",
    "@pandacss/preset-panda": "0.41.0",
+    "@remixicon/react": "4.2.0",
    "@tanstack/react-query": "5.49.2",
+    "hoofd": "1.7.1",
+    "i18next": "23.12.1",
+    "i18next-browser-languagedetector": "8.0.0",
+    "i18next-parser": "9.0.0",
+    "i18next-resources-to-backend": "1.2.1",
    "livekit-client": "2.3.1",
    "react": "18.2.0",
    "react-aria-components": "1.2.1",
    "react-dom": "18.2.0",
+    "react-i18next": "14.1.3",
+    "valtio": "1.13.2",
    "wouter": "3.3.0"
  },
  "devDependencies": {
@@ -31,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"
@@ -35,18 +35,6 @@ const config: Config = {
  exclude: [],
  jsxFramework: 'react',
  outdir: 'src/styled-system',
-  conditions: {
-    extend: {
-      // React Aria builds upon data attributes instead of css pseudo-classes, in case we style a React Aria component
-      // we dont want to trigger pseudo class related styles
-      'ra-hover': '&:is([data-hovered])',
-      'ra-focus': '&:is([data-focused])',
-      'ra-focusVisible': '&:is([data-focus-visible])',
-      'ra-disabled': '&:is([data-disabled])',
-      pressed: '&:is([data-pressed])',
-      'ra-pressed': '&:is([data-pressed])',
-    },
-  },
  theme: {
    ...pandaPreset.theme,
    // media queries are defined in em so that zooming with text-only mode triggers breakpoints
@@ -58,6 +46,24 @@ const config: Config = {
      xl: '80em', // 1280px
      '2xl': '96em', // 1536px
    },
+    keyframes: {
+      slide: {
+        from: {
+          transform: 'var(--origin)',
+          opacity: 0,
+        },
+        to: {
+          transform: 'translateY(0)',
+          opacity: 1,
+        },
+      },
+      fade: { from: { opacity: 0 }, to: { opacity: 1 } },
+      pulse: {
+        '0%': { boxShadow: '0 0 0 0 rgba(255, 255, 255, 0.7)' },
+        '75%': { boxShadow: '0 0 0 30px rgba(255, 255, 255, 0)' },
+        '100%': { boxShadow: '0 0 0 0 rgba(255, 255, 255, 0)' },
+      },
+    },
    tokens: defineTokens({
      /* we take a few things from the panda preset but for now we clear out some stuff.
       * This way we'll only add the things we need step by step and prevent using lots of differents things.
@@ -146,6 +152,7 @@ const config: Config = {
        2: { value: '2' },
      },
      radii: {
+        4: { value: '0.25rem' },
        6: { value: '0.375rem' },
        8: { value: '0.5rem' },
        16: { value: '1rem' },
@@ -164,7 +171,7 @@ const config: Config = {
      colors: {
        default: {
          text: { value: '{colors.gray.900}' },
-          bg: { value: '{colors.slate.50}' },
+          bg: { value: 'white' },
          subtle: { value: '{colors.gray.100}' },
          'subtle-text': { value: '{colors.gray.600}' },
        },
@@ -178,7 +185,8 @@ const config: Config = {
          hover: { value: '{colors.gray.200}' },
          active: { value: '{colors.gray.300}' },
          text: { value: '{colors.default.text}' },
-          border: { value: '{colors.gray.300}' },
+          border: { value: '{colors.gray.500}' },
+          subtle: { value: '{colors.gray.400}' },
        },
        primary: {
          DEFAULT: { value: '{colors.blue.700}' },
@@ -187,7 +195,7 @@ const config: Config = {
          text: { value: '{colors.white}' },
          warm: { value: '{colors.blue.300}' },
          subtle: { value: '{colors.blue.100}' },
-          'subtle-text': { value: '{colors.sky.700}' },
+          'subtle-text': { value: '{colors.blue.700}' },
        },
        danger: {
          DEFAULT: { value: '{colors.red.600}' },
@@ -196,14 +204,16 @@ const config: Config = {
          text: { value: '{colors.white}' },
          subtle: { value: '{colors.red.100}' },
          'subtle-text': { value: '{colors.red.700}' },
+          ...pandaPreset.theme.tokens.colors.red,
        },
        success: {
-          DEFAULT: { value: '{colors.emerald.700}' },
-          hover: { value: '{colors.emerald.800}' },
-          active: { value: '{colors.emerald.900}' },
+          DEFAULT: { value: '{colors.green.700}' },
+          hover: { value: '{colors.green.800}' },
+          active: { value: '{colors.green.900}' },
          text: { value: '{colors.white}' },
-          subtle: { value: '{colors.emerald.100}' },
-          'subtle-text': { value: '{colors.emerald.700}' },
+          subtle: { value: '{colors.green.100}' },
+          'subtle-text': { value: '{colors.green.800}' },
+          ...pandaPreset.theme.tokens.colors.green,
        },
        warning: {
          DEFAULT: { value: '{colors.amber.700}' },
@@ -213,6 +223,7 @@ const config: Config = {
          subtle: { value: '{colors.amber.100}' },
          'subtle-text': { value: '{colors.amber.700}' },
        },
+        focusRing: { value: 'rgb(74, 121, 199)' },
      },
      shadows: {
        box: { value: '{shadows.sm}' },
@@ -228,12 +239,20 @@ const config: Config = {
          DEFAULT: { value: '{spacing.1}' },
          lg: { value: '{spacing.2}' },
        },
-        paragraph: { value: '{spacing.1}' },
+        paragraph: { value: '{spacing.0.5}' },
        heading: { value: '{spacing.1}' },
        gutter: { value: '{spacing.1}' },
+        textfield: { value: '{spacing.1}' },
      },
    }),
    textStyles: defineTextStyles({
+      display: {
+        value: {
+          fontSize: '3rem',
+          lineHeight: '2rem',
+          fontWeight: 700,
+        },
+      },
      h1: {
        value: {
          fontSize: '1.5rem',
@@ -252,7 +271,6 @@ const config: Config = {
        value: {
          fontSize: '1.125rem',
          lineHeight: '1.75rem',
-          fontWeight: 700,
        },
      },
      body: {
@@ -261,7 +279,7 @@ const config: Config = {
          lineHeight: '1.5',
        },
      },
-      small: {
+      sm: {
        value: {
          fontSize: '0.875rem',
          lineHeight: '1.25rem',
@@ -1,23 +1,41 @@
 import '@livekit/components-styles'
 import '@/styles/index.css'
+import { Suspense } from 'react'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { Route, Switch } from 'wouter'
-import { Home } from './routes/Home'
-import { NotFound } from './routes/NotFound'
-import { RoomRoute } from '@/features/rooms'
-
-const queryClient = new QueryClient()
+import { QueryClientProvider } from '@tanstack/react-query'
+import { useTranslation } from 'react-i18next'
+import { useLang } from 'hoofd'
+import { Switch, Route } from 'wouter'
+import { I18nProvider } from 'react-aria-components'
+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'

 function App() {
+  const { i18n } = useTranslation()
+  useLang(i18n.language)
+
+  const isProduction = import.meta.env.PROD
+  silenceLiveKitLogs(isProduction)
+
  return (
    <QueryClientProvider client={queryClient}>
-      <Switch>
-        <Route path="/" component={Home} />
-        <Route path="/:roomId" component={RoomRoute} />
-        <Route component={NotFound} />
-      </Switch>
-      <ReactQueryDevtools initialIsOpen={false} />
+      <Suspense fallback={null}>
+        <I18nProvider locale={i18n.language}>
+          <Layout>
+            <Switch>
+              {Object.entries(routes).map(([, route], i) => (
+                <Route key={i} path={route.path} component={route.Component} />
+              ))}
+              <Route component={NotFoundScreen} />
+            </Switch>
+          </Layout>
+          <ReactQueryDevtools initialIsOpen={false} />
+        </I18nProvider>
+      </Suspense>
    </QueryClientProvider>
  )
 }
@@ -0,0 +1,3 @@
+import { QueryClient } from '@tanstack/react-query'
+
+export const queryClient = new QueryClient()
@@ -0,0 +1,53 @@
+import { cva, RecipeVariantProps } from '@/styled-system/css'
+import React from 'react'
+
+const avatar = cva({
+  base: {
+    backgroundColor: 'transparent',
+    color: 'white',
+    display: 'flex',
+    borderRadius: '50%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    userSelect: 'none',
+    cursor: 'default',
+    flexGrow: 0,
+    flexShrink: 0,
+  },
+  variants: {
+    context: {
+      list: {
+        width: '32px',
+        height: '32px',
+        fontSize: '0.8rem',
+      },
+      placeholder: {
+        width: '100%',
+        height: '100%',
+      },
+    },
+  },
+  defaultVariants: {
+    context: 'list',
+  },
+})
+
+export type AvatarProps = React.HTMLAttributes<HTMLDivElement> & {
+  name?: string
+  bgColor?: string
+} & RecipeVariantProps<typeof avatar>
+
+export const Avatar = ({ name, bgColor, context, ...props }: AvatarProps) => {
+  const initial = name?.trim()?.charAt(0) || ''
+  return (
+    <div
+      style={{
+        backgroundColor: bgColor,
+      }}
+      className={avatar({ context })}
+      {...props}
+    >
+      {initial}
+    </div>
+  )
+}
@@ -0,0 +1,14 @@
+import { Link } from '@/primitives'
+import { AProps } from '@/primitives/A'
+import { useTranslation } from 'react-i18next'
+
+export const BackToHome = ({ size }: { size?: AProps['size'] }) => {
+  const { t } = useTranslation()
+  return (
+    <p>
+      <Link to="/" size={size}>
+        {t('backToHome')}
+      </Link>
+    </p>
+  )
+}
@@ -0,0 +1,24 @@
+import { useState, useEffect, type ReactNode } from 'react'
+
+export const DelayedRender = ({
+  children,
+  delay = 500,
+}: {
+  delay?: number
+  children: ReactNode
+}) => {
+  const [show, setShow] = useState(false)
+  useEffect(() => {
+    if (delay === 0) {
+      setShow(true)
+      return
+    }
+    const timeout = setTimeout(() => setShow(true), delay)
+    return () => clearTimeout(timeout)
+  }, [delay])
+  if (delay !== 0 && !show) {
+    return null
+  }
+
+  return children
+}
@@ -0,0 +1,28 @@
+import { CenteredContent } from '@/layout/CenteredContent'
+import { Screen } from '@/layout/Screen'
+import { useTranslation } from 'react-i18next'
+import { Center } from '@/styled-system/jsx'
+import { Text } from '@/primitives'
+
+export const ErrorScreen = ({
+  title,
+  body,
+}: {
+  title?: string
+  body?: string
+}) => {
+  const { t } = useTranslation()
+  return (
+    <Screen layout="centered">
+      <CenteredContent title={title || t('error.heading')} withBackButton>
+        {!!body && (
+          <Center>
+            <Text as="p" variant="h3" centered>
+              {body}
+            </Text>
+          </Center>
+        )}
+      </CenteredContent>
+    </Screen>
+  )
+}
@@ -0,0 +1,25 @@
+import { Button } from '@/primitives'
+import { css } from '@/styled-system/css'
+import { RiExternalLinkLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+
+export const Feedback = () => {
+  const { t } = useTranslation()
+  return (
+    <Button
+      href="https://grist.incubateur.net/o/docs/forms/1YrfNP1QSSy8p2gCxMFnSf/4"
+      variant="success"
+      target="_blank"
+    >
+      <span className={css({ marginRight: 0.5 })} aria-hidden="true">
+        💡
+      </span>
+      {t('feedbackAlert')}
+      <RiExternalLinkLine
+        size={16}
+        className={css({ marginLeft: 0.5 })}
+        aria-hidden="true"
+      />
+    </Button>
+  )
+}
@@ -0,0 +1,27 @@
+import { Screen, type ScreenProps } from '@/layout/Screen'
+import { DelayedRender } from './DelayedRender'
+import { CenteredContent } from '@/layout/CenteredContent'
+import { useTranslation } from 'react-i18next'
+import { Center } from '@/styled-system/jsx'
+
+export const LoadingScreen = ({
+  delay = 500,
+  header = undefined,
+  layout = 'centered',
+}: {
+  delay?: number
+} & Omit<ScreenProps, 'children'>) => {
+  const { t } = useTranslation()
+
+  return (
+    <DelayedRender delay={delay}>
+      <Screen layout={layout} header={header}>
+        <CenteredContent>
+          <Center>
+            <p>{t('loading')}</p>
+          </Center>
+        </CenteredContent>
+      </Screen>
+    </DelayedRender>
+  )
+}
@@ -0,0 +1,12 @@
+import { CenteredContent } from '@/layout/CenteredContent'
+import { Screen } from '@/layout/Screen'
+import { useTranslation } from 'react-i18next'
+
+export const NotFoundScreen = () => {
+  const { t } = useTranslation()
+  return (
+    <Screen layout="centered">
+      <CenteredContent title={t('notFound.heading')} withBackButton />
+    </Screen>
+  )
+}
@@ -0,0 +1,28 @@
+import { ErrorScreen } from '@/components/ErrorScreen'
+import { LoadingScreen } from '@/components/LoadingScreen'
+
+/**
+ * Render an error or loading Screen while a given `status` is not a success,
+ * otherwise directly render children.
+ *
+ * `status` matches react query statuses.
+ *
+ * Children usually contain a Screen at some point in the render tree.
+ */
+export const QueryAware = ({
+  status,
+  children,
+}: {
+  status: 'error' | 'idle' | 'pending' | 'success'
+  children: React.ReactNode
+}) => {
+  if (status === 'error') {
+    return <ErrorScreen />
+  }
+
+  if (status === 'pending') {
+    return <LoadingScreen header={undefined} />
+  }
+
+  return children
+}
@@ -0,0 +1,47 @@
+import { Button } from '@/primitives'
+import { useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useMediaDeviceSelect } from '@livekit/components-react'
+
+export const SoundTester = () => {
+  const { t } = useTranslation('settings')
+  const [isPlaying, setIsPlaying] = useState(false)
+  const audioRef = useRef<HTMLAudioElement>(null)
+
+  const { activeDeviceId } = useMediaDeviceSelect({ kind: 'audiooutput' })
+
+  useEffect(() => {
+    const updateActiveId = async (deviceId: string) => {
+      try {
+        await audioRef?.current?.setSinkId(deviceId)
+      } catch (error) {
+        console.error(`Error setting sinkId: ${error}`)
+      }
+    }
+    updateActiveId(activeDeviceId)
+  }, [activeDeviceId])
+
+  // prevent pausing the sound
+  navigator.mediaSession.setActionHandler('pause', function () {})
+
+  return (
+    <>
+      <Button
+        onPress={() => {
+          audioRef?.current?.play()
+          setIsPlaying(true)
+        }}
+        size="sm"
+        isDisabled={isPlaying}
+      >
+        {isPlaying ? t('audio.speakers.ongoingTest') : t('audio.speakers.test')}
+      </Button>
+      {/* eslint-disable jsx-a11y/media-has-caption */}
+      <audio
+        ref={audioRef}
+        src="sounds/uprise.mp3"
+        onEnded={() => setIsPlaying(false)}
+      />
+    </>
+  )
+}
@@ -1,6 +1,7 @@
 import { ApiError } from '@/api/ApiError'
 import { fetchApi } from '@/api/fetchApi'
 import { type ApiUser } from './ApiUser'
+import { attemptSilentLogin, canAttemptSilentLogin } from '../utils/silentLogin'

 /**
 * fetch the logged-in user from the api.
@@ -16,7 +17,13 @@ export const fetchUser = (): Promise<ApiUser | false> => {
      .catch((error) => {
        // we assume that a 401 means the user is not logged in
        if (error instanceof ApiError && error.statusCode === 401) {
-          resolve(false)
+          // 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()) {
+            attemptSilentLogin(3600)
+          } else {
+            resolve(false)
+          }
        } else {
          reject(error)
        }
@@ -1,17 +1,27 @@
 import { useQuery } from '@tanstack/react-query'
 import { keys } from '@/api/queryKeys'
 import { fetchUser } from './fetchUser'
+import { type ApiUser } from './ApiUser'

+/**
+ * returns info about currently logged in user
+ *
+ * `isLoggedIn` is undefined while query is loading and true/false when it's done
+ */
 export const useUser = () => {
  const query = useQuery({
    queryKey: [keys.user],
    queryFn: fetchUser,
+    staleTime: 1000 * 60 * 60, // 1 hour
  })

+  const isLoggedIn =
+    query.status === 'success' ? query.data !== false : undefined
+  const isLoggedOut = isLoggedIn === false
+
  return {
    ...query,
-    // if fetchUser returns false, it means the user is not logged in: expose that
-    user: query.data === false ? undefined : query.data,
-    isLoggedIn: query.data !== undefined && query.data !== false,
+    user: isLoggedOut ? undefined : (query.data as ApiUser | undefined),
+    isLoggedIn,
  }
 }
@@ -0,0 +1,20 @@
+import { useUser } from '@/features/auth'
+import { LoadingScreen } from '@/components/LoadingScreen'
+
+/**
+ * Renders a loading Screen while user info has not been fetched yet,
+ * otherwise directly render children.
+ *
+ * Children usually contain a Screen at some point in the render tree.
+ *
+ * This is helpful to prevent flash of logged-out content for a few milliseconds when user is actually logged in
+ */
+export const UserAware = ({ children }: { children: React.ReactNode }) => {
+  const { isLoggedIn } = useUser()
+
+  return isLoggedIn !== undefined ? (
+    children
+  ) : (
+    <LoadingScreen header={false} delay={1000} />
+  )
+}
@@ -1,3 +1,4 @@
 export { useUser } from './api/useUser'
 export { authUrl } from './utils/authUrl'
 export { logoutUrl } from './utils/logoutUrl'
+export { UserAware } from './components/UserAware'
@@ -1,5 +1,10 @@
 import { apiUrl } from '@/api/apiUrl'

-export const authUrl = () => {
-  return apiUrl('/authenticate')
+export const authUrl = ({
+  silent = false,
+  returnTo = window.location.href,
+} = {}) => {
+  return apiUrl(
+    `/authenticate?silent=${encodeURIComponent(silent)}&returnTo=${encodeURIComponent(returnTo)}`
+  )
 }
@@ -0,0 +1,34 @@
+import { authUrl } from '@/features/auth'
+
+const SILENT_LOGIN_RETRY_KEY = 'silent-login-retry'
+
+const isRetryAllowed = () => {
+  const lastRetryDate = localStorage.getItem(SILENT_LOGIN_RETRY_KEY)
+  if (!lastRetryDate) {
+    return true
+  }
+  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 initiateSilentLogin = () => {
+  window.location.href = authUrl({ silent: true })
+}
+
+export const canAttemptSilentLogin = () => {
+  return isRetryAllowed()
+}
+
+export const attemptSilentLogin = (retryIntervalInSeconds: number) => {
+  if (!isRetryAllowed()) {
+    return
+  }
+  setNextRetryTime(retryIntervalInSeconds)
+  initiateSilentLogin()
+}
@@ -0,0 +1,45 @@
+import { useTranslation } from 'react-i18next'
+import { Field, Ul, H, P, Form, Dialog } from '@/primitives'
+import { navigateTo } from '@/navigation/navigateTo'
+import { isRoomValid } from '@/features/rooms'
+
+export const JoinMeetingDialog = () => {
+  const { t } = useTranslation('home')
+  return (
+    <Dialog title={t('joinMeeting')}>
+      <Form
+        onSubmit={(data) => {
+          navigateTo(
+            'room',
+            (data.roomId as string)
+              .trim()
+              .replace(`${window.location.origin}/`, '')
+          )
+        }}
+        submitLabel={t('joinInputSubmit')}
+      >
+        <Field
+          type="text"
+          name="roomId"
+          label={t('joinInputLabel')}
+          description={t('joinInputExample', {
+            example: 'https://meet.numerique.gouv.fr/azer-tyu-qsdf',
+          })}
+          validate={(value) => {
+            return !isRoomValid(value.trim()) ? (
+              <>
+                <p>{t('joinInputError')}</p>
+                <Ul>
+                  <li>{window.location.origin}/uio-azer-jkl</li>
+                  <li>uio-azer-jkl</li>
+                </Ul>
+              </>
+            ) : null
+          }}
+        />
+      </Form>
+      <H lvl={2}>{t('joinMeetingTipHeading')}</H>
+      <P last>{t('joinMeetingTipContent')}</P>
+    </Dialog>
+  )
+}
@@ -0,0 +1,63 @@
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { getRouteUrl } from '@/navigation/getRouteUrl'
+import { Div, Button, Dialog, Input, type DialogProps, P } from '@/primitives'
+import { HStack } from '@/styled-system/jsx'
+
+// fixme - duplication with the InviteDialog
+export const LaterMeetingDialog = ({
+  roomId,
+  ...dialogProps
+}: { roomId: string } & Omit<DialogProps, 'title'>) => {
+  const { t } = useTranslation('home')
+  const roomUrl = getRouteUrl('room', roomId)
+  const copyLabel = t('laterMeetingDialog.copy')
+  const copiedLabel = t('laterMeetingDialog.copied')
+  const [copyLinkLabel, setCopyLinkLabel] = useState(copyLabel)
+  useEffect(() => {
+    if (copyLinkLabel == copiedLabel) {
+      const timeout = setTimeout(() => {
+        setCopyLinkLabel(copyLabel)
+      }, 5000)
+      return () => {
+        clearTimeout(timeout)
+      }
+    }
+  }, [copyLinkLabel, copyLabel, copiedLabel])
+
+  return (
+    <Dialog
+      isOpen={!!roomId}
+      {...dialogProps}
+      title={t('laterMeetingDialog.heading')}
+    >
+      <P>{t('laterMeetingDialog.description')}</P>
+      <HStack alignItems="stretch" gap="gutter">
+        <Div flex="1">
+          <Input
+            type="text"
+            aria-label={t('laterMeetingDialog.inputLabel')}
+            value={roomUrl}
+            readOnly
+            onClick={(e) => {
+              e.currentTarget.select()
+            }}
+          />
+        </Div>
+        <Div minWidth="8rem">
+          <Button
+            variant="primary"
+            size="sm"
+            fullWidth
+            onPress={() => {
+              navigator.clipboard.writeText(roomUrl)
+              setCopyLinkLabel(copiedLabel)
+            }}
+          >
+            {copyLinkLabel}
+          </Button>
+        </Div>
+      </HStack>
+    </Dialog>
+  )
+}
@@ -0,0 +1 @@
+export { Home as HomeRoute } from './routes/Home'
@@ -0,0 +1,100 @@
+import { useTranslation } from 'react-i18next'
+import { DialogTrigger } from 'react-aria-components'
+import { Button, Menu, Text } from '@/primitives'
+import { HStack } from '@/styled-system/jsx'
+import { navigateTo } from '@/navigation/navigateTo'
+import { Screen } from '@/layout/Screen'
+import { Centered } from '@/layout/Centered'
+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'
+import { menuItemRecipe } from '@/primitives/menuItemRecipe'
+import { RiAddLine, RiLink } from '@remixicon/react'
+import { MenuItem, Menu as RACMenu } from 'react-aria-components'
+import { LaterMeetingDialog } from '@/features/home/components/LaterMeetingDialog'
+import { useState } from 'react'
+
+export const Home = () => {
+  const { t } = useTranslation('home')
+  const { isLoggedIn } = useUser()
+
+  const {
+    userChoices: { username },
+  } = usePersistentUserChoices()
+
+  const { mutateAsync: createRoom } = useCreateRoom()
+  const [laterRoomId, setLaterRoomId] = useState<null | string>(null)
+
+  console.log(laterRoomId)
+
+  return (
+    <UserAware>
+      <Screen>
+        <Centered width="fit-content">
+          <Text as="h1" variant="display">
+            {t('heading')}
+          </Text>
+          <Text as="p" variant="h3">
+            {t('intro')}
+          </Text>
+          {!isLoggedIn && (
+            <Text margin="sm" variant="note">
+              {t('loginToCreateMeeting')}
+            </Text>
+          )}
+          <HStack gap="gutter">
+            {isLoggedIn ? (
+              <Menu>
+                <Button variant="primary">{t('createMeeting')}</Button>
+                <RACMenu>
+                  <MenuItem
+                    className={menuItemRecipe({ icon: true })}
+                    onAction={async () => {
+                      const slug = generateRoomId()
+                      createRoom({ slug, username }).then((data) =>
+                        navigateTo('room', data.slug, {
+                          state: { create: true, initialRoomData: data },
+                        })
+                      )
+                    }}
+                  >
+                    <RiAddLine size={18} />
+                    {t('createMenu.instantOption')}
+                  </MenuItem>
+                  <MenuItem
+                    className={menuItemRecipe({ icon: true })}
+                    onAction={() => {
+                      const slug = generateRoomId()
+                      createRoom({ slug, username }).then((data) =>
+                        setLaterRoomId(data.slug)
+                      )
+                    }}
+                  >
+                    <RiLink size={18} />
+                    {t('createMenu.laterOption')}
+                  </MenuItem>
+                </RACMenu>
+              </Menu>
+            ) : (
+              <Button variant="primary" href={authUrl()}>
+                {t('login', { ns: 'global' })}
+              </Button>
+            )}
+            <DialogTrigger>
+              <Button variant="primary" outline>
+                {t('joinMeeting')}
+              </Button>
+              <JoinMeetingDialog />
+            </DialogTrigger>
+          </HStack>
+        </Centered>
+        <LaterMeetingDialog
+          roomId={laterRoomId || ''}
+          onOpenChange={() => setLaterRoomId(null)}
+        />
+      </Screen>
+    </UserAware>
+  )
+}
@@ -8,4 +8,7 @@ export type ApiRoom = {
    room: string
    token: string
  }
+  configuration?: {
+    [key: string]: string | number | boolean
+  }
 }
@@ -0,0 +1,30 @@
+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
+  username?: string
+}
+
+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>
+) {
+  return useMutation<ApiRoom, ApiError, CreateRoomParams>({
+    mutationFn: createRoom,
+    onSuccess: options?.onSuccess,
+  })
+}
@@ -1,48 +1,137 @@
-import { useParams } from 'wouter'
+import { useEffect, useMemo, useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
+import { useTranslation } from 'react-i18next'
 import {
+  formatChatMessageLinks,
  LiveKitRoom,
-  VideoConference,
  type LocalUserChoices,
 } from '@livekit/components-react'
+import { Room, RoomOptions } from 'livekit-client'
 import { keys } from '@/api/queryKeys'
-import { QueryAware } from '@/layout/QueryAware'
-import { navigateToHome } from '@/navigation/navigateToHome'
+import { queryClient } from '@/api/queryClient'
+import { navigateTo } from '@/navigation/navigateTo'
+import { Screen } from '@/layout/Screen'
+import { QueryAware } from '@/components/QueryAware'
+import { ErrorScreen } from '@/components/ErrorScreen'
 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'

 export const Conference = ({
+  roomId,
  userConfig,
+  initialRoomData,
+  mode = 'join',
 }: {
+  roomId: string
  userConfig: LocalUserChoices
+  mode?: 'join' | 'create'
+  initialRoomData?: ApiRoom
 }) => {
-  const { roomId } = useParams()
-  const { status, data } = useQuery({
-    queryKey: [keys.room, roomId, userConfig.username],
+  const fetchKey = [keys.room, roomId, userConfig.username]
+
+  const {
+    mutateAsync: createRoom,
+    status: createStatus,
+    isError: isCreateError,
+  } = useCreateRoom({
+    onSuccess: (data) => {
+      queryClient.setQueryData(fetchKey, data)
+    },
+  })
+
+  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: () =>
      fetchRoom({
        roomId: roomId as string,
        username: userConfig.username,
+      }).catch((error) => {
+        if (error.statusCode == '404') {
+          createRoom({ slug: roomId, username: userConfig.username })
+        }
      }),
+    retry: false,
  })

+  const roomOptions = useMemo((): RoomOptions => {
+    return {
+      videoCaptureDefaults: {
+        deviceId: userConfig.videoDeviceId ?? undefined,
+      },
+      audioCaptureDefaults: {
+        deviceId: userConfig.audioDeviceId ?? undefined,
+      },
+    }
+    // do not rely on the userConfig object directly as its reference may change on every render
+  }, [userConfig.videoDeviceId, userConfig.audioDeviceId])
+
+  const room = useMemo(() => new Room(roomOptions), [roomOptions])
+
+  const [showInviteDialog, setShowInviteDialog] = useState(mode === 'create')
+
+  /**
+   * checks for actual click on the leave button instead of
+   * relying on LiveKitRoom onDisconnected because onDisconnected
+   * triggers even on page reload, it's not a user "onLeave" event really.
+   * Here we want to react to the user actually deciding to leave.
+   */
+  useEffect(() => {
+    const checkOnLeaveClick = (event: MouseEvent) => {
+      const target = event.target as HTMLElement
+      if (target.classList.contains('lk-disconnect-button')) {
+        navigateTo('feedback')
+      }
+    }
+    document.body.addEventListener('click', checkOnLeaveClick)
+    return () => {
+      document.body.removeEventListener('click', checkOnLeaveClick)
+    }
+  }, [])
+
+  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 (
-    <QueryAware status={status}>
-      <LiveKitRoom
-        serverUrl={data?.livekit?.url}
-        token={data?.livekit?.token}
-        connect={true}
-        audio={{
-          deviceId: userConfig.audioDeviceId,
-        }}
-        video={{
-          deviceId: userConfig.videoDeviceId,
-        }}
-        onDisconnected={() => {
-          navigateToHome()
-        }}
-      >
-        <VideoConference />
-      </LiveKitRoom>
+    <QueryAware status={isFetchError ? createStatus : fetchStatus}>
+      <Screen header={false}>
+        <LiveKitRoom
+          room={room}
+          serverUrl={data?.livekit?.url}
+          token={data?.livekit?.token}
+          connect={true}
+          audio={userConfig.audioEnabled}
+          video={userConfig.videoEnabled}
+        >
+          <VideoConference chatMessageFormatter={formatChatMessageLinks} />
+          {showInviteDialog && (
+            <InviteDialog
+              isOpen={showInviteDialog}
+              onOpenChange={setShowInviteDialog}
+              roomId={roomId}
+              onClose={() => setShowInviteDialog(false)}
+            />
+          )}
+        </LiveKitRoom>
+      </Screen>
    </QueryAware>
  )
 }
@@ -0,0 +1,58 @@
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { getRouteUrl } from '@/navigation/getRouteUrl'
+import { Div, Button, Dialog, Input, type DialogProps } from '@/primitives'
+import { HStack } from '@/styled-system/jsx'
+
+export const InviteDialog = ({
+  roomId,
+  ...dialogProps
+}: { roomId: string } & Omit<DialogProps, 'title'>) => {
+  const { t } = useTranslation('rooms')
+  const roomUrl = getRouteUrl('room', roomId)
+
+  const copyLabel = t('shareDialog.copy')
+  const copiedLabel = t('shareDialog.copied')
+  const [copyLinkLabel, setCopyLinkLabel] = useState(copyLabel)
+  useEffect(() => {
+    if (copyLinkLabel == copiedLabel) {
+      const timeout = setTimeout(() => {
+        setCopyLinkLabel(copyLabel)
+      }, 5000)
+      return () => {
+        clearTimeout(timeout)
+      }
+    }
+  }, [copyLinkLabel, copyLabel, copiedLabel])
+
+  return (
+    <Dialog {...dialogProps} title={t('shareDialog.heading')}>
+      <HStack alignItems="stretch" gap="gutter">
+        <Div flex="1">
+          <Input
+            type="text"
+            aria-label={t('shareDialog.inputLabel')}
+            value={roomUrl}
+            readOnly
+            onClick={(e) => {
+              e.currentTarget.select()
+            }}
+          />
+        </Div>
+        <Div minWidth="8rem">
+          <Button
+            variant="primary"
+            size="sm"
+            fullWidth
+            onPress={() => {
+              navigator.clipboard.writeText(roomUrl)
+              setCopyLinkLabel(copiedLabel)
+            }}
+          >
+            {copyLinkLabel}
+          </Button>
+        </Div>
+      </HStack>
+    </Dialog>
+  )
+}
@@ -1,17 +1,27 @@
-import { Box } from '@/layout/Box'
+import { useTranslation } from 'react-i18next'
 import { PreJoin, type LocalUserChoices } from '@livekit/components-react'
+import { Screen } from '@/layout/Screen'
+import { CenteredContent } from '@/layout/CenteredContent'

 export const Join = ({
  onSubmit,
 }: {
  onSubmit: (choices: LocalUserChoices) => void
 }) => {
+  const { t } = useTranslation('rooms')
+
  return (
-    <Box title="Verify your settings before joining" withBackButton>
-      <PreJoin
-        persistUserChoices
-        onSubmit={onSubmit}
-      />
-    </Box>
+    <Screen layout="centered">
+      <CenteredContent title={t('join.heading')}>
+        <PreJoin
+          persistUserChoices
+          onSubmit={onSubmit}
+          micLabel={t('join.micLabel')}
+          camLabel={t('join.camlabel')}
+          joinLabel={t('join.joinLabel')}
+          userLabel={t('join.userLabel')}
+        />
+      </CenteredContent>
+    </Screen>
  )
 }
@@ -1,2 +1,5 @@
-export { navigateToNewRoom } from './navigation/navigateToNewRoom'
 export { Room as RoomRoute } from './routes/Room'
+export { FeedbackRoute } from './routes/Feedback'
+export { roomIdPattern, isRoomValid } from './utils/isRoomValid'
+export { generateRoomId } from './utils/generateRoomId'
+export { useCreateRoom } from './api/createRoom'
@@ -0,0 +1,6 @@
+import { ParticipantTile } from './ParticipantTile'
+import { FocusLayoutProps } from '@livekit/components-react'
+
+export function FocusLayout({ trackRef, ...htmlProps }: FocusLayoutProps) {
+  return <ParticipantTile trackRef={trackRef} {...htmlProps} />
+}
@@ -0,0 +1,63 @@
+import { Participant } from 'livekit-client'
+import { styled } from '@/styled-system/jsx'
+import { Avatar } from '@/components/Avatar'
+import { useIsSpeaking } from '@livekit/components-react'
+import { getParticipantColor } from '@/features/rooms/utils/getParticipantColor'
+import { useSize } from '@/features/rooms/livekit/hooks/useResizeObserver'
+import { useMemo, useRef } from 'react'
+
+const StyledParticipantPlaceHolder = styled('div', {
+  base: {
+    width: '100%',
+    height: '100%',
+    backgroundColor: '#3d4043', // fixme - copied from gmeet
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+})
+
+type ParticipantPlaceholderProps = {
+  participant: Participant
+}
+
+export const ParticipantPlaceholder = ({
+  participant,
+}: ParticipantPlaceholderProps) => {
+  const isSpeaking = useIsSpeaking(participant)
+  const participantColor = getParticipantColor(participant)
+
+  const placeholderEl = useRef<HTMLDivElement>(null)
+  const { width, height } = useSize(placeholderEl)
+
+  const minDimension = Math.min(width, height)
+  const avatarSize = useMemo(
+    () => Math.min(Math.round(minDimension * 0.9), 160),
+    [minDimension]
+  )
+
+  const initialSize = useMemo(() => Math.round(avatarSize * 0.3), [avatarSize])
+
+  return (
+    <StyledParticipantPlaceHolder ref={placeholderEl}>
+      <div
+        style={{
+          borderRadius: '50%',
+          animation: isSpeaking ? 'pulse 1s infinite' : undefined,
+          height: 'auto',
+          aspectRatio: '1/1',
+          width: '80%',
+          maxWidth: `${avatarSize}px`,
+          fontSize: `${initialSize}px`,
+        }}
+      >
+        {/*fixme - participant doesn't update on ParticipantNameChanged event */}
+        <Avatar
+          name={participant.name}
+          bgColor={participantColor}
+          context="placeholder"
+        />
+      </div>
+    </StyledParticipantPlaceHolder>
+  )
+}
@@ -0,0 +1,147 @@
+import {
+  AudioTrack,
+  ConnectionQualityIndicator,
+  FocusToggle,
+  LockLockedIcon,
+  ParticipantName,
+  ParticipantTileProps,
+  ScreenShareIcon,
+  TrackMutedIndicator,
+  useEnsureTrackRef,
+  useFeatureContext,
+  useIsEncrypted,
+  useMaybeLayoutContext,
+  useMaybeTrackRefContext,
+  useParticipantTile,
+  VideoTrack,
+  TrackRefContext,
+  ParticipantContextIfNeeded,
+} from '@livekit/components-react'
+import React from 'react'
+import {
+  isTrackReference,
+  isTrackReferencePinned,
+  TrackReferenceOrPlaceholder,
+} from '@livekit/components-core'
+import { Track } from 'livekit-client'
+import { ParticipantPlaceholder } from '@/features/rooms/livekit/components/ParticipantPlaceholder'
+
+export function TrackRefContextIfNeeded(
+  props: React.PropsWithChildren<{
+    trackRef?: TrackReferenceOrPlaceholder
+  }>
+) {
+  const hasContext = !!useMaybeTrackRefContext()
+  return props.trackRef && !hasContext ? (
+    <TrackRefContext.Provider value={props.trackRef}>
+      {props.children}
+    </TrackRefContext.Provider>
+  ) : (
+    <>{props.children}</>
+  )
+}
+
+export const ParticipantTile: (
+  props: ParticipantTileProps & React.RefAttributes<HTMLDivElement>
+) => React.ReactNode = /* @__PURE__ */ React.forwardRef<
+  HTMLDivElement,
+  ParticipantTileProps
+>(function ParticipantTile(
+  {
+    trackRef,
+    children,
+    onParticipantClick,
+    disableSpeakingIndicator,
+    ...htmlProps
+  }: ParticipantTileProps,
+  ref
+) {
+  const trackReference = useEnsureTrackRef(trackRef)
+
+  const { elementProps } = useParticipantTile<HTMLDivElement>({
+    htmlProps,
+    disableSpeakingIndicator,
+    onParticipantClick,
+    trackRef: trackReference,
+  })
+  const isEncrypted = useIsEncrypted(trackReference.participant)
+  const layoutContext = useMaybeLayoutContext()
+
+  const autoManageSubscription = useFeatureContext()?.autoSubscription
+
+  const handleSubscribe = React.useCallback(
+    (subscribed: boolean) => {
+      if (
+        trackReference.source &&
+        !subscribed &&
+        layoutContext &&
+        layoutContext.pin.dispatch &&
+        isTrackReferencePinned(trackReference, layoutContext.pin.state)
+      ) {
+        layoutContext.pin.dispatch({ msg: 'clear_pin' })
+      }
+    },
+    [trackReference, layoutContext]
+  )
+
+  return (
+    <div ref={ref} style={{ position: 'relative' }} {...elementProps}>
+      <TrackRefContextIfNeeded trackRef={trackReference}>
+        <ParticipantContextIfNeeded participant={trackReference.participant}>
+          {children ?? (
+            <>
+              {isTrackReference(trackReference) &&
+              (trackReference.publication?.kind === 'video' ||
+                trackReference.source === Track.Source.Camera ||
+                trackReference.source === Track.Source.ScreenShare) ? (
+                <VideoTrack
+                  trackRef={trackReference}
+                  onSubscriptionStatusChanged={handleSubscribe}
+                  manageSubscription={autoManageSubscription}
+                />
+              ) : (
+                isTrackReference(trackReference) && (
+                  <AudioTrack
+                    trackRef={trackReference}
+                    onSubscriptionStatusChanged={handleSubscribe}
+                  />
+                )
+              )}
+              <div className="lk-participant-placeholder">
+                <ParticipantPlaceholder
+                  participant={trackReference.participant}
+                />
+              </div>
+              <div className="lk-participant-metadata">
+                <div className="lk-participant-metadata-item">
+                  {trackReference.source === Track.Source.Camera ? (
+                    <>
+                      {isEncrypted && (
+                        <LockLockedIcon style={{ marginRight: '0.25rem' }} />
+                      )}
+                      <TrackMutedIndicator
+                        trackRef={{
+                          participant: trackReference.participant,
+                          source: Track.Source.Microphone,
+                        }}
+                        show={'muted'}
+                      ></TrackMutedIndicator>
+                      <ParticipantName />
+                    </>
+                  ) : (
+                    <>
+                      <ScreenShareIcon style={{ marginRight: '0.25rem' }} />
+                      <ParticipantName>&apos;s screen</ParticipantName>
+                    </>
+                  )}
+                </div>
+                <ConnectionQualityIndicator className="lk-participant-metadata-item" />
+              </div>
+            </>
+          )}
+          <FocusToggle trackRef={trackReference} />
+        </ParticipantContextIfNeeded>
+      </TrackRefContextIfNeeded>
+    </div>
+  )
+})
@@ -0,0 +1,55 @@
+import { useTranslation } from 'react-i18next'
+import { RiChat1Line } from '@remixicon/react'
+import { ToggleButton } 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',
+      })}
+    >
+      <ToggleButton
+        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 />
+      </ToggleButton>
+      {!!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>
+  )
+}
@@ -0,0 +1,33 @@
+import { useTranslation } from 'react-i18next'
+import { RiMore2Line } from '@remixicon/react'
+import { Button, Menu } from '@/primitives'
+
+import { useState } from 'react'
+import { OptionsMenuItems } from '@/features/rooms/livekit/components/controls/Options/OptionsMenuItems'
+import { SettingsDialogExtended } from '@/features/settings/components/SettingsDialogExtended'
+
+export type DialogState = 'username' | 'settings' | null
+
+export const OptionsButton = () => {
+  const { t } = useTranslation('rooms')
+  const [dialogOpen, setDialogOpen] = useState<DialogState>(null)
+  return (
+    <>
+      <Menu>
+        <Button
+          square
+          legacyStyle
+          aria-label={t('options.buttonLabel')}
+          tooltip={t('options.buttonLabel')}
+        >
+          <RiMore2Line />
+        </Button>
+        <OptionsMenuItems onOpenDialog={setDialogOpen} />
+      </Menu>
+      <SettingsDialogExtended
+        isOpen={dialogOpen === 'settings'}
+        onOpenChange={(v) => !v && setDialogOpen(null)}
+      />
+    </>
+  )
+}
@@ -0,0 +1,52 @@
+import { menuItemRecipe } from '@/primitives/menuItemRecipe'
+import {
+  RiFeedbackLine,
+  RiQuestionLine,
+  RiSettings3Line,
+} from '@remixicon/react'
+import { MenuItem, Menu as RACMenu } from 'react-aria-components'
+import { useTranslation } from 'react-i18next'
+import { Dispatch, SetStateAction } from 'react'
+import { DialogState } from '@/features/rooms/livekit/components/controls/Options/OptionsButton'
+
+// @todo try refactoring it to use MenuList component
+export const OptionsMenuItems = ({
+  onOpenDialog,
+}: {
+  onOpenDialog: Dispatch<SetStateAction<DialogState>>
+}) => {
+  const { t } = useTranslation('rooms')
+
+  return (
+    <RACMenu
+      style={{
+        minWidth: '150px',
+        width: '300px',
+      }}
+    >
+      <MenuItem
+        href="https://tchap.gouv.fr/#/room/!aGImQayAgBLjSBycpm:agent.dinum.tchap.gouv.fr?via=agent.dinum.tchap.gouv.fr"
+        target="_blank"
+        className={menuItemRecipe({ icon: true })}
+      >
+        <RiQuestionLine size={18} />
+        {t('options.items.support')}
+      </MenuItem>
+      <MenuItem
+        href="https://grist.incubateur.net/o/docs/forms/1YrfNP1QSSy8p2gCxMFnSf/4"
+        target="_blank"
+        className={menuItemRecipe({ icon: true })}
+      >
+        <RiFeedbackLine size={18} />
+        {t('options.items.feedbacks')}
+      </MenuItem>
+      <MenuItem
+        className={menuItemRecipe({ icon: true })}
+        onAction={() => onOpenDialog('settings')}
+      >
+        <RiSettings3Line size={18} />
+        {t('options.items.settings')}
+      </MenuItem>
+    </RACMenu>
+  )
+}
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				`export { Home as HomeRoute } from './routes/Home'`