🔖(minor) bump release to 0.1.4

🚸(frontend) fix widget state management
The current design is inefficient, using two separate approaches to manage the app state and determine which widget is open. This inconsistency affects the user experience and overall design quality. Soon, only one container will be open/close, and its content will be toggle, using an extensible system. As a quick fix, I’ve added basic logic to ensure that opening one widget automatically closes any other open widgets, such as the chat or participants widget. This is a temporary measure to fix state management until a more robust solution can be implemented.
2024-08-12 23:32:19 +02:00 · 2024-08-12 23:16:01 +02:00 · 2024-08-12 23:16:01 +02:00 · 2024-08-12 23:16:01 +02:00 · 2024-08-12 23:16:01 +02:00 · 2024-08-12 23:16:01 +02:00
177 changed files with 6210 additions and 2120 deletions
@@ -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"

@@ -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
@@ -260,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
@@ -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,39 +1,65 @@
-# Releasing new version
+# 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 in the appropriate file, i.e. for backend in the `pyproject.toml` and `package.json` for node-based projects (tips:  find and replace all occurrences of the previous version number to ensure consistency across files).
-3. Update the project's `Changelog` following the [keepachangelog](https://keepachangelog.com/en/0.3.0/) recommendations.
-4. Update Docker image tag in Helm values 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 the latest Docker image tag.
-    ```
-5. Commit your changes with a structured message:
-   - Add a title including the version of the release and respecting the above described format using the 🔖 release emoji.
-   - Paste in the body all changes from the changelog concerned by this release, removing only the Markdown tags and making sure that lines are shorter than 74 characters.
+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
-    
-    Added:
-    
-    - Implement base CLI commands (list, extract, fetch & push) for supported backends
-    - Support for ElasticSearch database backend
-    
-    Changed:
-    
-    - Replace LDP storage backend by FS storage backend`
    ```

-6. Open a pull request. 
-7. Wait for an approval from your peers. 
-8. Merge your pull request. 
-9. Checkout and pull changes from the `main` branch to ensure you have the latest updates. 
-10. Tag & push your commit: `git tag v4.18.1 && git push origin --tags`
-11. Manually release your version on GitHub.
-12. Ensure that the CI Docker job has successfully pushed the newly built Docker images to Docker Hub with the appropriate tags.
-13. To deploy using ArgoCD, you need to update the `production` or `pre-production` tags. ArgoCD will automatically detect and deploy the new tag.
+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 +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,7 +123,7 @@ class RoomSerializer(serializers.ModelSerializer):
        if role is not None or instance.is_public:
            slug = f"{instance.id!s}".replace("-", "")

-            username = request.GET.get("username", None)
+            username = request.query_params.get("username", None)

            output["livekit"] = {
                "url": settings.LIVEKIT_CONFIGURATION["url"],
@@ -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,6 +186,13 @@ 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
@@ -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

@@ -157,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")
@@ -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,6 +1,7 @@
 """
 Utils functions used in the core app
 """
+
 from typing import Optional
 from uuid import uuid4

@@ -10,7 +11,7 @@ from livekit.api import AccessToken, VideoGrants


 def generate_token(room: str, user, username: Optional[str] = None) -> str:
-    """Generate a Livekit access token for a user in a specific room.
+    """Generate a LiveKit access token for a user in a specific room.

    Args:
        room (str): The name of the room.
@@ -21,10 +22,10 @@ def generate_token(room: str, user, username: Optional[str] = None) -> str:
    Returns:
        str: The LiveKit JWT access token.
    """
-
    video_grants = VideoGrants(
        room=room,
        room_join=True,
+        can_update_own_metadata=True,
        can_publish_sources=[
            "camera",
            "microphone",
@@ -33,18 +34,21 @@ def generate_token(room: str, user, username: Optional[str] = None) -> str:
        ],
    )

-    token = AccessToken(
-        api_key=settings.LIVEKIT_CONFIGURATION["api_key"],
-        api_secret=settings.LIVEKIT_CONFIGURATION["api_secret"],
-    ).with_grants(video_grants)
-
    if user.is_anonymous:
-        token.with_identity(str(uuid4()))
+        identity = str(uuid4())
        default_username = "Anonymous"
    else:
-        token.with_identity(user.sub)
+        identity = str(user.sub)
        default_username = str(user)

-    token.with_name(username or default_username)
+    token = (
+        AccessToken(
+            api_key=settings.LIVEKIT_CONFIGURATION["api_key"],
+            api_secret=settings.LIVEKIT_CONFIGURATION["api_secret"],
+        )
+        .with_grants(video_grants)
+        .with_identity(identity)
+        .with_name(username or default_username)
+    )

    return token.to_jwt()
@@ -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"
@@ -284,6 +287,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 +349,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 +367,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 +490,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 +515,11 @@ class Production(Base):
    """

    # Security
-    ALLOWED_HOSTS = values.ListValue(None)
+    ALLOWED_HOSTS = [
+        *values.ListValue([], environ_name="ALLOWED_HOSTS"),
+        gethostbyname(gethostname()),
+    ]
+
    CSRF_TRUSTED_ORIGINS = values.ListValue([])
    SECURE_BROWSER_XSS_FILTER = True
    SECURE_CONTENT_TYPE_NOSNIFF = True
@@ -7,7 +7,7 @@ build-backend = "setuptools.build_meta"

 [project]
 name = "meet"
-version = "0.1.1"
+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.34.154",
    "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",
+    "django==5.0.7",
+    "djangorestframework==3.15.2",
+    "drf_spectacular==0.27.2",
+    "dockerflow==2024.4.2",
+    "easy_thumbnails==2.9",
    "factory_boy==3.3.0",
-    "freezegun==1.5.0",
+    "freezegun==1.5.1",
    "gunicorn==22.0.0",
-    "jsonschema==4.20.0",
-    "markdown==3.5.1",
+    "jsonschema==4.23.0",
+    "june-analytics-python==2.3.0",
+    "markdown==3.6",
    "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.12.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.6.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.5.6",
+    "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',
@@ -1,16 +1,17 @@
 {
  "name": "meet",
-  "version": "0.1.1",
+  "version": "0.1.4",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "meet",
-      "version": "0.1.1",
+      "version": "0.1.4",
      "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",
@@ -22,6 +23,7 @@
        "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": {
@@ -35,10 +37,12 @@
        "@typescript-eslint/parser": "7.13.1",
        "@vitejs/plugin-react": "4.3.1",
        "eslint": "8.57.0",
+        "eslint-config-prettier": "^9.1.0",
        "eslint-plugin-jsx-a11y": "6.9.0",
        "eslint-plugin-react-hooks": "4.6.2",
        "eslint-plugin-react-refresh": "0.4.7",
        "postcss": "8.4.39",
+        "prettier": "3.3.3",
        "typescript": "5.5.2",
        "vite": "5.3.1",
        "vite-tsconfig-paths": "4.3.2"
@@ -450,6 +454,7 @@
    },
    "node_modules/@clack/prompts/node_modules/is-unicode-supported": {
      "version": "1.3.0",
+      "dev": true,
      "inBundle": true,
      "license": "MIT",
      "engines": {
@@ -1586,6 +1591,21 @@
        "node": "^10 || ^12 || >=14"
      }
    },
+    "node_modules/@pandacss/node/node_modules/prettier": {
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz",
+      "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
    "node_modules/@pandacss/parser": {
      "version": "0.41.0",
      "resolved": "https://registry.npmjs.org/@pandacss/parser/-/parser-0.41.0.tgz",
@@ -3177,6 +3197,14 @@
        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
      }
    },
+    "node_modules/@remixicon/react": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@remixicon/react/-/react-4.2.0.tgz",
+      "integrity": "sha512-eGhKpZ88OU0qkcY9pJu6khBmItDV82nU130E6C68yc+FbljueHlUYy/4CrJsmf860RIDMay2Rpzl27OSJ81miw==",
+      "peerDependencies": {
+        "react": ">=18.2.0"
+      }
+    },
    "node_modules/@rollup/rollup-android-arm-eabi": {
      "version": "4.18.0",
      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.18.0.tgz",
@@ -3634,13 +3662,13 @@
      "version": "15.7.12",
      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
      "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==",
-      "dev": true
+      "devOptional": true
    },
    "node_modules/@types/react": {
      "version": "18.3.3",
      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz",
      "integrity": "sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==",
-      "dev": true,
+      "devOptional": true,
      "dependencies": {
        "@types/prop-types": "*",
        "csstype": "^3.0.2"
@@ -5125,7 +5153,7 @@
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true
+      "devOptional": true
    },
    "node_modules/damerau-levenshtein": {
      "version": "1.0.8",
@@ -5273,6 +5301,14 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/derive-valtio": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/derive-valtio/-/derive-valtio-0.1.0.tgz",
+      "integrity": "sha512-OCg2UsLbXK7GmmpzMXhYkdO64vhJ1ROUUGaTFyHjVwEdMEcTTRj7W1TxLbSBxdY8QLBPCcp66MTyaSy0RpO17A==",
+      "peerDependencies": {
+        "valtio": "*"
+      }
+    },
    "node_modules/detect-libc": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
@@ -5682,6 +5718,18 @@
        "url": "https://opencollective.com/eslint"
      }
    },
+    "node_modules/eslint-config-prettier": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz",
+      "integrity": "sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==",
+      "dev": true,
+      "bin": {
+        "eslint-config-prettier": "bin/cli.js"
+      },
+      "peerDependencies": {
+        "eslint": ">=7.0.0"
+      }
+    },
    "node_modules/eslint-plugin-jsx-a11y": {
      "version": "6.9.0",
      "resolved": "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.9.0.tgz",
@@ -8901,9 +8949,9 @@
      }
    },
    "node_modules/prettier": {
-      "version": "3.2.5",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz",
-      "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==",
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
+      "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
      "dev": true,
      "bin": {
        "prettier": "bin/prettier.cjs"
@@ -8928,6 +8976,11 @@
        "node": "10.* || >= 12.*"
      }
    },
+    "node_modules/proxy-compare": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/proxy-compare/-/proxy-compare-2.6.0.tgz",
+      "integrity": "sha512-8xuCeM3l8yqdmbPoYeLbrAXCBWu19XEYc5/F28f5qOaoAIMyfmBUkl5axiK+x9olUvRlcekvnm98AP9RDngOIw=="
+    },
    "node_modules/punycode": {
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -10092,6 +10145,39 @@
      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
    },
+    "node_modules/valtio": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/valtio/-/valtio-1.13.2.tgz",
+      "integrity": "sha512-Qik0o+DSy741TmkqmRfjq+0xpZBXi/Y6+fXZLn0xNF1z/waFMbE3rkivv5Zcf9RrMUp6zswf2J7sbh2KBlba5A==",
+      "dependencies": {
+        "derive-valtio": "0.1.0",
+        "proxy-compare": "2.6.0",
+        "use-sync-external-store": "1.2.0"
+      },
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/valtio/node_modules/use-sync-external-store": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
+      "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
    "node_modules/value-or-function": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/value-or-function/-/value-or-function-4.0.0.tgz",
@@ -1,19 +1,22 @@
 {
  "name": "meet",
  "private": true,
-  "version": "0.1.1",
+  "version": "0.1.4",
  "type": "module",
  "scripts": {
    "dev": "panda codegen && vite",
    "build": "panda codegen && tsc -b && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
-    "i18n:extract": "npx i18next -c i18next-parser.config.json"
+    "i18n:extract": "npx i18next -c i18next-parser.config.json",
+    "format": "prettier --write ./src",
+    "check": "prettier --check ./src"
  },
  "dependencies": {
    "@livekit/components-react": "2.3.3",
    "@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",
@@ -25,6 +28,7 @@
    "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": {
@@ -38,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,19 @@ 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 } },
+    },
    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.
@@ -165,7 +166,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}' },
        },
@@ -179,7 +180,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}' },
@@ -199,12 +201,13 @@ const config: Config = {
          'subtle-text': { value: '{colors.red.700}' },
        },
        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}' },
@@ -214,6 +217,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}' },
@@ -229,12 +233,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',
@@ -253,7 +265,6 @@ const config: Config = {
        value: {
          fontSize: '1.125rem',
          lineHeight: '1.75rem',
-          fontWeight: 700,
        },
      },
      body: {
@@ -262,7 +273,7 @@ const config: Config = {
          lineHeight: '1.5',
        },
      },
-      small: {
+      sm: {
        value: {
          fontSize: '0.875rem',
          lineHeight: '1.25rem',
@@ -2,29 +2,35 @@ 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 { QueryClientProvider } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 import { useLang } from 'hoofd'
-import { Route, Switch } from 'wouter'
-import { Screen } from './layout/Screen'
-import { HomeRoute } from '@/features/home'
-import { RoomRoute, roomIdRegex } from '@/features/rooms'
-import { NotFound } from './routes/NotFound'
+import { Switch, Route } from 'wouter'
+import { Layout } from './layout/Layout'
+import { NotFoundScreen } from './components/NotFoundScreen'
+import { routes } from './routes'
 import './i18n/init'
-
-const queryClient = new QueryClient()
+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}>
-      <Suspense fallback={<Screen />}>
-        <Switch>
-          <Route path="/" component={HomeRoute} />
-          <Route path={roomIdRegex} component={RoomRoute} />
-          <Route component={NotFound} />
-        </Switch>
+      <Suspense fallback={null}>
+        <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} />
      </Suspense>
    </QueryClientProvider>
@@ -0,0 +1,3 @@
+import { QueryClient } from '@tanstack/react-query'
+
+export const queryClient = new QueryClient()
@@ -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
+}
@@ -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>
+  )
+}
@@ -1,2 +1 @@
-export { navigateToHome } from './navigation/navigateToHome'
 export { Home as HomeRoute } from './routes/Home'
@@ -1,5 +0,0 @@
-import { navigate } from 'wouter/use-browser-location'
-
-export const navigateToHome = () => {
-  navigate(`/`)
-}
@@ -1,37 +1,72 @@
 import { useTranslation } from 'react-i18next'
-import { A, Button, Italic, P, Div, H, Box } from '@/primitives'
-import { authUrl, useUser } from '@/features/auth'
-import { navigateToNewRoom } from '@/features/rooms'
+import { DialogTrigger } from 'react-aria-components'
+import { Button, 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'

 export const Home = () => {
  const { t } = useTranslation('home')
  const { isLoggedIn } = useUser()
+
+  const {
+    userChoices: { username },
+  } = usePersistentUserChoices()
+
+  const { mutateAsync: createRoom } = useCreateRoom({
+    onSuccess: (data) => {
+      navigateTo('room', data.slug, {
+        state: { create: true, initialRoomData: data },
+      })
+    },
+  })
+
  return (
-    <Screen>
-      <Box type="screen">
-        <H lvl={1}>{t('heading')}</H>
-        <P>{t('intro')}</P>
-        <Div marginBottom="gutter">
-          <Box variant="subtle" size="sm">
-            {isLoggedIn ? (
-              <Button variant="primary" onPress={() => navigateToNewRoom()}>
-                {t('createMeeting')}
+    <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">
+            <Button
+              variant="primary"
+              onPress={
+                isLoggedIn
+                  ? async () => {
+                      const slug = generateRoomId()
+                      await createRoom({ slug, username })
+                    }
+                  : undefined
+              }
+              href={isLoggedIn ? undefined : authUrl()}
+            >
+              {isLoggedIn ? t('createMeeting') : t('login', { ns: 'global' })}
+            </Button>
+
+            <DialogTrigger>
+              <Button variant="primary" outline>
+                {t('joinMeeting')}
              </Button>
-            ) : (
-              <p>
-                <A href={authUrl()}>{t('login')}</A>
-              </p>
-            )}
-          </Box>
-        </Div>
-        <P>
-          <Italic>{t('or')}</Italic>
-        </P>
-        <Box variant="subtle" size="sm">
-          <p>{t('copyMeetingUrl')}</p>
-        </Box>
-      </Box>
-    </Screen>
+              <JoinMeetingDialog />
+            </DialogTrigger>
+          </HStack>
+        </Centered>
+      </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 { 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 '@/features/home'
+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 { 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,6 +1,7 @@
 import { useTranslation } from 'react-i18next'
-import { Box } from '@/layout/Box'
 import { PreJoin, type LocalUserChoices } from '@livekit/components-react'
+import { Screen } from '@/layout/Screen'
+import { CenteredContent } from '@/layout/CenteredContent'

 export const Join = ({
  onSubmit,
@@ -10,8 +11,17 @@ export const Join = ({
  const { t } = useTranslation('rooms')

  return (
-    <Box title={t('join.heading')} 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,3 +1,5 @@
-export { navigateToNewRoom } from './navigation/navigateToNewRoom'
 export { Room as RoomRoute } from './routes/Room'
-export { roomIdRegex } from './utils/generateRoomId'
+export { FeedbackRoute } from './routes/Feedback'
+export { roomIdPattern, isRoomValid } from './utils/isRoomValid'
+export { generateRoomId } from './utils/generateRoomId'
+export { useCreateRoom } from './api/createRoom'
@@ -0,0 +1,56 @@
+import { useTranslation } from 'react-i18next'
+import { RiChat1Line } from '@remixicon/react'
+import { Button } from '@/primitives'
+import { css } from '@/styled-system/css'
+import { useLayoutContext } from '@livekit/components-react'
+import { useSnapshot } from 'valtio'
+import { participantsStore } from '@/stores/participants'
+
+export const ChatToggle = () => {
+  const { t } = useTranslation('rooms')
+
+  const { dispatch, state } = useLayoutContext().widget
+  const tooltipLabel = state?.showChat ? 'open' : 'closed'
+
+  const participantsSnap = useSnapshot(participantsStore)
+  const showParticipants = participantsSnap.showParticipants
+
+  return (
+    <div
+      className={css({
+        position: 'relative',
+        display: 'inline-block',
+      })}
+    >
+      <Button
+        toggle
+        square
+        legacyStyle
+        aria-label={t(`controls.chat.${tooltipLabel}`)}
+        tooltip={t(`controls.chat.${tooltipLabel}`)}
+        isSelected={state?.showChat}
+        onPress={() => {
+          if (showParticipants) participantsStore.showParticipants = false
+          if (dispatch) dispatch({ msg: 'toggle_chat' })
+        }}
+      >
+        <RiChat1Line />
+      </Button>
+      {!!state?.unreadMessages && (
+        <div
+          className={css({
+            position: 'absolute',
+            top: '-.25rem',
+            right: '-.25rem',
+            width: '1rem',
+            height: '1rem',
+            backgroundColor: 'red',
+            borderRadius: '50%',
+            zIndex: 1,
+            border: '2px solid #d1d5db',
+          })}
+        />
+      )}
+    </div>
+  )
+}
@@ -0,0 +1,22 @@
+import { useTranslation } from 'react-i18next'
+import { RiMore2Line } from '@remixicon/react'
+import { Button } from '@/primitives'
+import { OptionsMenu } from '@/features/rooms/livekit/components/controls/Options/OptionsMenu.tsx'
+import { MenuTrigger } from 'react-aria-components'
+
+export const OptionsButton = () => {
+  const { t } = useTranslation('rooms')
+  return (
+    <MenuTrigger>
+      <Button
+        square
+        legacyStyle
+        aria-label={t('options.buttonLabel')}
+        tooltip={t('options.buttonLabel')}
+      >
+        <RiMore2Line />
+      </Button>
+      <OptionsMenu />
+    </MenuTrigger>
+  )
+}
@@ -0,0 +1,118 @@
+import { useTranslation } from 'react-i18next'
+import {
+  RiFeedbackLine,
+  RiQuestionLine,
+  RiSettings3Line,
+  RiUser5Line,
+} from '@remixicon/react'
+import { useState } from 'react'
+import { styled } from '@/styled-system/jsx'
+import {
+  Menu as RACMenu,
+  MenuItem as RACMenuItem,
+  Popover as RACPopover,
+  Separator as RACSeparator,
+} from 'react-aria-components'
+import { SettingsDialog } from '@/features/settings'
+import { UsernameDialog } from '../../dialogs/UsernameDialog'
+
+// Styled components to be refactored
+const StyledMenu = styled(RACMenu, {
+  base: {
+    maxHeight: 'inherit',
+    boxSizing: 'border-box',
+    overflow: 'auto',
+    padding: '2px',
+    minWidth: '150px',
+    outline: 'none',
+  },
+})
+
+const StyledMenuItem = styled(RACMenuItem, {
+  base: {
+    margin: '2px',
+    padding: '0.286rem 0.571rem',
+    borderRadius: '6px',
+    outline: 'none',
+    cursor: 'default',
+    color: 'black',
+    fontSize: '1.072rem',
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '20px',
+    forcedColorAdjust: 'none',
+    '&[data-focused]': {
+      color: 'primary.text',
+      backgroundColor: 'primary',
+      outline: 'none!',
+    },
+  },
+})
+
+const StyledPopover = styled(RACPopover, {
+  base: {
+    border: '1px solid #9ca3af',
+    boxShadow: '0 8px 20px rgba(0, 0, 0, 0.1)',
+    borderRadius: '4px',
+    background: 'white',
+    color: 'var(--text-color)',
+    outline: 'none',
+    minWidth: '112px',
+    width: '300px',
+  },
+})
+
+const StyledSeparator = styled(RACSeparator, {
+  base: {
+    height: '1px',
+    background: '#9ca3af',
+    margin: '2px 4px',
+  },
+})
+
+type DialogState = 'username' | 'settings' | null
+
+export const OptionsMenu = () => {
+  const { t } = useTranslation('rooms')
+  const [dialogOpen, setDialogOpen] = useState<DialogState>(null)
+  return (
+    <>
+      <StyledPopover>
+        <StyledMenu>
+          <StyledMenuItem onAction={() => setDialogOpen('username')}>
+            <RiUser5Line size={18} />
+            {t('options.items.username')}
+          </StyledMenuItem>
+          <StyledSeparator />
+          <StyledMenuItem
+            href="https://tchap.gouv.fr/#/room/!aGImQayAgBLjSBycpm:agent.dinum.tchap.gouv.fr?via=agent.dinum.tchap.gouv.fr"
+            target="_blank"
+          >
+            <RiQuestionLine size={18} />
+            {t('options.items.support')}
+          </StyledMenuItem>
+          <StyledMenuItem
+            href="https://grist.incubateur.net/o/docs/forms/1YrfNP1QSSy8p2gCxMFnSf/4"
+            target="_blank"
+          >
+            <RiFeedbackLine size={18} />
+            {t('options.items.feedbacks')}
+          </StyledMenuItem>
+          <StyledMenuItem onAction={() => setDialogOpen('settings')}>
+            <RiSettings3Line size={18} />
+            {t('options.items.settings')}
+          </StyledMenuItem>
+        </StyledMenu>
+      </StyledPopover>
+      <UsernameDialog
+        isOpen={dialogOpen === 'username'}
+        onOpenChange={(v) => !v && setDialogOpen(null)}
+      />
+      <SettingsDialog
+        isOpen={dialogOpen === 'settings'}
+        onOpenChange={(v) => !v && setDialogOpen(null)}
+      />
+    </>
+  )
+}
@@ -0,0 +1,160 @@
+import { css } from '@/styled-system/css'
+import * as React from 'react'
+import { useParticipants } from '@livekit/components-react'
+
+import { Heading } from 'react-aria-components'
+import { Box, Button, Div } from '@/primitives'
+import { HStack, VStack } from '@/styled-system/jsx'
+import { Text, text } from '@/primitives/Text'
+import { RiCloseLine } from '@remixicon/react'
+import { capitalize } from '@/utils/capitalize'
+import { participantsStore } from '@/stores/participants'
+import { useTranslation } from 'react-i18next'
+import { allParticipantRoomEvents } from '@/features/rooms/livekit/constants/events'
+
+export type AvatarProps = React.HTMLAttributes<HTMLSpanElement> & {
+  name: string
+  size?: number
+}
+
+// TODO - extract inline styling in a centralized styling file, and avoid magic numbers
+export const Avatar = ({ name, size = 32 }: AvatarProps) => (
+  <div
+    className={css({
+      minWidth: `${size}px`,
+      minHeight: `${size}px`,
+      backgroundColor: '#3498db',
+      borderRadius: '50%',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      fontSize: '1.25rem',
+      userSelect: 'none',
+      cursor: 'default',
+      color: 'white',
+    })}
+  >
+    {name?.trim()?.charAt(0).toUpperCase()}
+  </div>
+)
+
+// TODO: Optimize rendering performance, especially for longer participant lists, even though they are generally short.
+export const ParticipantsList = () => {
+  const { t } = useTranslation('rooms')
+
+  // Preferred using the 'useParticipants' hook rather than the separate remote and local hooks,
+  // because the 'useLocalParticipant' hook does not update the participant's information when their
+  // metadata/name changes. The LiveKit team has marked this as a TODO item in the code.
+  const participants = useParticipants({
+    updateOnlyOn: allParticipantRoomEvents,
+  })
+
+  const formattedParticipants = participants.map((participant) => ({
+    name: participant.name || participant.identity,
+    id: participant.identity,
+  }))
+
+  const sortedRemoteParticipants = formattedParticipants
+    .slice(1)
+    .sort((a, b) => a.name.localeCompare(b.name))
+
+  const allParticipants = [
+    formattedParticipants[0], // first participant returned by the hook, is always the local one
+    ...sortedRemoteParticipants,
+  ]
+
+  // TODO - extract inline styling in a centralized styling file, and avoid magic numbers
+  return (
+    <Box
+      size="sm"
+      minWidth="300px"
+      className={css({
+        overflow: 'hidden',
+        display: 'flex',
+        flexDirection: 'column',
+        margin: '1.5rem 1.5rem 1.5rem 0',
+      })}
+    >
+      <Heading slot="title" level={3} className={text({ variant: 'h2' })}>
+        <span>{t('participants.heading')}</span>{' '}
+        <span
+          className={css({
+            marginLeft: '0.75rem',
+            fontWeight: 'normal',
+            fontSize: '1rem',
+          })}
+        >
+          {participants?.length}
+        </span>
+      </Heading>
+      <Div position="absolute" top="5" right="5">
+        <Button
+          invisible
+          size="xs"
+          onPress={() => (participantsStore.showParticipants = false)}
+          aria-label={t('participants.closeButton')}
+          tooltip={t('participants.closeButton')}
+        >
+          <RiCloseLine />
+        </Button>
+      </Div>
+      {participants?.length && (
+        <VStack
+          role="list"
+          className={css({
+            alignItems: 'start',
+            gap: 'none',
+            overflowY: 'scroll',
+            overflowX: 'hidden',
+            minHeight: 0,
+            flexGrow: 1,
+            display: 'flex',
+          })}
+        >
+          {allParticipants.map((participant, index) => (
+            <HStack
+              role="listitem"
+              key={participant.id}
+              id={participant.id}
+              className={css({
+                padding: '0.25rem 0',
+              })}
+            >
+              <Avatar name={participant.name} />
+              <Text
+                variant={'sm'}
+                className={css({
+                  userSelect: 'none',
+                  cursor: 'default',
+                  display: 'flex',
+                })}
+              >
+                <span
+                  className={css({
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    maxWidth: '120px',
+                    display: 'block',
+                  })}
+                >
+                  {capitalize(participant.name)}
+                </span>
+                {index === 0 && (
+                  <span
+                    className={css({
+                      marginLeft: '.25rem',
+                      whiteSpace: 'nowrap',
+                    })}
+                  >
+                    ({t('participants.you')})
+                  </span>
+                )}
+              </Text>
+            </HStack>
+          ))}
+        </VStack>
+      )}
+    </Box>
+  )
+}
@@ -0,0 +1,75 @@
+import { useTranslation } from 'react-i18next'
+import { RiGroupLine, RiInfinityLine } from '@remixicon/react'
+import { Button } from '@/primitives'
+import { css } from '@/styled-system/css'
+import { useLayoutContext, useParticipants } from '@livekit/components-react'
+import { useSnapshot } from 'valtio'
+import { participantsStore } from '@/stores/participants'
+
+export const ParticipantsToggle = () => {
+  const { t } = useTranslation('rooms')
+
+  const { dispatch, state } = useLayoutContext().widget
+
+  /**
+   * Context could not be used due to inconsistent refresh behavior.
+   * The 'numParticipant' property on the room only updates when the room's metadata changes,
+   * resulting in a delay compared to the participant list's actual refresh rate.
+   */
+  const participants = useParticipants()
+  const numParticipants = participants?.length
+
+  const participantsSnap = useSnapshot(participantsStore)
+  const showParticipants = participantsSnap.showParticipants
+
+  const tooltipLabel = showParticipants ? 'open' : 'closed'
+
+  return (
+    <div
+      className={css({
+        position: 'relative',
+        display: 'inline-block',
+      })}
+    >
+      <Button
+        toggle
+        square
+        legacyStyle
+        aria-label={t(`controls.participants.${tooltipLabel}`)}
+        tooltip={t(`controls.participants.${tooltipLabel}`)}
+        isSelected={showParticipants}
+        onPress={() => {
+          if (dispatch && state?.showChat) dispatch({ msg: 'toggle_chat' })
+          participantsStore.showParticipants = !showParticipants
+        }}
+      >
+        <RiGroupLine />
+      </Button>
+      <div
+        className={css({
+          position: 'absolute',
+          top: '-.25rem',
+          right: '-.25rem',
+          width: '1.25rem',
+          height: '1.25rem',
+          backgroundColor: 'gray',
+          borderRadius: '50%',
+          color: 'white',
+          fontSize: '0.75rem',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          textAlign: 'center',
+          zIndex: 1,
+          userSelect: 'none',
+        })}
+      >
+        {numParticipants < 100 ? (
+          numParticipants || 1
+        ) : (
+          <RiInfinityLine size={10} />
+        )}
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,52 @@
+import {
+  useRoomContext,
+  useStartAudio,
+  useStartVideo,
+} from '@livekit/components-react'
+import React from 'react'
+
+/** @public */
+export interface AllowMediaPlaybackProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  label?: string
+}
+
+/**
+ * The `StartMediaButton` component is only visible when the browser blocks media playback. This is due to some browser implemented autoplay policies.
+ * To start media playback, the user must perform a user-initiated event such as clicking this button.
+ * As soon as media playback starts, the button hides itself again.
+ *
+ * @example
+ * ```tsx
+ * <LiveKitRoom>
+ *   <StartMediaButton label="Click to allow media playback" />
+ * </LiveKitRoom>
+ * ```
+ *
+ * @see Autoplay policy on MDN web docs: {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Best_practices#autoplay_policy}
+ * @public
+ */
+export const StartMediaButton: (
+  props: AllowMediaPlaybackProps & React.RefAttributes<HTMLButtonElement>
+) => React.ReactNode = /* @__PURE__ */ React.forwardRef<
+  HTMLButtonElement,
+  AllowMediaPlaybackProps
+>(function StartMediaButton({ label, ...props }: AllowMediaPlaybackProps, ref) {
+  const room = useRoomContext()
+  const { mergedProps: audioProps, canPlayAudio } = useStartAudio({
+    room,
+    props,
+  })
+  const { mergedProps, canPlayVideo } = useStartVideo({
+    room,
+    props: audioProps,
+  })
+  const { style, ...restProps } = mergedProps
+  style.display = canPlayAudio && canPlayVideo ? 'none' : 'block'
+
+  return (
+    <button ref={ref} style={style} {...restProps}>
+      {label ?? `Start ${!canPlayAudio ? 'Audio' : 'Video'}`}
+    </button>
+  )
+})
@@ -0,0 +1,44 @@
+import { useTranslation } from 'react-i18next'
+import { Field, Form, Dialog, DialogProps } from '@/primitives'
+import {
+  usePersistentUserChoices,
+  useRoomContext,
+} from '@livekit/components-react'
+
+export type UsernameDialogProps = Pick<DialogProps, 'isOpen' | 'onOpenChange'>
+
+export const UsernameDialog = (props: UsernameDialogProps) => {
+  const { t } = useTranslation('rooms')
+  const { saveUsername } = usePersistentUserChoices()
+
+  const ctx = useRoomContext()
+  return (
+    <Dialog title={t('options.username.heading')} {...props}>
+      <Form
+        onSubmit={(data) => {
+          const { username } = data as { username: string }
+          ctx.localParticipant.setName(username)
+          saveUsername(username)
+          const { onOpenChange } = props
+          if (onOpenChange) {
+            onOpenChange(false)
+          }
+        }}
+        submitLabel={t('options.username.submitLabel')}
+      >
+        <Field
+          type="text"
+          name="username"
+          label={t('options.username.label')}
+          description={t('options.username.description')}
+          defaultValue={ctx.localParticipant.name}
+          validate={(value) => {
+            return !value ? (
+              <p>{t('options.username.validationError')}</p>
+            ) : null
+          }}
+        />
+      </Form>
+    </Dialog>
+  )
+}
@@ -0,0 +1,33 @@
+import { RoomEvent } from 'livekit-client'
+
+// Issue: 'allRemoteParticipantRoomEvents' is not exposed or importable. One event is missing
+// to trigger the real-time update of participants when they change their name.
+// This code is duplicated from LiveKit.
+export const allRemoteParticipantRoomEvents = [
+  RoomEvent.ConnectionStateChanged,
+  RoomEvent.RoomMetadataChanged,
+
+  RoomEvent.ActiveSpeakersChanged,
+  RoomEvent.ConnectionQualityChanged,
+
+  RoomEvent.ParticipantConnected,
+  RoomEvent.ParticipantDisconnected,
+  RoomEvent.ParticipantPermissionsChanged,
+  RoomEvent.ParticipantMetadataChanged,
+  RoomEvent.ParticipantNameChanged, // This element is missing in LiveKit and causes problems
+
+  RoomEvent.TrackMuted,
+  RoomEvent.TrackUnmuted,
+  RoomEvent.TrackPublished,
+  RoomEvent.TrackUnpublished,
+  RoomEvent.TrackStreamStateChanged,
+  RoomEvent.TrackSubscriptionFailed,
+  RoomEvent.TrackSubscriptionPermissionChanged,
+  RoomEvent.TrackSubscriptionStatusChanged,
+]
+
+export const allParticipantRoomEvents = [
+  ...allRemoteParticipantRoomEvents,
+  RoomEvent.LocalTrackPublished,
+  RoomEvent.LocalTrackUnpublished,
+]
@@ -0,0 +1,46 @@
+import * as React from 'react'
+/**
+ * Implementation used from https://github.com/juliencrn/usehooks-ts
+ *
+ * @internal
+ */
+export function useMediaQuery(query: string): boolean {
+  const getMatches = (query: string): boolean => {
+    // Prevents SSR issues
+    if (typeof window !== 'undefined') {
+      return window.matchMedia(query).matches
+    }
+    return false
+  }
+
+  const [matches, setMatches] = React.useState<boolean>(getMatches(query))
+
+  function handleChange() {
+    setMatches(getMatches(query))
+  }
+
+  React.useEffect(() => {
+    const matchMedia = window.matchMedia(query)
+
+    // Triggered at the first client-side load and if query changes
+    handleChange()
+
+    // Listen matchMedia
+    if (matchMedia.addListener) {
+      matchMedia.addListener(handleChange)
+    } else {
+      matchMedia.addEventListener('change', handleChange)
+    }
+
+    return () => {
+      if (matchMedia.removeListener) {
+        matchMedia.removeListener(handleChange)
+      } else {
+        matchMedia.removeEventListener('change', handleChange)
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [query])
+
+  return matches
+}
@@ -0,0 +1,196 @@
+import { Track } from 'livekit-client'
+import * as React from 'react'
+
+import { supportsScreenSharing } from '@livekit/components-core'
+
+import {
+  DisconnectButton,
+  LeaveIcon,
+  MediaDeviceMenu,
+  TrackToggle,
+  useMaybeLayoutContext,
+  usePersistentUserChoices,
+} from '@livekit/components-react'
+
+import { mergeProps } from '@/utils/mergeProps.ts'
+import { StartMediaButton } from '../components/controls/StartMediaButton'
+import { useMediaQuery } from '../hooks/useMediaQuery'
+import { useTranslation } from 'react-i18next'
+import { OptionsButton } from '../components/controls/Options/OptionsButton'
+import { ParticipantsToggle } from '@/features/rooms/livekit/components/controls/Participants/ParticipantsToggle'
+import { ChatToggle } from '@/features/rooms/livekit/components/controls/ChatToggle'
+
+/** @public */
+export type ControlBarControls = {
+  microphone?: boolean
+  camera?: boolean
+  chat?: boolean
+  screenShare?: boolean
+  leave?: boolean
+  settings?: boolean
+}
+
+/** @public */
+export interface ControlBarProps extends React.HTMLAttributes<HTMLDivElement> {
+  onDeviceError?: (error: { source: Track.Source; error: Error }) => void
+  variation?: 'minimal' | 'verbose' | 'textOnly'
+  controls?: ControlBarControls
+  /**
+   * If `true`, the user's device choices will be persisted.
+   * This will enables the user to have the same device choices when they rejoin the room.
+   * @defaultValue true
+   * @alpha
+   */
+  saveUserChoices?: boolean
+}
+
+/**
+ * The `ControlBar` prefab gives the user the basic user interface to control their
+ * media devices (camera, microphone and screen share), open the `Chat` and leave the room.
+ *
+ * @remarks
+ * This component is build with other LiveKit components like `TrackToggle`,
+ * `DeviceSelectorButton`, `DisconnectButton` and `StartAudio`.
+ *
+ * @example
+ * ```tsx
+ * <LiveKitRoom>
+ *   <ControlBar />
+ * </LiveKitRoom>
+ * ```
+ * @public
+ */
+export function ControlBar({
+  variation,
+  saveUserChoices = true,
+  onDeviceError,
+  ...props
+}: ControlBarProps) {
+  const { t } = useTranslation('rooms')
+  const [isChatOpen, setIsChatOpen] = React.useState(false)
+  const layoutContext = useMaybeLayoutContext()
+  React.useEffect(() => {
+    if (layoutContext?.widget.state?.showChat !== undefined) {
+      setIsChatOpen(layoutContext?.widget.state?.showChat)
+    }
+  }, [layoutContext?.widget.state?.showChat])
+
+  const isTooLittleSpace = useMediaQuery(
+    `(max-width: ${isChatOpen ? 1000 : 760}px)`
+  )
+
+  const defaultVariation = isTooLittleSpace ? 'minimal' : 'verbose'
+  variation ??= defaultVariation
+
+  const showIcon = React.useMemo(
+    () => variation === 'minimal' || variation === 'verbose',
+    [variation]
+  )
+  const showText = React.useMemo(
+    () => variation === 'textOnly' || variation === 'verbose',
+    [variation]
+  )
+
+  const browserSupportsScreenSharing = supportsScreenSharing()
+
+  const [isScreenShareEnabled, setIsScreenShareEnabled] = React.useState(false)
+
+  const onScreenShareChange = React.useCallback(
+    (enabled: boolean) => {
+      setIsScreenShareEnabled(enabled)
+    },
+    [setIsScreenShareEnabled]
+  )
+
+  const htmlProps = mergeProps({ className: 'lk-control-bar' }, props)
+
+  const {
+    saveAudioInputEnabled,
+    saveVideoInputEnabled,
+    saveAudioInputDeviceId,
+    saveVideoInputDeviceId,
+  } = usePersistentUserChoices({ preventSave: !saveUserChoices })
+
+  const microphoneOnChange = React.useCallback(
+    (enabled: boolean, isUserInitiated: boolean) =>
+      isUserInitiated ? saveAudioInputEnabled(enabled) : null,
+    [saveAudioInputEnabled]
+  )
+
+  const cameraOnChange = React.useCallback(
+    (enabled: boolean, isUserInitiated: boolean) =>
+      isUserInitiated ? saveVideoInputEnabled(enabled) : null,
+    [saveVideoInputEnabled]
+  )
+
+  return (
+    <div {...htmlProps}>
+      <div className="lk-button-group">
+        <TrackToggle
+          source={Track.Source.Microphone}
+          showIcon={showIcon}
+          onChange={microphoneOnChange}
+          onDeviceError={(error) =>
+            onDeviceError?.({ source: Track.Source.Microphone, error })
+          }
+        >
+          {showText && t('controls.microphone')}
+        </TrackToggle>
+        <div className="lk-button-group-menu">
+          <MediaDeviceMenu
+            kind="audioinput"
+            onActiveDeviceChange={(_kind, deviceId) =>
+              saveAudioInputDeviceId(deviceId ?? '')
+            }
+          />
+        </div>
+      </div>
+      <div className="lk-button-group">
+        <TrackToggle
+          source={Track.Source.Camera}
+          showIcon={showIcon}
+          onChange={cameraOnChange}
+          onDeviceError={(error) =>
+            onDeviceError?.({ source: Track.Source.Camera, error })
+          }
+        >
+          {showText && t('controls.camera')}
+        </TrackToggle>
+        <div className="lk-button-group-menu">
+          <MediaDeviceMenu
+            kind="videoinput"
+            onActiveDeviceChange={(_kind, deviceId) =>
+              saveVideoInputDeviceId(deviceId ?? '')
+            }
+          />
+        </div>
+      </div>
+      {browserSupportsScreenSharing && (
+        <TrackToggle
+          source={Track.Source.ScreenShare}
+          captureOptions={{ audio: true, selfBrowserSurface: 'include' }}
+          showIcon={showIcon}
+          onChange={onScreenShareChange}
+          onDeviceError={(error) =>
+            onDeviceError?.({ source: Track.Source.ScreenShare, error })
+          }
+        >
+          {showText &&
+            t(
+              isScreenShareEnabled
+                ? 'controls.stopScreenShare'
+                : 'controls.shareScreen'
+            )}
+        </TrackToggle>
+      )}
+      <ChatToggle />
+      <ParticipantsToggle />
+      <OptionsButton />
+      <DisconnectButton>
+        {showIcon && <LeaveIcon />}
+        {showText && t('controls.leave')}
+      </DisconnectButton>
+      <StartMediaButton />
+    </div>
+  )
+}
@@ -0,0 +1,222 @@
+import type {
+  MessageDecoder,
+  MessageEncoder,
+  TrackReferenceOrPlaceholder,
+  WidgetState,
+} from '@livekit/components-core'
+import {
+  isEqualTrackRef,
+  isTrackReference,
+  isWeb,
+  log,
+} from '@livekit/components-core'
+import { RoomEvent, Track } from 'livekit-client'
+import * as React from 'react'
+
+import {
+  CarouselLayout,
+  ConnectionStateToast,
+  FocusLayout,
+  FocusLayoutContainer,
+  GridLayout,
+  LayoutContextProvider,
+  ParticipantTile,
+  RoomAudioRenderer,
+  MessageFormatter,
+  usePinnedTracks,
+  useTracks,
+  useCreateLayoutContext,
+  Chat,
+} from '@livekit/components-react'
+
+import { ControlBar } from './ControlBar'
+import { styled } from '@/styled-system/jsx'
+import { cva } from '@/styled-system/css'
+import { ParticipantsList } from '@/features/rooms/livekit/components/controls/Participants/ParticipantsList'
+import { useSnapshot } from 'valtio'
+import { participantsStore } from '@/stores/participants'
+
+const LayoutWrapper = styled(
+  'div',
+  cva({
+    base: {
+      position: 'relative',
+      display: 'flex',
+      width: '100%',
+      height: 'calc(100% - var(--lk-control-bar-height))',
+    },
+  })
+)
+
+/**
+ * @public
+ */
+export interface VideoConferenceProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  chatMessageFormatter?: MessageFormatter
+  chatMessageEncoder?: MessageEncoder
+  chatMessageDecoder?: MessageDecoder
+  /** @alpha */
+  SettingsComponent?: React.ComponentType
+}
+
+/**
+ * The `VideoConference` ready-made component is your drop-in solution for a classic video conferencing application.
+ * It provides functionality such as focusing on one participant, grid view with pagination to handle large numbers
+ * of participants, basic non-persistent chat, screen sharing, and more.
+ *
+ * @remarks
+ * The component is implemented with other LiveKit components like `FocusContextProvider`,
+ * `GridLayout`, `ControlBar`, `FocusLayoutContainer` and `FocusLayout`.
+ * You can use this components as a starting point for your own custom video conferencing application.
+ *
+ * @example
+ * ```tsx
+ * <LiveKitRoom>
+ *   <VideoConference />
+ * <LiveKitRoom>
+ * ```
+ * @public
+ */
+export function VideoConference({
+  chatMessageFormatter,
+  chatMessageDecoder,
+  chatMessageEncoder,
+  ...props
+}: VideoConferenceProps) {
+  const [widgetState, setWidgetState] = React.useState<WidgetState>({
+    showChat: false,
+    unreadMessages: 0,
+    showSettings: false,
+  })
+  const lastAutoFocusedScreenShareTrack =
+    React.useRef<TrackReferenceOrPlaceholder | null>(null)
+
+  const tracks = useTracks(
+    [
+      { source: Track.Source.Camera, withPlaceholder: true },
+      { source: Track.Source.ScreenShare, withPlaceholder: false },
+    ],
+    { updateOnlyOn: [RoomEvent.ActiveSpeakersChanged], onlySubscribed: false }
+  )
+
+  const widgetUpdate = (state: WidgetState) => {
+    log.debug('updating widget state', state)
+    setWidgetState(state)
+  }
+
+  const layoutContext = useCreateLayoutContext()
+
+  const screenShareTracks = tracks
+    .filter(isTrackReference)
+    .filter((track) => track.publication.source === Track.Source.ScreenShare)
+
+  const focusTrack = usePinnedTracks(layoutContext)?.[0]
+  const carouselTracks = tracks.filter(
+    (track) => !isEqualTrackRef(track, focusTrack)
+  )
+
+  /* eslint-disable react-hooks/exhaustive-deps */
+  // Code duplicated from LiveKit; this warning will be addressed in the refactoring.
+  React.useEffect(() => {
+    // If screen share tracks are published, and no pin is set explicitly, auto set the screen share.
+    if (
+      screenShareTracks.some((track) => track.publication.isSubscribed) &&
+      lastAutoFocusedScreenShareTrack.current === null
+    ) {
+      log.debug('Auto set screen share focus:', {
+        newScreenShareTrack: screenShareTracks[0],
+      })
+      layoutContext.pin.dispatch?.({
+        msg: 'set_pin',
+        trackReference: screenShareTracks[0],
+      })
+      lastAutoFocusedScreenShareTrack.current = screenShareTracks[0]
+    } else if (
+      lastAutoFocusedScreenShareTrack.current &&
+      !screenShareTracks.some(
+        (track) =>
+          track.publication.trackSid ===
+          lastAutoFocusedScreenShareTrack.current?.publication?.trackSid
+      )
+    ) {
+      log.debug('Auto clearing screen share focus.')
+      layoutContext.pin.dispatch?.({ msg: 'clear_pin' })
+      lastAutoFocusedScreenShareTrack.current = null
+    }
+    if (focusTrack && !isTrackReference(focusTrack)) {
+      const updatedFocusTrack = tracks.find(
+        (tr) =>
+          tr.participant.identity === focusTrack.participant.identity &&
+          tr.source === focusTrack.source
+      )
+      if (
+        updatedFocusTrack !== focusTrack &&
+        isTrackReference(updatedFocusTrack)
+      ) {
+        layoutContext.pin.dispatch?.({
+          msg: 'set_pin',
+          trackReference: updatedFocusTrack,
+        })
+      }
+    }
+  }, [
+    screenShareTracks
+      .map(
+        (ref) => `${ref.publication.trackSid}_${ref.publication.isSubscribed}`
+      )
+      .join(),
+    focusTrack?.publication?.trackSid,
+    tracks,
+  ])
+  /* eslint-enable react-hooks/exhaustive-deps */
+
+  const participantsSnap = useSnapshot(participantsStore)
+  const showParticipants = participantsSnap.showParticipants
+
+  return (
+    <div className="lk-video-conference" {...props}>
+      {isWeb() && (
+        <LayoutContextProvider
+          value={layoutContext}
+          // onPinChange={handleFocusStateChange}
+          onWidgetChange={widgetUpdate}
+        >
+          <div className="lk-video-conference-inner">
+            <LayoutWrapper>
+              {!focusTrack ? (
+                <div
+                  className="lk-grid-layout-wrapper"
+                  style={{ height: 'auto' }}
+                >
+                  <GridLayout tracks={tracks}>
+                    <ParticipantTile />
+                  </GridLayout>
+                </div>
+              ) : (
+                <div className="lk-focus-layout-wrapper">
+                  <FocusLayoutContainer>
+                    <CarouselLayout tracks={carouselTracks}>
+                      <ParticipantTile />
+                    </CarouselLayout>
+                    {focusTrack && <FocusLayout trackRef={focusTrack} />}
+                  </FocusLayoutContainer>
+                </div>
+              )}
+              <Chat
+                style={{ display: widgetState.showChat ? 'grid' : 'none' }}
+                messageFormatter={chatMessageFormatter}
+                messageEncoder={chatMessageEncoder}
+                messageDecoder={chatMessageDecoder}
+              />
+              {showParticipants && <ParticipantsList />}
+            </LayoutWrapper>
+            <ControlBar />
+          </div>
+        </LayoutContextProvider>
+      )}
+      <RoomAudioRenderer />
+      <ConnectionStateToast />
+    </div>
+  )
+}
@@ -1,6 +0,0 @@
-import { navigate } from 'wouter/use-browser-location'
-import { generateRoomId } from '../utils/generateRoomId'
-
-export const navigateToNewRoom = () => {
-  navigate(`/${generateRoomId()}`)
-}
@@ -0,0 +1,17 @@
+import { useTranslation } from 'react-i18next'
+import { Text } from '@/primitives'
+import { Screen } from '@/layout/Screen'
+import { CenteredContent } from '@/layout/CenteredContent'
+
+export const FeedbackRoute = () => {
+  const { t } = useTranslation('rooms')
+  return (
+    <Screen layout="centered">
+      <CenteredContent title={t('feedback.heading')} withBackButton>
+        <Text as="p" variant="h3" centered>
+          {t('feedback.body')}
+        </Text>
+      </CenteredContent>
+    </Screen>
+  )
+}
@@ -1,24 +1,60 @@
-import { type LocalUserChoices } from '@livekit/components-react'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
+import {
+  usePersistentUserChoices,
+  type LocalUserChoices,
+} from '@livekit/components-react'
 import { useParams } from 'wouter'
+import { ErrorScreen } from '@/components/ErrorScreen'
+import { useUser, UserAware } from '@/features/auth'
 import { Conference } from '../components/Conference'
 import { Join } from '../components/Join'
-import { Screen } from '@/layout/Screen'
-import { ErrorScreen } from '@/layout/ErrorScreen'

 export const Room = () => {
+  const { isLoggedIn } = useUser()
+  const { userChoices: existingUserChoices } = usePersistentUserChoices()
  const [userConfig, setUserConfig] = useState<LocalUserChoices | null>(null)
+
  const { roomId } = useParams()
+  const initialRoomData = history.state?.initialRoomData
+  const mode = isLoggedIn && history.state?.create ? 'create' : 'join'
+  const skipJoinScreen = isLoggedIn && mode === 'create'
+
+  const clearRouterState = () => {
+    if (window?.history?.state) {
+      window.history.replaceState({}, '')
+    }
+  }
+
+  useEffect(() => {
+    window.addEventListener('beforeunload', clearRouterState)
+    return () => {
+      window.removeEventListener('beforeunload', clearRouterState)
+    }
+  }, [])
+
  if (!roomId) {
    return <ErrorScreen />
  }
-  return (
-    <Screen>
-      {userConfig ? (
-        <Conference roomId={roomId} userConfig={userConfig} />
-      ) : (
+
+  if (!userConfig && !skipJoinScreen) {
+    return (
+      <UserAware>
        <Join onSubmit={setUserConfig} />
-      )}
-    </Screen>
+      </UserAware>
+    )
+  }
+
+  return (
+    <UserAware>
+      <Conference
+        initialRoomData={initialRoomData}
+        roomId={roomId}
+        mode={mode}
+        userConfig={{
+          ...existingUserChoices,
+          ...userConfig,
+        }}
+      />
+    </UserAware>
  )
 }
@@ -12,5 +12,3 @@ const generateSegment = (length: number): string =>
 // Generates a unique room identifier following the Google Meet format
 export const generateRoomId = () =>
  [generateSegment(3), generateSegment(4), generateSegment(3)].join('-')
-
-export const roomIdRegex = /^[/](?<roomId>[a-z]{3}-[a-z]{4}-[a-z]{3})$/
--- a/Show More
+++ b/Show More