🔖(patch) release 2.0.1

Fixed:
🐛(frontend) title copy break app

.github/workflows/docker-hub.yml

@@ -19,26 +19,9 @@ jobs:
   build-and-push-backend:
     runs-on: ubuntu-latest
     steps:
-      -
-        uses: actions/create-github-app-token@v1
-        id: app-token
-        with:
-          app-id: ${{ secrets.APP_ID }}
-          private-key: ${{ secrets.PRIVATE_KEY }}
-          owner: ${{ github.repository_owner }}
-          repositories: "impress,secrets"
       -
         name: Checkout repository
-        uses: actions/checkout@v2
-        with:
-          submodules: recursive
-          token: ${{ steps.app-token.outputs.token }}
-      -
-        name: Load sops secrets
-        uses: rouja/actions-sops@main
-        with:
-          secret-file: secrets/numerique-gouv/impress/secrets.enc.env
-          age-key: ${{ secrets.SOPS_PRIVATE }}
+        uses: actions/checkout@v4
       -
         name: Docker meta
         id: meta
@@ -48,7 +31,7 @@ jobs:
       -
         name: Login to DockerHub
         if: github.event_name != 'pull_request'
-        run: echo "$DOCKER_HUB_PASSWORD" | docker login -u "$DOCKER_HUB_USER" --password-stdin
+        run: echo "${{ secrets.DOCKER_HUB_PASSWORD }}" | docker login -u "${{ secrets.DOCKER_HUB_USER }}" --password-stdin
       -
         name: Run trivy scan
         uses: numerique-gouv/action-trivy-cache@main
@@ -70,26 +53,9 @@ jobs:
   build-and-push-frontend:
     runs-on: ubuntu-latest
     steps:
-      -
-        uses: actions/create-github-app-token@v1
-        id: app-token
-        with:
-          app-id: ${{ secrets.APP_ID }}
-          private-key: ${{ secrets.PRIVATE_KEY }}
-          owner: ${{ github.repository_owner }}
-          repositories: "impress,secrets"
       -
         name: Checkout repository
-        uses: actions/checkout@v2
-        with:
-          submodules: recursive
-          token: ${{ steps.app-token.outputs.token }}
-      -
-        name: Load sops secrets
-        uses: rouja/actions-sops@main
-        with:
-          secret-file: secrets/numerique-gouv/impress/secrets.enc.env
-          age-key: ${{ secrets.SOPS_PRIVATE }}
+        uses: actions/checkout@v4
       -
         name: Docker meta
         id: meta
@@ -99,7 +65,7 @@ jobs:
       -
         name: Login to DockerHub
         if: github.event_name != 'pull_request'
-        run: echo "$DOCKER_HUB_PASSWORD" | docker login -u "$DOCKER_HUB_USER" --password-stdin
+        run: echo "${{ secrets.DOCKER_HUB_PASSWORD }}" | docker login -u "${{ secrets.DOCKER_HUB_USER }}" --password-stdin
       -
         name: Run trivy scan
         uses: numerique-gouv/action-trivy-cache@main
@@ -122,26 +88,9 @@ jobs:
   build-and-push-y-provider:
     runs-on: ubuntu-latest
     steps:
-      -
-        uses: actions/create-github-app-token@v1
-        id: app-token
-        with:
-          app-id: ${{ secrets.APP_ID }}
-          private-key: ${{ secrets.PRIVATE_KEY }}
-          owner: ${{ github.repository_owner }}
-          repositories: "impress,secrets"
       -
         name: Checkout repository
-        uses: actions/checkout@v2
-        with:
-          submodules: recursive
-          token: ${{ steps.app-token.outputs.token }}
-      -
-        name: Load sops secrets
-        uses: rouja/actions-sops@main
-        with:
-          secret-file: secrets/numerique-gouv/impress/secrets.enc.env
-          age-key: ${{ secrets.SOPS_PRIVATE }}
+        uses: actions/checkout@v4
       -
         name: Docker meta
         id: meta
@@ -151,7 +100,7 @@ jobs:
       -
         name: Login to DockerHub
         if: github.event_name != 'pull_request'
-        run: echo "$DOCKER_HUB_PASSWORD" | docker login -u "$DOCKER_HUB_USER" --password-stdin
+        run: echo "${{ secrets.DOCKER_HUB_PASSWORD }}" | docker login -u "${{ secrets.DOCKER_HUB_USER }}" --password-stdin
       -
         name: Run trivy scan
         uses: numerique-gouv/action-trivy-cache@main
@@ -179,29 +128,12 @@ jobs:
     if: |
       github.event_name != 'pull_request'
     steps:
-      -
-        uses: actions/create-github-app-token@v1
-        id: app-token
-        with:
-          app-id: ${{ secrets.APP_ID }}
-          private-key: ${{ secrets.PRIVATE_KEY }}
-          owner: ${{ github.repository_owner }}
-          repositories: "impress,secrets"
       -
         name: Checkout repository
-        uses: actions/checkout@v2
-        with:
-          submodules: recursive
-          token: ${{ steps.app-token.outputs.token }}
-      -
-        name: Load sops secrets
-        uses: rouja/actions-sops@main
-        with:
-          secret-file: secrets/numerique-gouv/impress/secrets.enc.env
-          age-key: ${{ secrets.SOPS_PRIVATE }}
+        uses: actions/checkout@v4
       -
         name: Call argocd github webhook
         run: |
           data='{"ref": "'$GITHUB_REF'","repository": {"html_url":"'$GITHUB_SERVER_URL'/'$GITHUB_REPOSITORY'"}}'
-          sig=$(echo -n ${data} | openssl dgst -sha1 -hmac ''${ARGOCD_WEBHOOK_SECRET}'' | awk '{print "X-Hub-Signature: sha1="$2}')
-          curl -X POST -H 'X-GitHub-Event:push' -H "Content-Type: application/json" -H "${sig}" --data "${data}" $ARGOCD_WEBHOOK_URL
+          sig=$(echo -n ${data} | openssl dgst -sha1 -hmac ''${{ secrets.ARGOCD_PREPROD_WEBHOOK_SECRET}}'' | awk '{print "X-Hub-Signature: sha1="$2}')
+          curl -X POST -H 'X-GitHub-Event:push' -H "Content-Type: application/json" -H "${sig}" --data "${data}" ${{ vars.ARGOCD_PREPROD_WEBHOOK_URL }}

.github/workflows/helmfile-linter.yaml

@@ -2,6 +2,7 @@ name: Helmfile lint
 run-name: Helmfile lint
 
 on:
+  push:
   pull_request:
     branches:
       - 'main'
@@ -12,11 +13,18 @@ jobs:
     container:
       image: ghcr.io/helmfile/helmfile:latest
     steps:
-      -
-        uses: numerique-gouv/action-helmfile-lint@main
-        with:
-          app-id: ${{ secrets.APP_ID }}
-          age-key: ${{ secrets.SOPS_PRIVATE }}
-          private-key: ${{ secrets.PRIVATE_KEY }}
-          helmfile-src: "src/helm"
-          repositories: "impress,secrets"
+    -
+      name: Checkout repository
+      uses: actions/checkout@v4
+    -
+      name: Helmfile lint
+      shell: bash
+      run: |
+        set -e
+        HELMFILE=src/helm/helmfile.yaml
+        environments=$(awk '/environments:/ {flag=1; next} flag && NF {print} !NF {flag=0}' "$HELMFILE" | grep -E '^[[:space:]]{2}[a-zA-Z]+' | sed 's/^[[:space:]]*//;s/:.*//')
+        for env in $environments; do
+          echo "################### $env lint ###################"
+          helmfile -e $env -f $HELMFILE lint || exit 1
+          echo -e "\n"
+        done

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

@@ -0,0 +1,34 @@
+name: Release Chart
+run-name: Release Chart
+
+on:
+  push:
+    paths:
+      - src/helm/impress/**
+
+jobs:
+  release:
+    # depending on default permission settings for your org (contents being read-only or read-write for workloads), you will have to add permissions
+    # see: https://docs.github.com/en/actions/security-guides/automatic-token-authentication#modifying-the-permissions-for-the-github_token
+    permissions:
+      contents: write
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Cleanup
+        run: rm -rf ./src/helm/extra
+
+      - name: Install Helm
+        uses: azure/setup-helm@v4
+        env:
+          GITHUB_TOKEN: "${{ secrets.GITHUB_TOKEN }}"
+
+      - name: Publish Helm charts
+        uses: numerique-gouv/helm-gh-pages@add-overwrite-option
+        with:
+          charts_dir: ./src/helm
+          token: ${{ secrets.GITHUB_TOKEN }}

.gitmodules

@@ -1,3 +0,0 @@
-[submodule "secrets"]
-	path = secrets
-	url = ../secrets

CHANGELOG.md

@@ -9,11 +9,41 @@ and this project adheres to
 
 ## [Unreleased]
 
+## [2.0.1] - 2025-01-17
+
+## Fixed
+
+-🐛(frontend) share modal is shown when you don't have the abilities #557
+-🐛(frontend) title copy break app #564
+
+
+## [2.0.0] - 2025-01-13
+
 ## Added
 
-🔧(helm) add option to disable default tls setting by @dominikkaminski #519
-📸(helm) production-example #529
+- 🔧(backend) add option to configure list of essential OIDC claims #525 & #531
+- 🔧(helm) add option to disable default tls setting by @dominikkaminski #519
+- 💄(frontend) Add left panel #420
+- 💄(frontend) add filtering to left panel #475
+- ✨(frontend) new share modal ui #489
+- ✨(frontend) add favorite feature #515
 
+## Changed
+
+- 🏗️(yjs-server) organize yjs server #528
+- ♻️(frontend) better separation collaboration process #528
+- 💄(frontend) updating the header and leftpanel for responsive #421
+- 💄(frontend) update DocsGrid component #431
+- 💄(frontend) update DocsGridOptions component #432
+- 💄(frontend) update DocHeader ui #448
+- 💄(frontend) update doc versioning ui #463
+- 💄(frontend) update doc summary ui #473
+
+## Fixed
+
+- 🐛(backend) fix create document via s2s if sub unknown but email found #543
+- 🐛(frontend) hide search and create doc button if not authenticated #555
+- 🐛(backend) race condition creation issue #556
 
 ## [1.10.0] - 2024-12-17
 
@@ -32,6 +62,11 @@ and this project adheres to
 - ⚡️(e2e) reduce flakiness on e2e tests #511
 
 
+## Fixed
+- 🐛(frontend) update doc editor height #481
+- 💄(frontend) add doc search #485
+
+
 ## [1.9.0] - 2024-12-11
 
 ## Added
@@ -326,7 +361,9 @@ and this project adheres to
 - 🚀 Impress, project to manage your documents easily and collaboratively.
 
 
-[unreleased]: https://github.com/numerique-gouv/impress/compare/v1.10.0...main
+[unreleased]: https://github.com/numerique-gouv/impress/compare/v2.0.1...main
+[v2.0.1]: https://github.com/numerique-gouv/impress/releases/v2.0.1
+[v2.0.0]: https://github.com/numerique-gouv/impress/releases/v2.0.0
 [v1.10.0]: https://github.com/numerique-gouv/impress/releases/v1.10.0
 [v1.9.0]: https://github.com/numerique-gouv/impress/releases/v1.9.0
 [v1.8.2]: https://github.com/numerique-gouv/impress/releases/v1.8.2

bin/_config.sh

@@ -7,7 +7,7 @@ UNSET_USER=0
 
 TERRAFORM_DIRECTORY="./env.d/terraform"
 COMPOSE_FILE="${REPO_DIR}/docker-compose.yml"
-COMPOSE_PROJECT="impress"
+COMPOSE_PROJECT="docs"
 
 
 # _set_user: set (or unset) default user id used to run docker commands

bin/start-kind.sh

@@ -1,103 +1,2 @@
 #!/bin/sh
-set -o errexit
-
-CURRENT_DIR=$(pwd)
-
-echo "0. Create ca"
-# 0. Create ca
-mkcert -install
-cd /tmp
-mkcert "127.0.0.1.nip.io" "*.127.0.0.1.nip.io"
-cd $CURRENT_DIR
-
-echo "1. Create registry container unless it already exists"
-# 1. Create registry container unless it already exists
-reg_name='kind-registry'
-reg_port='5001'
-if [ "$(docker inspect -f '{{.State.Running}}' "${reg_name}" 2>/dev/null || true)" != 'true' ]; then
-	docker run \
-		-d --restart=unless-stopped -p "127.0.0.1:${reg_port}:5000" --network bridge --name "${reg_name}" \
-		registry:2
-fi
-
-echo "2. Create kind cluster with containerd registry config dir enabled"
-# 2. Create kind cluster with containerd registry config dir enabled
-# TODO: kind will eventually enable this by default and this patch will
-# be unnecessary.
-#
-# See:
-# https://github.com/kubernetes-sigs/kind/issues/2875
-# https://github.com/containerd/containerd/blob/main/docs/cri/config.md#registry-configuration
-# See: https://github.com/containerd/containerd/blob/main/docs/hosts.md
-cat <<EOF | kind create cluster --config=-
-kind: Cluster
-apiVersion: kind.x-k8s.io/v1alpha4
-containerdConfigPatches:
-- |-
-  [plugins."io.containerd.grpc.v1.cri".registry]
-    config_path = "/etc/containerd/certs.d"
-nodes:
-- role: control-plane
-  image: kindest/node:v1.27.3
-  kubeadmConfigPatches:
-  - |
-    kind: InitConfiguration
-    nodeRegistration:
-      kubeletExtraArgs:
-        node-labels: "ingress-ready=true"
-  extraPortMappings:
-  - containerPort: 80
-    hostPort: 80
-    protocol: TCP
-  - containerPort: 443
-    hostPort: 443
-    protocol: TCP
-- role: worker
-  image: kindest/node:v1.27.3
-- role: worker
-  image: kindest/node:v1.27.3
-EOF
-
-echo "3. Add the registry config to the nodes"
-# 3. Add the registry config to the nodes
-#
-# This is necessary because localhost resolves to loopback addresses that are
-# network-namespace local.
-# In other words: localhost in the container is not localhost on the host.
-#
-# We want a consistent name that works from both ends, so we tell containerd to
-# alias localhost:${reg_port} to the registry container when pulling images
-REGISTRY_DIR="/etc/containerd/certs.d/localhost:${reg_port}"
-for node in $(kind get nodes); do
-	docker exec "${node}" mkdir -p "${REGISTRY_DIR}"
-	cat <<EOF | docker exec -i "${node}" cp /dev/stdin "${REGISTRY_DIR}/hosts.toml"
-[host."http://${reg_name}:5000"]
-EOF
-done
-
-echo "4. Connect the registry to the cluster network if not already connected"
-# 4. Connect the registry to the cluster network if not already connected
-# This allows kind to bootstrap the network but ensures they're on the same network
-if [ "$(docker inspect -f='{{json .NetworkSettings.Networks.kind}}' "${reg_name}")" = 'null' ]; then
-	docker network connect "kind" "${reg_name}"
-fi
-
-echo "5. Document the local registry"
-# 5. Document the local registry
-# https://github.com/kubernetes/enhancements/tree/master/keps/sig-cluster-lifecycle/generic/1755-communicating-a-local-registry
-cat <<EOF | kubectl apply -f -
-apiVersion: v1
-kind: ConfigMap
-metadata:
-  name: local-registry-hosting
-  namespace: kube-public
-data:
-  localRegistryHosting.v1: |
-    host: "localhost:${reg_port}"
-    help: "https://kind.sigs.k8s.io/docs/user/local-registry/"
-EOF
-
-echo "6. Install ingress-nginx"
-kubectl apply -f https://raw.githubusercontent.com/kubernetes/ingress-nginx/main/deploy/static/provider/kind/deploy.yaml
-kubectl -n ingress-nginx create secret tls mkcert --key /tmp/127.0.0.1.nip.io+1-key.pem --cert /tmp/127.0.0.1.nip.io+1.pem
-kubectl -n ingress-nginx patch deployments.apps ingress-nginx-controller --type 'json' -p '[{"op": "add", "path": "/spec/template/spec/containers/0/args/-", "value":"--default-ssl-certificate=ingress-nginx/mkcert"}]'
+curl https://raw.githubusercontent.com/numerique-gouv/tools/refs/heads/main/kind/create_cluster.sh | bash -s -- impress

docs/examples/impress.values.yaml

@@ -0,0 +1,156 @@
+image:
+  repository: lasuite/impress-backend
+  pullPolicy: Always
+  tag: "latest"
+
+backend:
+  replicas: 1
+  envVars:
+    COLLABORATION_API_URL: https://impress.127.0.0.1.nip.io/collaboration/api/
+    COLLABORATION_SERVER_SECRET: my-secret
+    DJANGO_CSRF_TRUSTED_ORIGINS: https://impress.127.0.0.1.nip.io
+    DJANGO_CONFIGURATION: Feature
+    DJANGO_ALLOWED_HOSTS: impress.127.0.0.1.nip.io
+    DJANGO_SERVER_TO_SERVER_API_TOKENS: secret-api-key
+    DJANGO_SECRET_KEY: AgoodOrAbadKey
+    DJANGO_SETTINGS_MODULE: impress.settings
+    DJANGO_SUPERUSER_PASSWORD: admin
+    DJANGO_EMAIL_BRAND_NAME: "La Suite Numérique"
+    DJANGO_EMAIL_HOST: "mailcatcher"
+    DJANGO_EMAIL_LOGO_IMG: https://impress.127.0.0.1.nip.io/assets/logo-suite-numerique.png
+    DJANGO_EMAIL_PORT: 1025
+    DJANGO_EMAIL_USE_SSL: False
+    LOGGING_LEVEL_HANDLERS_CONSOLE: ERROR
+    LOGGING_LEVEL_LOGGERS_ROOT: INFO
+    LOGGING_LEVEL_LOGGERS_APP: INFO
+    OIDC_OP_JWKS_ENDPOINT: https://keycloak.127.0.0.1.nip.io/realms/impress/protocol/openid-connect/certs
+    OIDC_OP_AUTHORIZATION_ENDPOINT: https://keycloak.127.0.0.1.nip.io/realms/impress/protocol/openid-connect/auth
+    OIDC_OP_TOKEN_ENDPOINT: https://keycloak.127.0.0.1.nip.io/realms/impress/protocol/openid-connect/token
+    OIDC_OP_USER_ENDPOINT: https://keycloak.127.0.0.1.nip.io/realms/impress/protocol/openid-connect/userinfo
+    OIDC_OP_LOGOUT_ENDPOINT: https://keycloak.127.0.0.1.nip.io/realms/impress/protocol/openid-connect/session/end
+    OIDC_RP_CLIENT_ID: impress
+    OIDC_RP_CLIENT_SECRET: ThisIsAnExampleKeyForDevPurposeOnly
+    OIDC_RP_SIGN_ALGO: RS256
+    OIDC_RP_SCOPES: "openid email"
+    OIDC_VERIFY_SSL: False
+    USER_OIDC_FIELD_TO_SHORTNAME: "given_name"
+    USER_OIDC_FIELDS_TO_FULLNAME: "given_name,usual_name"
+    OIDC_REDIRECT_ALLOWED_HOSTS: https://impress.127.0.0.1.nip.io
+    OIDC_AUTH_REQUEST_EXTRA_PARAMS: "{'acr_values': 'eidas1'}"
+    LOGIN_REDIRECT_URL: https://impress.127.0.0.1.nip.io
+    LOGIN_REDIRECT_URL_FAILURE: https://impress.127.0.0.1.nip.io
+    LOGOUT_REDIRECT_URL: https://impress.127.0.0.1.nip.io
+    DB_HOST: postgresql
+    DB_NAME: impress
+    DB_USER: dinum
+    DB_PASSWORD: pass
+    DB_PORT: 5432
+    POSTGRES_DB: impress
+    POSTGRES_USER: dinum
+    POSTGRES_PASSWORD: pass
+    REDIS_URL: redis://default:pass@redis-master:6379/1
+    AWS_S3_ENDPOINT_URL: http://minio.impress.svc.cluster.local:9000
+    AWS_S3_ACCESS_KEY_ID: root
+    AWS_S3_SECRET_ACCESS_KEY: password
+    AWS_STORAGE_BUCKET_NAME: impress-media-storage
+    STORAGES_STATICFILES_BACKEND: django.contrib.staticfiles.storage.StaticFilesStorage
+    Y_PROVIDER_API_BASE_URL: http://impress-y-provider:443/api/
+    Y_PROVIDER_API_KEY: my-secret
+
+  migrate:
+    command:
+      - "/bin/sh"
+      - "-c"
+      - |
+        python manage.py migrate --no-input &&
+        python manage.py create_demo --force
+    restartPolicy: Never
+
+  command:
+    - "gunicorn"
+    - "-c"
+    - "/usr/local/etc/gunicorn/impress.py"
+    - "impress.wsgi:application"
+    - "--reload"
+
+  createsuperuser:
+    command:
+      - "/bin/sh"
+      - "-c"
+      - |
+        python manage.py createsuperuser --email admin@example.com --password admin
+    restartPolicy: Never
+
+  # Exra volume to manage our local custom CA and avoid to set ssl_verify: false
+  extraVolumeMounts:
+    - name: certs
+      mountPath: /usr/local/lib/python3.12/site-packages/certifi/cacert.pem
+      subPath: cacert.pem
+
+  # Exra volume to manage our local custom CA and avoid to set ssl_verify: false
+  extraVolumes:
+    - name: certs
+      configMap:
+        name: certifi
+        items:
+        - key: cacert.pem
+          path: cacert.pem
+frontend:
+  envVars:
+    PORT: 8080
+    NEXT_PUBLIC_API_ORIGIN: https://impress.127.0.0.1.nip.io
+
+  replicas: 1
+
+  image:
+    repository: lasuite/impress-frontend
+    pullPolicy: Always
+    tag: "latest"
+
+yProvider:
+  replicas: 1
+
+  image:
+    repository: lasuite/impress-y-provider
+    pullPolicy: Always
+    tag: "latest"
+
+  envVars:
+    COLLABORATION_LOGGING: true
+    COLLABORATION_SERVER_ORIGIN: https://impress.127.0.0.1.nip.io
+    COLLABORATION_SERVER_SECRET: my-secret
+    Y_PROVIDER_API_KEY: my-secret
+
+ingress:
+  enabled: true
+  host: impress.127.0.0.1.nip.io
+
+ingressCollaborationWS:
+  enabled: true
+  host: impress.127.0.0.1.nip.io
+  
+  annotations:
+    nginx.ingress.kubernetes.io/auth-url: https://impress.127.0.0.1.nip.io/api/v1.0/documents/collaboration-auth/
+
+ingressCollaborationApi:
+  enabled: true
+  host: impress.127.0.0.1.nip.io
+
+ingressAdmin:
+  enabled: true
+  host: impress.127.0.0.1.nip.io
+
+ingressMedia:
+  enabled: true
+  host: impress.127.0.0.1.nip.io
+
+  annotations:
+    nginx.ingress.kubernetes.io/auth-url: https://impress.127.0.0.1.nip.io/api/v1.0/documents/media-auth/
+    nginx.ingress.kubernetes.io/auth-response-headers: "Authorization, X-Amz-Date, X-Amz-Content-SHA256"
+    nginx.ingress.kubernetes.io/upstream-vhost: minio.impress.svc.cluster.local:9000
+    nginx.ingress.kubernetes.io/rewrite-target: /impress-media-storage/$1
+
+serviceMedia:
+  host: minio.impress.svc.cluster.local
+  port: 9000
+

docs/examples/minio.values.yaml

@@ -0,0 +1,8 @@
+auth:
+  rootUser: root
+  rootPassword: password
+provisioning:
+  enabled: true
+  buckets:
+    - name: impress-media-storage
+      versioning: true

docs/examples/postgresql.values.yaml

@@ -0,0 +1,7 @@
+auth:
+  username: dinum
+  password: pass
+  database: impress
+tls:
+  enabled: true
+  autoGenerated: true

docs/examples/redis.values.yaml

@@ -0,0 +1,4 @@
+auth:
+  password: pass
+architecture: standalone
+

docs/installation.md

@@ -0,0 +1,231 @@
+# Installation on a k8s cluster
+
+This document is a step-by-step guide that describes how to install Docs on a k8s cluster without AI features. It's a teaching document to learn how it's work. It needs to be adapt for production environment.
+
+
+## Prerequisites
+
+- k8s cluster with an nginx-ingress controller
+- an OIDC provider (if you don't have one, we will provide an example)
+- a PostgreSQL server (if you don't have one, we will provide an example)
+- a Memcached server (if you don't have one, we will provide an example)
+- a S3 bucket (if you don't have one, we will provide an example)
+
+### Test cluster
+
+If you do not have a test cluster, you can install everything on a local kind cluster. In this case, the simplest way is to use our script **bin/start-kind.sh**.
+
+To be able to use the script, you will need to install:
+
+- Docker (https://docs.docker.com/desktop/)
+- Kind (https://kind.sigs.k8s.io/docs/user/quick-start/#installation)
+- Mkcert (https://github.com/FiloSottile/mkcert#installation)
+- Helm (https://helm.sh/docs/intro/quickstart/#install-helm)
+
+```
+./bin/start-kind.sh 
+  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
+                                 Dload  Upload   Total   Spent    Left  Speed
+100  4700  100  4700    0     0  92867      0 --:--:-- --:--:-- --:--:-- 94000
+0. Create ca
+The local CA is already installed in the system trust store! 👍
+The local CA is already installed in the Firefox and/or Chrome/Chromium trust store! 👍
+
+
+Created a new certificate valid for the following names 📜
+ - "127.0.0.1.nip.io"
+ - "*.127.0.0.1.nip.io"
+
+Reminder: X.509 wildcards only go one level deep, so this won't match a.b.127.0.0.1.nip.io ℹ️
+
+The certificate is at "./127.0.0.1.nip.io+1.pem" and the key at "./127.0.0.1.nip.io+1-key.pem" ✅
+
+It will expire on 24 March 2027 🗓
+
+1. Create registry container unless it already exists
+2. Create kind cluster with containerd registry config dir enabled
+Creating cluster "suite" ...
+ ✓ Ensuring node image (kindest/node:v1.27.3) 🖼
+ ✓ Preparing nodes 📦  
+ ✓ Writing configuration 📜 
+ ✓ Starting control-plane 🕹️ 
+ ✓ Installing CNI 🔌 
+ ✓ Installing StorageClass 💾 
+Set kubectl context to "kind-suite"
+You can now use your cluster with:
+
+kubectl cluster-info --context kind-suite
+
+Thanks for using kind! 😊
+3. Add the registry config to the nodes
+4. Connect the registry to the cluster network if not already connected
+5. Document the local registry
+configmap/local-registry-hosting created
+Warning: resource configmaps/coredns is missing the kubectl.kubernetes.io/last-applied-configuration annotation which is required by kubectl apply. kubectl apply should only be used on resources created declaratively by either kubectl create --save-config or kubectl apply. The missing annotation will be patched automatically.
+configmap/coredns configured
+deployment.apps/coredns restarted
+6. Install ingress-nginx
+namespace/ingress-nginx created
+serviceaccount/ingress-nginx created
+serviceaccount/ingress-nginx-admission created
+role.rbac.authorization.k8s.io/ingress-nginx created
+role.rbac.authorization.k8s.io/ingress-nginx-admission created
+clusterrole.rbac.authorization.k8s.io/ingress-nginx created
+clusterrole.rbac.authorization.k8s.io/ingress-nginx-admission created
+rolebinding.rbac.authorization.k8s.io/ingress-nginx created
+rolebinding.rbac.authorization.k8s.io/ingress-nginx-admission created
+clusterrolebinding.rbac.authorization.k8s.io/ingress-nginx created
+clusterrolebinding.rbac.authorization.k8s.io/ingress-nginx-admission created
+configmap/ingress-nginx-controller created
+service/ingress-nginx-controller created
+service/ingress-nginx-controller-admission created
+deployment.apps/ingress-nginx-controller created
+job.batch/ingress-nginx-admission-create created
+job.batch/ingress-nginx-admission-patch created
+ingressclass.networking.k8s.io/nginx created
+validatingwebhookconfiguration.admissionregistration.k8s.io/ingress-nginx-admission created
+secret/mkcert created
+deployment.apps/ingress-nginx-controller patched
+7. Setup namespace
+namespace/impress created
+Context "kind-suite" modified.
+secret/mkcert created
+$ kubectl -n ingress-nginx get po
+NAME                                        READY   STATUS      RESTARTS   AGE
+ingress-nginx-admission-create-t55ph        0/1     Completed   0          2m56s
+ingress-nginx-admission-patch-94dvt         0/1     Completed   1          2m56s
+ingress-nginx-controller-57c548c4cd-2rx47   1/1     Running     0          2m56s
+```
+When your k8s cluster is ready (the ingress nginx controller is up), you can start the deployment. This cluster is special because it uses the *.127.0.0.1.nip.io domain and mkcert certificates to have full HTTPS support and easy domain name management.
+
+Please remember that *.127.0.0.1.nip.io will always resolve to 127.0.0.1, except in the k8s cluster where we configure CoreDNS to answer with the ingress-nginx service IP.
+
+## Preparation
+
+### What will you use to authenticate your users ?
+
+Docs uses OIDC, so if you already have an OIDC provider, obtain the necessary information to use it. In the next step, we will see how to configure Django (and thus Docs) to use it. If you do not have a provider, we will show you how to deploy a local Keycloak instance (this is not a production deployment, just a demo).
+
+```
+$ kubectl create namespace impress
+$ kubectl config set-context --current --namespace=impress
+$ helm install keycloak oci://registry-1.docker.io/bitnamicharts/keycloak -f examples/keycloak.values.yaml
+$ #wait until
+$ kubectl get po
+NAME                    READY   STATUS    RESTARTS   AGE
+keycloak-0              1/1     Running   0          6m48s
+keycloak-postgresql-0   1/1     Running   0          6m48s
+```
+
+From here the important informations you will need are :
+
+```
+OIDC_OP_JWKS_ENDPOINT: https://keycloak.127.0.0.1.nip.io/realms/impress/protocol/openid-connect/certs
+OIDC_OP_AUTHORIZATION_ENDPOINT: https://keycloak.127.0.0.1.nip.io/realms/impress/protocol/openid-connect/auth
+OIDC_OP_TOKEN_ENDPOINT: https://keycloak.127.0.0.1.nip.io/realms/impress/protocol/openid-connect/token
+OIDC_OP_USER_ENDPOINT: https://keycloak.127.0.0.1.nip.io/realms/impress/protocol/openid-connect/userinfo
+OIDC_OP_LOGOUT_ENDPOINT: https://keycloak.127.0.0.1.nip.io/realms/impress/protocol/openid-connect/session/end
+OIDC_RP_CLIENT_ID: impress
+OIDC_RP_CLIENT_SECRET: ThisIsAnExampleKeyForDevPurposeOnly
+OIDC_RP_SIGN_ALGO: RS256
+OIDC_RP_SCOPES: "openid email"
+```
+
+You can find these values in **examples/keycloak.values.yaml**
+
+### Find redis server connexion values
+
+Impress need a redis so we will start by deploying a redis :
+
+```
+$ helm install redis oci://registry-1.docker.io/bitnamicharts/redis -f examples/redis.values.yaml
+$ kubectl get po
+NAME                    READY   STATUS    RESTARTS   AGE
+keycloak-0              1/1     Running   0          26m
+keycloak-postgresql-0   1/1     Running   0          26m
+redis-master-0          1/1     Running   0          35s
+```
+
+### Find postgresql connexion values
+
+Impress uses a postgresql db as backend so if you have a provider, obtain the necessary information to use it. If you do not have, you can install a postgresql testing environment as follow:
+
+```
+$ helm install postgresql oci://registry-1.docker.io/bitnamicharts/postgresql -f examples/postgresql.values.yaml
+$ kubectl get po
+NAME                    READY   STATUS    RESTARTS   AGE
+keycloak-0              1/1     Running   0          28m
+keycloak-postgresql-0   1/1     Running   0          28m
+postgresql-0            1/1     Running   0          14m
+redis-master-0          1/1     Running   0          42s
+```
+
+From here important informations you will need are :
+
+```
+DB_HOST: postgres-postgresql
+DB_NAME: impress
+DB_USER: dinum
+DB_PASSWORD: pass
+DB_PORT: 5432
+POSTGRES_DB: impress
+POSTGRES_USER: dinum
+POSTGRES_PASSWORD: pass
+```
+
+### Find s3 bucket connexion values
+
+Impress uses a s3 bucket to store documents so if you have a provider obtain the necessary information to use it. If you do not have, you can install a local minio testing environment as follow:
+
+```
+$ helm install minio oci://registry-1.docker.io/bitnamicharts/minio -f examples/minio.values.yaml
+$ kubectl get po
+NAME                       READY   STATUS      RESTARTS   AGE
+keycloak-0                 1/1     Running     0          38m
+keycloak-postgresql-0      1/1     Running     0          38m
+minio-84f5c66895-bbhsk     1/1     Running     0          42s
+minio-provisioning-2b5sq   0/1     Completed   0          42s
+postgresql-0               1/1     Running     0          24m
+redis-master-0             1/1     Running     0          10m
+```
+
+## Deployment
+
+Now you are ready to deploy Impress without AI. AI requiered more dependancies (openai API). To deploy impress you need to provide all previous informations to the helm chart.
+
+```
+$ helm repo add impress https://suitenumerique.github.io/docs/
+$ helm repo update
+$ helm install impress impress/docs -f examples/impress.values.yaml
+$ kubectl get po
+NAME                                         READY   STATUS      RESTARTS   AGE
+impress-docs-backend-96558758d-xtkbp         0/1     Running     0          79s
+impress-docs-backend-createsuperuser-r7ltc   0/1     Completed   0          79s
+impress-docs-backend-migrate-c949s           0/1     Completed   0          79s
+impress-docs-frontend-6749f644f7-p5s42       1/1     Running     0          79s
+impress-docs-y-provider-6947fd8f54-78f2l     1/1     Running     0          79s
+keycloak-0                                   1/1     Running     0          48m
+keycloak-postgresql-0                        1/1     Running     0          48m
+minio-84f5c66895-bbhsk                       1/1     Running     0          10m
+minio-provisioning-2b5sq                     0/1     Completed   0          10m
+postgresql-0                                 1/1     Running     0          34m
+redis-master-0                               1/1     Running     0          20m
+```
+
+## Test your deployment
+
+In order to test your deployment you have to login to your instance. If you use exclusively our examples you can do :
+
+```
+$ kubectl get ingress
+NAME                             CLASS    HOSTS                       ADDRESS     PORTS     AGE
+impress-docs                     <none>   impress.127.0.0.1.nip.io    localhost   80, 443   114s
+impress-docs-admin               <none>   impress.127.0.0.1.nip.io    localhost   80, 443   114s
+impress-docs-collaboration-api   <none>   impress.127.0.0.1.nip.io    localhost   80, 443   114s
+impress-docs-media               <none>   impress.127.0.0.1.nip.io    localhost   80, 443   114s
+impress-docs-ws                  <none>   impress.127.0.0.1.nip.io    localhost   80, 443   114s
+keycloak                         <none>   keycloak.127.0.0.1.nip.io   localhost   80        49m
+```
+
+You can use impress on https://impress.127.0.0.1.nip.io. The provisionning user in keycloak is impress/impress.
+

src/backend/core/api/serializers.py

@@ -201,7 +201,7 @@ class DocumentSerializer(ListDocumentSerializer):
             "abilities",
             "created_at",
             "creator",
-            "is_avorite",
+            "is_favorite",
             "link_role",
             "link_reach",
             "nb_accesses",
@@ -264,13 +264,17 @@ class ServerCreateDocumentSerializer(serializers.Serializer):
         """Create the document and associate it with the user or send an invitation."""
         language = validated_data.get("language", settings.LANGUAGE_CODE)
 
-        # Get the user based on the sub (unique identifier)
+        # Get the user on its sub (unique identifier). Default on email if allowed in settings
+        email = validated_data["email"]
+
         try:
-            user = models.User.objects.get(sub=validated_data["sub"])
-        except (models.User.DoesNotExist, KeyError):
-            user = None
-            email = validated_data["email"]
-        else:
+            user = models.User.objects.get_user_by_sub_or_email(
+                validated_data["sub"], email
+            )
+        except models.DuplicateEmailError as err:
+            raise serializers.ValidationError({"email": [err.message]}) from err
+
+        if user:
             email = user.email
             language = user.language or language
 
@@ -279,7 +283,9 @@ class ServerCreateDocumentSerializer(serializers.Serializer):
                 validated_data["content"]
             )
         except ConversionError as err:
-            raise exceptions.APIException(detail="could not convert content") from err
+            raise serializers.ValidationError(
+                {"content": ["Could not convert content"]}
+            ) from err
 
         document = models.Document.objects.create(
             title=validated_data["title"],
@@ -302,7 +308,11 @@ class ServerCreateDocumentSerializer(serializers.Serializer):
                 role=models.RoleChoices.OWNER,
             )
 
-        # Notify the user about the newly created document
+        self._send_email_notification(document, validated_data, email, language)
+        return document
+
+    def _send_email_notification(self, document, validated_data, email, language):
+        """Notify the user about the newly created document."""
         subject = validated_data.get("subject") or _(
             "A new document was created on your behalf!"
         )
@@ -313,8 +323,6 @@ class ServerCreateDocumentSerializer(serializers.Serializer):
         }
         document.send_email(subject, [email], context, language)
 
-        return document
-
     def update(self, instance, validated_data):
         """
         This serializer does not support updates.

src/backend/core/api/viewsets.py

@@ -676,7 +676,7 @@ class DocumentViewSet(
 
         # Fetch the document and check if the user has access
         try:
-            document, _created = models.Document.objects.get_or_create(pk=pk)
+            document = models.Document.objects.get(pk=pk)
         except models.Document.DoesNotExist as exc:
             logger.debug("Document with ID '%s' does not exist", pk)
             raise drf.exceptions.PermissionDenied() from exc

src/backend/core/authentication/backends.py

@@ -1,5 +1,7 @@
 """Authentication Backends for the Impress core app."""
 
+import logging
+
 from django.conf import settings
 from django.core.exceptions import SuspiciousOperation
 from django.utils.translation import gettext_lazy as _
@@ -9,7 +11,9 @@ from mozilla_django_oidc.auth import (
     OIDCAuthenticationBackend as MozillaOIDCAuthenticationBackend,
 )
 
-from core.models import User
+from core.models import DuplicateEmailError, User
+
+logger = logging.getLogger(__name__)
 
 
 class OIDCAuthenticationBackend(MozillaOIDCAuthenticationBackend):
@@ -59,10 +63,29 @@ class OIDCAuthenticationBackend(MozillaOIDCAuthenticationBackend):
 
         return userinfo
 
+    def verify_claims(self, claims):
+        """
+        Verify the presence of essential claims and the "sub" (which is mandatory as defined
+        by the OIDC specification) to decide if authentication should be allowed.
+        """
+        essential_claims = settings.USER_OIDC_ESSENTIAL_CLAIMS
+        missing_claims = [claim for claim in essential_claims if claim not in claims]
+
+        if missing_claims:
+            logger.error("Missing essential claims: %s", missing_claims)
+            return False
+
+        return True
+
     def get_or_create_user(self, access_token, id_token, payload):
         """Return a User based on userinfo. Create a new user if no match is found."""
 
         user_info = self.get_userinfo(access_token, id_token, payload)
+
+        if not self.verify_claims(user_info):
+            raise SuspiciousOperation("Claims verification failed.")
+
+        sub = user_info["sub"]
         email = user_info.get("email")
 
         # Get user's full name from OIDC fields defined in settings
@@ -75,13 +98,10 @@ class OIDCAuthenticationBackend(MozillaOIDCAuthenticationBackend):
             "short_name": short_name,
         }
 
-        sub = user_info.get("sub")
-        if not sub:
-            raise SuspiciousOperation(
-                _("User info contained no recognizable user identification")
-            )
-
-        user = self.get_existing_user(sub, email)
+        try:
+            user = User.objects.get_user_by_sub_or_email(sub, email)
+        except DuplicateEmailError as err:
+            raise SuspiciousOperation(err.message) from err
 
         if user:
             if not user.is_active:
@@ -100,18 +120,6 @@ class OIDCAuthenticationBackend(MozillaOIDCAuthenticationBackend):
         )
         return full_name or None
 
-    def get_existing_user(self, sub, email):
-        """Fetch existing user by sub or email."""
-        try:
-            return User.objects.get(sub=sub)
-        except User.DoesNotExist:
-            if email and settings.OIDC_FALLBACK_TO_EMAIL_FOR_IDENTIFICATION:
-                try:
-                    return User.objects.get(email=email)
-                except User.DoesNotExist:
-                    pass
-        return None
-
     def update_user_if_needed(self, user, claims):
         """Update user claims if they have changed."""
         has_changed = any(
@@ -119,4 +127,4 @@ class OIDCAuthenticationBackend(MozillaOIDCAuthenticationBackend):
         )
         if has_changed:
             updated_claims = {key: value for key, value in claims.items() if value}
-            self.UserModel.objects.filter(sub=user.sub).update(**updated_claims)
+            self.UserModel.objects.filter(id=user.id).update(**updated_claims)

src/backend/core/models.py

@@ -1,6 +1,7 @@
 """
 Declare and configure the models for the impress core application
 """
+# pylint: disable=too-many-lines
 
 import hashlib
 import smtplib
@@ -89,6 +90,16 @@ class LinkReachChoices(models.TextChoices):
     PUBLIC = "public", _("Public")  # Even anonymous users can access the document
 
 
+class DuplicateEmailError(Exception):
+    """Raised when an email is already associated with a pre-existing user."""
+
+    def __init__(self, message=None, email=None):
+        """Set message and email to describe the exception."""
+        self.message = message
+        self.email = email
+        super().__init__(self.message)
+
+
 class BaseModel(models.Model):
     """
     Serves as an abstract base model for other models, ensuring that records are validated
@@ -126,6 +137,35 @@ class BaseModel(models.Model):
         super().save(*args, **kwargs)
 
 
+class UserManager(auth_models.UserManager):
+    """Custom manager for User model with additional methods."""
+
+    def get_user_by_sub_or_email(self, sub, email):
+        """Fetch existing user by sub or email."""
+        try:
+            return self.get(sub=sub)
+        except self.model.DoesNotExist as err:
+            if not email:
+                return None
+
+            if settings.OIDC_FALLBACK_TO_EMAIL_FOR_IDENTIFICATION:
+                try:
+                    return self.get(email=email)
+                except self.model.DoesNotExist:
+                    pass
+            elif (
+                self.filter(email=email).exists()
+                and not settings.OIDC_ALLOW_DUPLICATE_EMAILS
+            ):
+                raise DuplicateEmailError(
+                    _(
+                        "We couldn't find a user with this sub but the email is already "
+                        "associated with a registered user."
+                    )
+                ) from err
+        return None
+
+
 class User(AbstractBaseUser, BaseModel, auth_models.PermissionsMixin):
     """User model to work with OIDC only authentication."""
 
@@ -192,7 +232,7 @@ class User(AbstractBaseUser, BaseModel, auth_models.PermissionsMixin):
         ),
     )
 
-    objects = auth_models.UserManager()
+    objects = UserManager()
 
     USERNAME_FIELD = "admin_email"
     REQUIRED_FIELDS = []
@@ -939,7 +979,10 @@ class Invitation(BaseModel):
         super().clean()
 
         # Check if an identity already exists for the provided email
-        if User.objects.filter(email=self.email).exists():
+        if (
+            User.objects.filter(email=self.email).exists()
+            and not settings.OIDC_ALLOW_DUPLICATE_EMAILS
+        ):
             raise exceptions.ValidationError(
                 {"email": _("This email is already associated to a registered user.")}
             )

src/backend/core/tests/authentication/test_backends.py

@@ -1,6 +1,9 @@
 """Unit tests for the Authentication Backends."""
 
+import random
 import re
+from logging import Logger
+from unittest import mock
 
 from django.core.exceptions import SuspiciousOperation
 from django.test.utils import override_settings
@@ -62,7 +65,33 @@ def test_authentication_getter_existing_user_via_email(
     assert user == db_user
 
 
-def test_authentication_getter_existing_user_no_fallback_to_email(
+def test_authentication_getter_email_none(monkeypatch):
+    """
+    If no user is found with the sub and no email is provided, a new user should be created.
+    """
+
+    klass = OIDCAuthenticationBackend()
+    db_user = UserFactory(email=None)
+
+    def get_userinfo_mocked(*args):
+        user_info = {"sub": "123"}
+        if random.choice([True, False]):
+            user_info["email"] = None
+        return user_info
+
+    monkeypatch.setattr(OIDCAuthenticationBackend, "get_userinfo", get_userinfo_mocked)
+
+    user = klass.get_or_create_user(
+        access_token="test-token", id_token=None, payload=None
+    )
+
+    # Since the sub and email didn't match, it should create a new user
+    assert models.User.objects.count() == 2
+    assert user != db_user
+    assert user.sub == "123"
+
+
+def test_authentication_getter_existing_user_no_fallback_to_email_allow_duplicate(
     settings, monkeypatch
 ):
     """
@@ -75,6 +104,7 @@ def test_authentication_getter_existing_user_no_fallback_to_email(
 
     # Set the setting to False
     settings.OIDC_FALLBACK_TO_EMAIL_FOR_IDENTIFICATION = False
+    settings.OIDC_ALLOW_DUPLICATE_EMAILS = True
 
     def get_userinfo_mocked(*args):
         return {"sub": "123", "email": db_user.email}
@@ -91,6 +121,39 @@ def test_authentication_getter_existing_user_no_fallback_to_email(
     assert user.sub == "123"
 
 
+def test_authentication_getter_existing_user_no_fallback_to_email_no_duplicate(
+    settings, monkeypatch
+):
+    """
+    When the "OIDC_FALLBACK_TO_EMAIL_FOR_IDENTIFICATION" setting is set to False,
+    the system should not match users by email, even if the email matches.
+    """
+
+    klass = OIDCAuthenticationBackend()
+    db_user = UserFactory()
+
+    # Set the setting to False
+    settings.OIDC_FALLBACK_TO_EMAIL_FOR_IDENTIFICATION = False
+    settings.OIDC_ALLOW_DUPLICATE_EMAILS = False
+
+    def get_userinfo_mocked(*args):
+        return {"sub": "123", "email": db_user.email}
+
+    monkeypatch.setattr(OIDCAuthenticationBackend, "get_userinfo", get_userinfo_mocked)
+
+    with pytest.raises(
+        SuspiciousOperation,
+        match=(
+            "We couldn't find a user with this sub but the email is already associated "
+            "with a registered user."
+        ),
+    ):
+        klass.get_or_create_user(access_token="test-token", id_token=None, payload=None)
+
+    # Since the sub doesn't match, it should not create a new user
+    assert models.User.objects.count() == 1
+
+
 def test_authentication_getter_existing_user_with_email(
     django_assert_num_queries, monkeypatch
 ):
@@ -128,11 +191,12 @@ def test_authentication_getter_existing_user_with_email(
         ("Jack", "Duy", "jack.duy@example.com"),
     ],
 )
-def test_authentication_getter_existing_user_change_fields(
+def test_authentication_getter_existing_user_change_fields_sub(
     first_name, last_name, email, django_assert_num_queries, monkeypatch
 ):
     """
-    It should update the email or name fields on the user when they change.
+    It should update the email or name fields on the user when they change
+    and the user was identified by its "sub".
     """
     klass = OIDCAuthenticationBackend()
     user = UserFactory(
@@ -162,6 +226,48 @@ def test_authentication_getter_existing_user_change_fields(
     assert user.short_name == first_name
 
 
+@pytest.mark.parametrize(
+    "first_name, last_name, email",
+    [
+        ("Jack", "Doe", "john.doe@example.com"),
+        ("John", "Duy", "john.doe@example.com"),
+    ],
+)
+def test_authentication_getter_existing_user_change_fields_email(
+    first_name, last_name, email, django_assert_num_queries, monkeypatch
+):
+    """
+    It should update the name fields on the user when they change
+    and the user was identified by its "email" as fallback.
+    """
+    klass = OIDCAuthenticationBackend()
+    user = UserFactory(
+        full_name="John Doe", short_name="John", email="john.doe@example.com"
+    )
+
+    def get_userinfo_mocked(*args):
+        return {
+            "sub": "123",
+            "email": user.email,
+            "first_name": first_name,
+            "last_name": last_name,
+        }
+
+    monkeypatch.setattr(OIDCAuthenticationBackend, "get_userinfo", get_userinfo_mocked)
+
+    # One and only one additional update query when a field has changed
+    with django_assert_num_queries(3):
+        authenticated_user = klass.get_or_create_user(
+            access_token="test-token", id_token=None, payload=None
+        )
+
+    assert user == authenticated_user
+    user.refresh_from_db()
+    assert user.email == email
+    assert user.full_name == f"{first_name:s} {last_name:s}"
+    assert user.short_name == first_name
+
+
 def test_authentication_getter_new_user_no_email(monkeypatch):
     """
     If no user matches the user's info sub, a user should be created.
@@ -213,29 +319,6 @@ def test_authentication_getter_new_user_with_email(monkeypatch):
     assert models.User.objects.count() == 1
 
 
-def test_authentication_getter_invalid_token(django_assert_num_queries, monkeypatch):
-    """The user's info doesn't contain a sub."""
-    klass = OIDCAuthenticationBackend()
-
-    def get_userinfo_mocked(*args):
-        return {
-            "test": "123",
-        }
-
-    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",
-        ),
-    ):
-        klass.get_or_create_user(access_token="test-token", id_token=None, payload=None)
-
-    assert models.User.objects.exists() is False
-
-
 @override_settings(OIDC_OP_USER_ENDPOINT="http://oidc.endpoint.test/userinfo")
 @responses.activate
 def test_authentication_get_userinfo_json_response():
@@ -341,7 +424,7 @@ def test_authentication_getter_existing_disabled_user_via_email(
     django_assert_num_queries, monkeypatch
 ):
     """
-    If an existing user does not matches the sub but matches the email and is disabled,
+    If an existing user does not match the sub but matches the email and is disabled,
     an error should be raised and a user should not be created.
     """
 
@@ -365,3 +448,102 @@ def test_authentication_getter_existing_disabled_user_via_email(
         klass.get_or_create_user(access_token="test-token", id_token=None, payload=None)
 
     assert models.User.objects.count() == 1
+
+
+# Essential claims
+
+
+def test_authentication_verify_claims_default(django_assert_num_queries, monkeypatch):
+    """The sub claim should be mandatory by default."""
+    klass = OIDCAuthenticationBackend()
+
+    def get_userinfo_mocked(*args):
+        return {
+            "test": "123",
+        }
+
+    monkeypatch.setattr(OIDCAuthenticationBackend, "get_userinfo", get_userinfo_mocked)
+
+    with (
+        django_assert_num_queries(0),
+        pytest.raises(
+            KeyError,
+            match="sub",
+        ),
+    ):
+        klass.get_or_create_user(access_token="test-token", id_token=None, payload=None)
+
+    assert models.User.objects.exists() is False
+
+
+@pytest.mark.parametrize(
+    "essential_claims, missing_claims",
+    [
+        (["email", "sub"], ["email"]),
+        (["Email", "sub"], ["Email"]),  # Case sensitivity
+    ],
+)
+@override_settings(OIDC_OP_USER_ENDPOINT="http://oidc.endpoint.test/userinfo")
+@mock.patch.object(Logger, "error")
+def test_authentication_verify_claims_essential_missing(
+    mock_logger,
+    essential_claims,
+    missing_claims,
+    django_assert_num_queries,
+    monkeypatch,
+):
+    """Ensure SuspiciousOperation is raised if essential claims are missing."""
+
+    klass = OIDCAuthenticationBackend()
+
+    def get_userinfo_mocked(*args):
+        return {
+            "sub": "123",
+            "last_name": "Doe",
+        }
+
+    monkeypatch.setattr(OIDCAuthenticationBackend, "get_userinfo", get_userinfo_mocked)
+
+    with (
+        django_assert_num_queries(0),
+        pytest.raises(
+            SuspiciousOperation,
+            match="Claims verification failed",
+        ),
+        override_settings(USER_OIDC_ESSENTIAL_CLAIMS=essential_claims),
+    ):
+        klass.get_or_create_user(access_token="test-token", id_token=None, payload=None)
+
+    assert models.User.objects.exists() is False
+    mock_logger.assert_called_once_with("Missing essential claims: %s", missing_claims)
+
+
+@override_settings(
+    OIDC_OP_USER_ENDPOINT="http://oidc.endpoint.test/userinfo",
+    USER_OIDC_ESSENTIAL_CLAIMS=["email", "last_name"],
+)
+def test_authentication_verify_claims_success(django_assert_num_queries, monkeypatch):
+    """Ensure user is authenticated when all essential claims are present."""
+
+    klass = OIDCAuthenticationBackend()
+
+    def get_userinfo_mocked(*args):
+        return {
+            "email": "john.doe@example.com",
+            "last_name": "Doe",
+            "sub": "123",
+        }
+
+    monkeypatch.setattr(OIDCAuthenticationBackend, "get_userinfo", get_userinfo_mocked)
+
+    with django_assert_num_queries(6):
+        user = klass.get_or_create_user(
+            access_token="test-token", id_token=None, payload=None
+        )
+
+    assert models.User.objects.filter(id=user.id).exists()
+
+    assert user.sub == "123"
+    assert user.full_name == "Doe"
+    assert user.short_name is None
+    assert user.email == "john.doe@example.com"

src/backend/core/tests/documents/test_api_documents_create_for_owner.py

@@ -13,6 +13,7 @@ import pytest
 from rest_framework.test import APIClient
 
 from core import factories
+from core.api.serializers import ServerCreateDocumentSerializer
 from core.models import Document, Invitation, User
 from core.services.converter_services import ConversionError, YdocConverter
 
@@ -20,7 +21,7 @@ pytestmark = pytest.mark.django_db
 
 
 @pytest.fixture
-def mock_convert_markdown():
+def mock_convert_md():
     """Mock YdocConverter.convert_markdown to return a converted content."""
     with patch.object(
         YdocConverter,
@@ -169,8 +170,11 @@ def test_api_documents_create_for_owner_invalid_sub():
 
 
 @override_settings(SERVER_TO_SERVER_API_TOKENS=["DummyToken"])
-def test_api_documents_create_for_owner_existing(mock_convert_markdown):
-    """It should be possible to create a document on behalf of a pre-existing user."""
+def test_api_documents_create_for_owner_existing(mock_convert_md):
+    """
+    It should be possible to create a document on behalf of a pre-existing user
+    by passing their sub and email.
+    """
     user = factories.UserFactory(language="en-us")
 
     data = {
@@ -189,7 +193,7 @@ def test_api_documents_create_for_owner_existing(mock_convert_markdown):
 
     assert response.status_code == 201
 
-    mock_convert_markdown.assert_called_once_with("Document content")
+    mock_convert_md.assert_called_once_with("Document content")
 
     document = Document.objects.get()
     assert response.json() == {"id": str(document.id)}
@@ -213,10 +217,10 @@ def test_api_documents_create_for_owner_existing(mock_convert_markdown):
 
 
 @override_settings(SERVER_TO_SERVER_API_TOKENS=["DummyToken"])
-def test_api_documents_create_for_owner_new_user(mock_convert_markdown):
+def test_api_documents_create_for_owner_new_user(mock_convert_md):
     """
     It should be possible to create a document on behalf of new users by
-    passing only their email address.
+    passing their unknown sub and email address.
     """
     data = {
         "title": "My Document",
@@ -234,7 +238,7 @@ def test_api_documents_create_for_owner_new_user(mock_convert_markdown):
 
     assert response.status_code == 201
 
-    mock_convert_markdown.assert_called_once_with("Document content")
+    mock_convert_md.assert_called_once_with("Document content")
 
     document = Document.objects.get()
     assert response.json() == {"id": str(document.id)}
@@ -264,8 +268,190 @@ def test_api_documents_create_for_owner_new_user(mock_convert_markdown):
     assert document.creator == user
 
 
+@override_settings(
+    SERVER_TO_SERVER_API_TOKENS=["DummyToken"],
+    OIDC_FALLBACK_TO_EMAIL_FOR_IDENTIFICATION=True,
+)
+def test_api_documents_create_for_owner_existing_user_email_no_sub_with_fallback(
+    mock_convert_md,
+):
+    """
+    It should be possible to create a document on behalf of a pre-existing user for
+    who the sub was not found if the settings allow it. This edge case should not
+    happen in a healthy OIDC federation but can be usefull if an OIDC provider modifies
+    users sub on each login for example...
+    """
+    user = factories.UserFactory(language="en-us")
+
+    data = {
+        "title": "My Document",
+        "content": "Document content",
+        "sub": "123",
+        "email": user.email,
+    }
+
+    response = APIClient().post(
+        "/api/v1.0/documents/create-for-owner/",
+        data,
+        format="json",
+        HTTP_AUTHORIZATION="Bearer DummyToken",
+    )
+
+    assert response.status_code == 201
+
+    mock_convert_md.assert_called_once_with("Document content")
+
+    document = Document.objects.get()
+    assert response.json() == {"id": str(document.id)}
+
+    assert document.title == "My Document"
+    assert document.content == "Converted document content"
+    assert document.creator == user
+    assert document.accesses.filter(user=user, role="owner").exists()
+
+    assert Invitation.objects.exists() is False
+
+    assert len(mail.outbox) == 1
+    email = mail.outbox[0]
+    assert email.to == [user.email]
+    assert email.subject == "A new document was created on your behalf!"
+    email_content = " ".join(email.body.split())
+    assert "A new document was created on your behalf!" in email_content
+    assert (
+        "You have been granted ownership of a new document: My Document"
+    ) in email_content
+
+
+@override_settings(
+    SERVER_TO_SERVER_API_TOKENS=["DummyToken"],
+    OIDC_FALLBACK_TO_EMAIL_FOR_IDENTIFICATION=False,
+    OIDC_ALLOW_DUPLICATE_EMAILS=False,
+)
+def test_api_documents_create_for_owner_existing_user_email_no_sub_no_fallback(
+    mock_convert_md,
+):
+    """
+    When a user does not match an existing sub and fallback to matching on email is
+    not allowed in settings, it should raise an error if the email is already used by
+    a registered user and duplicate emails are not allowed.
+    """
+    user = factories.UserFactory()
+
+    data = {
+        "title": "My Document",
+        "content": "Document content",
+        "sub": "123",
+        "email": user.email,
+    }
+
+    response = APIClient().post(
+        "/api/v1.0/documents/create-for-owner/",
+        data,
+        format="json",
+        HTTP_AUTHORIZATION="Bearer DummyToken",
+    )
+    assert response.status_code == 400
+    assert response.json() == {
+        "email": [
+            (
+                "We couldn't find a user with this sub but the email is already "
+                "associated with a registered user."
+            )
+        ]
+    }
+    assert mock_convert_md.called is False
+    assert Document.objects.exists() is False
+    assert Invitation.objects.exists() is False
+    assert len(mail.outbox) == 0
+
+
+@override_settings(
+    SERVER_TO_SERVER_API_TOKENS=["DummyToken"],
+    OIDC_FALLBACK_TO_EMAIL_FOR_IDENTIFICATION=False,
+    OIDC_ALLOW_DUPLICATE_EMAILS=True,
+)
+def test_api_documents_create_for_owner_new_user_no_sub_no_fallback_allow_duplicate(
+    mock_convert_md,
+):
+    """
+    When a user does not match an existing sub and fallback to matching on email is
+    not allowed in settings, it should be possible to create a new user with the same
+    email as an existing user if the settings allow it (identification is still done
+    via the sub in this case).
+    """
+    user = factories.UserFactory()
+
+    data = {
+        "title": "My Document",
+        "content": "Document content",
+        "sub": "123",
+        "email": user.email,
+    }
+
+    response = APIClient().post(
+        "/api/v1.0/documents/create-for-owner/",
+        data,
+        format="json",
+        HTTP_AUTHORIZATION="Bearer DummyToken",
+    )
+    assert response.status_code == 201
+    mock_convert_md.assert_called_once_with("Document content")
+
+    document = Document.objects.get()
+    assert response.json() == {"id": str(document.id)}
+
+    assert document.title == "My Document"
+    assert document.content == "Converted document content"
+    assert document.creator is None
+    assert document.accesses.exists() is False
+
+    invitation = Invitation.objects.get()
+    assert invitation.email == user.email
+    assert invitation.role == "owner"
+
+    assert len(mail.outbox) == 1
+    email = mail.outbox[0]
+    assert email.to == [user.email]
+    assert email.subject == "A new document was created on your behalf!"
+    email_content = " ".join(email.body.split())
+    assert "A new document was created on your behalf!" in email_content
+    assert (
+        "You have been granted ownership of a new document: My Document"
+    ) in email_content
+
+    # The creator field on the document should be set when the user is created
+    user = User.objects.create(email=user.email, password="!")
+    document.refresh_from_db()
+    assert document.creator == user
+
+
+@patch.object(ServerCreateDocumentSerializer, "_send_email_notification")
+@override_settings(SERVER_TO_SERVER_API_TOKENS=["DummyToken"], LANGUAGE_CODE="de-de")
+def test_api_documents_create_for_owner_with_default_language(
+    mock_send, mock_convert_md
+):
+    """The default language from settings should apply by default."""
+    data = {
+        "title": "My Document",
+        "content": "Document content",
+        "sub": "123",
+        "email": "john.doe@example.com",
+    }
+
+    response = APIClient().post(
+        "/api/v1.0/documents/create-for-owner/",
+        data,
+        format="json",
+        HTTP_AUTHORIZATION="Bearer DummyToken",
+    )
+    assert response.status_code == 201
+
+    mock_convert_md.assert_called_once_with("Document content")
+    assert mock_send.call_args[0][3] == "de-de"
+
+
 @override_settings(SERVER_TO_SERVER_API_TOKENS=["DummyToken"])
-def test_api_documents_create_for_owner_with_custom_language(mock_convert_markdown):
+def test_api_documents_create_for_owner_with_custom_language(mock_convert_md):
     """
     Test creating a document with a specific language.
     Useful if the remote server knows the user's language.
@@ -287,7 +473,7 @@ def test_api_documents_create_for_owner_with_custom_language(mock_convert_markdo
 
     assert response.status_code == 201
 
-    mock_convert_markdown.assert_called_once_with("Document content")
+    mock_convert_md.assert_called_once_with("Document content")
 
     assert len(mail.outbox) == 1
     email = mail.outbox[0]
@@ -302,7 +488,7 @@ def test_api_documents_create_for_owner_with_custom_language(mock_convert_markdo
 
 @override_settings(SERVER_TO_SERVER_API_TOKENS=["DummyToken"])
 def test_api_documents_create_for_owner_with_custom_subject_and_message(
-    mock_convert_markdown,
+    mock_convert_md,
 ):
     """It should be possible to customize the subject and message of the invitation email."""
     data = {
@@ -323,7 +509,7 @@ def test_api_documents_create_for_owner_with_custom_subject_and_message(
 
     assert response.status_code == 201
 
-    mock_convert_markdown.assert_called_once_with("Document content")
+    mock_convert_md.assert_called_once_with("Document content")
 
     assert len(mail.outbox) == 1
     email = mail.outbox[0]
@@ -336,11 +522,11 @@ def test_api_documents_create_for_owner_with_custom_subject_and_message(
 
 @override_settings(SERVER_TO_SERVER_API_TOKENS=["DummyToken"])
 def test_api_documents_create_for_owner_with_converter_exception(
-    mock_convert_markdown,
+    mock_convert_md,
 ):
-    """It should be possible to customize the subject and message of the invitation email."""
+    """In case of converter error, a 400 error should be raised."""
 
-    mock_convert_markdown.side_effect = ConversionError("Conversion failed")
+    mock_convert_md.side_effect = ConversionError("Conversion failed")
 
     data = {
         "title": "My Document",
@@ -357,8 +543,33 @@ def test_api_documents_create_for_owner_with_converter_exception(
         format="json",
         HTTP_AUTHORIZATION="Bearer DummyToken",
     )
+    mock_convert_md.assert_called_once_with("Document content")
 
-    mock_convert_markdown.assert_called_once_with("Document content")
+    assert response.status_code == 400
+    assert response.json() == {"content": ["Could not convert content"]}
 
-    assert response.status_code == 500
-    assert response.json() == {"detail": "could not convert content"}
+
+@override_settings(SERVER_TO_SERVER_API_TOKENS=["DummyToken"])
+def test_api_documents_create_for_owner_with_empty_content():
+    """The content should not be empty or a 400 error should be raised."""
+
+    data = {
+        "title": "My Document",
+        "content": "  ",
+        "sub": "123",
+        "email": "john.doe@example.com",
+    }
+
+    response = APIClient().post(
+        "/api/v1.0/documents/create-for-owner/",
+        data,
+        format="json",
+        HTTP_AUTHORIZATION="Bearer DummyToken",
+    )
+
+    assert response.status_code == 400
+    assert response.json() == {
+        "content": [
+            "This field may not be blank.",
+        ],
+    }

src/backend/core/tests/test_settings.py

@@ -0,0 +1,30 @@
+"""
+Unit tests for the User model
+"""
+
+import pytest
+
+from impress.settings import Base
+
+
+def test_invalid_settings_oidc_email_configuration():
+    """
+    The OIDC_FALLBACK_TO_EMAIL_FOR_IDENTIFICATION and OIDC_ALLOW_DUPLICATE_EMAILS settings
+    should not be both set to True simultaneously.
+    """
+
+    class TestSettings(Base):
+        """Fake test settings."""
+
+        OIDC_FALLBACK_TO_EMAIL_FOR_IDENTIFICATION = True
+        OIDC_ALLOW_DUPLICATE_EMAILS = True
+
+    # The validation is performed during post_setup
+    with pytest.raises(ValueError) as excinfo:
+        TestSettings().post_setup()
+
+    # Check the exception message
+    assert str(excinfo.value) == (
+        "Both OIDC_FALLBACK_TO_EMAIL_FOR_IDENTIFICATION and "
+        "OIDC_ALLOW_DUPLICATE_EMAILS cannot be set to True simultaneously. "
+    )

src/backend/impress/settings.py

@@ -474,6 +474,18 @@ class Base(Configuration):
         environ_prefix=None,
     )
 
+    # WARNING: Enabling this setting allows multiple user accounts to share the same email
+    # address. This may cause security issues and is not recommended for production use when
+    # email is activated as fallback for identification (see previous setting).
+    OIDC_ALLOW_DUPLICATE_EMAILS = values.BooleanValue(
+        default=False,
+        environ_name="OIDC_ALLOW_DUPLICATE_EMAILS",
+        environ_prefix=None,
+    )
+
+    USER_OIDC_ESSENTIAL_CLAIMS = values.ListValue(
+        default=[], environ_name="USER_OIDC_ESSENTIAL_CLAIMS", environ_prefix=None
+    )
     USER_OIDC_FIELDS_TO_FULLNAME = values.ListValue(
         default=["first_name", "last_name"],
         environ_name="USER_OIDC_FIELDS_TO_FULLNAME",
@@ -622,6 +634,15 @@ class Base(Configuration):
             with sentry_sdk.configure_scope() as scope:
                 scope.set_extra("application", "backend")
 
+        if (
+            cls.OIDC_FALLBACK_TO_EMAIL_FOR_IDENTIFICATION
+            and cls.OIDC_ALLOW_DUPLICATE_EMAILS
+        ):
+            raise ValueError(
+                "Both OIDC_FALLBACK_TO_EMAIL_FOR_IDENTIFICATION and "
+                "OIDC_ALLOW_DUPLICATE_EMAILS cannot be set to True simultaneously. "
+            )
+
 
 class Build(Base):
     """Settings used when the application is built.

src/backend/locale/de_DE/LC_MESSAGES/django.po

@@ -3,7 +3,7 @@ msgstr ""
 "Project-Id-Version: lasuite-people\n"
 "Report-Msgid-Bugs-To: \n"
 "POT-Creation-Date: 2024-12-17 15:50+0000\n"
-"PO-Revision-Date: 2024-12-17 15:53\n"
+"PO-Revision-Date: 2025-01-14 15:14\n"
 "Last-Translator: \n"
 "Language-Team: German\n"
 "Language: de_DE\n"
@@ -31,23 +31,23 @@ msgstr "Wichtige Daten"
 
 #: core/api/filters.py:16
 msgid "Creator is me"
-msgstr ""
+msgstr "Ersteller bin ich"
 
 #: core/api/filters.py:19
 msgid "Favorite"
-msgstr ""
+msgstr "Favorit"
 
 #: core/api/filters.py:22
 msgid "Title"
-msgstr ""
+msgstr "Titel"
 
 #: core/api/serializers.py:307
 msgid "A new document was created on your behalf!"
-msgstr ""
+msgstr "Ein neues Dokument wurde in Ihrem Namen erstellt!"
 
 #: core/api/serializers.py:311
 msgid "You have been granted ownership of a new document:"
-msgstr ""
+msgstr "Sie sind Besitzer eines neuen Dokuments:"
 
 #: core/api/serializers.py:414
 msgid "Body"
@@ -63,15 +63,15 @@ msgstr "Format"
 
 #: core/authentication/backends.py:57
 msgid "Invalid response format or token verification failed"
-msgstr ""
+msgstr "Ungültiges Antwortformat oder Token-Verifizierung fehlgeschlagen"
 
 #: core/authentication/backends.py:81
 msgid "User info contained no recognizable user identification"
-msgstr ""
+msgstr "Benutzerinfo enthielt keine erkennbare Benutzeridentifikation"
 
 #: core/authentication/backends.py:88
 msgid "User account is disabled"
-msgstr ""
+msgstr "Benutzerkonto ist deaktiviert"
 
 #: core/models.py:62 core/models.py:69
 msgid "Reader"
@@ -127,31 +127,31 @@ msgstr "Datum und Uhrzeit, an dem zuletzt aktualisiert wurde"
 
 #: core/models.py:135
 msgid "Enter a valid sub. This value may contain only letters, numbers, and @/./+/-/_/: characters."
-msgstr ""
+msgstr "Geben Sie eine gültige Unterseite ein. Dieser Wert darf nur Buchstaben, Zahlen und die @/./+/-/_/: Zeichen enthalten."
 
 #: core/models.py:141
 msgid "sub"
-msgstr ""
+msgstr "unter"
 
 #: core/models.py:143
 msgid "Required. 255 characters or fewer. Letters, numbers, and @/./+/-/_/: characters only."
-msgstr ""
+msgstr "Erforderlich. 255 Zeichen oder weniger. Buchstaben, Zahlen und die Zeichen @/./+/-/_/:"
 
 #: core/models.py:152
 msgid "full name"
-msgstr ""
+msgstr "Name"
 
 #: core/models.py:153
 msgid "short name"
-msgstr ""
+msgstr "Kurzbezeichnung"
 
 #: core/models.py:155
 msgid "identity email address"
-msgstr ""
+msgstr "Identitäts-E-Mail-Adresse"
 
 #: core/models.py:160
 msgid "admin email address"
-msgstr ""
+msgstr "Admin E-Mail-Adresse"
 
 #: core/models.py:167
 msgid "language"
@@ -159,35 +159,35 @@ msgstr "Sprache"
 
 #: core/models.py:168
 msgid "The language in which the user wants to see the interface."
-msgstr ""
+msgstr "Die Sprache, in der der Benutzer die Benutzeroberfläche sehen möchte."
 
 #: core/models.py:174
 msgid "The timezone in which the user wants to see times."
-msgstr ""
+msgstr "Die Zeitzone, in der der Nutzer Zeiten sehen möchte."
 
 #: core/models.py:177
 msgid "device"
-msgstr ""
+msgstr "Gerät"
 
 #: core/models.py:179
 msgid "Whether the user is a device or a real user."
-msgstr ""
+msgstr "Ob der Benutzer ein Gerät oder ein echter Benutzer ist."
 
 #: core/models.py:182
 msgid "staff status"
-msgstr ""
+msgstr "Status des Teammitgliedes"
 
 #: core/models.py:184
 msgid "Whether the user can log into this admin site."
-msgstr ""
+msgstr "Gibt an, ob der Benutzer sich in diese Admin-Seite einloggen kann."
 
 #: core/models.py:187
 msgid "active"
-msgstr ""
+msgstr "aktiviert"
 
 #: core/models.py:190
 msgid "Whether this user should be treated as active. Unselect this instead of deleting accounts."
-msgstr ""
+msgstr "Ob dieser Benutzer als aktiviert behandelt werden soll. Deaktivieren Sie diese Option, anstatt Konten zu löschen."
 
 #: core/models.py:202
 msgid "user"
@@ -216,25 +216,25 @@ msgstr "Unbenanntes Dokument"
 #: core/models.py:593
 #, python-brace-format
 msgid "{name} shared a document with you!"
-msgstr ""
+msgstr "{name} hat ein Dokument mit Ihnen geteilt!"
 
 #: core/models.py:597
 #, python-brace-format
 msgid "{name} invited you with the role \"{role}\" on the following document:"
-msgstr ""
+msgstr "{name} hat Sie mit der Rolle \"{role}\" zu folgendem Dokument eingeladen:"
 
 #: core/models.py:600
 #, python-brace-format
 msgid "{name} shared a document with you: {title}"
-msgstr ""
+msgstr "{name} hat ein Dokument mit Ihnen geteilt: {title}"
 
 #: core/models.py:623
 msgid "Document/user link trace"
-msgstr ""
+msgstr "Dokument/Benutzer Linkverfolgung"
 
 #: core/models.py:624
 msgid "Document/user link traces"
-msgstr ""
+msgstr "Dokument/Benutzer Linkverfolgung"
 
 #: core/models.py:630
 msgid "A link trace already exists for this document/user."
@@ -242,23 +242,23 @@ msgstr ""
 
 #: core/models.py:653
 msgid "Document favorite"
-msgstr ""
+msgstr "Dokumentenfavorit"
 
 #: core/models.py:654
 msgid "Document favorites"
-msgstr ""
+msgstr "Dokumentfavoriten"
 
 #: core/models.py:660
 msgid "This document is already targeted by a favorite relation instance for the same user."
-msgstr ""
+msgstr "Dieses Dokument ist bereits durch den gleichen Benutzer favorisiert worden."
 
 #: core/models.py:682
 msgid "Document/user relation"
-msgstr ""
+msgstr "Dokument/Benutzerbeziehung"
 
 #: core/models.py:683
 msgid "Document/user relations"
-msgstr ""
+msgstr "Dokument/Benutzerbeziehungen"
 
 #: core/models.py:689
 msgid "This user is already in this document."
@@ -294,101 +294,101 @@ msgstr "Ob diese Vorlage für jedermann öffentlich ist."
 
 #: core/models.py:731
 msgid "Template"
-msgstr ""
+msgstr "Vorlage"
 
 #: core/models.py:732
 msgid "Templates"
-msgstr ""
+msgstr "Vorlagen"
 
 #: core/models.py:871
 msgid "Template/user relation"
-msgstr ""
+msgstr "Vorlage/Benutzer-Beziehung"
 
 #: core/models.py:872
 msgid "Template/user relations"
-msgstr ""
+msgstr "Vorlage/Benutzerbeziehungen"
 
 #: core/models.py:878
 msgid "This user is already in this template."
-msgstr ""
+msgstr "Dieser Benutzer ist bereits in dieser Vorlage."
 
 #: core/models.py:884
 msgid "This team is already in this template."
-msgstr ""
+msgstr "Dieses Team ist bereits in diesem Template."
 
 #: core/models.py:907
 msgid "email address"
-msgstr ""
+msgstr "E-Mail-Adresse"
 
 #: core/models.py:926
 msgid "Document invitation"
-msgstr ""
+msgstr "Einladung zum Dokument"
 
 #: core/models.py:927
 msgid "Document invitations"
-msgstr ""
+msgstr "Dokumenteinladungen"
 
 #: core/models.py:944
 msgid "This email is already associated to a registered user."
-msgstr ""
+msgstr "Diese E-Mail ist bereits einem registrierten Benutzer zugeordnet."
 
 #: core/templates/mail/html/hello.html:159 core/templates/mail/text/hello.txt:3
 msgid "Company logo"
-msgstr ""
+msgstr "Unternehmens-Logo"
 
 #: core/templates/mail/html/hello.html:188 core/templates/mail/text/hello.txt:5
 #, python-format
 msgid "Hello %(name)s"
-msgstr ""
+msgstr "Guten Tag %(name)s!"
 
 #: core/templates/mail/html/hello.html:188 core/templates/mail/text/hello.txt:5
 msgid "Hello"
-msgstr ""
+msgstr "Hallo"
 
 #: core/templates/mail/html/hello.html:189 core/templates/mail/text/hello.txt:6
 msgid "Thank you very much for your visit!"
-msgstr ""
+msgstr "Vielen Dank für Ihren Besuch!"
 
 #: core/templates/mail/html/hello.html:221
 #, python-format
 msgid "This mail has been sent to %(email)s by <a href=\"%(href)s\">%(name)s</a>"
-msgstr ""
+msgstr "Diese E-Mail wurde an %(email)s von <a href=\"%(href)s\">%(name)s</a> gesendet"
 
 #: core/templates/mail/html/invitation.html:162
 #: core/templates/mail/text/invitation.txt:3
 msgid "Logo email"
-msgstr ""
+msgstr "Logo-E-Mail"
 
 #: core/templates/mail/html/invitation.html:209
 #: core/templates/mail/text/invitation.txt:10
 msgid "Open"
-msgstr ""
+msgstr "Öffnen"
 
 #: core/templates/mail/html/invitation.html:226
 #: core/templates/mail/text/invitation.txt:14
 msgid " Docs, your new essential tool for organizing, sharing and collaborating on your documents as a team. "
-msgstr ""
+msgstr " Docs, Ihr neues unentbehrliches Werkzeug für die Organisation, den Austausch und die Zusammenarbeit in Ihren Dokumenten als Team. "
 
 #: core/templates/mail/html/invitation.html:233
 #: core/templates/mail/text/invitation.txt:16
 #, python-format
 msgid " Brought to you by %(brandname)s "
-msgstr ""
+msgstr " Erstellt von %(brandname)s "
 
 #: core/templates/mail/text/hello.txt:8
 #, python-format
 msgid "This mail has been sent to %(email)s by %(name)s [%(href)s]"
-msgstr ""
+msgstr "Diese E-Mail wurde an %(email)s von %(name)s [%(href)s ] gesendet"
 
 #: impress/settings.py:236
 msgid "English"
-msgstr ""
+msgstr "Englisch"
 
 #: impress/settings.py:237
 msgid "French"
-msgstr ""
+msgstr "Französisch"
 
 #: impress/settings.py:238
 msgid "German"
-msgstr ""
+msgstr "Deutsch"
 

src/backend/pyproject.toml

@@ -7,7 +7,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "impress"
-version = "1.10.0"
+version = "2.0.1"
 authors = [{ "name" = "DINUM", "email" = "dev@mail.numerique.gouv.fr" }]
 classifiers = [
     "Development Status :: 5 - Production/Stable",
@@ -25,7 +25,7 @@ license = { file = "LICENSE" }
 readme = "README.md"
 requires-python = ">=3.12"
 dependencies = [
-    "boto3==1.35.81",
+    "boto3==1.35.90",
     "Brotli==1.1.0",
     "celery[redis]==5.4.0",
     "django-configurations==2.5.1",
@@ -47,7 +47,7 @@ dependencies = [
     "jsonschema==4.23.0",
     "markdown==3.7",
     "nested-multipart-parser==1.5.0",
-    "openai==1.57.4",
+    "openai==1.58.1",
     "psycopg[binary]==3.2.3",
     "PyJWT==2.10.1",
     "pypandoc==1.14",
@@ -73,17 +73,17 @@ dev = [
     "drf-spectacular-sidecar==2024.12.1",
     "freezegun==1.5.1",
     "ipdb==0.13.13",
-    "ipython==8.30.0",
+    "ipython==8.31.0",
     "pyfakefs==5.7.3",
     "pylint-django==2.6.1",
-    "pylint==3.3.2",
+    "pylint==3.3.3",
     "pytest-cov==6.0.0",
     "pytest-django==4.9.0",
     "pytest==8.3.4",
     "pytest-icdiff==0.9",
     "pytest-xdist==3.6.1",
     "responses==0.25.3",
-    "ruff==0.8.3",
+    "ruff==0.8.4",
     "types-requests==2.32.0.20241016",
 ]
 

src/frontend/apps/e2e/__tests__/app-impress/common.ts

@@ -36,18 +36,25 @@ export const createDoc = async (
 
     await page
       .getByRole('button', {
-        name: 'Create a new document',
+        name: 'New doc',
       })
       .click();
 
-    await page.getByRole('heading', { name: 'Untitled document' }).click();
-    await page.keyboard.type(randomDocs[i]);
-    await page.getByText('Created at ').click();
+    const input = page.getByRole('textbox', { name: 'doc title input' });
+    await input.click();
+    await input.fill(randomDocs[i]);
+    await input.blur();
   }
 
   return randomDocs;
 };
 
+export const verifyDocName = async (page: Page, docName: string) => {
+  const input = page.getByRole('textbox', { name: 'doc title input' });
+  await expect(input).toBeVisible();
+  await expect(input).toHaveText(docName);
+};
+
 export const addNewMember = async (
   page: Page,
   index: number,
@@ -60,7 +67,9 @@ export const addNewMember = async (
       response.status() === 200,
   );
 
-  const inputSearch = page.getByLabel(/Find a member to add to the document/);
+  const inputSearch = page.getByRole('combobox', {
+    name: 'Quick search input',
+  });
 
   // Select a new user
   await inputSearch.fill(fillText);
@@ -75,13 +84,9 @@ export const addNewMember = async (
   await page.getByRole('option', { name: users[index].email }).click();
 
   // Choose a role
-  await page.getByRole('combobox', { name: /Choose a role/ }).click();
-  await page.getByRole('option', { name: role }).click();
-  await page.getByRole('button', { name: 'Validate' }).click();
-
-  await expect(
-    page.getByText(`User ${users[index].email} added to the document.`),
-  ).toBeVisible();
+  await page.getByLabel('doc-role-dropdown').click();
+  await page.getByRole('button', { name: role }).click();
+  await page.getByRole('button', { name: 'Invite' }).click();
 
   return users[index].email;
 };
@@ -97,24 +102,22 @@ export const goToGridDoc = async (
   const header = page.locator('header').first();
   await header.locator('h2').getByText('Docs').click();
 
-  const datagrid = page.getByLabel('Datagrid of the documents page 1');
-  const datagridTable = datagrid.getByRole('table');
+  const docsGrid = page.getByTestId('docs-grid');
+  await expect(docsGrid).toBeVisible();
+  await expect(docsGrid.getByTestId('grid-loader')).toBeHidden();
 
-  await expect(datagrid.getByLabel('Loading data')).toBeHidden({
-    timeout: 10000,
-  });
+  const rows = docsGrid.getByRole('row');
 
-  const rows = datagridTable.getByRole('row');
   const row = title
     ? rows.filter({
         hasText: title,
       })
     : rows.nth(nthRow);
 
-  const docTitleCell = row.getByRole('cell').nth(1);
-
-  const docTitle = await docTitleCell.textContent();
+  await expect(row).toBeVisible();
 
+  const docTitleContent = row.locator('[aria-describedby="doc-title"]').first();
+  const docTitle = await docTitleContent.textContent();
   expect(docTitle).toBeDefined();
 
   await row.getByRole('link').first().click();

src/frontend/apps/e2e/__tests__/app-impress/config.spec.ts

@@ -2,7 +2,7 @@ import path from 'path';
 
 import { expect, test } from '@playwright/test';
 
-import { createDoc } from './common';
+import { createDoc, verifyDocName } from './common';
 
 const config = {
   CRISP_WEBSITE_ID: null,
@@ -129,7 +129,8 @@ test.describe('Config', () => {
       browserName,
       1,
     );
-    await expect(page.locator('h2').getByText(randomDoc[0])).toBeVisible();
+
+    await verifyDocName(page, randomDoc[0]);
 
     const webSocket = await webSocketPromise;
     expect(webSocket.url()).toContain('ws://localhost:8083/collaboration/ws/');

src/frontend/apps/e2e/__tests__/app-impress/doc-create.spec.ts

@@ -1,6 +1,12 @@
 import { expect, test } from '@playwright/test';
 
-import { createDoc, goToGridDoc, keyCloakSignIn, randomName } from './common';
+import {
+  createDoc,
+  goToGridDoc,
+  keyCloakSignIn,
+  randomName,
+  verifyDocName,
+} from './common';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/');
@@ -18,15 +24,12 @@ test.describe('Doc Create', () => {
     const header = page.locator('header').first();
     await header.locator('h2').getByText('Docs').click();
 
-    const datagrid = page.getByLabel('Datagrid of the documents page 1');
-    const datagridTable = datagrid.getByRole('table');
+    await expect(page.getByTestId('grid-loader')).toBeVisible();
 
-    await expect(datagrid.getByLabel('Loading data')).toBeHidden({
-      timeout: 10000,
-    });
-    await expect(datagridTable.getByText(docTitle)).toBeVisible({
-      timeout: 5000,
-    });
+    const docsGrid = page.getByTestId('docs-grid');
+    await expect(docsGrid).toBeVisible();
+    await expect(page.getByTestId('grid-loader')).toBeHidden();
+    await expect(docsGrid.getByText(docTitle)).toBeVisible();
   });
 });
 
@@ -64,7 +67,7 @@ test.describe('Doc Create: Not loggued', () => {
 
     await goToGridDoc(page, { title });
 
-    await expect(page.getByRole('heading', { name: title })).toBeVisible();
+    await verifyDocName(page, title);
 
     const editor = page.locator('.ProseMirror');
     await expect(editor.getByText('This is a normal text')).toBeVisible();

src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts

@@ -2,7 +2,12 @@ import path from 'path';
 
 import { expect, test } from '@playwright/test';
 
-import { createDoc, goToGridDoc, mockedDocument } from './common';
+import {
+  createDoc,
+  goToGridDoc,
+  mockedDocument,
+  verifyDocName,
+} from './common';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/');
@@ -98,7 +103,7 @@ test.describe('Doc Editor', () => {
     });
 
     const randomDoc = await createDoc(page, 'doc-editor', browserName, 1);
-    await expect(page.locator('h2').getByText(randomDoc[0])).toBeVisible();
+    await verifyDocName(page, randomDoc[0]);
 
     let webSocket = await webSocketPromise;
     expect(webSocket.url()).toContain(
@@ -116,17 +121,15 @@ test.describe('Doc Editor', () => {
 
     await page.getByRole('button', { name: 'Share' }).click();
 
-    const selectVisibility = page.getByRole('combobox', {
-      name: 'Visibility',
-    });
+    const selectVisibility = page.getByLabel('Visibility', { exact: true });
 
     // When the visibility is changed, the ws should closed the connection (backend signal)
     const wsClosePromise = webSocket.waitForEvent('close');
 
     await selectVisibility.click();
     await page
-      .getByRole('option', {
-        name: 'Authenticated',
+      .getByRole('button', {
+        name: 'Connected',
       })
       .click();
 
@@ -153,7 +156,7 @@ test.describe('Doc Editor', () => {
   }) => {
     const randomDoc = await createDoc(page, 'doc-markdown', browserName, 1);
 
-    await expect(page.locator('h2').getByText(randomDoc[0])).toBeVisible();
+    await verifyDocName(page, randomDoc[0]);
 
     const editor = page.locator('.ProseMirror');
     await editor.click();
@@ -178,7 +181,7 @@ test.describe('Doc Editor', () => {
   }) => {
     // Check the first doc
     const [firstDoc] = await createDoc(page, 'doc-switch-1', browserName, 1);
-    await expect(page.locator('h2').getByText(firstDoc)).toBeVisible();
+    await verifyDocName(page, firstDoc);
 
     const editor = page.locator('.ProseMirror');
     await editor.click();
@@ -187,7 +190,8 @@ test.describe('Doc Editor', () => {
 
     // Check the second doc
     const [secondDoc] = await createDoc(page, 'doc-switch-2', browserName, 1);
-    await expect(page.locator('h2').getByText(secondDoc)).toBeVisible();
+    await verifyDocName(page, secondDoc);
+
     await expect(editor.getByText('Hello World Doc 1')).toBeHidden();
     await editor.click();
     await editor.fill('Hello World Doc 2');
@@ -197,9 +201,18 @@ test.describe('Doc Editor', () => {
     await goToGridDoc(page, {
       title: firstDoc,
     });
-    await expect(page.locator('h2').getByText(firstDoc)).toBeVisible();
+    await verifyDocName(page, firstDoc);
     await expect(editor.getByText('Hello World Doc 2')).toBeHidden();
     await expect(editor.getByText('Hello World Doc 1')).toBeVisible();
+
+    await page
+      .getByRole('button', {
+        name: 'New doc',
+      })
+      .click();
+
+    await expect(editor.getByText('Hello World Doc 1')).toBeHidden();
+    await expect(editor.getByText('Hello World Doc 2')).toBeHidden();
   });
 
   test('it saves the doc when we change pages', async ({
@@ -208,7 +221,7 @@ test.describe('Doc Editor', () => {
   }) => {
     // Check the first doc
     const [doc] = await createDoc(page, 'doc-saves-change', browserName, 1);
-    await expect(page.locator('h2').getByText(doc)).toBeVisible();
+    await verifyDocName(page, doc);
 
     const editor = page.locator('.ProseMirror');
     await editor.click();
@@ -219,7 +232,7 @@ test.describe('Doc Editor', () => {
       nthRow: 2,
     });
 
-    await expect(page.locator('h2').getByText(secondDoc)).toBeVisible();
+    await verifyDocName(page, secondDoc);
 
     await goToGridDoc(page, {
       title: doc,
@@ -233,8 +246,9 @@ test.describe('Doc Editor', () => {
     test.skip(browserName === 'webkit', 'This test is very flaky with webkit');
 
     // Check the first doc
-    const [doc] = await createDoc(page, 'doc-quit-1', browserName, 1);
-    await expect(page.locator('h2').getByText(doc)).toBeVisible();
+    const doc = await goToGridDoc(page);
+
+    await verifyDocName(page, doc);
 
     const editor = page.locator('.ProseMirror');
     await editor.click();
@@ -267,9 +281,10 @@ test.describe('Doc Editor', () => {
 
     await goToGridDoc(page);
 
-    await expect(
-      page.getByText('Read only, you cannot edit this document.'),
-    ).toBeVisible();
+    const card = page.getByLabel('It is the card information');
+    await expect(card).toBeVisible();
+
+    await expect(card.getByText('Reader')).toBeVisible();
   });
 
   test('it adds an image to the doc editor', async ({ page, browserName }) => {

src/frontend/apps/e2e/__tests__/app-impress/doc-export.spec.ts

@@ -3,13 +3,44 @@ import cs from 'convert-stream';
 import jsdom from 'jsdom';
 import pdf from 'pdf-parse';
 
-import { createDoc } from './common';
+import { createDoc, verifyDocName } from './common';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/');
 });
 
 test.describe('Doc Export', () => {
+  test('it check if all elements are visible', async ({
+    page,
+    browserName,
+  }) => {
+    await createDoc(page, 'doc-editor', browserName, 1);
+    await page
+      .getByRole('button', {
+        name: 'download',
+      })
+      .click();
+
+    await expect(
+      page
+        .locator('div')
+        .filter({ hasText: /^Download$/ })
+        .first(),
+    ).toBeVisible();
+    await expect(
+      page.getByText(
+        'Upload your docs to a Microsoft Word, Open Office or PDF document',
+      ),
+    ).toBeVisible();
+    await expect(
+      page.getByRole('combobox', { name: 'Template' }),
+    ).toBeVisible();
+    await expect(page.getByRole('combobox', { name: 'Format' })).toBeVisible();
+    await expect(
+      page.getByRole('button', { name: 'Close the modal' }),
+    ).toBeVisible();
+    await expect(page.getByRole('button', { name: 'Download' })).toBeVisible();
+  });
   test('it converts the doc to pdf with a template integrated', async ({
     page,
     browserName,
@@ -20,15 +51,14 @@ test.describe('Doc Export', () => {
       return download.suggestedFilename().includes(`${randomDoc}.pdf`);
     });
 
-    await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
+    await verifyDocName(page, randomDoc);
 
     await page.locator('.ProseMirror.bn-editor').click();
     await page.locator('.ProseMirror.bn-editor').fill('Hello World');
 
-    await page.getByLabel('Open the document options').click();
     await page
       .getByRole('button', {
-        name: 'Export',
+        name: 'download',
       })
       .click();
 
@@ -57,19 +87,19 @@ test.describe('Doc Export', () => {
       return download.suggestedFilename().includes(`${randomDoc}.docx`);
     });
 
-    await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
+    await verifyDocName(page, randomDoc);
 
     await page.locator('.ProseMirror.bn-editor').click();
     await page.locator('.ProseMirror.bn-editor').fill('Hello World');
 
-    await page.getByLabel('Open the document options').click();
     await page
       .getByRole('button', {
-        name: 'Export',
+        name: 'download',
       })
       .click();
 
-    await page.getByText('Docx').click();
+    await page.getByRole('combobox', { name: 'Format' }).click();
+    await page.getByRole('option', { name: 'Word / Open Office' }).click();
 
     await page
       .getByRole('button', {
@@ -97,7 +127,7 @@ test.describe('Doc Export', () => {
       await route.continue();
     });
 
-    await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
+    await verifyDocName(page, randomDoc);
 
     await page.locator('.bn-block-outer').last().fill('Hello World');
     await page.locator('.bn-block-outer').last().click();
@@ -190,10 +220,9 @@ test.describe('Doc Export', () => {
       .click();
 
     // Download
-    await page.getByLabel('Open the document options').click();
     await page
       .getByRole('button', {
-        name: 'Export',
+        name: 'download',
       })
       .click();
 

src/frontend/apps/e2e/__tests__/app-impress/doc-favorite.spec.ts

@@ -0,0 +1,75 @@
+import { expect, test } from '@playwright/test';
+
+import { createDoc, verifyDocName } from './common';
+
+type SmallDoc = {
+  id: string;
+  title: string;
+};
+
+test.describe('Document favorite', () => {
+  test('it check the favorite workflow', async ({ page, browserName }) => {
+    const id = Math.random().toString(7);
+    await page.goto('/');
+
+    // Create document
+    const createdDoc = await createDoc(page, `Doc ${id}`, browserName, 1);
+    await verifyDocName(page, createdDoc[0]);
+
+    // Reload page
+    await page.reload();
+    await page.goto('/');
+
+    // Get all documents
+    let docs: SmallDoc[] = [];
+    const response = await page.waitForResponse(
+      (response) =>
+        response.url().endsWith('documents/?page=1') &&
+        response.status() === 200,
+    );
+    const result = await response.json();
+    docs = result.results as SmallDoc[];
+    const docsGrid = page.getByTestId('docs-grid');
+    await docsGrid.getByRole('heading', { name: 'All docs' }).click();
+    await expect(docsGrid.getByText(`Doc ${id}`)).toBeVisible();
+    const doc = docs.find((doc) => doc.title === createdDoc[0]) as SmallDoc;
+
+    // Check document
+    expect(doc).not.toBeUndefined();
+    expect(doc?.title).toBe(createdDoc[0]);
+
+    // Open document actions
+    const button = docsGrid.getByTestId(`docs-grid-actions-button-${doc.id}`);
+    await expect(button).toBeVisible();
+    await button.click();
+
+    // Pin document
+    const pinButton = page.getByTestId(`docs-grid-actions-pin-${docs[0].id}`);
+    await expect(pinButton).toBeVisible();
+    await pinButton.click();
+
+    // Check response
+    const responsePin = await page.waitForResponse(
+      (response) =>
+        response.url().includes(`documents/${doc.id}/favorite/`) &&
+        response.status() === 201,
+    );
+    expect(responsePin.ok()).toBeTruthy();
+
+    // Check left panel favorites
+    const leftPanelFavorites = page.getByTestId('left-panel-favorites');
+    await expect(leftPanelFavorites).toBeVisible();
+    await expect(leftPanelFavorites.getByText(`Doc ${id}`)).toBeVisible();
+
+    //
+    await button.click();
+    const unpinButton = page.getByTestId(
+      `docs-grid-actions-unpin-${docs[0].id}`,
+    );
+    await expect(unpinButton).toBeVisible();
+    await unpinButton.click();
+
+    // Check left panel favorites
+    await expect(leftPanelFavorites.getByText(`Doc ${id}`)).toBeHidden();
+  });
+});

src/frontend/apps/e2e/__tests__/app-impress/doc-grid.spec.ts

@@ -1,264 +1,14 @@
 import { expect, test } from '@playwright/test';
 
+type SmallDoc = {
+  id: string;
+  title: string;
+};
+
 test.beforeEach(async ({ page }) => {
   await page.goto('/');
 });
 
-test.describe('Documents Grid', () => {
-  test('checks all the elements are visible', async ({ page }) => {
-    await expect(page.locator('h2').getByText('Documents')).toBeVisible();
-
-    const datagrid = page
-      .getByLabel('Datagrid of the documents page 1')
-      .getByRole('table');
-
-    const thead = datagrid.locator('thead');
-    await expect(thead.getByText(/Document name/i)).toBeVisible();
-    await expect(thead.getByText(/Created at/i)).toBeVisible();
-    await expect(thead.getByText(/Updated at/i)).toBeVisible();
-    await expect(thead.getByText(/Your role/i)).toBeVisible();
-    await expect(thead.getByText(/Members/i)).toBeVisible();
-
-    const row1 = datagrid.getByRole('row').nth(1).getByRole('cell');
-    const docName = await row1.nth(1).textContent();
-    expect(docName).toBeDefined();
-
-    const docCreatedAt = await row1.nth(2).textContent();
-    expect(docCreatedAt).toBeDefined();
-
-    const docUpdatedAt = await row1.nth(3).textContent();
-    expect(docUpdatedAt).toBeDefined();
-
-    const docRole = await row1.nth(4).textContent();
-    expect(
-      docRole &&
-        ['Administrator', 'Owner', 'Reader', 'Editor'].includes(docRole),
-    ).toBeTruthy();
-
-    const docUserNumber = await row1.nth(5).textContent();
-    expect(docUserNumber).toBeDefined();
-
-    // Open the document
-    await row1.nth(1).click();
-
-    await expect(page.locator('h2').getByText(docName!)).toBeVisible();
-  });
-
-  [
-    {
-      nameColumn: 'Document name',
-      ordering: 'title',
-      cellNumber: 1,
-      orderDefault: '',
-      orderDesc: '&ordering=-title',
-      orderAsc: '&ordering=title',
-      defaultColumn: false,
-    },
-    {
-      nameColumn: 'Created at',
-      ordering: 'created_at',
-      cellNumber: 2,
-      orderDefault: '',
-      orderDesc: '&ordering=-created_at',
-      orderAsc: '&ordering=created_at',
-      defaultColumn: false,
-    },
-    {
-      nameColumn: 'Updated at',
-      ordering: 'updated_at',
-      cellNumber: 3,
-      orderDefault: '&ordering=-updated_at',
-      orderDesc: '&ordering=updated_at',
-      orderAsc: '',
-      defaultColumn: true,
-    },
-  ].forEach(
-    ({
-      nameColumn,
-      ordering,
-      cellNumber,
-      orderDefault,
-      orderDesc,
-      orderAsc,
-      defaultColumn,
-    }) => {
-      test(`checks datagrid ordering ${ordering}`, async ({ page }) => {
-        const responsePromise = page.waitForResponse(
-          (response) =>
-            response.url().includes(`/documents/?page=1${orderDefault}`) &&
-            response.status() === 200,
-        );
-
-        const responsePromiseOrderingDesc = page.waitForResponse(
-          (response) =>
-            response.url().includes(`/documents/?page=1${orderDesc}`) &&
-            response.status() === 200,
-        );
-
-        const responsePromiseOrderingAsc = page.waitForResponse(
-          (response) =>
-            response.url().includes(`/documents/?page=1${orderAsc}`) &&
-            response.status() === 200,
-        );
-
-        // Checks the initial state
-        const datagrid = page.getByLabel('Datagrid of the documents page 1');
-        const datagridTable = datagrid.getByRole('table');
-        const thead = datagridTable.locator('thead');
-
-        const response = await responsePromise;
-        expect(response.ok()).toBeTruthy();
-
-        const docNameRow1 = datagridTable
-          .getByRole('row')
-          .nth(1)
-          .getByRole('cell')
-          .nth(cellNumber);
-        const docNameRow2 = datagridTable
-          .getByRole('row')
-          .nth(2)
-          .getByRole('cell')
-          .nth(cellNumber);
-
-        await expect(datagrid.getByLabel('Loading data')).toBeHidden({
-          timeout: 10000,
-        });
-
-        // Initial state
-        await expect(docNameRow1).toHaveText(/.*/);
-        await expect(docNameRow2).toHaveText(/.*/);
-        const initialDocNameRow1 = await docNameRow1.textContent();
-        const initialDocNameRow2 = await docNameRow2.textContent();
-
-        expect(initialDocNameRow1).toBeDefined();
-        expect(initialDocNameRow2).toBeDefined();
-
-        // Ordering ASC
-        await thead.getByText(nameColumn).click();
-
-        const responseOrderingAsc = await responsePromiseOrderingAsc;
-        expect(responseOrderingAsc.ok()).toBeTruthy();
-
-        await expect(datagrid.getByLabel('Loading data')).toBeHidden({
-          timeout: 10000,
-        });
-
-        await expect(docNameRow1).toHaveText(/.*/);
-        await expect(docNameRow2).toHaveText(/.*/);
-        const textDocNameRow1Asc = await docNameRow1.textContent();
-        const textDocNameRow2Asc = await docNameRow2.textContent();
-
-        const compare = (comp1: string, comp2: string) => {
-          const comparisonResult = comp1.localeCompare(comp2, 'en', {
-            caseFirst: 'false',
-            ignorePunctuation: true,
-          });
-
-          // eslint-disable-next-line playwright/no-conditional-in-test
-          return defaultColumn ? comparisonResult >= 0 : comparisonResult <= 0;
-        };
-
-        expect(
-          textDocNameRow1Asc &&
-            textDocNameRow2Asc &&
-            compare(textDocNameRow1Asc, textDocNameRow2Asc),
-        ).toBeTruthy();
-
-        // Ordering Desc
-        await thead.getByText(nameColumn).click();
-
-        const responseOrderingDesc = await responsePromiseOrderingDesc;
-        expect(responseOrderingDesc.ok()).toBeTruthy();
-
-        await expect(datagrid.getByLabel('Loading data')).toBeHidden({
-          timeout: 10000,
-        });
-
-        await expect(docNameRow1).toHaveText(/.*/);
-        await expect(docNameRow2).toHaveText(/.*/);
-        const textDocNameRow1Desc = await docNameRow1.textContent();
-        const textDocNameRow2Desc = await docNameRow2.textContent();
-
-        expect(
-          textDocNameRow1Desc &&
-            textDocNameRow2Desc &&
-            compare(textDocNameRow2Desc, textDocNameRow1Desc),
-        ).toBeTruthy();
-      });
-    },
-  );
-
-  test('checks the pagination', async ({ page }) => {
-    const responsePromisePage1 = page.waitForResponse(
-      (response) =>
-        response.url().includes(`/documents/?page=1`) &&
-        response.status() === 200,
-    );
-
-    const responsePromisePage2 = page.waitForResponse(
-      (response) =>
-        response.url().includes(`/documents/?page=2`) &&
-        response.status() === 200,
-    );
-
-    const datagridPage1 = page
-      .getByLabel('Datagrid of the documents page 1')
-      .getByRole('table');
-
-    const responsePage1 = await responsePromisePage1;
-    expect(responsePage1.ok()).toBeTruthy();
-
-    await expect(
-      datagridPage1.getByRole('row').nth(1).getByRole('cell').nth(1),
-    ).toHaveText(/.*/);
-
-    await page.getByLabel('Go to page 2').click();
-
-    const datagridPage2 = page
-      .getByLabel('Datagrid of the documents page 2')
-      .getByRole('table');
-
-    const responsePage2 = await responsePromisePage2;
-    expect(responsePage2.ok()).toBeTruthy();
-
-    await expect(
-      datagridPage2.getByRole('row').nth(1).getByRole('cell').nth(1),
-    ).toHaveText(/.*/);
-  });
-
-  test('it deletes the document', async ({ page }) => {
-    const datagrid = page
-      .getByLabel('Datagrid of the documents page 1')
-      .getByRole('table');
-
-    const docRow = datagrid.getByRole('row').nth(1).getByRole('cell');
-
-    const docName = await docRow.nth(1).textContent();
-
-    await docRow
-      .getByRole('button', {
-        name: 'Delete the document',
-      })
-      .click();
-
-    await expect(
-      page.locator('h2').getByText(`Deleting the document "${docName}"`),
-    ).toBeVisible();
-
-    await page
-      .getByRole('button', {
-        name: 'Confirm deletion',
-      })
-      .click();
-
-    await expect(
-      page.getByText('The document has been deleted.'),
-    ).toBeVisible();
-
-    await expect(datagrid.getByText(docName!)).toBeHidden();
-  });
-});
-
 test.describe('Documents Grid mobile', () => {
   test.use({ viewport: { width: 500, height: 1200 } });
 
@@ -326,19 +76,256 @@ test.describe('Documents Grid mobile', () => {
 
     await page.goto('/');
 
-    const datagrid = page.getByLabel('Datagrid of the documents page 1');
-    const tableDatagrid = datagrid.getByRole('table');
+    const docsGrid = page.getByTestId('docs-grid');
+    await expect(docsGrid).toBeVisible();
+    await expect(page.getByTestId('grid-loader')).toBeHidden();
 
-    await expect(datagrid.getByLabel('Loading data')).toBeHidden({
-      timeout: 10000,
-    });
-
-    const rows = tableDatagrid.getByRole('row');
+    const rows = docsGrid.getByRole('row');
     const row = rows.filter({
       hasText: 'My mocked document',
     });
 
-    await expect(row.getByRole('cell').nth(0)).toHaveText('My mocked document');
-    await expect(row.getByRole('cell').nth(1)).toHaveText('Public');
+    await expect(
+      row.locator('[aria-describedby="doc-title"]').nth(0),
+    ).toHaveText('My mocked document');
+  });
+});
+
+test.describe('Document grid item options', () => {
+  test('it deletes the document', async ({ page }) => {
+    let docs: SmallDoc[] = [];
+    const response = await page.waitForResponse(
+      (response) =>
+        response.url().endsWith('documents/?page=1') &&
+        response.status() === 200,
+    );
+    const result = await response.json();
+    docs = result.results as SmallDoc[];
+
+    const button = page.getByTestId(`docs-grid-actions-button-${docs[0].id}`);
+    await expect(button).toBeVisible();
+    await button.click();
+
+    const removeButton = page.getByTestId(
+      `docs-grid-actions-remove-${docs[0].id}`,
+    );
+    await expect(removeButton).toBeVisible();
+    await removeButton.click();
+
+    await expect(
+      page.getByRole('heading', { name: 'Delete a doc' }),
+    ).toBeVisible();
+
+    await page
+      .getByRole('button', {
+        name: 'Confirm deletion',
+      })
+      .click();
+
+    const refetchResponse = await page.waitForResponse(
+      (response) =>
+        response.url().endsWith('documents/?page=1') &&
+        response.status() === 200,
+    );
+
+    const resultRefetch = await refetchResponse.json();
+    expect(resultRefetch.count).toBe(result.count - 1);
+    await expect(page.getByTestId('main-layout-loader')).toBeHidden();
+
+    await expect(
+      page.getByText('The document has been deleted.'),
+    ).toBeVisible();
+    await expect(button).toBeHidden();
+  });
+
+  test("it checks if the delete option is disabled if we don't have the destroy capability", async ({
+    page,
+  }) => {
+    await page.route('*/**/api/v1.0/documents/?page=1', async (route) => {
+      await route.fulfill({
+        json: {
+          results: [
+            {
+              id: 'mocked-document-id',
+              content: '',
+              title: 'Mocked document',
+              accesses: [],
+              abilities: {
+                destroy: false, // Means not owner
+                link_configuration: false,
+                versions_destroy: false,
+                versions_list: true,
+                versions_retrieve: true,
+                accesses_manage: false, // Means not admin
+                update: false,
+                partial_update: false, // Means not editor
+                retrieve: true,
+              },
+              link_reach: 'restricted',
+              created_at: '2021-09-01T09:00:00Z',
+            },
+          ],
+        },
+      });
+    });
+    await page.goto('/');
+
+    const button = page.getByTestId(
+      `docs-grid-actions-button-mocked-document-id`,
+    );
+    await expect(button).toBeVisible();
+    await button.click();
+    const removeButton = page.getByTestId(
+      `docs-grid-actions-remove-mocked-document-id`,
+    );
+    await expect(removeButton).toBeVisible();
+    await removeButton.isDisabled();
+  });
+});
+
+test.describe('Documents filters', () => {
+  test('it checks the prebuild left panel filters', async ({ page }) => {
+    // All Docs
+    await expect(page.getByTestId('grid-loader')).toBeVisible();
+    const response = await page.waitForResponse(
+      (response) =>
+        response.url().endsWith('documents/?page=1') &&
+        response.status() === 200,
+    );
+    const result = await response.json();
+    const allCount = result.count as number;
+    await expect(page.getByTestId('grid-loader')).toBeHidden();
+
+    const allDocs = page.getByLabel('All docs');
+    const myDocs = page.getByLabel('My docs');
+    const sharedWithMe = page.getByLabel('Shared with me');
+
+    // Initial state
+    await expect(allDocs).toBeVisible();
+    await expect(allDocs).toHaveCSS('background-color', 'rgb(238, 238, 238)');
+    await expect(allDocs).toHaveAttribute('aria-selected', 'true');
+
+    await expect(myDocs).toBeVisible();
+    await expect(myDocs).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)');
+    await expect(myDocs).toHaveAttribute('aria-selected', 'false');
+
+    await expect(sharedWithMe).toBeVisible();
+    await expect(sharedWithMe).toHaveCSS(
+      'background-color',
+      'rgba(0, 0, 0, 0)',
+    );
+    await expect(sharedWithMe).toHaveAttribute('aria-selected', 'false');
+
+    await allDocs.click();
+
+    let url = new URL(page.url());
+    let target = url.searchParams.get('target');
+    expect(target).toBe('all_docs');
+
+    // My docs
+    await myDocs.click();
+    url = new URL(page.url());
+    target = url.searchParams.get('target');
+    expect(target).toBe('my_docs');
+    await expect(page.getByTestId('grid-loader')).toBeVisible();
+    const responseMyDocs = await page.waitForResponse(
+      (response) =>
+        response.url().endsWith('documents/?page=1&is_creator_me=true') &&
+        response.status() === 200,
+    );
+    const resultMyDocs = await responseMyDocs.json();
+    const countMyDocs = resultMyDocs.count as number;
+    await expect(page.getByTestId('grid-loader')).toBeHidden();
+    expect(countMyDocs).toBeLessThanOrEqual(allCount);
+
+    // Shared with me
+    await sharedWithMe.click();
+    url = new URL(page.url());
+    target = url.searchParams.get('target');
+    expect(target).toBe('shared_with_me');
+    await expect(page.getByTestId('grid-loader')).toBeVisible();
+    const responseSharedWithMe = await page.waitForResponse(
+      (response) =>
+        response.url().includes('documents/?page=1&is_creator_me=false') &&
+        response.status() === 200,
+    );
+    const resultSharedWithMe = await responseSharedWithMe.json();
+    const countSharedWithMe = resultSharedWithMe.count as number;
+    await expect(page.getByTestId('grid-loader')).toBeHidden();
+    expect(countSharedWithMe).toBeLessThanOrEqual(allCount);
+    expect(countSharedWithMe + countMyDocs).toEqual(allCount);
+  });
+});
+
+test.describe('Documents Grid', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/');
+  });
+
+  test('checks all the elements are visible', async ({ page }) => {
+    let docs: SmallDoc[] = [];
+    await expect(page.getByTestId('grid-loader')).toBeVisible();
+
+    const response = await page.waitForResponse(
+      (response) =>
+        response.url().endsWith('documents/?page=1') &&
+        response.status() === 200,
+    );
+    const result = await response.json();
+    docs = result.results as SmallDoc[];
+
+    await expect(page.getByTestId('grid-loader')).toBeHidden();
+    await expect(page.locator('h4').getByText('All docs')).toBeVisible();
+
+    const thead = page.getByTestId('docs-grid-header');
+    await expect(thead.getByText(/Name/i)).toBeVisible();
+    await expect(thead.getByText(/Updated at/i)).toBeVisible();
+
+    await Promise.all(
+      docs.map(async (doc) => {
+        await expect(
+          page.getByTestId(`docs-grid-name-${doc.id}`),
+        ).toBeVisible();
+      }),
+    );
+  });
+
+  test('checks the infinite scroll', async ({ page }) => {
+    let docs: SmallDoc[] = [];
+    const responsePromisePage1 = page.waitForResponse(
+      (response) =>
+        response.url().endsWith(`/documents/?page=1`) &&
+        response.status() === 200,
+    );
+
+    const responsePromisePage2 = page.waitForResponse(
+      (response) =>
+        response.url().endsWith(`/documents/?page=2`) &&
+        response.status() === 200,
+    );
+
+    const responsePage1 = await responsePromisePage1;
+    expect(responsePage1.ok()).toBeTruthy();
+    let result = await responsePage1.json();
+    docs = result.results as SmallDoc[];
+    await Promise.all(
+      docs.map(async (doc) => {
+        await expect(
+          page.getByTestId(`docs-grid-name-${doc.id}`),
+        ).toBeVisible();
+      }),
+    );
+
+    await page.getByTestId('infinite-scroll-trigger').scrollIntoViewIfNeeded();
+    const responsePage2 = await responsePromisePage2;
+    result = await responsePage2.json();
+    docs = result.results as SmallDoc[];
+    await Promise.all(
+      docs.map(async (doc) => {
+        await expect(
+          page.getByTestId(`docs-grid-name-${doc.id}`),
+        ).toBeVisible();
+      }),
+    );
   });
 });

src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts

@@ -6,6 +6,7 @@ import {
   mockedAccesses,
   mockedDocument,
   mockedInvitations,
+  verifyDocName,
 } from './common';
 
 test.beforeEach(async ({ page }) => {
@@ -46,6 +47,7 @@ test.describe('Doc Header', () => {
         versions_list: true,
         versions_retrieve: true,
         accesses_manage: true,
+        accesses_view: true,
         update: true,
         partial_update: true,
         retrieve: true,
@@ -59,84 +61,31 @@ test.describe('Doc Header', () => {
     const card = page.getByLabel(
       'It is the card information about the document.',
     );
-    await expect(card.locator('a').getByText('home')).toBeVisible();
-    await expect(card.locator('h2').getByText('Mocked document')).toBeVisible();
-    await expect(card.getByText('Public')).toBeVisible();
-    await expect(
-      card.getByText('Created at 09/01/2021, 11:00 AM'),
-    ).toBeVisible();
-    await expect(card.getByText('Your role: Owner')).toBeVisible();
+
+    const docTitle = card.getByRole('textbox', { name: 'doc title input' });
+    await expect(docTitle).toBeVisible();
+
+    await expect(card.getByText('Public document')).toBeVisible();
+
+    await expect(card.getByText('Owner ·')).toBeVisible();
     await expect(page.getByRole('button', { name: 'Share' })).toBeVisible();
+    await expect(page.getByRole('button', { name: 'download' })).toBeVisible();
+    await expect(
+      page.getByRole('button', { name: 'Open the document options' }),
+    ).toBeVisible();
   });
 
   test('it updates the title doc', async ({ page, browserName }) => {
-    const [randomDoc] = await createDoc(page, 'doc-update', browserName, 1);
-
-    await page.getByRole('heading', { name: randomDoc }).fill(' ');
-    await page.getByText('Created at').click();
-
-    await expect(
-      page.getByRole('heading', { name: 'Untitled document' }),
-    ).toBeVisible();
-  });
-
-  test('it updates the title doc from editor heading', async ({ page }) => {
-    await page
-      .getByRole('button', {
-        name: 'Create a new document',
-      })
-      .click();
-
-    const docHeader = page.getByLabel(
-      'It is the card information about the document.',
-    );
-
-    await expect(
-      docHeader.getByRole('heading', { name: 'Untitled document', level: 2 }),
-    ).toBeVisible();
-
-    const editor = page.locator('.ProseMirror');
-
-    await editor.locator('h1').click();
-    await page.keyboard.type('Hello World', { delay: 100 });
-
-    await expect(
-      docHeader.getByRole('heading', { name: 'Hello World', level: 2 }),
-    ).toBeVisible();
-
-    await expect(
-      page.getByText('Document title updated successfully'),
-    ).toBeVisible();
-
-    await docHeader
-      .getByRole('heading', { name: 'Hello World', level: 2 })
-      .fill('Top World');
-
-    await editor.locator('h1').fill('Super World');
-
-    await expect(
-      docHeader.getByRole('heading', { name: 'Top World', level: 2 }),
-    ).toBeVisible();
-
-    await editor.locator('h1').fill('');
-
-    // eslint-disable-next-line playwright/no-wait-for-timeout
-    await page.waitForTimeout(500);
-
-    await docHeader
-      .getByRole('heading', { name: 'Top World', level: 2 })
-      .fill(' ');
-
-    await page.getByText('Created at').click();
-
-    await expect(
-      docHeader.getByRole('heading', { name: 'Untitled  document', level: 2 }),
-    ).toBeVisible();
+    await createDoc(page, 'doc-update', browserName, 1);
+    const docTitle = page.getByRole('textbox', { name: 'doc title input' });
+    await expect(docTitle).toBeVisible();
+    await docTitle.fill('Hello World');
+    await docTitle.blur();
+    await verifyDocName(page, 'Hello World');
   });
 
   test('it deletes the doc', async ({ page, browserName }) => {
     const [randomDoc] = await createDoc(page, 'doc-delete', browserName, 1);
-    await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
 
     await page.getByLabel('Open the document options').click();
     await page
@@ -146,7 +95,13 @@ test.describe('Doc Header', () => {
       .click();
 
     await expect(
-      page.locator('h2').getByText(`Deleting the document "${randomDoc}"`),
+      page.getByRole('heading', { name: 'Delete a doc' }),
+    ).toBeVisible();
+
+    await expect(
+      page.getByText(
+        `Are you sure you want to delete the document "${randomDoc}"?`,
+      ),
     ).toBeVisible();
 
     await page
@@ -159,9 +114,7 @@ test.describe('Doc Header', () => {
       page.getByText('The document has been deleted.'),
     ).toBeVisible();
 
-    await expect(
-      page.getByRole('button', { name: 'Create a new document' }),
-    ).toBeVisible();
+    await expect(page.getByRole('button', { name: 'New do' })).toBeVisible();
 
     const row = page
       .getByLabel('Datagrid of the documents page 1')
@@ -195,16 +148,13 @@ test.describe('Doc Header', () => {
 
     await goToGridDoc(page);
 
-    await expect(
-      page.locator('h2').getByText('Mocked document'),
-    ).toHaveAttribute('contenteditable');
+    await expect(page.getByRole('button', { name: 'download' })).toBeVisible();
 
     await page.getByLabel('Open the document options').click();
 
-    await expect(page.getByRole('button', { name: 'Export' })).toBeVisible();
     await expect(
       page.getByRole('button', { name: 'Delete document' }),
-    ).toBeHidden();
+    ).toBeDisabled();
 
     // Click somewhere else to close the options
     await page.click('body', { position: { x: 0, y: 0 } });
@@ -212,34 +162,40 @@ test.describe('Doc Header', () => {
     await page.getByRole('button', { name: 'Share' }).click();
 
     const shareModal = page.getByLabel('Share modal');
+    await expect(shareModal).toBeVisible();
+    await expect(page.getByText('Share the document')).toBeVisible();
 
-    await expect(
-      shareModal.getByRole('combobox', {
-        name: 'Visibility',
-      }),
-    ).not.toHaveAttribute('disabled');
-    await expect(shareModal.getByText('Search by email')).toBeVisible();
+    await expect(page.getByPlaceholder('Type a name or email')).toBeVisible();
 
     const invitationCard = shareModal.getByLabel('List invitation card');
+    await expect(invitationCard).toBeVisible();
     await expect(
-      invitationCard.getByText('test@invitation.test'),
+      invitationCard.getByText('test@invitation.test').first(),
     ).toBeVisible();
+    await expect(invitationCard.getByLabel('doc-role-dropdown')).toBeVisible();
+
+    await invitationCard.getByRole('button', { name: 'more_horiz' }).click();
+
     await expect(
-      invitationCard.getByRole('combobox', { name: 'Role' }),
-    ).toBeEnabled();
-    await expect(
-      invitationCard.getByRole('button', {
+      page.getByRole('button', {
         name: 'delete',
       }),
     ).toBeEnabled();
+    await invitationCard.click();
 
     const memberCard = shareModal.getByLabel('List members card');
-    await expect(memberCard.getByText('test@accesses.test')).toBeVisible();
+    await expect(memberCard).toBeVisible();
     await expect(
-      memberCard.getByRole('combobox', { name: 'Role' }),
-    ).toBeEnabled();
+      memberCard.getByText('test@accesses.test').first(),
+    ).toBeVisible();
+    await expect(memberCard.getByLabel('doc-role-dropdown')).toBeVisible();
     await expect(
-      memberCard.getByRole('button', {
+      memberCard.getByRole('button', { name: 'more_horiz' }),
+    ).toBeVisible();
+    await memberCard.getByRole('button', { name: 'more_horiz' }).click();
+
+    await expect(
+      page.getByRole('button', {
         name: 'delete',
       }),
     ).toBeEnabled();
@@ -273,16 +229,12 @@ test.describe('Doc Header', () => {
 
     await goToGridDoc(page);
 
-    await expect(
-      page.locator('h2').getByText('Mocked document'),
-    ).toHaveAttribute('contenteditable');
-
+    await expect(page.getByRole('button', { name: 'download' })).toBeVisible();
     await page.getByLabel('Open the document options').click();
 
-    await expect(page.getByRole('button', { name: 'Export' })).toBeVisible();
     await expect(
       page.getByRole('button', { name: 'Delete document' }),
-    ).toBeHidden();
+    ).toBeDisabled();
 
     // Click somewhere else to close the options
     await page.click('body', { position: { x: 0, y: 0 } });
@@ -290,36 +242,24 @@ test.describe('Doc Header', () => {
     await page.getByRole('button', { name: 'Share' }).click();
 
     const shareModal = page.getByLabel('Share modal');
+    await expect(page.getByText('Share the document')).toBeVisible();
 
-    await expect(
-      shareModal.getByRole('combobox', {
-        name: 'Visibility',
-      }),
-    ).toHaveAttribute('disabled');
-    await expect(shareModal.getByText('Search by email')).toBeHidden();
+    await expect(page.getByPlaceholder('Type a name or email')).toBeHidden();
 
     const invitationCard = shareModal.getByLabel('List invitation card');
     await expect(
-      invitationCard.getByText('test@invitation.test'),
+      invitationCard.getByText('test@invitation.test').first(),
     ).toBeVisible();
+    await expect(invitationCard.getByLabel('doc-role-text')).toBeVisible();
     await expect(
-      invitationCard.getByRole('combobox', { name: 'Role' }),
-    ).toHaveAttribute('disabled');
-    await expect(
-      invitationCard.getByRole('button', {
-        name: 'delete',
-      }),
+      invitationCard.getByRole('button', { name: 'more_horiz' }),
     ).toBeHidden();
 
     const memberCard = shareModal.getByLabel('List members card');
     await expect(memberCard.getByText('test@accesses.test')).toBeVisible();
+    await expect(memberCard.getByLabel('doc-role-text')).toBeVisible();
     await expect(
-      memberCard.getByRole('combobox', { name: 'Role' }),
-    ).toHaveAttribute('disabled');
-    await expect(
-      memberCard.getByRole('button', {
-        name: 'delete',
-      }),
+      memberCard.getByRole('button', { name: 'more_horiz' }),
     ).toBeHidden();
   });
 
@@ -351,16 +291,12 @@ test.describe('Doc Header', () => {
 
     await goToGridDoc(page);
 
-    await expect(
-      page.locator('h2').getByText('Mocked document'),
-    ).not.toHaveAttribute('contenteditable');
-
+    await expect(page.getByRole('button', { name: 'download' })).toBeVisible();
     await page.getByLabel('Open the document options').click();
 
-    await expect(page.getByRole('button', { name: 'Export' })).toBeVisible();
     await expect(
       page.getByRole('button', { name: 'Delete document' }),
-    ).toBeHidden();
+    ).toBeDisabled();
 
     // Click somewhere else to close the options
     await page.click('body', { position: { x: 0, y: 0 } });
@@ -368,36 +304,24 @@ test.describe('Doc Header', () => {
     await page.getByRole('button', { name: 'Share' }).click();
 
     const shareModal = page.getByLabel('Share modal');
+    await expect(page.getByText('Share the document')).toBeVisible();
 
-    await expect(
-      shareModal.getByRole('combobox', {
-        name: 'Visibility',
-      }),
-    ).toHaveAttribute('disabled');
-    await expect(shareModal.getByText('Search by email')).toBeHidden();
+    await expect(page.getByPlaceholder('Type a name or email')).toBeHidden();
 
     const invitationCard = shareModal.getByLabel('List invitation card');
     await expect(
-      invitationCard.getByText('test@invitation.test'),
+      invitationCard.getByText('test@invitation.test').first(),
     ).toBeVisible();
+    await expect(invitationCard.getByLabel('doc-role-text')).toBeVisible();
     await expect(
-      invitationCard.getByRole('combobox', { name: 'Role' }),
-    ).toHaveAttribute('disabled');
-    await expect(
-      invitationCard.getByRole('button', {
-        name: 'delete',
-      }),
+      invitationCard.getByRole('button', { name: 'more_horiz' }),
     ).toBeHidden();
 
     const memberCard = shareModal.getByLabel('List members card');
     await expect(memberCard.getByText('test@accesses.test')).toBeVisible();
+    await expect(memberCard.getByLabel('doc-role-text')).toBeVisible();
     await expect(
-      memberCard.getByRole('combobox', { name: 'Role' }),
-    ).toHaveAttribute('disabled');
-    await expect(
-      memberCard.getByRole('button', {
-        name: 'delete',
-      }),
+      memberCard.getByRole('button', { name: 'more_horiz' }),
     ).toBeHidden();
   });
 
@@ -414,7 +338,7 @@ test.describe('Doc Header', () => {
     // create page and navigate to it
     await page
       .getByRole('button', {
-        name: 'Create a new document',
+        name: 'New doc',
       })
       .click();
 
@@ -449,7 +373,7 @@ test.describe('Doc Header', () => {
     // create page and navigate to it
     await page
       .getByRole('button', {
-        name: 'Create a new document',
+        name: 'New doc',
       })
       .click();
 
@@ -472,9 +396,31 @@ test.describe('Doc Header', () => {
     );
     const clipboardContent = await handle.jsonValue();
     expect(clipboardContent.trim()).toBe(
-      `<h1 data-level="1">Hello World</h1><p></p>`,
+      `<h1 data-level=\"1\">Hello World</h1><p></p>`,
     );
   });
+
+  test('it checks the copy link button', async ({ page }) => {
+    await mockedDocument(page, {
+      abilities: {
+        destroy: false, // Means owner
+        link_configuration: true,
+        versions_destroy: true,
+        versions_list: true,
+        versions_retrieve: true,
+        accesses_manage: false,
+        accesses_view: false,
+        update: true,
+        partial_update: true,
+        retrieve: true,
+      },
+    });
+
+    await goToGridDoc(page);
+
+    await page.getByRole('button', { name: 'Copy link' }).click();
+    await expect(page.getByText('Link Copied !')).toBeVisible();
+  });
 });
 
 test.describe('Documents Header mobile', () => {
@@ -484,6 +430,45 @@ test.describe('Documents Header mobile', () => {
     await page.goto('/');
   });
 
+  test('it checks the copy link button', async ({ page, browserName }) => {
+    // eslint-disable-next-line playwright/no-skipped-test
+    test.skip(
+      browserName === 'webkit',
+      'navigator.clipboard is not working with webkit and playwright',
+    );
+    await mockedDocument(page, {
+      abilities: {
+        destroy: false,
+        link_configuration: true,
+        versions_destroy: true,
+        versions_list: true,
+        versions_retrieve: true,
+        accesses_manage: false,
+        accesses_view: false,
+        update: true,
+        partial_update: true,
+        retrieve: true,
+      },
+    });
+
+    await goToGridDoc(page);
+
+    await expect(page.getByRole('button', { name: 'Copy link' })).toBeHidden();
+    await page.getByLabel('Open the document options').click();
+    await page.getByRole('button', { name: 'Copy link' }).click();
+    await expect(page.getByText('Link Copied !')).toBeVisible();
+    // Test that clipboard is in HTML format
+    const handle = await page.evaluateHandle(() =>
+      navigator.clipboard.readText(),
+    );
+    const clipboardContent = await handle.jsonValue();
+
+    const origin = await page.evaluate(() => window.location.origin);
+    expect(clipboardContent.trim()).toMatch(
+      `${origin}/docs/mocked-document-id/`,
+    );
+  });
+
   test('it checks the close button on Share modal', async ({ page }) => {
     await mockedDocument(page, {
       abilities: {
@@ -493,6 +478,7 @@ test.describe('Documents Header mobile', () => {
         versions_list: true,
         versions_retrieve: true,
         accesses_manage: true,
+        accesses_view: true,
         update: true,
         partial_update: true,
         retrieve: true,
@@ -501,6 +487,7 @@ test.describe('Documents Header mobile', () => {
 
     await goToGridDoc(page);
 
+    await page.getByLabel('Open the document options').click();
     await page.getByRole('button', { name: 'Share' }).click();
 
     await expect(page.getByLabel('Share modal')).toBeVisible();

src/frontend/apps/e2e/__tests__/app-impress/doc-member-create.spec.ts

@@ -16,163 +16,82 @@ test.describe('Document create member', () => {
 
     await page.getByRole('button', { name: 'Share' }).click();
 
-    const inputSearch = page.getByLabel(/Find a member to add to the document/);
+    const inputSearch = page.getByRole('combobox', {
+      name: 'Quick search input',
+    });
     await expect(inputSearch).toBeVisible();
 
-    // Select user 1
+    // Select user 1 and verify tag
     await inputSearch.fill('user');
-
     const response = await responsePromise;
     const users = (await response.json()).results as {
       email: string;
+      full_name: string;
     }[];
 
-    await page.getByRole('option', { name: users[0].email }).click();
+    const list = page.getByTestId('doc-share-add-member-list');
+    await expect(list).toBeHidden();
+    const quickSearchContent = page.getByTestId('doc-share-quick-search');
+    await quickSearchContent
+      .getByTestId(`search-user-row-${users[0].email}`)
+      .click();
 
-    // Select user 2
+    await expect(list).toBeVisible();
+    await expect(
+      list.getByTestId(`doc-share-add-member-${users[0].email}`),
+    ).toBeVisible();
+    await expect(list.getByText(`${users[0].full_name}`)).toBeVisible();
+
+    // Select user 2 and verify tag
     await inputSearch.fill('user');
-    await page.getByRole('option', { name: users[1].email }).click();
+    await quickSearchContent
+      .getByTestId(`search-user-row-${users[1].email}`)
+      .click();
 
-    // Select email
+    await expect(
+      list.getByTestId(`doc-share-add-member-${users[1].email}`),
+    ).toBeVisible();
+    await expect(list.getByText(`${users[1].full_name}`)).toBeVisible();
+
+    // Select email and verify tag
     const email = randomName('test@test.fr', browserName, 1)[0];
     await inputSearch.fill(email);
-    await page.getByRole('option', { name: email }).click();
-
-    // Check user 1 tag
-    await expect(
-      page.getByText(`${users[0].email}`, { exact: true }),
-    ).toBeVisible();
-    await expect(page.getByLabel(`Remove ${users[0].email}`)).toBeVisible();
-
-    // Check user 2 tag
-    await expect(
-      page.getByText(`${users[1].email}`, { exact: true }),
-    ).toBeVisible();
-    await expect(page.getByLabel(`Remove ${users[1].email}`)).toBeVisible();
-
-    // Check invitation tag
-    await expect(page.getByText(email, { exact: true })).toBeVisible();
-    await expect(page.getByLabel(`Remove ${email}`)).toBeVisible();
+    await quickSearchContent.getByText(email).click();
+    await expect(list.getByText(email)).toBeVisible();
 
     // Check roles are displayed
-    await page.getByRole('combobox', { name: /Choose a role/ }).click();
-
-    await expect(page.getByRole('option', { name: 'Reader' })).toBeVisible();
-    await expect(page.getByRole('option', { name: 'Editor' })).toBeVisible();
+    await list.getByLabel('doc-role-dropdown').click();
+    await expect(page.getByRole('button', { name: 'Reader' })).toBeVisible();
+    await expect(page.getByRole('button', { name: 'Editor' })).toBeVisible();
+    await expect(page.getByRole('button', { name: 'Owner' })).toBeVisible();
     await expect(
-      page.getByRole('option', { name: 'Administrator' }),
+      page.getByRole('button', { name: 'Administrator' }),
     ).toBeVisible();
-    await expect(page.getByRole('option', { name: 'Owner' })).toBeVisible();
-  });
 
-  test('it sends a new invitation and adds a new user', async ({
-    page,
-    browserName,
-  }) => {
-    const responsePromiseSearchUser = page.waitForResponse(
-      (response) =>
-        response.url().includes('/users/?q=user') && response.status() === 200,
-    );
+    // Validate
+    await page.getByRole('button', { name: 'Administrator' }).click();
+    await page.getByRole('button', { name: 'Invite' }).click();
 
-    await createDoc(page, 'user-invitation', browserName, 1);
-
-    await page.getByRole('button', { name: 'Share' }).click();
-
-    const inputSearch = page.getByLabel(/Find a member to add to the document/);
-
-    const email = randomName('test@test.fr', browserName, 1)[0];
-    await inputSearch.fill(email);
-    await page.getByRole('option', { name: email }).click();
-
-    // Select a new user
-    await inputSearch.fill('user');
-    const responseSearchUser = await responsePromiseSearchUser;
-    const [user] = (await responseSearchUser.json()).results as {
-      email: string;
-    }[];
-    await page.getByRole('option', { name: user.email }).click();
-
-    // Choose a role
-    await page.getByRole('combobox', { name: /Choose a role/ }).click();
-    await page.getByRole('option', { name: 'Administrator' }).click();
-
-    const responsePromiseCreateInvitation = page.waitForResponse(
-      (response) =>
-        response.url().includes('/invitations/') && response.status() === 201,
-    );
-    const responsePromiseAddUser = page.waitForResponse(
-      (response) =>
-        response.url().includes('/accesses/') && response.status() === 201,
-    );
-
-    await page.getByRole('button', { name: 'Validate' }).click();
-
-    // Check invitation sent
-    await expect(page.getByText(`Invitation sent to ${email}`)).toBeVisible();
-    const responseCreateInvitation = await responsePromiseCreateInvitation;
-    expect(responseCreateInvitation.ok()).toBeTruthy();
-    expect(
-      responseCreateInvitation.request().headers()['content-language'],
-    ).toBe('en-us');
+    // Check invitation added
+    await expect(
+      quickSearchContent.getByText('Pending invitations'),
+    ).toBeVisible();
+    await expect(quickSearchContent.getByText(email).first()).toBeVisible();
 
     // Check user added
+    await expect(page.getByText('Share with 2 users')).toBeVisible();
     await expect(
-      page.getByText(`User ${user.email} added to the document.`),
+      quickSearchContent.getByText(users[0].full_name).first(),
     ).toBeVisible();
-    const responseAddUser = await responsePromiseAddUser;
-    expect(responseAddUser.ok()).toBeTruthy();
-    expect(responseAddUser.request().headers()['content-language']).toBe(
-      'en-us',
-    );
-
-    const listInvitation = page.getByLabel('List invitation card');
-    await expect(listInvitation.locator('li').getByText(email)).toBeVisible();
     await expect(
-      listInvitation.locator('li').getByText('Invited'),
+      quickSearchContent.getByText(users[0].email).first(),
     ).toBeVisible();
-
-    const listMember = page.getByLabel('List members card');
-    await expect(listMember.locator('li').getByText(user.email)).toBeVisible();
-  });
-
-  test('it try to add twice the same user', async ({ page, browserName }) => {
-    const responsePromiseSearchUser = page.waitForResponse(
-      (response) =>
-        response.url().includes('/users/?q=user') && response.status() === 200,
-    );
-
-    await createDoc(page, 'user-twice', browserName, 1);
-
-    await page.getByRole('button', { name: 'Share' }).click();
-
-    const inputSearch = page.getByLabel(/Find a member to add to the document/);
-    await inputSearch.fill('user');
-    const responseSearchUser = await responsePromiseSearchUser;
-    const [user] = (await responseSearchUser.json()).results as {
-      email: string;
-    }[];
-    await page.getByRole('option', { name: user.email }).click();
-
-    // Choose a role
-    await page.getByRole('combobox', { name: /Choose a role/ }).click();
-    await page.getByRole('option', { name: 'Owner' }).click();
-
-    const responsePromiseAddMember = page.waitForResponse(
-      (response) =>
-        response.url().includes('/accesses/') && response.status() === 201,
-    );
-
-    await page.getByRole('button', { name: 'Validate' }).click();
-
     await expect(
-      page.getByText(`User ${user.email} added to the document.`),
+      quickSearchContent.getByText(users[1].email).first(),
+    ).toBeVisible();
+    await expect(
+      quickSearchContent.getByText(users[1].full_name).first(),
     ).toBeVisible();
-    const responseAddMember = await responsePromiseAddMember;
-    expect(responseAddMember.ok()).toBeTruthy();
-
-    await inputSearch.fill('user');
-    await expect(page.getByText('Loading...')).toBeHidden();
-    await expect(page.getByRole('option', { name: user.email })).toBeHidden();
   });
 
   test('it try to add twice the same invitation', async ({
@@ -183,40 +102,43 @@ test.describe('Document create member', () => {
 
     await page.getByRole('button', { name: 'Share' }).click();
 
-    const inputSearch = page.getByLabel(/Find a member to add to the document/);
+    const inputSearch = page.getByRole('combobox', {
+      name: 'Quick search input',
+    });
 
     const [email] = randomName('test@test.fr', browserName, 1);
     await inputSearch.fill(email);
-    await page.getByRole('option', { name: email }).click();
+    await page.getByTestId(`search-user-row-${email}`).click();
 
     // Choose a role
-    await page.getByRole('combobox', { name: /Choose a role/ }).click();
-    await page.getByRole('option', { name: 'Owner' }).click();
+    const container = page.getByTestId('doc-share-add-member-list');
+    await container.getByLabel('doc-role-dropdown').click();
+    await page.getByRole('button', { name: 'Owner' }).click();
 
     const responsePromiseCreateInvitation = page.waitForResponse(
       (response) =>
         response.url().includes('/invitations/') && response.status() === 201,
     );
-
-    await page.getByRole('button', { name: 'Validate' }).click();
+    await page.getByRole('button', { name: 'Invite' }).click();
 
     // Check invitation sent
-    await expect(page.getByText(`Invitation sent to ${email}`)).toBeVisible();
+
     const responseCreateInvitation = await responsePromiseCreateInvitation;
     expect(responseCreateInvitation.ok()).toBeTruthy();
 
     await inputSearch.fill(email);
-    await page.getByRole('option', { name: email }).click();
+    await page.getByTestId(`search-user-row-${email}`).click();
+
     // Choose a role
-    await page.getByRole('combobox', { name: /Choose a role/ }).click();
-    await page.getByRole('option', { name: 'Owner' }).click();
+    await container.getByLabel('doc-role-dropdown').click();
+    await page.getByRole('button', { name: 'Owner' }).click();
 
     const responsePromiseCreateInvitationFail = page.waitForResponse(
       (response) =>
         response.url().includes('/invitations/') && response.status() === 400,
     );
 
-    await page.getByRole('button', { name: 'Validate' }).click();
+    await page.getByRole('button', { name: 'Invite' }).click();
     await expect(
       page.getByText(`"${email}" is already invited to the document.`),
     ).toBeVisible();
@@ -233,31 +155,32 @@ test.describe('Document create member', () => {
 
     const header = page.locator('header').first();
     await header.getByRole('combobox').getByText('EN').click();
-    await header.getByRole('option', { name: 'FR' }).click();
+    await header.getByRole('option', { name: 'translate Français' }).click();
 
     await page.getByRole('button', { name: 'Partager' }).click();
 
-    const inputSearch = page.getByLabel(
-      /Trouver un membre à ajouter au document/,
-    );
+    const inputSearch = page.getByRole('combobox', {
+      name: 'Saisie de recherche rapide',
+    });
 
     const email = randomName('test@test.fr', browserName, 1)[0];
     await inputSearch.fill(email);
-    await page.getByRole('option', { name: email }).click();
+    await page.getByTestId(`search-user-row-${email}`).click();
 
     // Choose a role
-    await page.getByRole('combobox', { name: /Choisissez un rôle/ }).click();
-    await page.getByRole('option', { name: 'Administrateur' }).click();
+    const container = page.getByTestId('doc-share-add-member-list');
+    await container.getByLabel('doc-role-dropdown').click();
+    await page.getByRole('button', { name: 'Administrateur' }).click();
 
     const responsePromiseCreateInvitation = page.waitForResponse(
       (response) =>
         response.url().includes('/invitations/') && response.status() === 201,
     );
 
-    await page.getByRole('button', { name: 'Valider' }).click();
+    await page.getByRole('button', { name: 'Invite' }).click();
 
     // Check invitation sent
-    await expect(page.getByText(`Invitation envoyée à ${email}`)).toBeVisible();
+
     const responseCreateInvitation = await responsePromiseCreateInvitation;
     expect(responseCreateInvitation.ok()).toBeTruthy();
     expect(
@@ -270,41 +193,46 @@ test.describe('Document create member', () => {
 
     await page.getByRole('button', { name: 'Share' }).click();
 
-    const inputSearch = page.getByLabel(/Find a member to add to the document/);
+    const inputSearch = page.getByRole('combobox', {
+      name: 'Quick search input',
+    });
 
     const email = randomName('test@test.fr', browserName, 1)[0];
     await inputSearch.fill(email);
-    await page.getByRole('option', { name: email }).click();
+    await page.getByTestId(`search-user-row-${email}`).click();
 
     // Choose a role
-    await page.getByRole('combobox', { name: /Choose a role/ }).click();
-    await page.getByRole('option', { name: 'Administrator' }).click();
+    const container = page.getByTestId('doc-share-add-member-list');
+    await container.getByLabel('doc-role-dropdown').click();
+    await page.getByRole('button', { name: 'Administrator' }).click();
 
     const responsePromiseCreateInvitation = page.waitForResponse(
       (response) =>
         response.url().includes('/invitations/') && response.status() === 201,
     );
 
-    await page.getByRole('button', { name: 'Validate' }).click();
+    await page.getByRole('button', { name: 'Invite' }).click();
 
     // Check invitation sent
-    await expect(page.getByText(`Invitation sent to ${email}`)).toBeVisible();
     const responseCreateInvitation = await responsePromiseCreateInvitation;
     expect(responseCreateInvitation.ok()).toBeTruthy();
 
-    const listInvitation = page.getByLabel('List invitation card');
-    const li = listInvitation.locator('li').filter({
-      hasText: email,
-    });
-    await expect(li.getByText(email)).toBeVisible();
+    const listInvitation = page.getByTestId('doc-share-quick-search');
+    const userInvitation = listInvitation.getByTestId(
+      `doc-share-invitation-row-${email}`,
+    );
+    await expect(userInvitation).toBeVisible();
 
-    await li.getByRole('combobox', { name: /Role/ }).click();
-    await li.getByRole('option', { name: 'Reader' }).click();
-    await expect(page.getByText(`The role has been updated.`)).toBeVisible();
-    await li.getByText('delete').click();
-    await expect(
-      page.getByText(`The invitation has been removed.`),
-    ).toBeVisible();
-    await expect(listInvitation.locator('li').getByText(email)).toBeHidden();
+    await userInvitation.getByLabel('doc-role-dropdown').click();
+    await page.getByRole('button', { name: 'Reader' }).click();
+
+    const moreActions = userInvitation.getByRole('button', {
+      name: 'more_horiz',
+    });
+    await moreActions.click();
+
+    await page.getByRole('button', { name: 'Delete' }).click();
+
+    await expect(userInvitation).toBeHidden();
   });
 });

src/frontend/apps/e2e/__tests__/app-impress/doc-member-list.spec.ts

@@ -1,8 +1,6 @@
 import { expect, test } from '@playwright/test';
 
-import { waitForElementCount } from '../helpers';
-
-import { addNewMember, createDoc, goToGridDoc } from './common';
+import { addNewMember, createDoc, goToGridDoc, verifyDocName } from './common';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/');
@@ -15,10 +13,11 @@ test.describe('Document list members', () => {
       async (route) => {
         const request = route.request();
         const url = new URL(request.url());
-        const pageId = url.searchParams.get('page');
+        const pageId = url.searchParams.get('page') ?? '1';
+
         const accesses = {
-          count: 100,
-          next: 'http://anything/?page=2',
+          count: 40,
+          next: +pageId < 2 ? 'http://anything/?page=2' : undefined,
           previous: null,
           results: Array.from({ length: 20 }, (_, i) => ({
             id: `2ff1ec07-86c1-4534-a643-f41824a6c53a-${pageId}-${i}`,
@@ -47,26 +46,23 @@ test.describe('Document list members', () => {
       },
     );
 
-    await goToGridDoc(page);
+    const docTitle = await goToGridDoc(page);
+    await verifyDocName(page, docTitle);
 
     await page.getByRole('button', { name: 'Share' }).click();
 
-    const list = page.getByLabel('List members card').locator('ul');
-    await expect(list.locator('li')).toHaveCount(20);
-    await list.getByText(`impress@impress.world-page-${1}-18`).hover();
-    await page.mouse.wheel(0, 10);
+    const prefix = 'doc-share-member-row';
+    const elements = page.locator(`[data-testid^="${prefix}"]`);
+    const loadMore = page.getByTestId('load-more-members');
 
-    await waitForElementCount(list.locator('li'), 21, 10000);
+    await expect(elements).toHaveCount(20);
+    await expect(page.getByText(`Impress World Page 1-16`)).toBeVisible();
 
-    expect(await list.locator('li').count()).toBeGreaterThan(20);
-    await expect(list.getByText(`Impress World Page 1-16`)).toBeVisible();
-    await expect(
-      list.getByText(`impress@impress.world-page-1-16`),
-    ).toBeVisible();
-    await expect(list.getByText(`Impress World Page 2-15`)).toBeVisible();
-    await expect(
-      list.getByText(`impress@impress.world-page-2-15`),
-    ).toBeVisible();
+    await loadMore.click();
+    await expect(elements).toHaveCount(40);
+    await expect(page.getByText(`Impress World Page 2-15`)).toBeVisible();
+
+    await expect(loadMore).toBeHidden();
   });
 
   test('it checks a big list of invitations', async ({ page }) => {
@@ -75,10 +71,10 @@ test.describe('Document list members', () => {
       async (route) => {
         const request = route.request();
         const url = new URL(request.url());
-        const pageId = url.searchParams.get('page');
+        const pageId = url.searchParams.get('page') ?? '1';
         const accesses = {
-          count: 100,
-          next: 'http://anything/?page=2',
+          count: 40,
+          next: +pageId < 2 ? 'http://anything/?page=2' : null,
           previous: null,
           results: Array.from({ length: 20 }, (_, i) => ({
             id: `2ff1ec07-86c1-4534-a643-f41824a6c53a-${pageId}-${i}`,
@@ -104,131 +100,128 @@ test.describe('Document list members', () => {
       },
     );
 
-    await goToGridDoc(page);
-
+    const docTitle = await goToGridDoc(page);
+    await verifyDocName(page, docTitle);
     await page.getByRole('button', { name: 'Share' }).click();
 
-    const list = page.getByLabel('List invitation card').locator('ul');
-    await expect(list.locator('li')).toHaveCount(20);
-    await list.getByText(`impress@impress.world-page-${1}-18`).hover();
-    await page.mouse.wheel(0, 10);
+    const prefix = 'doc-share-invitation';
+    const elements = page.locator(`[data-testid^="${prefix}"]`);
+    const loadMore = page.getByTestId('load-more-invitations');
 
-    await waitForElementCount(list.locator('li'), 21, 10000);
+    await expect(elements).toHaveCount(20);
+    await expect(
+      page.getByText(`impress@impress.world-page-1-16`).first(),
+    ).toBeVisible();
 
-    expect(await list.locator('li').count()).toBeGreaterThan(20);
+    await loadMore.click();
+    await expect(elements).toHaveCount(40);
     await expect(
-      list.getByText(`impress@impress.world-page-1-16`),
-    ).toBeVisible();
-    await expect(
-      list.getByText(`impress@impress.world-page-2-15`),
+      page.getByText(`impress@impress.world-page-2-16`).first(),
     ).toBeVisible();
+
+    await expect(loadMore).toBeHidden();
   });
 
   test('it checks the role rules', async ({ page, browserName }) => {
     const [docTitle] = await createDoc(page, 'Doc role rules', browserName, 1);
 
-    await expect(page.locator('h2').getByText(docTitle)).toBeVisible();
+    await verifyDocName(page, docTitle);
 
     await page.getByRole('button', { name: 'Share' }).click();
-
-    const list = page.getByLabel('List members card').locator('ul');
-
-    await expect(list.getByText(`user@${browserName}.e2e`)).toBeVisible();
-
-    const soleOwner = list.getByText(
+    const list = page.getByTestId('doc-share-quick-search');
+    await expect(list).toBeVisible();
+    const currentUser = list.getByTestId(
+      `doc-share-member-row-user@chromium.e2e`,
+    );
+    const currentUserRole = currentUser.getByLabel('doc-role-dropdown');
+    await expect(currentUser).toBeVisible();
+    await expect(currentUserRole).toBeVisible();
+    await currentUserRole.click();
+    const soloOwner = page.getByText(
       `You are the sole owner of this group, make another member the group owner before you can change your own role or be removed from your document.`,
     );
+    await expect(soloOwner).toBeVisible();
+    await list.click();
+    const newUserEmail = await addNewMember(page, 0, 'Owner');
+    const newUser = list.getByTestId(`doc-share-member-row-${newUserEmail}`);
+    const newUserRoles = newUser.getByLabel('doc-role-dropdown');
 
-    await expect(soleOwner).toBeVisible();
+    await expect(newUser).toBeVisible();
 
-    const username = await addNewMember(page, 0, 'Owner');
+    await currentUserRole.click();
+    await expect(soloOwner).toBeHidden();
+    await list.click();
 
-    await expect(list.getByText(username)).toBeVisible();
-
-    await expect(soleOwner).toBeHidden();
-
-    const otherOwner = list.getByText(
+    const otherOwner = page.getByText(
       `You cannot update the role or remove other owner.`,
     );
 
+    await newUserRoles.click();
     await expect(otherOwner).toBeVisible();
+    await list.click();
 
-    const SelectRoleCurrentUser = list
-      .locator('li')
-      .filter({
-        hasText: `user@${browserName}.e2e`,
-      })
-      .getByRole('combobox', { name: 'Role' });
+    await currentUserRole.click();
+    await page.getByRole('button', { name: 'Administrator' }).click();
+    await list.click();
+    await expect(currentUserRole).toBeVisible();
 
-    await SelectRoleCurrentUser.click();
-    await page.getByRole('option', { name: 'Administrator' }).click();
-    await expect(page.getByText('The role has been updated')).toBeVisible();
-
-    const shareModal = page.getByLabel('Share modal');
-
-    // Admin still have the right to share
-    await expect(
-      shareModal.getByRole('combobox', {
-        name: 'Visibility',
-      }),
-    ).not.toHaveAttribute('disabled');
-
-    await SelectRoleCurrentUser.click();
-    await page.getByRole('option', { name: 'Reader' }).click();
-    await expect(page.getByText('The role has been updated')).toBeVisible();
-
-    // Reader does not have the right to share
-    await expect(
-      shareModal.getByRole('combobox', {
-        name: 'Visibility',
-      }),
-    ).toHaveAttribute('disabled');
+    await currentUserRole.click();
+    await page.getByRole('button', { name: 'Reader' }).click();
+    await list.click();
+    await expect(currentUserRole).toBeHidden();
   });
 
   test('it checks the delete members', async ({ page, browserName }) => {
     const [docTitle] = await createDoc(page, 'Doc role rules', browserName, 1);
 
-    await expect(page.locator('h2').getByText(docTitle)).toBeVisible();
+    await verifyDocName(page, docTitle);
 
     await page.getByRole('button', { name: 'Share' }).click();
 
-    const list = page.getByLabel('List members card').locator('ul');
+    const list = page.getByTestId('doc-share-quick-search');
 
-    const nameMyself = `user@${browserName}.e2e`;
-    await expect(list.getByText(nameMyself)).toBeVisible();
+    const emailMyself = `user@${browserName}.e2e`;
+    const mySelf = list.getByTestId(`doc-share-member-row-${emailMyself}`);
+    const mySelfMoreActions = mySelf.getByRole('button', {
+      name: 'more_horiz',
+    });
 
-    const userOwner = await addNewMember(page, 0, 'Owner');
-    await expect(list.getByText(userOwner)).toBeVisible();
+    const userOwnerEmail = await addNewMember(page, 0, 'Owner');
+    const userOwner = list.getByTestId(
+      `doc-share-member-row-${userOwnerEmail}`,
+    );
+    const userOwnerMoreActions = userOwner.getByRole('button', {
+      name: 'more_horiz',
+    });
 
-    const userReader = await addNewMember(page, 0, 'Reader');
-    await expect(list.getByText(userReader)).toBeVisible();
+    await page.getByRole('button', { name: 'close' }).first().click();
+    await page.getByRole('button', { name: 'Share' }).first().click();
 
-    await list
-      .locator('li')
-      .filter({
-        hasText: userReader,
-      })
-      .getByText('delete')
-      .click();
+    const userReaderEmail = await addNewMember(page, 0, 'Reader');
 
-    await expect(list.getByText(userReader)).toBeHidden();
+    const userReader = list.getByTestId(
+      `doc-share-member-row-${userReaderEmail}`,
+    );
+    const userReaderMoreActions = userReader.getByRole('button', {
+      name: 'more_horiz',
+    });
 
-    await list
-      .locator('li')
-      .filter({
-        hasText: nameMyself,
-      })
-      .getByText('delete')
-      .click();
+    await expect(mySelf).toBeVisible();
+    await expect(userOwner).toBeVisible();
+    await expect(userReader).toBeVisible();
 
-    await expect(list.getByText(nameMyself)).toBeHidden();
+    await expect(userOwnerMoreActions).toBeVisible();
+    await expect(userReaderMoreActions).toBeVisible();
+    await expect(mySelfMoreActions).toBeVisible();
 
+    await userReaderMoreActions.click();
+    await page.getByRole('button', { name: 'Delete' }).click();
+    await expect(userReader).toBeHidden();
+
+    await mySelfMoreActions.click();
+    await page.getByRole('button', { name: 'Delete' }).click();
     await expect(
-      page.getByText('The member has been removed from the document').first(),
+      page.getByText('You do not have permission to perform this action.'),
     ).toBeVisible();
-
-    await expect(
-      page.getByRole('heading', { name: 'Share', level: 3 }),
-    ).toBeHidden();
   });
 });

src/frontend/apps/e2e/__tests__/app-impress/doc-routing.spec.ts

@@ -9,7 +9,7 @@ test.describe('Doc Routing', () => {
 
   test('Check the presence of the meta tag noindex', async ({ page }) => {
     const buttonCreateHomepage = page.getByRole('button', {
-      name: 'Create a new document',
+      name: 'New doc',
     });
 
     await expect(buttonCreateHomepage).toBeVisible();
@@ -27,7 +27,7 @@ test.describe('Doc Routing', () => {
     await expect(page).toHaveURL('/');
 
     const buttonCreateHomepage = page.getByRole('button', {
-      name: 'Create a new document',
+      name: 'New doc',
     });
 
     await expect(buttonCreateHomepage).toBeVisible();

src/frontend/apps/e2e/__tests__/app-impress/doc-search.spec.ts

@@ -0,0 +1,114 @@
+import { expect, test } from '@playwright/test';
+import { DateTime } from 'luxon';
+
+import { createDoc, verifyDocName } from './common';
+
+type SmallDoc = {
+  id: string;
+  title: string;
+  updated_at: string;
+};
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/');
+});
+
+test.describe('Document search', () => {
+  test('it checks all elements are visible', async ({ page }) => {
+    await page.getByRole('button', { name: 'search' }).click();
+    await expect(
+      page.getByRole('img', { name: 'No active search' }),
+    ).toBeVisible();
+
+    await expect(
+      page.getByLabel('Search modal').getByText('search'),
+    ).toBeVisible();
+
+    await expect(
+      page.getByPlaceholder('Type the name of a document'),
+    ).toBeVisible();
+  });
+
+  test('it checks search for a document', async ({ page, browserName }) => {
+    const id = Math.random().toString(36).substring(7);
+
+    const doc1 = await createDoc(page, `My super ${id} doc`, browserName, 1);
+    await verifyDocName(page, doc1[0]);
+    await page.goto('/');
+    const doc2 = await createDoc(
+      page,
+      `My super ${id} very doc`,
+      browserName,
+      1,
+    );
+    await verifyDocName(page, doc2[0]);
+    await page.goto('/');
+    await page.getByRole('button', { name: 'search' }).click();
+    await page.getByPlaceholder('Type the name of a document').click();
+    await page
+      .getByPlaceholder('Type the name of a document')
+      .fill(`My super ${id}`);
+
+    let responsePromisePage = page.waitForResponse(
+      (response) =>
+        response.url().includes(`/documents/?page=1&title=My+super+${id}`) &&
+        response.status() === 200,
+    );
+    let response = await responsePromisePage;
+    let result = (await response.json()) as { results: SmallDoc[] };
+    let docs = result.results;
+    expect(docs.length).toEqual(2);
+
+    await Promise.all(
+      docs.map(async (doc: SmallDoc) => {
+        await expect(
+          page.getByTestId(`doc-search-item-${doc.id}`),
+        ).toBeVisible();
+        const updatedAt = DateTime.fromISO(doc.updated_at ?? DateTime.now())
+          .setLocale('en')
+          .toRelative();
+        await expect(
+          page.getByTestId(`doc-search-item-${doc.id}`).getByText(updatedAt!),
+        ).toBeVisible();
+      }),
+    );
+
+    const firstDoc = docs[0];
+
+    await expect(
+      page
+        .getByTestId(`doc-search-item-${firstDoc.id}`)
+        .getByText('keyboard_return'),
+    ).toBeVisible();
+
+    await page
+      .getByPlaceholder('Type the name of a document')
+      .press('ArrowDown');
+
+    const secondDoc = docs[1];
+    await expect(
+      page
+        .getByTestId(`doc-search-item-${secondDoc.id}`)
+        .getByText('keyboard_return'),
+    ).toBeVisible();
+
+    await page.getByPlaceholder('Type the name of a document').click();
+    await page
+      .getByPlaceholder('Type the name of a document')
+      .fill(`My super ${id} doc`);
+
+    responsePromisePage = page.waitForResponse(
+      (response) =>
+        response
+          .url()
+          .includes(`/documents/?page=1&title=My+super+${id}+doc`) &&
+        response.status() === 200,
+    );
+
+    response = await responsePromisePage;
+    result = (await response.json()) as { results: SmallDoc[] };
+    docs = result.results;
+
+    expect(docs.length).toEqual(1);
+  });
+});

src/frontend/apps/e2e/__tests__/app-impress/doc-table-content.spec.ts

@@ -1,6 +1,6 @@
 import { expect, test } from '@playwright/test';
 
-import { createDoc, goToGridDoc } from './common';
+import { createDoc, verifyDocName } from './common';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/');
@@ -17,123 +17,29 @@ test.describe('Doc Table Content', () => {
       1,
     );
 
-    await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
+    await verifyDocName(page, randomDoc);
 
-    await page.getByLabel('Open the document options').click();
-    await page
-      .getByRole('button', {
-        name: 'Table of contents',
-      })
-      .click();
+    await page.locator('.ProseMirror').click();
 
-    const panel = page.getByLabel('Document panel');
-    const editor = page.locator('.ProseMirror');
+    await page.keyboard.type('# Level 1\n## Level 2\n### Level 3');
 
-    await editor.locator('.bn-block-outer').last().fill('/');
-    await page.getByText('Heading 1').click();
-    await page.keyboard.type('Hello World');
-    await editor.getByText('Hello').dblclick();
-    await page.getByRole('button', { name: 'Strike' }).click();
+    const summaryContainer = page.locator('#summaryContainer');
+    await summaryContainer.click();
 
-    await page.locator('.bn-block-outer').first().click();
-    await page.locator('.bn-block-outer').last().click();
+    const level1 = summaryContainer.getByText('Level 1');
+    const level2 = summaryContainer.getByText('Level 2');
+    const level3 = summaryContainer.getByText('Level 3');
 
-    // Create space to fill the viewport
-    for (let i = 0; i < 10; i++) {
-      await page.keyboard.press('Enter');
-    }
+    await expect(level1).toBeVisible();
+    await expect(level1).toHaveCSS('padding', /4px 0px/);
+    await expect(level1).toHaveAttribute('aria-selected', 'true');
 
-    await editor.locator('.bn-block-outer').last().fill('/');
-    await page.getByText('Heading 2').click();
-    await page.keyboard.type('Super World', { delay: 100 });
+    await expect(level2).toBeVisible();
+    await expect(level2).toHaveCSS('padding-left', /14.4px/);
+    await expect(level2).toHaveAttribute('aria-selected', 'false');
 
-    await page.locator('.bn-block-outer').last().click();
-
-    // Create space to fill the viewport
-    for (let i = 0; i < 10; i++) {
-      await page.keyboard.press('Enter');
-    }
-
-    await editor.locator('.bn-block-outer').last().fill('/');
-    await page.getByText('Heading 3').click();
-    await page.keyboard.type('Another World');
-
-    const hello = panel.getByText('Hello World');
-    const superW = panel.getByText('Super World');
-    const another = panel.getByText('Another World');
-
-    await expect(hello).toBeVisible();
-    await expect(hello).toHaveCSS('font-size', /17/);
-    await expect(hello).toHaveAttribute('aria-selected', 'true');
-
-    await expect(superW).toBeVisible();
-    await expect(superW).toHaveCSS('font-size', /14/);
-    await expect(superW).toHaveAttribute('aria-selected', 'false');
-
-    await expect(another).toBeVisible();
-    await expect(another).toHaveCSS('font-size', /12/);
-    await expect(another).toHaveAttribute('aria-selected', 'false');
-
-    await hello.click();
-
-    await expect(editor.getByText('Hello World')).toBeInViewport();
-    await expect(hello).toHaveAttribute('aria-selected', 'true');
-    await expect(superW).toHaveAttribute('aria-selected', 'false');
-
-    await another.click();
-
-    await expect(editor.getByText('Hello World')).not.toBeInViewport();
-    await expect(hello).toHaveAttribute('aria-selected', 'false');
-    await expect(superW).toHaveAttribute('aria-selected', 'true');
-
-    await panel.getByText('Back to top').click();
-    await expect(editor.getByText('Hello World')).toBeInViewport();
-    await expect(hello).toHaveAttribute('aria-selected', 'true');
-    await expect(superW).toHaveAttribute('aria-selected', 'false');
-
-    await panel.getByText('Go to bottom').click();
-    await expect(editor.getByText('Hello World')).not.toBeInViewport();
-    await expect(superW).toHaveAttribute('aria-selected', 'true');
-  });
-
-  test('it checks that table contents panel is opened automaticaly if more that 2 headings', async ({
-    page,
-    browserName,
-  }) => {
-    const [randomDoc] = await createDoc(
-      page,
-      'doc-table-content',
-      browserName,
-      1,
-    );
-
-    await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
-    await expect(page.getByLabel('Open the panel')).toBeHidden();
-
-    const editor = page.locator('.ProseMirror');
-
-    await editor.locator('.bn-block-outer').last().fill('/');
-    await page.getByText('Heading 1').click();
-    await page.keyboard.type('Hello World', { delay: 100 });
-
-    await page.keyboard.press('Enter');
-
-    await editor.locator('.bn-block-outer').last().fill('/');
-    await page.getByText('Heading 2').click();
-    await page.keyboard.type('Super World', { delay: 100 });
-
-    await goToGridDoc(page, {
-      title: randomDoc,
-    });
-
-    await expect(page.getByLabel('Close the panel')).toBeVisible();
-
-    const panel = page.getByLabel('Document panel');
-    await expect(panel.getByText('Hello World')).toBeVisible();
-    await expect(panel.getByText('Super World')).toBeVisible();
-
-    await page.getByLabel('Close the panel').click();
-
-    await expect(panel).toHaveAttribute('aria-hidden', 'true');
+    await expect(level3).toBeVisible();
+    await expect(level3).toHaveCSS('padding-left', /24px/);
+    await expect(level3).toHaveAttribute('aria-selected', 'false');
   });
 });

src/frontend/apps/e2e/__tests__/app-impress/doc-version.spec.ts

@@ -1,6 +1,11 @@
 import { expect, test } from '@playwright/test';
 
-import { createDoc, goToGridDoc, mockedDocument } from './common';
+import {
+  createDoc,
+  goToGridDoc,
+  mockedDocument,
+  verifyDocName,
+} from './common';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/');
@@ -10,7 +15,7 @@ test.describe('Doc Version', () => {
   test('it displays the doc versions', async ({ page, browserName }) => {
     const [randomDoc] = await createDoc(page, 'doc-version', browserName, 1);
 
-    await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
+    await verifyDocName(page, randomDoc);
 
     await page.getByLabel('Open the document options').click();
     await page
@@ -18,24 +23,29 @@ test.describe('Doc Version', () => {
         name: 'Version history',
       })
       .click();
+    await expect(page.getByText('History', { exact: true })).toBeVisible();
 
-    const panel = page.getByLabel('Document panel');
+    const modal = page.getByLabel('version history modal');
+    const panel = modal.getByLabel('version list');
+    await expect(panel).toBeVisible();
+    await expect(modal.getByText('No versions')).toBeVisible();
 
-    await expect(panel.getByText('Current version')).toBeVisible();
-    expect(await panel.locator('li').count()).toBe(1);
-
-    await page.locator('.ProseMirror.bn-editor').click();
-    await page.locator('.ProseMirror.bn-editor').last().fill('Hello World');
+    const editor = page.locator('.ProseMirror');
+    await modal.getByRole('button', { name: 'close' }).click();
+    await editor.click();
+    await page.keyboard.type('# Hello World');
 
     await goToGridDoc(page, {
       title: randomDoc,
     });
 
-    await expect(page.getByText('Hello World')).toBeVisible();
+    await expect(
+      page.getByRole('heading', { name: 'Hello World' }),
+    ).toBeVisible();
 
     await page
       .locator('.ProseMirror .bn-block')
-      .getByText('Hello World')
+      .getByRole('heading', { name: 'Hello World' })
       .fill('It will create a version');
 
     await goToGridDoc(page, {
@@ -43,7 +53,9 @@ test.describe('Doc Version', () => {
     });
 
     await expect(page.getByText('Hello World')).toBeHidden();
-    await expect(page.getByText('It will create a version')).toBeVisible();
+    await expect(
+      page.getByRole('heading', { name: 'It will create a version' }),
+    ).toBeVisible();
 
     await page.getByLabel('Open the document options').click();
     await page
@@ -52,19 +64,15 @@ test.describe('Doc Version', () => {
       })
       .click();
 
-    await expect(panel.getByText('Current version')).toBeVisible();
-    expect(await panel.locator('li').count()).toBe(2);
+    await expect(panel).toBeVisible();
+    await expect(page.getByText('History', { exact: true })).toBeVisible();
+    await expect(page.getByRole('status')).toBeHidden();
+    const items = await panel.locator('.version-item').all();
+    expect(items.length).toBe(1);
+    await items[0].click();
 
-    await panel.locator('li').nth(1).click();
-    await expect(
-      page.getByText('Read only, you cannot edit document versions.'),
-    ).toBeVisible();
-    await expect(page.getByText('Hello World')).toBeVisible();
-    await expect(page.getByText('It will create a version')).toBeHidden();
-
-    await panel.getByText('Current version').click();
-    await expect(page.getByText('Hello World')).toBeHidden();
-    await expect(page.getByText('It will create a version')).toBeVisible();
+    await expect(modal.getByText('Hello World')).toBeVisible();
+    await expect(modal.getByText('It will create a version')).toBeHidden();
   });
 
   test('it does not display the doc versions if not allowed', async ({
@@ -79,24 +87,17 @@ test.describe('Doc Version', () => {
 
     await goToGridDoc(page);
 
-    await expect(page.locator('h2').getByText('Mocked document')).toBeVisible();
+    await verifyDocName(page, 'Mocked document');
 
     await page.getByLabel('Open the document options').click();
     await expect(
       page.getByRole('button', { name: 'Version history' }),
-    ).toBeHidden();
-
-    await page.getByRole('button', { name: 'Table of content' }).click();
-
-    await expect(
-      page.getByLabel('Document panel').getByText('Versions'),
-    ).toBeHidden();
+    ).toBeDisabled();
   });
 
   test('it restores the doc version', async ({ page, browserName }) => {
     const [randomDoc] = await createDoc(page, 'doc-version', browserName, 1);
-
-    await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
+    await verifyDocName(page, randomDoc);
 
     await page.locator('.bn-block-outer').last().click();
     await page.locator('.bn-block-outer').last().fill('Hello');
@@ -124,84 +125,26 @@ test.describe('Doc Version', () => {
       })
       .click();
 
-    const panel = page.getByLabel('Document panel');
-    await panel.locator('li').nth(1).click();
-    await expect(page.getByText('World')).toBeHidden();
+    const modal = page.getByLabel('version history modal');
+    const panel = modal.getByLabel('version list');
+    await expect(panel).toBeVisible();
 
-    await panel.getByLabel('Open the version options').click();
-    await page.getByText('Restore the version').click();
+    await expect(page.getByText('History', { exact: true })).toBeVisible();
+    await expect(page.getByRole('status')).toBeVisible();
+    await expect(page.getByRole('status')).toBeHidden();
+    const items = await panel.locator('.version-item').all();
+    expect(items.length).toBe(1);
+    await items[0].click();
 
-    await expect(page.getByText('Restore this version?')).toBeVisible();
+    await expect(modal.getByText('World')).toBeHidden();
 
-    await page
-      .getByRole('button', {
-        name: 'Restore',
-      })
-      .click();
+    await page.getByRole('button', { name: 'Restore' }).click();
+    await expect(page.getByText('Your current document will')).toBeVisible();
+    await page.getByText('If a member is editing, his').click();
 
-    await expect(panel.locator('li')).toHaveCount(3);
+    await page.getByLabel('Restore', { exact: true }).click();
 
-    await panel.getByText('Current version').click();
     await expect(page.getByText('Hello')).toBeVisible();
     await expect(page.getByText('World')).toBeHidden();
   });
-
-  test('it restores the doc version from button title', async ({
-    page,
-    browserName,
-  }) => {
-    const [randomDoc] = await createDoc(page, 'doc-version', browserName, 1);
-
-    await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
-
-    const editor = page.locator('.ProseMirror');
-    await editor.locator('.bn-block-outer').last().click();
-    await editor.locator('.bn-block-outer').last().fill('Hello');
-
-    await goToGridDoc(page, {
-      title: randomDoc,
-    });
-
-    await expect(editor.getByText('Hello')).toBeVisible();
-    await editor.locator('.bn-block-outer').last().click();
-    await page.keyboard.press('Enter');
-    await editor.locator('.bn-block-outer').last().fill('World');
-
-    await goToGridDoc(page, {
-      title: randomDoc,
-    });
-
-    await expect(editor.getByText('World')).toBeVisible();
-
-    await page.getByLabel('Open the document options').click();
-    await page
-      .getByRole('button', {
-        name: 'Version history',
-      })
-      .click();
-
-    const panel = page.getByLabel('Document panel');
-    await panel.locator('li').nth(1).click();
-    await expect(editor.getByText('World')).toBeHidden();
-
-    await page
-      .getByRole('button', {
-        name: 'Restore this version',
-      })
-      .click();
-
-    await expect(page.getByText('Restore this version?')).toBeVisible();
-
-    await page
-      .getByRole('button', {
-        name: 'Restore',
-      })
-      .click();
-
-    await expect(panel.locator('li')).toHaveCount(3);
-
-    await panel.getByText('Current version').click();
-    await expect(editor.getByText('Hello')).toBeVisible();
-    await expect(editor.getByText('World')).toBeHidden();
-  });
 });

src/frontend/apps/e2e/__tests__/app-impress/doc-visibility.spec.ts

@@ -1,6 +1,6 @@
 import { expect, test } from '@playwright/test';
 
-import { createDoc, keyCloakSignIn } from './common';
+import { createDoc, keyCloakSignIn, verifyDocName } from './common';
 
 const browsersName = ['chromium', 'webkit', 'firefox'];
 
@@ -36,35 +36,31 @@ test.describe('Doc Visibility', () => {
 
     await page.getByRole('button', { name: 'Share' }).click();
 
-    const selectVisibility = page.getByRole('combobox', {
-      name: 'Visibility',
-    });
+    const selectVisibility = page.getByLabel('Visibility', { exact: true });
 
-    await expect(selectVisibility.getByText('Restricted')).toBeVisible();
+    await expect(selectVisibility.getByText('Private')).toBeVisible();
 
     await expect(page.getByLabel('Read only')).toBeHidden();
     await expect(page.getByLabel('Can read and edit')).toBeHidden();
 
     await selectVisibility.click();
     await page
-      .getByRole('option', {
-        name: 'Authenticated',
+      .getByRole('button', {
+        name: 'Connected',
       })
       .click();
 
-    await expect(page.getByLabel('Read only')).toBeVisible();
-    await expect(page.getByLabel('Can read and edit')).toBeVisible();
+    await expect(page.getByLabel('Visibility mode')).toBeVisible();
 
     await selectVisibility.click();
 
     await page
-      .getByRole('option', {
+      .getByRole('button', {
         name: 'Public',
       })
       .click();
 
-    await expect(page.getByLabel('Read only')).toBeVisible();
-    await expect(page.getByLabel('Can read and edit')).toBeVisible();
+    await expect(page.getByLabel('Visibility mode')).toBeVisible();
   });
 });
 
@@ -85,7 +81,7 @@ test.describe('Doc Visibility: Restricted', () => {
       1,
     );
 
-    await expect(page.getByRole('heading', { name: docTitle })).toBeVisible();
+    await verifyDocName(page, docTitle);
 
     const urlDoc = page.url();
 
@@ -111,7 +107,7 @@ test.describe('Doc Visibility: Restricted', () => {
 
     const [docTitle] = await createDoc(page, 'Restricted auth', browserName, 1);
 
-    await expect(page.getByRole('heading', { name: docTitle })).toBeVisible();
+    await verifyDocName(page, docTitle);
 
     const urlDoc = page.url();
 
@@ -139,11 +135,13 @@ test.describe('Doc Visibility: Restricted', () => {
 
     const [docTitle] = await createDoc(page, 'Restricted auth', browserName, 1);
 
-    await expect(page.getByRole('heading', { name: docTitle })).toBeVisible();
+    await verifyDocName(page, docTitle);
 
     await page.getByRole('button', { name: 'Share' }).click();
 
-    const inputSearch = page.getByLabel(/Find a member to add to the document/);
+    const inputSearch = page.getByRole('combobox', {
+      name: 'Quick search input',
+    });
 
     const otherBrowser = browsersName.find((b) => b !== browserName);
     const username = `user@${otherBrowser}.e2e`;
@@ -151,14 +149,11 @@ test.describe('Doc Visibility: Restricted', () => {
     await page.getByRole('option', { name: username }).click();
 
     // Choose a role
-    await page.getByRole('combobox', { name: /Choose a role/ }).click();
-    await page.getByRole('option', { name: 'Administrator' }).click();
+    const container = page.getByTestId('doc-share-add-member-list');
+    await container.getByLabel('doc-role-dropdown').click();
+    await page.getByRole('button', { name: 'Administrator' }).click();
 
-    await page.getByRole('button', { name: 'Validate' }).click();
-
-    await expect(
-      page.getByText(`User ${username} added to the document.`),
-    ).toBeVisible();
+    await page.getByRole('button', { name: 'Invite' }).click();
 
     await page.locator('.c__modal__backdrop').click({
       position: { x: 0, y: 0 },
@@ -176,8 +171,8 @@ test.describe('Doc Visibility: Restricted', () => {
 
     await page.goto(urlDoc);
 
-    await expect(page.locator('h2').getByText(docTitle)).toBeVisible();
-    await expect(page.getByRole('button', { name: 'Share' })).toBeVisible();
+    await verifyDocName(page, docTitle);
+    await expect(page.getByLabel('Share button')).toBeVisible();
   });
 });
 
@@ -198,17 +193,14 @@ test.describe('Doc Visibility: Public', () => {
       1,
     );
 
-    await expect(page.getByRole('heading', { name: docTitle })).toBeVisible();
+    await verifyDocName(page, docTitle);
 
     await page.getByRole('button', { name: 'Share' }).click();
-    await page
-      .getByRole('combobox', {
-        name: 'Visibility',
-      })
-      .click();
+    const selectVisibility = page.getByLabel('Visibility', { exact: true });
+    await selectVisibility.click();
 
     await page
-      .getByRole('option', {
+      .getByRole('button', {
         name: 'Public',
       })
       .click();
@@ -217,22 +209,32 @@ test.describe('Doc Visibility: Public', () => {
       page.getByText('The document visibility has been updated.'),
     ).toBeVisible();
 
-    await page.getByLabel('Read only').click();
+    await page.getByLabel('Visibility mode').click();
+    await page
+      .getByRole('button', {
+        name: 'Reading',
+      })
+      .click();
 
     await expect(
       page.getByText('The document visibility has been updated.').first(),
     ).toBeVisible();
 
-    await page.locator('.c__modal__backdrop').click({
-      position: { x: 0, y: 0 },
-    });
+    await page.getByRole('button', { name: 'close' }).click();
+
+    const cardContainer = page.getByLabel(
+      'It is the card information about the document.',
+    );
+
+    await expect(cardContainer.getByTestId('public-icon')).toBeVisible();
 
     await expect(
-      page
-        .getByLabel('It is the card information about the document.')
-        .getByText('Public', { exact: true }),
+      cardContainer.getByText('Public document', { exact: true }),
     ).toBeVisible();
 
+    await expect(page.getByRole('button', { name: 'search' })).toBeVisible();
+    await expect(page.getByRole('button', { name: 'New doc' })).toBeVisible();
+
     const urlDoc = page.url();
 
     await page
@@ -246,10 +248,13 @@ test.describe('Doc Visibility: Public', () => {
     await page.goto(urlDoc);
 
     await expect(page.locator('h2').getByText(docTitle)).toBeVisible();
+    await expect(page.getByRole('button', { name: 'search' })).toBeHidden();
+    await expect(page.getByRole('button', { name: 'New doc' })).toBeHidden();
     await expect(page.getByRole('button', { name: 'Share' })).toBeHidden();
-    await expect(
-      page.getByText('Read only, you cannot edit this document'),
-    ).toBeVisible();
+    const card = page.getByLabel('It is the card information');
+    await expect(card).toBeVisible();
+
+    await expect(card.getByText('Reader')).toBeVisible();
   });
 
   test('It checks a public doc in editable mode', async ({
@@ -261,17 +266,14 @@ test.describe('Doc Visibility: Public', () => {
 
     const [docTitle] = await createDoc(page, 'Public editable', browserName, 1);
 
-    await expect(page.getByRole('heading', { name: docTitle })).toBeVisible();
+    await verifyDocName(page, docTitle);
 
     await page.getByRole('button', { name: 'Share' }).click();
-    await page
-      .getByRole('combobox', {
-        name: 'Visibility',
-      })
-      .click();
+    const selectVisibility = page.getByLabel('Visibility', { exact: true });
+    await selectVisibility.click();
 
     await page
-      .getByRole('option', {
+      .getByRole('button', {
         name: 'Public',
       })
       .click();
@@ -280,20 +282,23 @@ test.describe('Doc Visibility: Public', () => {
       page.getByText('The document visibility has been updated.'),
     ).toBeVisible();
 
-    await page.getByLabel('Can read and edit').click();
+    await page.getByLabel('Visibility mode').click();
+    await page.getByLabel('Edition').click();
 
     await expect(
       page.getByText('The document visibility has been updated.').first(),
     ).toBeVisible();
 
-    await page.locator('.c__modal__backdrop').click({
-      position: { x: 0, y: 0 },
-    });
+    await page.getByRole('button', { name: 'close' }).click();
+
+    const cardContainer = page.getByLabel(
+      'It is the card information about the document.',
+    );
+
+    await expect(cardContainer.getByTestId('public-icon')).toBeVisible();
 
     await expect(
-      page
-        .getByLabel('It is the card information about the document.')
-        .getByText('Public', { exact: true }),
+      cardContainer.getByText('Public document', { exact: true }),
     ).toBeVisible();
 
     const urlDoc = page.url();
@@ -308,11 +313,8 @@ test.describe('Doc Visibility: Public', () => {
 
     await page.goto(urlDoc);
 
-    await expect(page.locator('h2').getByText(docTitle)).toBeVisible();
+    await verifyDocName(page, docTitle);
     await expect(page.getByRole('button', { name: 'Share' })).toBeHidden();
-    await expect(
-      page.getByText('Read only, you cannot edit this document'),
-    ).toBeHidden();
   });
 });
 
@@ -333,17 +335,14 @@ test.describe('Doc Visibility: Authenticated', () => {
       1,
     );
 
-    await expect(page.getByRole('heading', { name: docTitle })).toBeVisible();
+    await verifyDocName(page, docTitle);
 
     await page.getByRole('button', { name: 'Share' }).click();
+    const selectVisibility = page.getByLabel('Visibility', { exact: true });
+    await selectVisibility.click();
     await page
-      .getByRole('combobox', {
-        name: 'Visibility',
-      })
-      .click();
-    await page
-      .getByRole('option', {
-        name: 'Authenticated',
+      .getByRole('button', {
+        name: 'Connected',
       })
       .click();
 
@@ -351,9 +350,7 @@ test.describe('Doc Visibility: Authenticated', () => {
       page.getByText('The document visibility has been updated.'),
     ).toBeVisible();
 
-    await page.locator('.c__modal__backdrop').click({
-      position: { x: 0, y: 0 },
-    });
+    await page.getByRole('button', { name: 'close' }).click();
 
     const urlDoc = page.url();
 
@@ -385,17 +382,14 @@ test.describe('Doc Visibility: Authenticated', () => {
       1,
     );
 
-    await expect(page.getByRole('heading', { name: docTitle })).toBeVisible();
+    await verifyDocName(page, docTitle);
 
     await page.getByRole('button', { name: 'Share' }).click();
+    const selectVisibility = page.getByLabel('Visibility', { exact: true });
+    await selectVisibility.click();
     await page
-      .getByRole('combobox', {
-        name: 'Visibility',
-      })
-      .click();
-    await page
-      .getByRole('option', {
-        name: 'Authenticated',
+      .getByRole('button', {
+        name: 'Connected',
       })
       .click();
 
@@ -403,9 +397,7 @@ test.describe('Doc Visibility: Authenticated', () => {
       page.getByText('The document visibility has been updated.'),
     ).toBeVisible();
 
-    await page.locator('.c__modal__backdrop').click({
-      position: { x: 0, y: 0 },
-    });
+    await page.getByRole('button', { name: 'close' }).click();
 
     const urlDoc = page.url();
 
@@ -421,20 +413,8 @@ test.describe('Doc Visibility: Authenticated', () => {
     await page.goto(urlDoc);
 
     await expect(page.locator('h2').getByText(docTitle)).toBeVisible();
-    await page.getByRole('button', { name: 'Share' }).click();
-    await expect(
-      page.getByText('Read only, you cannot edit this document'),
-    ).toBeVisible();
-
-    const shareModal = page.getByLabel('Share modal');
-
-    await expect(
-      shareModal.getByRole('combobox', {
-        name: 'Visibility',
-      }),
-    ).toHaveAttribute('disabled');
-    await expect(shareModal.getByText('Search by email')).toBeHidden();
-    await expect(shareModal.getByLabel('List members card')).toBeHidden();
+    await page.getByRole('button', { name: 'Copy link' }).click();
+    await expect(page.getByText('Link Copied !')).toBeVisible();
   });
 
   test('It checks a authenticated doc in editable mode', async ({
@@ -451,17 +431,14 @@ test.describe('Doc Visibility: Authenticated', () => {
       1,
     );
 
-    await expect(page.getByRole('heading', { name: docTitle })).toBeVisible();
+    await verifyDocName(page, docTitle);
 
     await page.getByRole('button', { name: 'Share' }).click();
+    const selectVisibility = page.getByLabel('Visibility', { exact: true });
+    await selectVisibility.click();
     await page
-      .getByRole('combobox', {
-        name: 'Visibility',
-      })
-      .click();
-    await page
-      .getByRole('option', {
-        name: 'Authenticated',
+      .getByRole('button', {
+        name: 'Connected',
       })
       .click();
 
@@ -469,23 +446,15 @@ test.describe('Doc Visibility: Authenticated', () => {
       page.getByText('The document visibility has been updated.'),
     ).toBeVisible();
 
-    await page.locator('.c__modal__backdrop').click({
-      position: { x: 0, y: 0 },
-    });
-
     const urlDoc = page.url();
-
-    await page.getByRole('button', { name: 'Share' }).click();
-
-    await page.getByLabel('Can read and edit').click();
+    await page.getByLabel('Visibility mode').click();
+    await page.getByLabel('Edition').click();
 
     await expect(
       page.getByText('The document visibility has been updated.').first(),
     ).toBeVisible();
 
-    await page.locator('.c__modal__backdrop').click({
-      position: { x: 0, y: 0 },
-    });
+    await page.getByRole('button', { name: 'close' }).click();
 
     await page
       .getByRole('button', {
@@ -498,20 +467,8 @@ test.describe('Doc Visibility: Authenticated', () => {
 
     await page.goto(urlDoc);
 
-    await expect(page.locator('h2').getByText(docTitle)).toBeVisible();
-    await page.getByRole('button', { name: 'Share' }).click();
-    await expect(
-      page.getByText('Read only, you cannot edit this document'),
-    ).toBeHidden();
-
-    const shareModal = page.getByLabel('Share modal');
-
-    await expect(
-      shareModal.getByRole('combobox', {
-        name: 'Visibility',
-      }),
-    ).toHaveAttribute('disabled');
-    await expect(shareModal.getByText('Search by email')).toBeHidden();
-    await expect(shareModal.getByLabel('List members card')).toBeHidden();
+    await verifyDocName(page, docTitle);
+    await page.getByRole('button', { name: 'Copy link' }).click();
+    await expect(page.getByText('Link Copied !')).toBeVisible();
   });
 });

src/frontend/apps/e2e/__tests__/app-impress/header.spec.ts

@@ -75,29 +75,13 @@ test.describe('Header mobile', () => {
   test('it checks the header when mobile', async ({ page }) => {
     const header = page.locator('header').first();
 
+    await expect(header.getByLabel('Open the header menu')).toBeVisible();
+    await expect(header.getByRole('link', { name: 'Docs Logo' })).toBeVisible();
     await expect(
       header.getByRole('button', {
         name: 'Les services de La Suite numérique',
       }),
     ).toBeVisible();
-
-    await expect(
-      page.getByRole('button', {
-        name: 'Logout',
-      }),
-    ).toBeHidden();
-
-    await expect(page.getByText('English')).toBeHidden();
-
-    await header.getByLabel('Open the header menu').click();
-
-    await expect(
-      page.getByRole('button', {
-        name: 'Logout',
-      }),
-    ).toBeVisible();
-
-    await expect(page.getByText('English')).toBeVisible();
   });
 });
 

src/frontend/apps/e2e/__tests__/app-impress/language.spec.ts

@@ -6,11 +6,7 @@ test.beforeEach(async ({ page }) => {
 
 test.describe('Language', () => {
   test('checks the language picker', async ({ page }) => {
-    await expect(
-      page.getByRole('button', {
-        name: 'Create a new document',
-      }),
-    ).toBeVisible();
+    await expect(page.getByLabel('Logout')).toBeVisible();
 
     const header = page.locator('header').first();
     await header.getByRole('combobox').getByText('English').click();
@@ -19,11 +15,7 @@ test.describe('Language', () => {
       header.getByRole('combobox').getByText('Français'),
     ).toBeVisible();
 
-    await expect(
-      page.getByRole('button', {
-        name: 'Créer un nouveau document',
-      }),
-    ).toBeVisible();
+    await expect(page.getByLabel('Se déconnecter')).toBeVisible();
 
     await header.getByRole('combobox').getByText('Français').click();
     await header.getByRole('option', { name: 'Deutsch' }).click();
@@ -31,11 +23,7 @@ test.describe('Language', () => {
       header.getByRole('combobox').getByText('Deutsch'),
     ).toBeVisible();
 
-    await expect(
-      page.getByRole('button', {
-        name: 'Neues Dokument erstellen',
-      }),
-    ).toBeVisible();
+    await expect(page.getByLabel('Abmelden')).toBeVisible();
   });
 
   test('checks that backend uses the same language as the frontend', async ({

src/frontend/apps/e2e/__tests__/app-impress/left-panel.spec.ts

@@ -0,0 +1,48 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('Left panel desktop', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/');
+  });
+
+  test('checks all the elements are visible', async ({ page }) => {
+    await expect(page.getByTestId('left-panel-desktop')).toBeVisible();
+    await expect(page.getByTestId('left-panel-mobile')).toBeHidden();
+    await expect(page.getByRole('button', { name: 'house' })).toBeVisible();
+    await expect(page.getByRole('button', { name: 'New doc' })).toBeVisible();
+  });
+});
+
+test.describe('Left panel mobile', () => {
+  test.use({ viewport: { width: 500, height: 1200 } });
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/');
+  });
+
+  test('checks all the desktop elements are hidden and all mobile elements are visible', async ({
+    page,
+  }) => {
+    await expect(page.getByTestId('left-panel-desktop')).toBeHidden();
+    await expect(page.getByTestId('left-panel-mobile')).not.toBeInViewport();
+
+    const header = page.locator('header').first();
+    const homeButton = page.getByRole('button', { name: 'house' });
+    const newDocButton = page.getByRole('button', { name: 'New doc' });
+    const languageButton = page.getByRole('combobox', { name: 'Language' });
+    const logoutButton = page.getByRole('button', { name: 'Logout' });
+
+    await expect(homeButton).not.toBeInViewport();
+    await expect(newDocButton).not.toBeInViewport();
+    await expect(languageButton).not.toBeInViewport();
+    await expect(logoutButton).not.toBeInViewport();
+
+    await header.getByLabel('Open the header menu').click();
+
+    await expect(page.getByTestId('left-panel-mobile')).toBeInViewport();
+    await expect(homeButton).toBeInViewport();
+    await expect(newDocButton).toBeInViewport();
+    await expect(languageButton).toBeInViewport();
+    await expect(logoutButton).toBeInViewport();
+  });
+});

src/frontend/apps/e2e/package.json

@@ -1,6 +1,6 @@
 {
   "name": "app-e2e",
-  "version": "1.10.0",
+  "version": "2.0.1",
   "private": true,
   "scripts": {
     "lint": "eslint . --ext .ts",
@@ -13,9 +13,11 @@
   },
   "devDependencies": {
     "@playwright/test": "1.49.1",
+    "@types/luxon": "3.4.2",
     "@types/node": "*",
     "@types/pdf-parse": "1.1.4",
     "eslint-config-impress": "*",
+    "luxon": "3.5.0",
     "typescript": "*"
   },
   "dependencies": {

src/frontend/apps/impress/conf/default.conf

@@ -9,10 +9,6 @@ server {
       try_files $uri index.html $uri/ =404;
   }
 
-  location ~ ^/docs/(.*)/versions/(.*)/$ {
-    error_page 404 /docs/[id]/versions/[versionId]/;
-  }
-
   location /docs/ {
     error_page 404 /docs/[id]/;
   }

src/frontend/apps/impress/cunningham.ts

@@ -5,22 +5,60 @@ const config = {
         colors: {
           'card-border': '#ededed',
           'primary-bg': '#FAFAFA',
+          'primary-050': '#F5F5FE',
           'primary-100': '#EDF5FA',
           'primary-150': '#E5EEFA',
+          'primary-950': '#1B1B35',
           'info-150': '#E5EEFA',
+          'greyscale-000': '#fff',
+          'greyscale-1000': '#161616',
+          'blue-400': '#7AB1E8',
+          'blue-500': '#417DC4',
+          'blue-600': '#3558A2',
+          'brown-400': '#E6BE92',
+          'brown-500': '#BD987A',
+          'brown-600': '#745B47',
+          'cyan-400': '#34BAB5',
+          'cyan-500': '#009099',
+          'cyan-600': '#006A6F',
+          'gold-400': '#FFCA00',
+          'gold-500': '#C3992A',
+          'gold-600': '#695240',
+          'green-400': '#34CB6A',
+          'green-500': '#00A95F',
+          'green-600': '#297254',
+          'olive-400': '#99C221',
+          'olive-500': '#68A532',
+          'olive-600': '#447049',
+          'orange-400': '#FF732C',
+          'orange-500': '#E4794A',
+          'orange-600': '#755348',
+          'pink-400': '#FFB7AE',
+          'pink-500': '#E18B76',
+          'pink-600': '#8D533E',
+          'purple-400': '#CE70CC',
+          'purple-500': '#A558A0',
+          'purple-600': '#6E445A',
+          'yellow-400': '#D8C634',
+          'yellow-500': '#B7A73F',
+          'yellow-600': '#66673D',
         },
         font: {
           sizes: {
+            xs: '0.75rem',
+            sm: '0.875rem',
+            md: '1rem',
+            lg: '1.125rem',
             ml: '0.938rem',
-            xl: '1.50rem',
+            xl: '1.25rem',
             t: '0.6875rem',
             s: '0.75rem',
-            h1: '2.2rem',
-            h2: '1.7rem',
-            h3: '1.37rem',
-            h4: '1.15rem',
-            h5: '1rem',
-            h6: '0.87rem',
+            h1: '2rem',
+            h2: '1.75rem',
+            h3: '1.5rem',
+            h4: '1.375rem',
+            h5: '1.25rem',
+            h6: '1.125rem',
           },
           weights: {
             thin: 100,
@@ -34,6 +72,21 @@ const config = {
           auto: 'auto',
           bx: '2.2rem',
           full: '100%',
+          '4xs': '0.125rem',
+          '3xs': '0.25rem',
+          '2xs': '0.375rem',
+          xs: '0.5rem',
+          sm: '0.75rem',
+          base: '1rem',
+          md: '1.5rem',
+          lg: '2rem',
+          xl: '2.5rem',
+          xxl: '3rem',
+          xxxl: '3.5rem',
+          '4xl': '4rem',
+          '5xl': '4.5rem',
+          '6xl': '6rem',
+          '7xl': '7.5rem',
         },
         breakpoints: {
           xxs: '320px',
@@ -104,7 +157,7 @@ const config = {
             focus: 'var(--c--components--forms-select--border-radius)',
           },
           'font-size': 'var(--c--theme--font--sizes--ml)',
-          'menu-background-color': '#ffffff',
+          'menu-background-color': '#fff',
           'item-background-color': {
             hover: 'var(--c--theme--colors--primary-300)',
           },
@@ -126,7 +179,7 @@ const config = {
           },
         },
         modal: {
-          'background-color': '#ffffff',
+          'background-color': '#fff',
         },
         button: {
           'border-radius': {
@@ -147,8 +200,8 @@ const config = {
           danger: {
             'color-hover': 'white',
             background: {
-              color: 'var(--c--theme--colors--danger-400)',
-              'color-hover': 'var(--c--theme--colors--danger-500)',
+              color: 'var(--c--theme--colors--danger-600)',
+              'color-hover': '#FF2725',
               'color-disabled': 'var(--c--theme--colors--danger-100)',
             },
           },
@@ -178,7 +231,9 @@ const config = {
             color: 'var(--c--theme--colors--primary-text)',
             'color-disabled': 'var(--c--theme--colors--greyscale-600)',
             background: {
-              'color-hover': 'var(--c--theme--colors--primary-100)',
+              color: 'var(--c--theme--colors--primary-100)',
+              'color-hover': 'var(--c--theme--colors--primary-300)',
+              'color-active': 'var(--c--theme--colors--primary-100)',
               'color-disabled': 'var(--c--theme--colors--greyscale-200)',
             },
           },
@@ -197,19 +252,19 @@ const config = {
     dsfr: {
       theme: {
         colors: {
-          'card-border': '#ededed',
+          'card-border': '#E5E5E5',
           'primary-text': '#000091',
-          'primary-100': '#f5f5fe',
+          'primary-100': '#ECECFE',
           'primary-150': '#F4F4FD',
-          'primary-200': '#ececfe',
-          'primary-300': '#e3e3fd',
-          'primary-400': '#cacafb',
-          'primary-500': '#6a6af4',
-          'primary-600': '#000091',
+          'primary-200': '#E3E3FD',
+          'primary-300': '#CACAFB',
+          'primary-400': '#8585F6',
+          'primary-500': '#6A6AF4',
+          'primary-600': '#313178',
           'primary-700': '#272747',
-          'primary-800': '#21213f',
-          'primary-900': '#1c1a36',
-          'secondary-text': '#FFFFFF',
+          'primary-800': '#000091',
+          'primary-900': '#21213F',
+          'secondary-text': '#fff',
           'secondary-100': '#fee9ea',
           'secondary-200': '#fedfdf',
           'secondary-300': '#fdbfbf',
@@ -220,16 +275,22 @@ const config = {
           'secondary-800': '#341f1f',
           'secondary-900': '#2b1919',
           'greyscale-text': '#303C4B',
-          'greyscale-000': '#f6f6f6',
-          'greyscale-100': '#eeeeee',
-          'greyscale-200': '#e5e5e5',
-          'greyscale-300': '#e1e1e1',
-          'greyscale-400': '#dddddd',
-          'greyscale-500': '#cecece',
-          'greyscale-600': '#7b7b7b',
-          'greyscale-700': '#666666',
-          'greyscale-800': '#2a2a2a',
-          'greyscale-900': '#1e1e1e',
+          'greyscale-000': '#fff',
+          'greyscale-050': '#F6F6F6',
+          'greyscale-100': '#eee',
+          'greyscale-200': '#E5E5E5',
+          'greyscale-250': '#ddd',
+          'greyscale-300': '#CECECE',
+          'greyscale-350': '#ddd',
+          'greyscale-400': '#929292',
+          'greyscale-500': '#7C7C7C',
+          'greyscale-600': '#666666',
+          'greyscale-700': '#3A3A3A',
+          'greyscale-750': '#353535',
+          'greyscale-800': '#2A2A2A',
+          'greyscale-900': '#242424',
+          'greyscale-950': '#1E1E1E',
+          'greyscale-1000': '#161616',
           'success-text': '#1f8d49',
           'success-100': '#dffee6',
           'success-200': '#b8fec9',
@@ -241,15 +302,15 @@ const config = {
           'success-800': '#1e2e22',
           'success-900': '#19281d',
           'info-text': '#0078f3',
-          'info-100': '#f4f6ff',
-          'info-200': '#e8edff',
-          'info-300': '#dde5ff',
-          'info-400': '#bdcdff',
-          'info-500': '#0078f3',
-          'info-600': '#0063cb',
-          'info-700': '#f4f6ff',
-          'info-800': '#222a3f',
-          'info-900': '#1d2437',
+          'info-100': '#E8EDFF',
+          'info-200': '#DDE5FF',
+          'info-300': '#BCCDFF',
+          'info-400': '#518FFF',
+          'info-500': '#0078F3',
+          'info-600': '#0063CB',
+          'info-700': '#273961',
+          'info-800': '#222A3F',
+          'info-900': '#1D2437',
           'warning-text': '#d64d00',
           'warning-100': '#fff4f3',
           'warning-200': '#ffe9e6',
@@ -260,16 +321,16 @@ const config = {
           'warning-700': '#5e2c21',
           'warning-800': '#3e241e',
           'warning-900': '#361e19',
-          'danger-text': '#e1000f',
-          'danger-100': '#fef4f4',
-          'danger-200': '#fee9e9',
-          'danger-300': '#fddede',
-          'danger-400': '#fcbfbf',
-          'danger-500': '#e1000f',
-          'danger-600': '#c9191e',
-          'danger-700': '#642727',
+          'danger-text': '#FFF',
+          'danger-100': '#FFE9E9',
+          'danger-200': '#FFDDDD',
+          'danger-300': '#FFBDBD',
+          'danger-400': '#FF5655',
+          'danger-500': '#F60700',
+          'danger-600': '#CE0500',
+          'danger-700': '#642626',
           'danger-800': '#412121',
-          'danger-900': '#3a1c1c',
+          'danger-900': '#391C1C',
         },
         font: {
           families: {
@@ -288,8 +349,12 @@ const config = {
         alert: {
           'border-radius': '0',
         },
+        modal: {
+          'width-small': '342px',
+        },
         button: {
-          'medium-height': '48px',
+          'medium-height': '40px',
+          'medium-text-height': '40px',
           'border-radius': '4px',
           primary: {
             background: {
@@ -297,9 +362,9 @@ const config = {
               'color-hover': '#1212ff',
               'color-active': '#2323ff',
             },
-            color: '#ffffff',
-            'color-hover': '#ffffff',
-            'color-active': '#ffffff',
+            color: '#fff',
+            'color-hover': '#fff',
+            'color-active': '#fff',
           },
           'primary-text': {
             background: {
@@ -321,7 +386,7 @@ const config = {
           },
           'tertiary-text': {
             background: {
-              'color-hover': 'var(--c--theme--colors--primary-100)',
+              'color-hover': 'var(--c--theme--colors--greyscale-100)',
             },
             'color-hover': 'var(--c--theme--colors--primary-text)',
             color: 'var(--c--theme--colors--primary-600)',
@@ -363,7 +428,7 @@ const config = {
         },
         'forms-input': {
           'border-radius': '4px',
-          'background-color': '#ffffff',
+          'background-color': '#fff',
           'border-color': 'var(--c--theme--colors--primary-text)',
           'box-shadow-color': 'var(--c--theme--colors--primary-text)',
           'value-color': 'var(--c--theme--colors--primary-text)',
@@ -381,7 +446,7 @@ const config = {
           'item-font-size': '14px',
           'border-radius': '4px',
           'border-radius-hover': '4px',
-          'background-color': '#ffffff',
+          'background-color': '#fff',
           'border-color': 'var(--c--theme--colors--primary-text)',
           'border-color-hover': 'var(--c--theme--colors--primary-text)',
           'box-shadow-color': 'var(--c--theme--colors--primary-text)',

src/frontend/apps/impress/package.json

@@ -1,6 +1,6 @@
 {
   "name": "app-impress",
-  "version": "1.10.0",
+  "version": "2.0.1",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -15,34 +15,37 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@blocknote/core": "*",
-    "@blocknote/mantine": "*",
-    "@blocknote/react": "*",
+    "@blocknote/core": "0.21.0",
+    "@blocknote/mantine": "0.21.0",
+    "@blocknote/react": "0.21.0",
     "@gouvfr-lasuite/integration": "1.0.2",
     "@hocuspocus/provider": "2.15.0",
     "@openfun/cunningham-react": "2.9.4",
-    "@sentry/nextjs": "8.45.1",
-    "@tanstack/react-query": "5.62.7",
+    "@sentry/nextjs": "8.47.0",
+    "@tanstack/react-query": "5.62.11",
+    "cmdk": "1.0.4",
     "crisp-sdk-web": "1.0.25",
-    "i18next": "24.1.0",
+    "i18next": "24.2.0",
     "i18next-browser-languagedetector": "8.0.2",
     "idb": "8.0.1",
     "lodash": "4.17.21",
     "luxon": "3.5.0",
-    "next": "15.1.0",
+    "next": "15.1.3",
     "react": "*",
     "react-aria-components": "1.5.0",
     "react-dom": "*",
-    "react-i18next": "15.2.0",
+    "react-i18next": "15.4.0",
+    "react-intersection-observer": "9.13.1",
     "react-select": "5.9.0",
     "styled-components": "6.1.13",
+    "use-debounce": "10.0.4",
     "y-protocols": "1.0.6",
-    "yjs": "*",
+    "yjs": "13.6.21",
     "zustand": "5.0.2"
   },
   "devDependencies": {
     "@svgr/webpack": "8.1.0",
-    "@tanstack/react-query-devtools": "5.62.7",
+    "@tanstack/react-query-devtools": "5.62.11",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.1.0",
@@ -53,7 +56,7 @@
     "@types/node": "*",
     "@types/react": "18.3.12",
     "@types/react-dom": "*",
-    "cross-env": "*",
+    "cross-env": "7.0.3",
     "dotenv": "16.4.7",
     "eslint-config-impress": "*",
     "fetch-mock": "9.11.0",

src/frontend/apps/impress/src/__tests__/pages.test.tsx

@@ -1,32 +0,0 @@
-import '@testing-library/jest-dom';
-import { render, screen } from '@testing-library/react';
-
-import { AppWrapper } from '@/tests/utils';
-
-import Page from '../pages';
-
-jest.mock('next/router', () => ({
-  useRouter() {
-    return {
-      push: jest.fn(),
-    };
-  },
-}));
-
-jest.mock('@sentry/nextjs', () => ({
-  captureException: jest.fn(),
-  captureMessage: jest.fn(),
-  setUser: jest.fn(),
-}));
-
-describe('Page', () => {
-  it('checks Page rendering', () => {
-    render(<Page />, { wrapper: AppWrapper });
-
-    expect(
-      screen.getByRole('button', {
-        name: /Create a new document/i,
-      }),
-    ).toBeInTheDocument();
-  });
-});

src/frontend/apps/impress/src/components/BoxButton.tsx

@@ -1,9 +1,13 @@
-import { ComponentPropsWithRef, forwardRef } from 'react';
+import { forwardRef } from 'react';
 import { css } from 'styled-components';
 
 import { Box, BoxType } from './Box';
 
-export type BoxButtonType = ComponentPropsWithRef<typeof BoxButton>;
+export type BoxButtonType = BoxType & {
+  disabled?: boolean;
+};
+
+/**
 
 /**
  * Styleless button that extends the Box component.
@@ -18,7 +22,7 @@ export type BoxButtonType = ComponentPropsWithRef<typeof BoxButton>;
  *  </BoxButton>
  * ```
  */
-const BoxButton = forwardRef<HTMLDivElement, BoxType>(
+const BoxButton = forwardRef<HTMLDivElement, BoxButtonType>(
   ({ $css, ...props }, ref) => {
     return (
       <Box
@@ -28,14 +32,24 @@ const BoxButton = forwardRef<HTMLDivElement, BoxType>(
         $margin="none"
         $padding="none"
         $css={css`
-          cursor: pointer;
+          cursor: ${props.disabled ? 'not-allowed' : 'pointer'};
           border: none;
           outline: none;
           transition: all 0.2s ease-in-out;
           font-family: inherit;
+
+          color: ${props.disabled
+            ? 'var(--c--theme--colors--greyscale-400) !important'
+            : 'inherit'};
           ${$css || ''}
         `}
         {...props}
+        onClick={(event: React.MouseEvent<HTMLDivElement>) => {
+          if (props.disabled) {
+            return;
+          }
+          props.onClick?.(event);
+        }}
       />
     );
   },

src/frontend/apps/impress/src/components/Card.tsx

@@ -17,8 +17,7 @@ export const Card = ({
       $background="white"
       $radius="4px"
       $css={css`
-        box-shadow: 2px 2px 5px ${colorsTokens()['greyscale-300']};
-        border: 1px solid ${colorsTokens()['card-border']};
+        border: 1px solid ${colorsTokens()['greyscale-200']};
         ${$css}
       `}
       {...props}

src/frontend/apps/impress/src/components/DropButton.tsx

@@ -1,19 +1,20 @@
-import React, {
+import {
   PropsWithChildren,
   ReactNode,
   useEffect,
+  useRef,
   useState,
 } from 'react';
-import { Button, DialogTrigger, Popover } from 'react-aria-components';
+import { Button, Popover } from 'react-aria-components';
 import styled from 'styled-components';
 
 const StyledPopover = styled(Popover)`
   background-color: white;
   border-radius: 4px;
   box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
-  padding: 0.5rem;
+
   border: 1px solid #dddddd;
-  opacity: 0;
+
   transition: opacity 0.2s ease-in-out;
 `;
 
@@ -26,13 +27,15 @@ const StyledButton = styled(Button)`
   font-family: Marianne, Arial, serif;
   font-weight: 500;
   font-size: 0.938rem;
+  padding: 0;
   text-wrap: nowrap;
 `;
 
-interface DropButtonProps {
+export interface DropButtonProps {
   button: ReactNode;
   isOpen?: boolean;
   onOpenChange?: (isOpen: boolean) => void;
+  label?: string;
 }
 
 export const DropButton = ({
@@ -40,10 +43,12 @@ export const DropButton = ({
   isOpen = false,
   onOpenChange,
   children,
+  label,
 }: PropsWithChildren<DropButtonProps>) => {
-  const [opacity, setOpacity] = useState(false);
   const [isLocalOpen, setIsLocalOpen] = useState(isOpen);
 
+  const triggerRef = useRef(null);
+
   useEffect(() => {
     setIsLocalOpen(isOpen);
   }, [isOpen]);
@@ -51,21 +56,25 @@ export const DropButton = ({
   const onOpenChangeHandler = (isOpen: boolean) => {
     setIsLocalOpen(isOpen);
     onOpenChange?.(isOpen);
-    setTimeout(() => {
-      setOpacity(isOpen);
-    }, 10);
   };
 
   return (
-    <DialogTrigger onOpenChange={onOpenChangeHandler} isOpen={isLocalOpen}>
-      <StyledButton>{button}</StyledButton>
+    <>
+      <StyledButton
+        ref={triggerRef}
+        onPress={() => onOpenChangeHandler(true)}
+        aria-label={label}
+      >
+        {button}
+      </StyledButton>
+
       <StyledPopover
-        style={{ opacity: opacity ? 1 : 0 }}
+        triggerRef={triggerRef}
         isOpen={isLocalOpen}
         onOpenChange={onOpenChangeHandler}
       >
         {children}
       </StyledPopover>
-    </DialogTrigger>
+    </>
   );
 };

src/frontend/apps/impress/src/components/DropdownMenu.tsx

@@ -0,0 +1,150 @@
+import { PropsWithChildren, useState } from 'react';
+import { css } from 'styled-components';
+
+import { Box, BoxButton, BoxProps, DropButton, Icon, Text } from '@/components';
+import { useCunninghamTheme } from '@/cunningham';
+
+export type DropdownMenuOption = {
+  icon?: string;
+  label: string;
+  testId?: string;
+  callback?: () => void | Promise<unknown>;
+  danger?: boolean;
+  isSelected?: boolean;
+  disabled?: boolean;
+  show?: boolean;
+};
+
+export type DropdownMenuProps = {
+  options: DropdownMenuOption[];
+  showArrow?: boolean;
+  label?: string;
+  arrowCss?: BoxProps['$css'];
+  topMessage?: string;
+};
+
+export const DropdownMenu = ({
+  options,
+  children,
+  showArrow = false,
+  arrowCss,
+  label,
+  topMessage,
+}: PropsWithChildren<DropdownMenuProps>) => {
+  const theme = useCunninghamTheme();
+  const spacings = theme.spacingsTokens();
+  const colors = theme.colorsTokens();
+  const [isOpen, setIsOpen] = useState(false);
+
+  const onOpenChange = (isOpen: boolean) => {
+    setIsOpen(isOpen);
+  };
+
+  return (
+    <DropButton
+      isOpen={isOpen}
+      onOpenChange={onOpenChange}
+      label={label}
+      button={
+        showArrow ? (
+          <Box $direction="row" $align="center">
+            <div>{children}</div>
+            <Icon
+              $variation="600"
+              $css={
+                arrowCss ??
+                css`
+                  color: var(--c--theme--colors--primary-600);
+                `
+              }
+              iconName={isOpen ? 'arrow_drop_up' : 'arrow_drop_down'}
+            />
+          </Box>
+        ) : (
+          children
+        )
+      }
+    >
+      <Box $maxWidth="320px">
+        {topMessage && (
+          <Text
+            $variation="700"
+            $wrap="wrap"
+            $size="xs"
+            $weight="bold"
+            $padding={{ vertical: 'xs', horizontal: 'base' }}
+          >
+            {topMessage}
+          </Text>
+        )}
+        {options.map((option, index) => {
+          if (option.show !== undefined && !option.show) {
+            return;
+          }
+          const isDisabled = option.disabled !== undefined && option.disabled;
+          return (
+            <BoxButton
+              aria-label={option.label}
+              data-testid={option.testId}
+              $direction="row"
+              disabled={isDisabled}
+              onClick={(event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                onOpenChange?.(false);
+                void option.callback?.();
+              }}
+              key={option.label}
+              $align="center"
+              $justify="space-between"
+              $background={colors['greyscale-000']}
+              $color={colors['primary-600']}
+              $padding={{ vertical: 'xs', horizontal: 'base' }}
+              $width="100%"
+              $gap={spacings['base']}
+              $css={css`
+                border: none;
+                ${index === 0 &&
+                css`
+                  border-top-left-radius: 4px;
+                  border-top-right-radius: 4px;
+                `}
+                ${index === options.length - 1 &&
+                css`
+                  border-bottom-left-radius: 4px;
+                  border-bottom-right-radius: 4px;
+                `}
+                font-size: var(--c--theme--font--sizes--sm);
+                color: var(--c--theme--colors--greyscale-1000);
+                font-weight: 500;
+                cursor: ${isDisabled ? 'not-allowed' : 'pointer'};
+                user-select: none;
+
+                &:hover {
+                  background-color: var(--c--theme--colors--greyscale-050);
+                }
+              `}
+            >
+              <Box $direction="row" $align="center" $gap={spacings['base']}>
+                {option.icon && (
+                  <Icon
+                    $size="20px"
+                    $theme="greyscale"
+                    $variation={isDisabled ? '400' : '1000'}
+                    iconName={option.icon}
+                  />
+                )}
+                <Text $variation={isDisabled ? '400' : '1000'}>
+                  {option.label}
+                </Text>
+              </Box>
+              {option.isSelected && (
+                <Icon iconName="check" $size="20px" $theme="greyscale" />
+              )}
+            </BoxButton>
+          );
+        })}
+      </Box>
+    </DropButton>
+  );
+};

src/frontend/apps/impress/src/components/Icon.tsx

@@ -1,6 +1,19 @@
+import { css } from 'styled-components';
+
 import { Text, TextType } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 
+type IconProps = TextType & {
+  iconName: string;
+};
+export const Icon = ({ iconName, ...textProps }: IconProps) => {
+  return (
+    <Text $isMaterialIcon {...textProps}>
+      {iconName}
+    </Text>
+  );
+};
+
 interface IconBGProps extends TextType {
   iconName: string;
 }
@@ -29,23 +42,21 @@ export const IconBG = ({ iconName, ...textProps }: IconBGProps) => {
   );
 };
 
-interface IconOptionsProps {
-  isOpen: boolean;
-  'aria-label': string;
-}
+type IconOptionsProps = TextType & {
+  isHorizontal?: boolean;
+};
 
-export const IconOptions = ({ isOpen, ...props }: IconOptionsProps) => {
+export const IconOptions = ({ isHorizontal, ...props }: IconOptionsProps) => {
   return (
     <Text
-      aria-label={props['aria-label']}
+      {...props}
       $isMaterialIcon
-      $css={`
-        transition: all 0.3s ease-in-out;
-        transform: rotate(${isOpen ? '90' : '0'}deg);
+      $css={css`
         user-select: none;
+        ${props.$css}
       `}
     >
-      more_vert
+      {isHorizontal ? 'more_horiz' : 'more_vert'}
     </Text>
   );
 };

src/frontend/apps/impress/src/components/InfiniteScroll.tsx

@@ -1,12 +1,16 @@
-import { PropsWithChildren, useEffect, useRef } from 'react';
+import { Button } from '@openfun/cunningham-react';
+import { PropsWithChildren } from 'react';
+import { useTranslation } from 'react-i18next';
+import { InView } from 'react-intersection-observer';
 
-import { Box, BoxType } from '@/components';
+import { Box, BoxType, Icon } from '@/components';
 
 interface InfiniteScrollProps extends BoxType {
   hasMore: boolean;
   isLoading: boolean;
   next: () => void;
-  scrollContainer: HTMLElement | null;
+  scrollContainer?: HTMLElement | null;
+  buttonLabel?: string;
 }
 
 export const InfiniteScroll = ({
@@ -14,42 +18,31 @@ export const InfiniteScroll = ({
   hasMore,
   isLoading,
   next,
-  scrollContainer,
+  buttonLabel,
   ...boxProps
 }: PropsWithChildren<InfiniteScrollProps>) => {
-  const timeout = useRef<ReturnType<typeof setTimeout>>();
-
-  useEffect(() => {
-    if (!scrollContainer) {
+  const { t } = useTranslation();
+  const loadMore = (inView: boolean) => {
+    if (!inView || isLoading) {
       return;
     }
+    void next();
+  };
 
-    const nextHandle = () => {
-      if (!hasMore || isLoading) {
-        return;
-      }
-
-      // To not wait until the end of the scroll to load more data
-      const heightFromBottom = 150;
-
-      const { scrollTop, clientHeight, scrollHeight } = scrollContainer;
-      if (scrollTop + clientHeight >= scrollHeight - heightFromBottom) {
-        next();
-      }
-    };
-
-    const handleScroll = () => {
-      if (timeout.current) {
-        clearTimeout(timeout.current);
-      }
-      timeout.current = setTimeout(nextHandle, 50);
-    };
-
-    scrollContainer.addEventListener('scroll', handleScroll);
-    return () => {
-      scrollContainer.removeEventListener('scroll', handleScroll);
-    };
-  }, [hasMore, isLoading, next, scrollContainer]);
-
-  return <Box {...boxProps}>{children}</Box>;
+  return (
+    <Box {...boxProps}>
+      {children}
+      <InView onChange={loadMore}>
+        {!isLoading && hasMore && (
+          <Button
+            onClick={() => void next()}
+            color="primary-text"
+            icon={<Icon iconName="arrow_downward" />}
+          >
+            {buttonLabel ?? t('Load more')}
+          </Button>
+        )}
+      </InView>
+    </Box>
+  );
 };

src/frontend/apps/impress/src/components/LoadMoreText.tsx

@@ -0,0 +1,35 @@
+import { useTranslation } from 'react-i18next';
+
+import { Box } from './Box';
+import { Icon } from './Icon';
+import { Text } from './Text';
+
+type LoadMoreTextProps = {
+  ['data-testid']?: string;
+};
+
+export const LoadMoreText = ({
+  'data-testid': dataTestId,
+}: LoadMoreTextProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Box
+      data-testid={dataTestId}
+      $direction="row"
+      $align="center"
+      $gap="0.4rem"
+      $padding={{ horizontal: '2xs', vertical: 'sm' }}
+    >
+      <Icon
+        $theme="primary"
+        $variation="800"
+        iconName="arrow_downward"
+        $size="md"
+      />
+      <Text $theme="primary" $variation="800">
+        {t('Load more')}
+      </Text>
+    </Box>
+  );
+};

src/frontend/apps/impress/src/components/Text.tsx

@@ -33,6 +33,7 @@ export interface TextProps extends BoxProps {
     | 'greyscale';
   $variation?:
     | 'text'
+    | '000'
     | '100'
     | '200'
     | '300'
@@ -41,7 +42,8 @@ export interface TextProps extends BoxProps {
     | '600'
     | '700'
     | '800'
-    | '900';
+    | '900'
+    | '1000';
 }
 
 export type TextType = ComponentPropsWithRef<typeof Text>;

src/frontend/apps/impress/src/components/__tests__/Box.spec.tsx

@@ -17,8 +17,8 @@ describe('<Box />', () => {
     );
 
     expect(screen.getByText('My Box')).toHaveStyle(`
-      padding-left: 4rem;
-      padding-right: 4rem;
+      padding-left: 2.5rem;
+      padding-right: 2.5rem;
       padding-top: 3rem;
       padding-bottom: 0.5rem;`);
   });

src/frontend/apps/impress/src/components/index.ts

@@ -2,9 +2,12 @@ export * from './Box';
 export * from './BoxButton';
 export * from './Card';
 export * from './DropButton';
+export * from './DropdownMenu';
 export * from './Icon';
 export * from './InfiniteScroll';
 export * from './Link';
+export * from './LoadMoreText';
 export * from './SideModal';
+export * from './separators';
 export * from './Text';
 export * from './TextErrors';

src/frontend/apps/impress/src/components/quick-search/QuickSearch.tsx

@@ -0,0 +1,71 @@
+import { Command } from 'cmdk';
+import { ReactNode, useRef } from 'react';
+
+import { hasChildrens } from '@/utils/children';
+
+import { Box } from '../Box';
+
+import { QuickSearchInput } from './QuickSearchInput';
+import { QuickSearchStyle } from './QuickSearchStyle';
+
+export type QuickSearchAction = {
+  onSelect?: () => void;
+  content: ReactNode;
+};
+
+export type QuickSearchData<T> = {
+  groupName: string;
+  elements: T[];
+  emptyString?: string;
+  startActions?: QuickSearchAction[];
+  endActions?: QuickSearchAction[];
+  showWhenEmpty?: boolean;
+};
+
+export type QuickSearchProps = {
+  onFilter?: (str: string) => void;
+  inputValue?: string;
+  inputContent?: ReactNode;
+  showInput?: boolean;
+  loading?: boolean;
+  label?: string;
+  placeholder?: string;
+  children?: ReactNode;
+};
+
+export const QuickSearch = ({
+  onFilter,
+  inputContent,
+  inputValue,
+  loading,
+  showInput = true,
+  label,
+  placeholder,
+  children,
+}: QuickSearchProps) => {
+  const ref = useRef<HTMLDivElement | null>(null);
+
+  return (
+    <>
+      <QuickSearchStyle />
+      <div className="quick-search-container">
+        <Command label={label} shouldFilter={false} ref={ref}>
+          {showInput && (
+            <QuickSearchInput
+              loading={loading}
+              withSeparator={hasChildrens(children)}
+              inputValue={inputValue}
+              onFilter={onFilter}
+              placeholder={placeholder}
+            >
+              {inputContent}
+            </QuickSearchInput>
+          )}
+          <Command.List>
+            <Box>{children}</Box>
+          </Command.List>
+        </Command>
+      </div>
+    </>
+  );
+};

src/frontend/apps/impress/src/components/quick-search/QuickSearchGroup.tsx

@@ -0,0 +1,66 @@
+import { Command } from 'cmdk';
+import { ReactNode } from 'react';
+
+import { Box } from '../Box';
+
+import { QuickSearchData } from './QuickSearch';
+import { QuickSearchItem } from './QuickSearchItem';
+
+type Props<T> = {
+  group: QuickSearchData<T>;
+  renderElement?: (element: T) => ReactNode;
+  onSelect?: (element: T) => void;
+};
+
+export const QuickSearchGroup = <T,>({
+  group,
+  onSelect,
+  renderElement,
+}: Props<T>) => {
+  return (
+    <Box $margin={{ top: 'base' }}>
+      <Command.Group
+        key={group.groupName}
+        heading={group.groupName}
+        forceMount={false}
+      >
+        {group.startActions?.map((action, index) => {
+          return (
+            <QuickSearchItem
+              key={`${group.groupName}-action-${index}`}
+              onSelect={action.onSelect}
+            >
+              {action.content}
+            </QuickSearchItem>
+          );
+        })}
+        {group.elements.map((groupElement, index) => {
+          return (
+            <QuickSearchItem
+              id={`${group.groupName}-element-${index}`}
+              key={`${group.groupName}-element-${index}`}
+              onSelect={() => {
+                onSelect?.(groupElement);
+              }}
+            >
+              {renderElement?.(groupElement)}
+            </QuickSearchItem>
+          );
+        })}
+        {group.endActions?.map((action, index) => {
+          return (
+            <QuickSearchItem
+              key={`${group.groupName}-action-${index}`}
+              onSelect={action.onSelect}
+            >
+              {action.content}
+            </QuickSearchItem>
+          );
+        })}
+        {group.emptyString && group.elements.length === 0 && (
+          <span className="ml-b clr-greyscale-500">{group.emptyString}</span>
+        )}
+      </Command.Group>
+    </Box>
+  );
+};

src/frontend/apps/impress/src/components/quick-search/QuickSearchInput.tsx

@@ -0,0 +1,69 @@
+import { Loader } from '@openfun/cunningham-react';
+import { Command } from 'cmdk';
+import { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { HorizontalSeparator } from '@/components';
+import { useCunninghamTheme } from '@/cunningham';
+
+import { Box } from '../Box';
+import { Icon } from '../Icon';
+
+type Props = {
+  loading?: boolean;
+  inputValue?: string;
+  onFilter?: (str: string) => void;
+  placeholder?: string;
+  children?: ReactNode;
+  withSeparator?: boolean;
+};
+export const QuickSearchInput = ({
+  loading,
+  inputValue,
+  onFilter,
+  placeholder,
+  children,
+  withSeparator: separator = true,
+}: Props) => {
+  const { t } = useTranslation();
+  const { spacingsTokens } = useCunninghamTheme();
+  const spacing = spacingsTokens();
+
+  if (children) {
+    return (
+      <>
+        {children}
+        {separator && <HorizontalSeparator />}
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Box
+        $direction="row"
+        $align="center"
+        className="quick-search-input"
+        $gap={spacing['2xs']}
+        $padding={{ all: 'base' }}
+      >
+        {!loading && <Icon iconName="search" $variation="600" />}
+        {loading && (
+          <div>
+            <Loader size="small" />
+          </div>
+        )}
+        <Command.Input
+          /* eslint-disable-next-line jsx-a11y/no-autofocus */
+          autoFocus={true}
+          aria-label={t('Quick search input')}
+          value={inputValue}
+          role="combobox"
+          placeholder={placeholder ?? t('Search')}
+          onValueChange={onFilter}
+        />
+      </Box>
+      {separator && <HorizontalSeparator $withPadding={false} />}
+    </>
+  );
+};

src/frontend/apps/impress/src/components/quick-search/QuickSearchItem.tsx

@@ -0,0 +1,18 @@
+import { Command } from 'cmdk';
+import { PropsWithChildren } from 'react';
+
+type Props = {
+  onSelect?: (value: string) => void;
+  id?: string;
+};
+export const QuickSearchItem = ({
+  children,
+  onSelect,
+  id,
+}: PropsWithChildren<Props>) => {
+  return (
+    <Command.Item value={id} onSelect={onSelect}>
+      {children}
+    </Command.Item>
+  );
+};

src/frontend/apps/impress/src/components/quick-search/QuickSearchItemContent.tsx

@@ -0,0 +1,52 @@
+import { ReactNode } from 'react';
+
+import { useCunninghamTheme } from '@/cunningham';
+import { useResponsiveStore } from '@/stores';
+
+import { Box } from '../Box';
+
+export type QuickSearchItemContentProps = {
+  alwaysShowRight?: boolean;
+  left: ReactNode;
+  right?: ReactNode;
+};
+
+export const QuickSearchItemContent = ({
+  alwaysShowRight = false,
+  left,
+  right,
+}: QuickSearchItemContentProps) => {
+  const { spacingsTokens } = useCunninghamTheme();
+  const spacings = spacingsTokens();
+
+  const { isDesktop } = useResponsiveStore();
+
+  return (
+    <Box
+      $direction="row"
+      $align="center"
+      $padding={{ horizontal: '2xs', vertical: '3xs' }}
+      $justify="space-between"
+      $width="100%"
+    >
+      <Box
+        $direction="row"
+        $align="center"
+        $gap={spacings['2xs']}
+        $width="100%"
+      >
+        {left}
+      </Box>
+
+      {isDesktop && right && (
+        <Box
+          className={!alwaysShowRight ? 'show-right-on-focus' : ''}
+          $direction="row"
+          $align="center"
+        >
+          {right}
+        </Box>
+      )}
+    </Box>
+  );
+};

src/frontend/apps/impress/src/components/quick-search/QuickSearchStyle.tsx

@@ -0,0 +1,143 @@
+import { createGlobalStyle } from 'styled-components';
+
+export const QuickSearchStyle = createGlobalStyle`
+  .quick-search-container {
+    [cmdk-root] {
+        width: 100%;
+        background: #ffffff;
+        border-radius: 12px;
+        overflow: hidden;
+        transition: transform 100ms ease;
+        outline: none;
+  }
+
+  [cmdk-input] {
+    border: none;
+    width: 100%;
+    font-size: 17px;
+    padding: 8px;
+    background: white;
+    outline: none;
+    color: var(--c--theme--colors--greyscale-1000);
+    border-radius: 0;
+
+    &::placeholder {
+      color: var(--c--theme--colors--greyscale-500);
+    }
+  }
+
+
+
+  [cmdk-item] {
+    content-visibility: auto;
+    cursor: pointer;  
+    border-radius: var(--c--theme--spacings--xs);
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    user-select: none;
+    will-change: background, color;
+    transition: all 150ms ease;
+    transition-property: none;
+
+    .show-right-on-focus {
+      opacity: 0;
+    }
+
+    &:hover,
+    &[data-selected='true'] {
+      background: var(--c--theme--colors--greyscale-100);
+      .show-right-on-focus {
+        opacity: 1;
+      }
+    }
+
+    &[data-disabled='true'] {
+      color: var(--c--theme--colors--greyscale-500);
+      cursor: not-allowed;
+    }
+
+    & + [cmdk-item] {
+      margin-top: 4px;
+    }
+  }
+
+  [cmdk-list] {
+  
+    padding: 0 var(--c--theme--spacings--base) var(--c--theme--spacings--base)
+      var(--c--theme--spacings--base);
+  
+    flex:1;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+
+  [cmdk-vercel-shortcuts] {
+    display: flex;
+    margin-left: auto;
+    gap: 8px;
+
+    kbd {
+      font-size: 12px;
+      min-width: 20px;
+      padding: 4px;
+      height: 20px;
+      border-radius: 4px;
+      color: white;
+      background: var(--c--theme--colors--greyscale-500);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      text-transform: uppercase;
+    }
+  }
+
+  [cmdk-separator] {
+    height: 1px;
+    width: 100%;
+    background: var(--c--theme--colors--greyscale-500);
+    margin: 4px 0;
+  }
+
+  *:not([hidden]) + [cmdk-group] {
+    margin-top: 8px;
+  }
+
+  [cmdk-group-heading] {
+    user-select: none;
+    font-size: var(--c--theme--font--sizes--sm);
+    color: var(--c--theme--colors--greyscale-700);
+    font-weight: bold;
+
+    display: flex;
+    align-items: center;
+    margin-bottom: var(--c--theme--spacings--xs);
+  }
+
+  [cmdk-empty] {
+  }
+}
+
+
+
+.c__modal__scroller:has(.quick-search-container),
+.c__modal__scroller:has(.noPadding) {
+  padding: 0 !important;
+
+  .c__modal__close .c__button {
+    right: 5px;
+    top: 5px;
+    padding: 1.5rem 1rem;
+  }
+
+  .c__modal__title {
+    font-size: var(--c--theme--font--sizes--xs);
+    
+    padding: var(--c--theme--spacings--base);
+    margin-bottom: 0;
+  }
+}
+
+
+`;

src/frontend/apps/impress/src/components/quick-search/index.ts

@@ -0,0 +1,4 @@
+export * from './QuickSearch';
+export * from './QuickSearchGroup';
+export * from './QuickSearchItem';
+export * from './QuickSearchItemContent';

src/frontend/apps/impress/src/components/separators/HorizontalSeparator.tsx

@@ -0,0 +1,33 @@
+import { useCunninghamTheme } from '@/cunningham';
+
+import { Box } from '../Box';
+
+export enum SeparatorVariant {
+  LIGHT = 'light',
+  DARK = 'dark',
+}
+
+type Props = {
+  variant?: SeparatorVariant;
+  $withPadding?: boolean;
+};
+
+export const HorizontalSeparator = ({
+  variant = SeparatorVariant.LIGHT,
+  $withPadding = true,
+}: Props) => {
+  const { colorsTokens } = useCunninghamTheme();
+
+  return (
+    <Box
+      $height="1px"
+      $width="100%"
+      $margin={{ vertical: $withPadding ? 'base' : 'none' }}
+      $background={
+        variant === SeparatorVariant.DARK
+          ? '#e5e5e533'
+          : colorsTokens()['greyscale-100']
+      }
+    />
+  );
+};

src/frontend/apps/impress/src/components/separators/SeparatedSection.tsx

@@ -0,0 +1,33 @@
+import { PropsWithChildren } from 'react';
+import { css } from 'styled-components';
+
+import { useCunninghamTheme } from '@/cunningham';
+
+import { Box } from '../Box';
+
+type Props = {
+  showSeparator?: boolean;
+};
+
+export const SeparatedSection = ({
+  showSeparator = true,
+  children,
+}: PropsWithChildren<Props>) => {
+  const theme = useCunninghamTheme();
+  const colors = theme.colorsTokens();
+  const spacings = theme.spacingsTokens();
+  return (
+    <Box
+      $css={css`
+        width: 100%;
+        padding: ${spacings['sm']} 0;
+        ${showSeparator &&
+        css`
+          border-bottom: 1px solid ${colors?.['greyscale-200']};
+        `}
+      `}
+    >
+      {children}
+    </Box>
+  );
+};

src/frontend/apps/impress/src/components/separators/index.ts

@@ -0,0 +1,2 @@
+export * from './HorizontalSeparator';
+export * from './SeparatedSection';

src/frontend/apps/impress/src/core/auth/ButtonLogin.tsx

@@ -1,5 +1,4 @@
 import { Button } from '@openfun/cunningham-react';
-import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useAuthStore } from '@/core/auth';
@@ -10,24 +9,14 @@ export const ButtonLogin = () => {
 
   if (!authenticated) {
     return (
-      <Button
-        onClick={login}
-        color="primary-text"
-        icon={<span className="material-icons">login</span>}
-        aria-label={t('Login')}
-      >
+      <Button onClick={login} color="primary-text" aria-label={t('Login')}>
         {t('Login')}
       </Button>
     );
   }
 
   return (
-    <Button
-      onClick={logout}
-      color="primary-text"
-      icon={<span className="material-icons">logout</span>}
-      aria-label={t('Logout')}
-    >
+    <Button onClick={logout} color="primary-text" aria-label={t('Logout')}>
       {t('Logout')}
     </Button>
   );

src/frontend/apps/impress/src/cunningham/cunningham-style.css

@@ -351,6 +351,19 @@ input:-webkit-autofill:focus {
   background-color: transparent;
 }
 
+.c__button--nano {
+  padding: 0 var(--c--theme--spacings--3xs);
+  gap: var(--c--theme--spacings--3xs);
+}
+
+.c__button--nano.c__button--icon-only {
+  width: auto;
+}
+
+.c__button--nano.c__button--icon-only.c__button--full-width {
+  width: 100%;
+}
+
 .c__button--medium {
   padding: 0.9rem var(--c--theme--spacings--s);
 }
@@ -442,6 +455,7 @@ input:-webkit-autofill:focus {
 }
 
 .c__button--tertiary {
+  background-color: var(--c--components--button--tertiary--background--color);
   color: var(--c--components--button--tertiary--color);
   border: none;
 }
@@ -454,6 +468,13 @@ input:-webkit-autofill:focus {
   color: var(--c--components--button--tertiary--color);
 }
 
+.c__button--tertiary:active {
+  background-color: var(
+    --c--components--button--tertiary--background--color-active
+  );
+  color: var(--c--components--button--tertiary--color-active);
+}
+
 .c__button--tertiary:disabled {
   background-color: var(
     --c--components--button--tertiary--background--color-disabled
@@ -512,13 +533,32 @@ input:-webkit-autofill:focus {
 }
 
 .c__modal__close button {
-  padding: 1.5rem 1rem;
+  padding: 0;
+  font-size: 88px;
+  width: 28px !important;
+  height: 28px;
+}
+
+.c__modal__close button .material-icons {
+  padding: 0;
+  font-size: 24px;
+  color: var(--c--theme--colors--greyscale-600);
+}
+
+.c__modal__close .c__button {
+  padding: 0 !important;
 }
 
 .c__modal--full .c__modal__content {
   overflow-y: auto;
 }
 
+.c__modal__title {
+  padding: 0;
+  font-size: 1.125rem;
+  margin-bottom: var(--c--theme--spacings--2xs);
+}
+
 @media screen and (width <= 420px) {
   .c__modal__scroller {
     padding: 0.7rem;

src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts

@@ -13,7 +13,7 @@ export const tokens = {
           'secondary-700': '#97A3AE',
           'secondary-800': '#757E87',
           'secondary-900': '#596067',
-          'info-text': '#FFFFFF',
+          'info-text': '#fff',
           'info-100': '#EBF2FC',
           'info-200': '#8CB5EA',
           'info-300': '#5894E1',
@@ -32,7 +32,7 @@ export const tokens = {
           'greyscale-700': '#555F6B',
           'greyscale-800': '#303C4B',
           'greyscale-900': '#0C1A2B',
-          'greyscale-000': '#FFFFFF',
+          'greyscale-000': '#fff',
           'primary-100': '#EDF5FA',
           'primary-200': '#8CB5EA',
           'primary-300': '#5894E1',
@@ -69,28 +69,65 @@ export const tokens = {
           'danger-700': '#9B0000',
           'danger-800': '#780000',
           'danger-900': '#5C0000',
-          'primary-text': '#FFFFFF',
-          'success-text': '#FFFFFF',
-          'warning-text': '#FFFFFF',
-          'danger-text': '#FFFFFF',
+          'primary-text': '#fff',
+          'success-text': '#fff',
+          'warning-text': '#fff',
+          'danger-text': '#fff',
           'card-border': '#ededed',
           'primary-bg': '#FAFAFA',
+          'primary-050': '#F5F5FE',
           'primary-150': '#E5EEFA',
+          'primary-950': '#1B1B35',
           'info-150': '#E5EEFA',
+          'greyscale-1000': '#161616',
+          'blue-400': '#7AB1E8',
+          'blue-500': '#417DC4',
+          'blue-600': '#3558A2',
+          'brown-400': '#E6BE92',
+          'brown-500': '#BD987A',
+          'brown-600': '#745B47',
+          'cyan-400': '#34BAB5',
+          'cyan-500': '#009099',
+          'cyan-600': '#006A6F',
+          'gold-400': '#FFCA00',
+          'gold-500': '#C3992A',
+          'gold-600': '#695240',
+          'green-400': '#34CB6A',
+          'green-500': '#00A95F',
+          'green-600': '#297254',
+          'olive-400': '#99C221',
+          'olive-500': '#68A532',
+          'olive-600': '#447049',
+          'orange-400': '#FF732C',
+          'orange-500': '#E4794A',
+          'orange-600': '#755348',
+          'pink-400': '#FFB7AE',
+          'pink-500': '#E18B76',
+          'pink-600': '#8D533E',
+          'purple-400': '#CE70CC',
+          'purple-500': '#A558A0',
+          'purple-600': '#6E445A',
+          'yellow-400': '#D8C634',
+          'yellow-500': '#B7A73F',
+          'yellow-600': '#66673D',
         },
         font: {
           sizes: {
-            h1: '2.2rem',
-            h2: '1.7rem',
-            h3: '1.37rem',
-            h4: '1.15rem',
-            h5: '1rem',
-            h6: '0.87rem',
+            h1: '2rem',
+            h2: '1.75rem',
+            h3: '1.5rem',
+            h4: '1.375rem',
+            h5: '1.25rem',
+            h6: '1.125rem',
             l: '1rem',
             m: '0.8125rem',
             s: '0.75rem',
+            xs: '0.75rem',
+            sm: '0.875rem',
+            md: '1rem',
+            lg: '1.125rem',
             ml: '0.938rem',
-            xl: '1.50rem',
+            xl: '1.25rem',
             t: '0.6875rem',
           },
           weights: {
@@ -120,7 +157,7 @@ export const tokens = {
         },
         spacings: {
           '0': '0',
-          xl: '4rem',
+          xl: '2.5rem',
           l: '3rem',
           b: '1.625rem',
           s: '1rem',
@@ -130,6 +167,20 @@ export const tokens = {
           auto: 'auto',
           bx: '2.2rem',
           full: '100%',
+          '4xs': '0.125rem',
+          '3xs': '0.25rem',
+          '2xs': '0.375rem',
+          xs: '0.5rem',
+          sm: '0.75rem',
+          base: '1rem',
+          md: '1.5rem',
+          lg: '2rem',
+          xxl: '3rem',
+          xxxl: '3.5rem',
+          '4xl': '4rem',
+          '5xl': '4.5rem',
+          '6xl': '6rem',
+          '7xl': '7.5rem',
         },
         transitions: {
           'ease-in': 'cubic-bezier(0.32, 0, 0.67, 0)',
@@ -202,7 +253,7 @@ export const tokens = {
             focus: 'var(--c--components--forms-select--border-radius)',
           },
           'font-size': 'var(--c--theme--font--sizes--ml)',
-          'menu-background-color': '#ffffff',
+          'menu-background-color': '#fff',
           'item-background-color': {
             hover: 'var(--c--theme--colors--primary-300)',
           },
@@ -223,7 +274,7 @@ export const tokens = {
             'border-color-hover': 'var(--c--theme--colors--greyscale-200)',
           },
         },
-        modal: { 'background-color': '#ffffff' },
+        modal: { 'background-color': '#fff' },
         button: {
           'border-radius': {
             active: 'var(--c--components--button--border-radius)',
@@ -243,8 +294,8 @@ export const tokens = {
           danger: {
             'color-hover': 'white',
             background: {
-              color: 'var(--c--theme--colors--danger-400)',
-              'color-hover': 'var(--c--theme--colors--danger-500)',
+              color: 'var(--c--theme--colors--danger-600)',
+              'color-hover': '#FF2725',
               'color-disabled': 'var(--c--theme--colors--danger-100)',
             },
           },
@@ -270,7 +321,9 @@ export const tokens = {
             color: 'var(--c--theme--colors--primary-text)',
             'color-disabled': 'var(--c--theme--colors--greyscale-600)',
             background: {
-              'color-hover': 'var(--c--theme--colors--primary-100)',
+              color: 'var(--c--theme--colors--primary-100)',
+              'color-hover': 'var(--c--theme--colors--primary-300)',
+              'color-active': 'var(--c--theme--colors--primary-100)',
               'color-disabled': 'var(--c--theme--colors--greyscale-200)',
             },
           },
@@ -334,19 +387,19 @@ export const tokens = {
     dsfr: {
       theme: {
         colors: {
-          'card-border': '#ededed',
+          'card-border': '#E5E5E5',
           'primary-text': '#000091',
-          'primary-100': '#f5f5fe',
+          'primary-100': '#ECECFE',
           'primary-150': '#F4F4FD',
-          'primary-200': '#ececfe',
-          'primary-300': '#e3e3fd',
-          'primary-400': '#cacafb',
-          'primary-500': '#6a6af4',
-          'primary-600': '#000091',
+          'primary-200': '#E3E3FD',
+          'primary-300': '#CACAFB',
+          'primary-400': '#8585F6',
+          'primary-500': '#6A6AF4',
+          'primary-600': '#313178',
           'primary-700': '#272747',
-          'primary-800': '#21213f',
-          'primary-900': '#1c1a36',
-          'secondary-text': '#FFFFFF',
+          'primary-800': '#000091',
+          'primary-900': '#21213F',
+          'secondary-text': '#fff',
           'secondary-100': '#fee9ea',
           'secondary-200': '#fedfdf',
           'secondary-300': '#fdbfbf',
@@ -357,16 +410,22 @@ export const tokens = {
           'secondary-800': '#341f1f',
           'secondary-900': '#2b1919',
           'greyscale-text': '#303C4B',
-          'greyscale-000': '#f6f6f6',
-          'greyscale-100': '#eeeeee',
-          'greyscale-200': '#e5e5e5',
-          'greyscale-300': '#e1e1e1',
-          'greyscale-400': '#dddddd',
-          'greyscale-500': '#cecece',
-          'greyscale-600': '#7b7b7b',
-          'greyscale-700': '#666666',
-          'greyscale-800': '#2a2a2a',
-          'greyscale-900': '#1e1e1e',
+          'greyscale-000': '#fff',
+          'greyscale-050': '#F6F6F6',
+          'greyscale-100': '#eee',
+          'greyscale-200': '#E5E5E5',
+          'greyscale-250': '#ddd',
+          'greyscale-300': '#CECECE',
+          'greyscale-350': '#ddd',
+          'greyscale-400': '#929292',
+          'greyscale-500': '#7C7C7C',
+          'greyscale-600': '#666666',
+          'greyscale-700': '#3A3A3A',
+          'greyscale-750': '#353535',
+          'greyscale-800': '#2A2A2A',
+          'greyscale-900': '#242424',
+          'greyscale-950': '#1E1E1E',
+          'greyscale-1000': '#161616',
           'success-text': '#1f8d49',
           'success-100': '#dffee6',
           'success-200': '#b8fec9',
@@ -378,15 +437,15 @@ export const tokens = {
           'success-800': '#1e2e22',
           'success-900': '#19281d',
           'info-text': '#0078f3',
-          'info-100': '#f4f6ff',
-          'info-200': '#e8edff',
-          'info-300': '#dde5ff',
-          'info-400': '#bdcdff',
-          'info-500': '#0078f3',
-          'info-600': '#0063cb',
-          'info-700': '#f4f6ff',
-          'info-800': '#222a3f',
-          'info-900': '#1d2437',
+          'info-100': '#E8EDFF',
+          'info-200': '#DDE5FF',
+          'info-300': '#BCCDFF',
+          'info-400': '#518FFF',
+          'info-500': '#0078F3',
+          'info-600': '#0063CB',
+          'info-700': '#273961',
+          'info-800': '#222A3F',
+          'info-900': '#1D2437',
           'warning-text': '#d64d00',
           'warning-100': '#fff4f3',
           'warning-200': '#ffe9e6',
@@ -397,16 +456,16 @@ export const tokens = {
           'warning-700': '#5e2c21',
           'warning-800': '#3e241e',
           'warning-900': '#361e19',
-          'danger-text': '#e1000f',
-          'danger-100': '#fef4f4',
-          'danger-200': '#fee9e9',
-          'danger-300': '#fddede',
-          'danger-400': '#fcbfbf',
-          'danger-500': '#e1000f',
-          'danger-600': '#c9191e',
-          'danger-700': '#642727',
+          'danger-text': '#FFF',
+          'danger-100': '#FFE9E9',
+          'danger-200': '#FFDDDD',
+          'danger-300': '#FFBDBD',
+          'danger-400': '#FF5655',
+          'danger-500': '#F60700',
+          'danger-600': '#CE0500',
+          'danger-700': '#642626',
           'danger-800': '#412121',
-          'danger-900': '#3a1c1c',
+          'danger-900': '#391C1C',
         },
         font: { families: { accent: 'Marianne', base: 'Marianne' } },
         logo: {
@@ -418,8 +477,10 @@ export const tokens = {
       },
       components: {
         alert: { 'border-radius': '0' },
+        modal: { 'width-small': '342px' },
         button: {
-          'medium-height': '48px',
+          'medium-height': '40px',
+          'medium-text-height': '40px',
           'border-radius': '4px',
           primary: {
             background: {
@@ -427,9 +488,9 @@ export const tokens = {
               'color-hover': '#1212ff',
               'color-active': '#2323ff',
             },
-            color: '#ffffff',
-            'color-hover': '#ffffff',
-            'color-active': '#ffffff',
+            color: '#fff',
+            'color-hover': '#fff',
+            'color-active': '#fff',
           },
           'primary-text': {
             background: {
@@ -448,7 +509,7 @@ export const tokens = {
           },
           'tertiary-text': {
             background: {
-              'color-hover': 'var(--c--theme--colors--primary-100)',
+              'color-hover': 'var(--c--theme--colors--greyscale-100)',
             },
             'color-hover': 'var(--c--theme--colors--primary-text)',
             color: 'var(--c--theme--colors--primary-600)',
@@ -486,7 +547,7 @@ export const tokens = {
         },
         'forms-input': {
           'border-radius': '4px',
-          'background-color': '#ffffff',
+          'background-color': '#fff',
           'border-color': 'var(--c--theme--colors--primary-text)',
           'box-shadow-color': 'var(--c--theme--colors--primary-text)',
           'value-color': 'var(--c--theme--colors--primary-text)',
@@ -502,7 +563,7 @@ export const tokens = {
           'item-font-size': '14px',
           'border-radius': '4px',
           'border-radius-hover': '4px',
-          'background-color': '#ffffff',
+          'background-color': '#fff',
           'border-color': 'var(--c--theme--colors--primary-text)',
           'border-color-hover': 'var(--c--theme--colors--primary-text)',
           'box-shadow-color': 'var(--c--theme--colors--primary-text)',

src/frontend/apps/impress/src/cunningham/useCunninghamTheme.tsx

@@ -5,6 +5,8 @@ import { tokens } from './cunningham-tokens';
 
 type Tokens = typeof tokens.themes.default & Partial<typeof tokens.themes.dsfr>;
 type ColorsTokens = Tokens['theme']['colors'];
+type FontSizesTokens = Tokens['theme']['font']['sizes'];
+type SpacingsTokens = Tokens['theme']['spacings'];
 type ComponentTokens = Tokens['components'];
 export type Theme = keyof typeof tokens.themes;
 
@@ -13,6 +15,8 @@ interface AuthStore {
   setTheme: (theme: Theme) => void;
   themeTokens: () => Partial<Tokens['theme']>;
   colorsTokens: () => Partial<ColorsTokens>;
+  fontSizesTokens: () => Partial<FontSizesTokens>;
+  spacingsTokens: () => Partial<SpacingsTokens>;
   componentTokens: () => ComponentTokens;
 }
 
@@ -28,6 +32,8 @@ export const useCunninghamTheme = create<AuthStore>((set, get) => {
     themeTokens: () => currentTheme().theme,
     colorsTokens: () => currentTheme().theme.colors,
     componentTokens: () => currentTheme().components,
+    spacingsTokens: () => currentTheme().theme.spacings,
+    fontSizesTokens: () => currentTheme().theme.font.sizes,
     setTheme: (theme: Theme) => {
       set({ theme });
     },

src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx

@@ -4,13 +4,14 @@ import { BlockNoteView } from '@blocknote/mantine';
 import '@blocknote/mantine/style.css';
 import { useCreateBlockNote } from '@blocknote/react';
 import { HocuspocusProvider } from '@hocuspocus/provider';
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
+import { css } from 'styled-components';
 import * as Y from 'yjs';
 
 import { Box, TextErrors } from '@/components';
 import { useAuthStore } from '@/core/auth';
-import { Doc, Role, currentDocRole } from '@/features/docs/doc-management';
+import { Doc } from '@/features/docs/doc-management';
 
 import { useUploadFile } from '../hook';
 import { useHeadings } from '../hook/useHeadings';
@@ -20,32 +21,74 @@ import { randomColor } from '../utils';
 
 import { BlockNoteToolbar } from './BlockNoteToolbar';
 
-const cssEditor = (readonly: boolean) => `
-  &, & > .bn-container, & .ProseMirror {
-    height:100%
-  };
-  & .bn-editor {
-    padding-right: 30px;
-    ${readonly && `padding-left: 30px;`}
-  };
+const cssEditor = (readonly: boolean) => css`
+  &,
+  & > .bn-container,
+  & .ProseMirror {
+    height: 100%;
+
+    .bn-side-menu[data-block-type='heading'][data-level='1'] {
+      height: 50px;
+    }
+    .bn-side-menu[data-block-type='heading'][data-level='2'] {
+      height: 43px;
+    }
+    .bn-side-menu[data-block-type='heading'][data-level='3'] {
+      height: 35px;
+    }
+    h1 {
+      font-size: 1.875rem;
+    }
+    h2 {
+      font-size: 1.5rem;
+    }
+    h3 {
+      font-size: 1.25rem;
+    }
+    a {
+      color: var(--c--theme--colors--greyscale-500);
+      cursor: pointer;
+    }
+    .bn-block-group
+      .bn-block-group
+      .bn-block-outer:not([data-prev-depth-changed]):before {
+      border-left: none;
+    }
+  }
+
+  .bn-editor {
+    color: var(--c--theme--colors--greyscale-700);
+  }
+
+  .bn-block-outer:not(:first-child) {
+    &:has(h1) {
+      padding-top: 32px;
+    }
+    &:has(h2) {
+      padding-top: 24px;
+    }
+    &:has(h3) {
+      padding-top: 16px;
+    }
+  }
+
   & .bn-inline-content code {
     background-color: gainsboro;
     padding: 2px;
     border-radius: 4px;
   }
+
   @media screen and (width <= 560px) {
     & .bn-editor {
-      padding-left: 40px;
-      padding-right: 10px;
       ${readonly && `padding-left: 10px;`}
-    };
-    .bn-side-menu[data-block-type=heading][data-level="1"] {
-        height: 46px;
     }
-    .bn-side-menu[data-block-type=heading][data-level="2"] {
+    .bn-side-menu[data-block-type='heading'][data-level='1'] {
+      height: 46px;
+    }
+    .bn-side-menu[data-block-type='heading'][data-level='2'] {
       height: 40px;
     }
-    .bn-side-menu[data-block-type=heading][data-level="3"] {
+    .bn-side-menu[data-block-type='heading'][data-level='3'] {
       height: 40px;
     }
     & .bn-editor h1 {
@@ -57,7 +100,7 @@ const cssEditor = (readonly: boolean) => `
     & .bn-editor h3 {
       font-size: 1.2rem;
     }
-    .bn-block-content[data-is-empty-and-focused][data-content-type="paragraph"] 
+    .bn-block-content[data-is-empty-and-focused][data-content-type='paragraph']
       .bn-inline-content:has(> .ProseMirror-trailingBreak:only-child)::before {
       font-size: 14px;
     }
@@ -127,23 +170,6 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
   );
   useHeadings(editor);
 
-  /**
-   * With the collaboration it gets complicated to create the initial block
-   * better to let Blocknote manage, then we update the block with the content.
-   */
-  useEffect(() => {
-    if (doc.content || currentDocRole(doc.abilities) !== Role.OWNER) {
-      return;
-    }
-
-    setTimeout(() => {
-      editor.updateBlock(editor.document[0], {
-        type: 'heading',
-        content: '',
-      });
-    }, 100);
-  }, [editor, doc.content, doc.abilities]);
-
   useEffect(() => {
     setEditor(editor);
 
@@ -153,7 +179,11 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
   }, [setEditor, editor]);
 
   return (
-    <Box $css={cssEditor(readOnly)}>
+    <Box
+      $padding={{ top: 'md' }}
+      $background="white"
+      $css={cssEditor(readOnly)}
+    >
       {errorAttachment && (
         <Box $margin={{ bottom: 'big' }}>
           <TextErrors

src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx

@@ -1,40 +1,36 @@
-import { Alert, Loader, VariantType } from '@openfun/cunningham-react';
+import { Loader } from '@openfun/cunningham-react';
 import { useRouter } from 'next/router';
-import React, { useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import { useEffect, useState } from 'react';
+import { css } from 'styled-components';
 import * as Y from 'yjs';
 
-import { Box, Card, Text, TextErrors } from '@/components';
+import { Box, Text, TextErrors } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
-import { DocHeader } from '@/features/docs/doc-header';
+import { DocHeader, DocVersionHeader } from '@/features/docs/doc-header/';
 import {
   Doc,
   base64ToBlocknoteXmlFragment,
-  useDocStore,
+  useProviderStore,
 } from '@/features/docs/doc-management';
+import { TableContent } from '@/features/docs/doc-table-content/';
 import { Versions, useDocVersion } from '@/features/docs/doc-versioning/';
 import { useResponsiveStore } from '@/stores';
 
 import { BlockNoteEditor, BlockNoteEditorVersion } from './BlockNoteEditor';
-import { IconOpenPanelEditor, PanelEditor } from './PanelEditor';
 
 interface DocEditorProps {
   doc: Doc;
+  versionId?: Versions['version_id'];
 }
 
-export const DocEditor = ({ doc }: DocEditorProps) => {
-  const {
-    query: { versionId },
-  } = useRouter();
-  const { t } = useTranslation();
-  const { isMobile } = useResponsiveStore();
+export const DocEditor = ({ doc, versionId }: DocEditorProps) => {
+  const { isDesktop } = useResponsiveStore();
 
-  const isVersion = versionId && typeof versionId === 'string';
+  const isVersion = !!versionId && typeof versionId === 'string';
 
   const { colorsTokens } = useCunninghamTheme();
 
-  const { providers } = useDocStore();
-  const provider = providers?.[doc.id];
+  const { provider } = useProviderStore();
 
   if (!provider) {
     return null;
@@ -42,43 +38,41 @@ export const DocEditor = ({ doc }: DocEditorProps) => {
 
   return (
     <>
-      <DocHeader doc={doc} />
-      {!doc.abilities.partial_update && (
-        <Box $margin={{ all: 'small', top: 'none' }}>
-          <Alert type={VariantType.WARNING}>
-            {t(`Read only, you cannot edit this document.`)}
-          </Alert>
+      {isDesktop && !isVersion && (
+        <Box
+          $position="absolute"
+          $css={css`
+            top: 72px;
+            right: 20px;
+          `}
+        >
+          <TableContent />
         </Box>
       )}
-      {isVersion && (
-        <Box $margin={{ all: 'small', top: 'none' }}>
-          <Alert type={VariantType.WARNING}>
-            {t(`Read only, you cannot edit document versions.`)}
-          </Alert>
+      <Box $maxWidth="868px" $width="100%" $height="100%">
+        <Box $padding={{ horizontal: isDesktop ? '54px' : 'base' }}>
+          {isVersion ? (
+            <DocVersionHeader title={doc.title} />
+          ) : (
+            <DocHeader doc={doc} />
+          )}
         </Box>
-      )}
-      <Box
-        $background={colorsTokens()['primary-bg']}
-        $height="100%"
-        $direction="row"
-        $margin={{ all: isMobile ? 'tiny' : 'small', top: 'none' }}
-        $css="overflow-x: clip;"
-        $position="relative"
-      >
-        <Card
-          $padding={isMobile ? 'small' : 'big'}
-          $css="flex:1;"
-          $overflow="auto"
+
+        <Box
+          $background={colorsTokens()['primary-bg']}
+          $direction="row"
+          $width="100%"
+          $css="overflow-x: clip; flex: 1;"
           $position="relative"
         >
-          {isVersion ? (
-            <DocVersionEditor docId={doc.id} versionId={versionId} />
-          ) : (
-            <BlockNoteEditor doc={doc} provider={provider} />
-          )}
-          {!isMobile && <IconOpenPanelEditor />}
-        </Card>
-        <PanelEditor doc={doc} />
+          <Box $css="flex:1;" $overflow="auto" $position="relative">
+            {isVersion ? (
+              <DocVersionEditor docId={doc.id} versionId={versionId} />
+            ) : (
+              <BlockNoteEditor doc={doc} provider={provider} />
+            )}
+          </Box>
+        </Box>
       </Box>
     </>
   );

src/frontend/apps/impress/src/features/docs/doc-editor/components/PanelEditor.tsx

@@ -1,197 +0,0 @@
-import React, { PropsWithChildren, useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { Box, BoxButton, Card, IconBG, Text } from '@/components';
-import { useCunninghamTheme } from '@/cunningham';
-import { Doc } from '@/features/docs/doc-management';
-import { TableContent } from '@/features/docs/doc-table-content';
-import { VersionList } from '@/features/docs/doc-versioning';
-import { useResponsiveStore } from '@/stores';
-
-import { useHeadingStore, usePanelEditorStore } from '../stores';
-
-interface PanelProps {
-  doc: Doc;
-}
-
-export const PanelEditor = ({ doc }: PropsWithChildren<PanelProps>) => {
-  const { t } = useTranslation();
-  const { colorsTokens } = useCunninghamTheme();
-  const { isMobile } = useResponsiveStore();
-  const { isPanelTableContentOpen, setIsPanelTableContentOpen, isPanelOpen } =
-    usePanelEditorStore();
-
-  return (
-    <Card
-      $width="100%"
-      $maxWidth="20rem"
-      $position={isMobile ? 'absolute' : 'sticky'}
-      $height="100%"
-      $hasTransition="slow"
-      $css={`
-        top: 0vh;
-        right: 0;
-        transform: translateX(0%);
-        flex: 1;
-        margin-left: 1rem;
-        ${
-          !isPanelOpen &&
-          `
-            transform: translateX(200%);
-            opacity: 0;
-            flex: 0;
-            margin-left: 0rem;
-            max-width: 0rem;
-          `
-        }
-      `}
-      aria-label={t('Document panel')}
-      aria-hidden={!isPanelOpen}
-    >
-      <Box
-        $overflow="inherit"
-        $position="sticky"
-        $hasTransition="slow"
-        $css={`
-          top: 0;
-          opacity: ${isPanelOpen ? '1' : '0'};
-        `}
-        $maxHeight="99vh"
-      >
-        {isMobile && <IconOpenPanelEditor />}
-        <Box
-          $direction="row"
-          $justify="space-between"
-          $align="center"
-          $position="relative"
-          $background={colorsTokens()['primary-400']}
-          $margin={{ bottom: 'tiny' }}
-          $radius="4px 4px 0 0"
-        >
-          <Box
-            $background="white"
-            $position="absolute"
-            $height="100%"
-            $width={doc.abilities.versions_list ? '50%' : '100%'}
-            $hasTransition="slow"
-            $css={`
-                border-top: 2px solid ${colorsTokens()['primary-600']};
-                border-radius: 0 4px 0 0;
-                ${
-                  isPanelTableContentOpen
-                    ? `
-                      transform: translateX(0);
-                      border-radius: 4px 0 0 0;
-                    `
-                    : `transform: translateX(100%);`
-                }
-              `}
-          />
-          <BoxButton
-            $minWidth={doc.abilities.versions_list ? '50%' : '100%'}
-            onClick={() => setIsPanelTableContentOpen(true)}
-            $zIndex={1}
-          >
-            <Text
-              $width="100%"
-              $weight="bold"
-              $size="m"
-              $theme="primary"
-              $variation="600"
-              $padding={{ vertical: 'small', horizontal: 'small' }}
-            >
-              {t('Table of content')}
-            </Text>
-          </BoxButton>
-          {doc.abilities.versions_list && (
-            <BoxButton
-              $minWidth="50%"
-              onClick={() => setIsPanelTableContentOpen(false)}
-              $zIndex={1}
-            >
-              <Text
-                $width="100%"
-                $weight="bold"
-                $size="m"
-                $theme="primary"
-                $variation="600"
-                $padding={{ vertical: 'small', horizontal: 'small' }}
-              >
-                {t('Versions')}
-              </Text>
-            </BoxButton>
-          )}
-        </Box>
-        {isPanelTableContentOpen && <TableContent />}
-        {!isPanelTableContentOpen && doc.abilities.versions_list && (
-          <VersionList doc={doc} />
-        )}
-      </Box>
-    </Card>
-  );
-};
-
-export const IconOpenPanelEditor = () => {
-  const { headings } = useHeadingStore();
-  const { t } = useTranslation();
-  const { setIsPanelOpen, isPanelOpen, setIsPanelTableContentOpen } =
-    usePanelEditorStore();
-  const [hasBeenOpen, setHasBeenOpen] = useState(isPanelOpen);
-  const { isMobile } = useResponsiveStore();
-
-  const setClosePanel = () => {
-    setHasBeenOpen(true);
-    setIsPanelOpen(!isPanelOpen);
-  };
-
-  // Open the panel if there are more than 1 heading
-  useEffect(() => {
-    if (headings?.length && headings.length > 1 && !hasBeenOpen && !isMobile) {
-      setIsPanelTableContentOpen(true);
-      setIsPanelOpen(true);
-      setHasBeenOpen(true);
-    }
-  }, [
-    headings,
-    setIsPanelTableContentOpen,
-    setIsPanelOpen,
-    hasBeenOpen,
-    isMobile,
-  ]);
-
-  // If open from the doc header we set the state as well
-  useEffect(() => {
-    if (isPanelOpen && !hasBeenOpen) {
-      setHasBeenOpen(true);
-    }
-  }, [hasBeenOpen, isPanelOpen]);
-
-  // Close the panel unmount
-  useEffect(() => {
-    return () => {
-      setIsPanelOpen(false);
-    };
-  }, [setIsPanelOpen]);
-
-  return (
-    <IconBG
-      iconName="menu_open"
-      aria-label={isPanelOpen ? t('Close the panel') : t('Open the panel')}
-      $background="transparent"
-      $size="h2"
-      $zIndex={10}
-      $hasTransition="slow"
-      $css={`
-        cursor: pointer;
-        right: 0rem;
-        top: 0.1rem;
-        transform: rotate(${isPanelOpen ? '180deg' : '0deg'});
-        user-select: none;
-        ${hasBeenOpen ? 'display:flex;' : 'display: none;'}
-      `}
-      $position="absolute"
-      onClick={setClosePanel}
-      $radius="2px"
-    />
-  );
-};

src/frontend/apps/impress/src/features/docs/doc-header/components/DocHeader.tsx

@@ -1,14 +1,17 @@
-import { Fragment } from 'react';
+import { DateTime } from 'luxon';
 import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
 
-import { Box, Card, StyledLink, Text } from '@/components';
+import { Box, HorizontalSeparator, Icon, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
-import { Doc, currentDocRole, useTrans } from '@/features/docs/doc-management';
-import { useDate } from '@/hook';
+import {
+  Doc,
+  LinkReach,
+  currentDocRole,
+  useTrans,
+} from '@/features/docs/doc-management';
 import { useResponsiveStore } from '@/stores';
 
-import { DocTagPublic } from './DocTagPublic';
 import { DocTitle } from './DocTitle';
 import { DocToolBox } from './DocToolBox';
 
@@ -17,89 +20,91 @@ interface DocHeaderProps {
 }
 
 export const DocHeader = ({ doc }: DocHeaderProps) => {
-  const { colorsTokens } = useCunninghamTheme();
+  const { colorsTokens, spacingsTokens } = useCunninghamTheme();
+  const { isDesktop } = useResponsiveStore();
+  const spacings = spacingsTokens();
+  const colors = colorsTokens();
+
   const { t } = useTranslation();
-  const { formatDate } = useDate();
+  const docIsPublic = doc.link_reach === LinkReach.PUBLIC;
+
   const { transRole } = useTrans();
-  const { isMobile, isSmallMobile } = useResponsiveStore();
 
   return (
     <>
-      <Card
-        $margin={isMobile ? 'tiny' : 'small'}
+      <Box
+        $width="100%"
+        $padding={{ top: isDesktop ? '4xl' : 'md' }}
+        $gap={spacings['base']}
         aria-label={t('It is the card information about the document.')}
       >
+        {docIsPublic && (
+          <Box
+            aria-label={t('Public document')}
+            $color={colors['primary-800']}
+            $background={colors['primary-100']}
+            $radius={spacings['3xs']}
+            $direction="row"
+            $padding="xs"
+            $flex={1}
+            $align="center"
+            $gap={spacings['3xs']}
+            $css={css`
+              border: 1px solid var(--c--theme--colors--primary-300, #e3e3fd);
+            `}
+          >
+            <Icon
+              $theme="primary"
+              $variation="800"
+              data-testid="public-icon"
+              iconName="public"
+            />
+            <Text $theme="primary" $variation="800">
+              {t('Public document')}
+            </Text>
+          </Box>
+        )}
         <Box
-          $padding={isMobile ? 'tiny' : 'small'}
           $direction="row"
           $align="center"
+          $width="100%"
+          $padding={{ bottom: 'xs' }}
         >
-          <StyledLink href="/">
-            <Text
-              $isMaterialIcon
-              $theme="primary"
-              $variation="600"
-              $size="2rem"
-              $css={css`
-                &:hover {
-                  background-color: ${colorsTokens()['primary-100']};
-                }
-              `}
-              $hasTransition
-              $radius="5px"
-              $padding="tiny"
-            >
-              home
-            </Text>
-          </StyledLink>
-          <Box
-            $width="1px"
-            $height="70%"
-            $background={colorsTokens()['greyscale-100']}
-            $margin={{ horizontal: 'tiny' }}
-          />
           <Box
             $direction="row"
             $justify="space-between"
             $css="flex:1;"
             $gap="0.5rem 1rem"
-            $wrap="wrap"
             $align="center"
           >
-            <DocTitle doc={doc} />
+            <Box $gap={spacings['3xs']}>
+              <DocTitle doc={doc} />
+
+              <Box $direction="row">
+                {isDesktop && (
+                  <>
+                    <Text $variation="600" $size="s" $weight="bold">
+                      {transRole(currentDocRole(doc.abilities))}&nbsp;·&nbsp;
+                    </Text>
+                    <Text $variation="600" $size="s">
+                      {t('Last update: {{update}}', {
+                        update: DateTime.fromISO(doc.updated_at).toRelative(),
+                      })}
+                    </Text>
+                  </>
+                )}
+                {!isDesktop && (
+                  <Text $variation="400" $size="s">
+                    {DateTime.fromISO(doc.updated_at).toRelative()}
+                  </Text>
+                )}
+              </Box>
+            </Box>
             <DocToolBox doc={doc} />
           </Box>
         </Box>
-        <Box
-          $direction={isSmallMobile ? 'column' : 'row'}
-          $align={isSmallMobile ? 'start' : 'center'}
-          $css="border-top:1px solid #eee"
-          $padding={{
-            horizontal: isMobile ? 'tiny' : 'big',
-            vertical: 'tiny',
-          }}
-          $gap="0.5rem 2rem"
-          $justify="space-between"
-          $wrap="wrap"
-          $position="relative"
-        >
-          <Box
-            $direction={isSmallMobile ? 'column' : 'row'}
-            $align={isSmallMobile ? 'start' : 'center'}
-            $gap="0.5rem 2rem"
-            $wrap="wrap"
-          >
-            <DocTagPublic doc={doc} />
-            <Text $size="s" $display="inline">
-              {t('Created at')} <strong>{formatDate(doc.created_at)}</strong>
-            </Text>
-          </Box>
-          <Text $size="s" $display="inline">
-            {t('Your role:')}{' '}
-            <strong>{transRole(currentDocRole(doc.abilities))}</strong>
-          </Text>
-        </Box>
-      </Card>
+        <HorizontalSeparator $withPadding={false} />
+      </Box>
     </>
   );
 };

src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx

@@ -5,12 +5,12 @@ import {
   VariantType,
   useToastProvider,
 } from '@openfun/cunningham-react';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { css } from 'styled-components';
 
 import { Box, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
-import { useHeadingStore } from '@/features/docs/doc-editor';
 import {
   Doc,
   KEY_DOC,
@@ -19,45 +19,50 @@ import {
   useUpdateDoc,
 } from '@/features/docs/doc-management';
 import { useBroadcastStore, useResponsiveStore } from '@/stores';
-import { isFirefox } from '@/utils/userAgent';
 
 interface DocTitleProps {
   doc: Doc;
 }
 
 export const DocTitle = ({ doc }: DocTitleProps) => {
-  const { isMobile } = useResponsiveStore();
-
   if (!doc.abilities.partial_update) {
-    return (
-      <Text
-        as="h2"
-        $margin={{ all: 'none', left: 'tiny' }}
-        $size={isMobile ? 'h4' : 'h2'}
-      >
-        {doc.title}
-      </Text>
-    );
+    return <DocTitleText title={doc.title} />;
   }
 
   return <DocTitleInput doc={doc} />;
 };
 
+interface DocTitleTextProps {
+  title: string;
+}
+
+export const DocTitleText = ({ title }: DocTitleTextProps) => {
+  const { isMobile } = useResponsiveStore();
+  return (
+    <Text
+      as="h2"
+      $margin={{ all: 'none', left: 'none' }}
+      $size={isMobile ? 'h4' : 'h2'}
+      $variation="1000"
+    >
+      {title}
+    </Text>
+  );
+};
+
 const DocTitleInput = ({ doc }: DocTitleProps) => {
+  const { isDesktop } = useResponsiveStore();
   const { t } = useTranslation();
   const { colorsTokens } = useCunninghamTheme();
   const [titleDisplay, setTitleDisplay] = useState(doc.title);
   const { toast } = useToastProvider();
   const { untitledDocument } = useTrans();
   const isUntitled = titleDisplay === untitledDocument;
-  const { headings } = useHeadingStore();
-  const headingText = headings?.[0]?.contentText;
-  const debounceRef = useRef<NodeJS.Timeout>();
-  const { isMobile } = useResponsiveStore();
+
   const { broadcast } = useBroadcastStore();
 
   const { mutate: updateDoc } = useUpdateDoc({
-    listInvalideQueries: [KEY_LIST_DOC],
+    listInvalideQueries: [KEY_DOC, KEY_LIST_DOC],
     onSuccess(data) {
       if (data.title !== untitledDocument) {
         toast(t('Document title updated successfully'), VariantType.SUCCESS);
@@ -81,10 +86,7 @@ const DocTitleInput = ({ doc }: DocTitleProps) => {
 
       // If mutation we update
       if (sanitizedTitle !== doc.title) {
-        if (debounceRef.current) {
-          clearTimeout(debounceRef.current);
-          debounceRef.current = undefined;
-        }
+        setTitleDisplay(sanitizedTitle);
         updateDoc({ id: doc.id, title: sanitizedTitle });
       }
     },
@@ -98,74 +100,42 @@ const DocTitleInput = ({ doc }: DocTitleProps) => {
     }
   };
 
-  const handleOnClick = () => {
-    if (isUntitled) {
-      setTitleDisplay('');
-    }
-  };
-
   useEffect(() => {
     setTitleDisplay(doc.title);
-  }, [doc.title]);
-
-  useEffect(() => {
-    if ((!debounceRef.current && !isUntitled) || !headingText) {
-      return;
-    }
-
-    setTitleDisplay(headingText);
-
-    if (debounceRef.current) {
-      clearTimeout(debounceRef.current);
-    }
-
-    debounceRef.current = setTimeout(() => {
-      handleTitleSubmit(headingText);
-      debounceRef.current = undefined;
-    }, 3000);
-  }, [isUntitled, handleTitleSubmit, headingText]);
+  }, [doc]);
 
   return (
     <>
       <Tooltip content={t('Rename')} placement="top">
         <Box
-          as="h2"
-          $radius="4px"
-          $padding={{ horizontal: 'tiny', vertical: '4px' }}
-          $margin="none"
-          $minWidth="200px"
-          contentEditable={isFirefox() ? 'true' : 'plaintext-only'}
-          onClick={handleOnClick}
-          onBlurCapture={(e) =>
-            handleTitleSubmit(e.currentTarget.textContent || '')
-          }
+          as="span"
+          role="textbox"
+          contentEditable
+          defaultValue={isUntitled ? undefined : titleDisplay}
           onKeyDownCapture={handleKeyDown}
           suppressContentEditableWarning={true}
-          $color={
-            isUntitled
-              ? colorsTokens()['greyscale-200']
-              : colorsTokens()['greyscale-text']
+          aria-label="doc title input"
+          onBlurCapture={(event) =>
+            handleTitleSubmit(event.target.textContent || '')
           }
-          $css={`
-            ${isUntitled && 'font-style: italic;'}
-            cursor: text;
-            font-size: ${isMobile ? '1.2rem' : '1.5rem'};
-            transition: box-shadow 0.5s, border-color 0.5s;
-            border: 1px dashed transparent;
-            
-            &:hover {
-              border-color: rgba(0, 123, 255, 0.25);
-              border-style: dashed;
+          $color={colorsTokens()['greyscale-1000']}
+          $margin={{ left: '-2px', right: '10px' }}
+          $css={css`
+            &[contenteditable='true']:empty:not(:focus):before {
+              content: '${untitledDocument}';
+              color: grey;
+              pointer-events: none;
+              font-style: italic;
             }
+            font-size: ${isDesktop
+              ? css`var(--c--theme--font--sizes--h2)`
+              : css`var(--c--theme--font--sizes--sm)`};
+            font-weight: 700;
 
-            &:focus {
-              outline: none;
-              border-color: transparent;
-              box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
-            }
+            outline: none;
           `}
         >
-          {titleDisplay}
+          {isUntitled ? '' : titleDisplay}
         </Box>
       </Tooltip>
     </>

src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx

@@ -1,24 +1,33 @@
 import {
   Button,
   VariantType,
+  useModal,
   useToastProvider,
 } from '@openfun/cunningham-react';
-import { useRouter } from 'next/router';
-import React, { useState } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { css } from 'styled-components';
 
-import { Box, DropButton, IconOptions } from '@/components';
-import { useAuthStore } from '@/core';
 import {
-  useEditorStore,
-  usePanelEditorStore,
-} from '@/features/docs/doc-editor/';
+  Box,
+  DropdownMenu,
+  DropdownMenuOption,
+  Icon,
+  IconOptions,
+} from '@/components';
+import { useCunninghamTheme } from '@/cunningham';
+import { useEditorStore } from '@/features/docs/doc-editor/';
 import {
   Doc,
   ModalRemoveDoc,
-  ModalShare,
+  useCopyDocLink,
 } from '@/features/docs/doc-management';
-import { ModalVersion } from '@/features/docs/doc-versioning';
+import { DocShareModal } from '@/features/docs/doc-share';
+import {
+  KEY_LIST_DOC_VERSIONS,
+  ModalSelectVersion,
+} from '@/features/docs/doc-versioning';
 import { useResponsiveStore } from '@/stores';
 
 import { ModalPDF } from './ModalExport';
@@ -28,20 +37,86 @@ interface DocToolBoxProps {
 }
 
 export const DocToolBox = ({ doc }: DocToolBoxProps) => {
-  const {
-    query: { versionId },
-  } = useRouter();
   const { t } = useTranslation();
-  const [isModalShareOpen, setIsModalShareOpen] = useState(false);
+  const hasAccesses = doc.nb_accesses > 1;
+  const queryClient = useQueryClient();
+
+  const copyDocLink = useCopyDocLink(doc.id);
+
+  const { spacingsTokens, colorsTokens } = useCunninghamTheme();
+
+  const spacings = spacingsTokens();
+  const colors = colorsTokens();
+
   const [isModalRemoveOpen, setIsModalRemoveOpen] = useState(false);
   const [isModalPDFOpen, setIsModalPDFOpen] = useState(false);
-  const [isDropOpen, setIsDropOpen] = useState(false);
-  const { setIsPanelOpen, setIsPanelTableContentOpen } = usePanelEditorStore();
-  const [isModalVersionOpen, setIsModalVersionOpen] = useState(false);
-  const { isSmallMobile } = useResponsiveStore();
-  const { authenticated } = useAuthStore();
+  const selectHistoryModal = useModal();
+  const modalShare = useModal();
+
+  const { isSmallMobile, isDesktop } = useResponsiveStore();
   const { editor } = useEditorStore();
+
   const { toast } = useToastProvider();
+  const canViewAccesses = doc.abilities.accesses_view;
+
+  const options: DropdownMenuOption[] = [
+    ...(isSmallMobile
+      ? [
+          {
+            label: canViewAccesses ? t('Share') : t('Copy link'),
+            icon: canViewAccesses ? 'group' : 'link',
+
+            callback: () => {
+              if (canViewAccesses) {
+                modalShare.open();
+                return;
+              }
+              copyDocLink();
+            },
+          },
+          {
+            label: t('Export'),
+            icon: 'download',
+            callback: () => {
+              setIsModalPDFOpen(true);
+            },
+          },
+        ]
+      : []),
+
+    {
+      label: t('Version history'),
+      icon: 'history',
+      disabled: !doc.abilities.versions_list,
+      callback: () => {
+        selectHistoryModal.open();
+      },
+      show: isDesktop,
+    },
+
+    {
+      label: t('Copy as {{format}}', { format: 'Markdown' }),
+      icon: 'content_copy',
+      callback: () => {
+        void copyCurrentEditorToClipboard('markdown');
+      },
+    },
+    {
+      label: t('Copy as {{format}}', { format: 'HTML' }),
+      icon: 'content_copy',
+      callback: () => {
+        void copyCurrentEditorToClipboard('html');
+      },
+    },
+    {
+      label: t('Delete document'),
+      icon: 'delete',
+      disabled: !doc.abilities.destroy,
+      callback: () => {
+        setIsModalRemoveOpen(true);
+      },
+    },
+  ];
 
   const copyCurrentEditorToClipboard = async (
     asFormat: 'html' | 'markdown',
@@ -66,6 +141,16 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
     }
   };
 
+  useEffect(() => {
+    if (selectHistoryModal.isOpen) {
+      return;
+    }
+
+    void queryClient.resetQueries({
+      queryKey: [KEY_LIST_DOC_VERSIONS],
+    });
+  }, [selectHistoryModal.isOpen, queryClient]);
+
   return (
     <Box
       $margin={{ left: 'auto' }}
@@ -74,118 +159,99 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
       $gap="0.5rem 1.5rem"
       $wrap={isSmallMobile ? 'wrap' : 'nowrap'}
     >
-      {versionId && (
-        <Box $margin={{ left: 'auto' }}>
+      <Box
+        $direction="row"
+        $align="center"
+        $margin={{ left: 'auto' }}
+        $gap={spacings['2xs']}
+      >
+        {canViewAccesses && !isSmallMobile && (
+          <>
+            {!hasAccesses && (
+              <Button
+                color="tertiary-text"
+                onClick={() => {
+                  modalShare.open();
+                }}
+                size={isSmallMobile ? 'small' : 'medium'}
+              >
+                {t('Share')}
+              </Button>
+            )}
+            {hasAccesses && (
+              <Box
+                $css={css`
+                  .c__button--medium {
+                    height: 32px;
+                    padding: 10px var(--c--theme--spacings--xs);
+                    gap: 7px;
+                  }
+                `}
+              >
+                <Button
+                  color="tertiary"
+                  aria-label="Share button"
+                  icon={
+                    <Icon iconName="group" $theme="primary" $variation="800" />
+                  }
+                  onClick={() => {
+                    modalShare.open();
+                  }}
+                  size={isSmallMobile ? 'small' : 'medium'}
+                >
+                  {doc.nb_accesses - 1}
+                </Button>
+              </Box>
+            )}
+          </>
+        )}
+        {!canViewAccesses && !isSmallMobile && (
           <Button
+            color="tertiary-text"
             onClick={() => {
-              setIsModalVersionOpen(true);
-            }}
-            color="secondary"
-            size={isSmallMobile ? 'small' : 'medium'}
-          >
-            {t('Restore this version')}
-          </Button>
-        </Box>
-      )}
-      <Box $direction="row" $margin={{ left: 'auto' }} $gap="1rem">
-        {authenticated && (
-          <Button
-            onClick={() => {
-              setIsModalShareOpen(true);
+              copyDocLink();
             }}
             size={isSmallMobile ? 'small' : 'medium'}
           >
-            {t('Share')}
+            {t('Copy link')}
           </Button>
         )}
-        <DropButton
-          button={
-            <IconOptions
-              isOpen={isDropOpen}
-              aria-label={t('Open the document options')}
-            />
-          }
-          onOpenChange={(isOpen) => setIsDropOpen(isOpen)}
-          isOpen={isDropOpen}
-        >
-          <Box>
-            {doc.abilities.versions_list && (
-              <Button
-                onClick={() => {
-                  setIsPanelOpen(true);
-                  setIsPanelTableContentOpen(false);
-                  setIsDropOpen(false);
-                }}
-                color="primary-text"
-                icon={<span className="material-icons">history</span>}
-                size="small"
-              >
-                {t('Version history')}
-              </Button>
-            )}
-            <Button
-              onClick={() => {
-                setIsPanelOpen(true);
-                setIsPanelTableContentOpen(true);
-                setIsDropOpen(false);
-              }}
-              color="primary-text"
-              icon={<span className="material-icons">summarize</span>}
-              size="small"
-            >
-              {t('Table of contents')}
-            </Button>
-            <Button
-              onClick={() => {
-                setIsModalPDFOpen(true);
-                setIsDropOpen(false);
-              }}
-              color="primary-text"
-              icon={<span className="material-icons">file_download</span>}
-              size="small"
-            >
-              {t('Export')}
-            </Button>
-            {doc.abilities.destroy && (
-              <Button
-                onClick={() => {
-                  setIsModalRemoveOpen(true);
-                  setIsDropOpen(false);
-                }}
-                color="primary-text"
-                icon={<span className="material-icons">delete</span>}
-                size="small"
-              >
-                {t('Delete document')}
-              </Button>
-            )}
-            <Button
-              onClick={() => {
-                setIsDropOpen(false);
-                void copyCurrentEditorToClipboard('markdown');
-              }}
-              color="primary-text"
-              icon={<span className="material-icons">content_copy</span>}
-              size="small"
-            >
-              {t('Copy as {{format}}', { format: 'Markdown' })}
-            </Button>
-            <Button
-              onClick={() => {
-                setIsDropOpen(false);
-                void copyCurrentEditorToClipboard('html');
-              }}
-              color="primary-text"
-              icon={<span className="material-icons">content_copy</span>}
-              size="small"
-            >
-              {t('Copy as {{format}}', { format: 'HTML' })}
-            </Button>
-          </Box>
-        </DropButton>
+        {!isSmallMobile && (
+          <Button
+            color="tertiary-text"
+            icon={
+              <Icon iconName="download" $theme="primary" $variation="800" />
+            }
+            onClick={() => {
+              setIsModalPDFOpen(true);
+            }}
+            size={isSmallMobile ? 'small' : 'medium'}
+          />
+        )}
+        <DropdownMenu options={options}>
+          <IconOptions
+            isHorizontal
+            $theme="primary"
+            $padding={{ all: 'xs' }}
+            $css={css`
+              border-radius: 4px;
+              &:hover {
+                background-color: ${colors['greyscale-100']};
+              }
+              ${isSmallMobile
+                ? css`
+                    padding: 10px;
+                    border: 1px solid ${colors['greyscale-300']};
+                  `
+                : ''}
+            `}
+            aria-label={t('Open the document options')}
+          />
+        </DropdownMenu>
       </Box>
-      {isModalShareOpen && (
-        <ModalShare onClose={() => setIsModalShareOpen(false)} doc={doc} />
+
+      {modalShare.isOpen && (
+        <DocShareModal onClose={() => modalShare.close()} doc={doc} />
       )}
       {isModalPDFOpen && (
         <ModalPDF onClose={() => setIsModalPDFOpen(false)} doc={doc} />
@@ -193,11 +259,10 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
       {isModalRemoveOpen && (
         <ModalRemoveDoc onClose={() => setIsModalRemoveOpen(false)} doc={doc} />
       )}
-      {isModalVersionOpen && versionId && (
-        <ModalVersion
-          onClose={() => setIsModalVersionOpen(false)}
-          docId={doc.id}
-          versionId={versionId as string}
+      {selectHistoryModal.isOpen && (
+        <ModalSelectVersion
+          onClose={() => selectHistoryModal.close()}
+          doc={doc}
         />
       )}
     </Box>

src/frontend/apps/impress/src/features/docs/doc-header/components/DocVersionHeader.tsx

@@ -0,0 +1,31 @@
+import { useTranslation } from 'react-i18next';
+
+import { Box, HorizontalSeparator } from '@/components';
+import { useCunninghamTheme } from '@/cunningham';
+
+import { DocTitleText } from './DocTitle';
+
+interface DocVersionHeaderProps {
+  title: string;
+}
+
+export const DocVersionHeader = ({ title }: DocVersionHeaderProps) => {
+  const { spacingsTokens } = useCunninghamTheme();
+
+  const spacings = spacingsTokens();
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <Box
+        $width="100%"
+        $padding={{ vertical: 'base' }}
+        $gap={spacings['base']}
+        aria-label={t('It is the document title')}
+      >
+        <DocTitleText title={title} />
+        <HorizontalSeparator />
+      </Box>
+    </>
+  );
+};

src/frontend/apps/impress/src/features/docs/doc-header/components/ModalExport.tsx

@@ -1,11 +1,8 @@
 import {
-  Alert,
   Button,
   Loader,
   Modal,
   ModalSize,
-  Radio,
-  RadioGroup,
   Select,
   VariantType,
   useToastProvider,
@@ -21,6 +18,11 @@ import { useExport } from '../api/useExport';
 import { TemplatesOrdering, useTemplates } from '../api/useTemplates';
 import { adaptBlockNoteHTML, downloadFile } from '../utils';
 
+export enum DocDownloadFormat {
+  PDF = 'pdf',
+  DOCX = 'docx',
+}
+
 interface ModalPDFProps {
   onClose: () => void;
   doc: Doc;
@@ -41,7 +43,9 @@ export const ModalPDF = ({ onClose, doc }: ModalPDFProps) => {
     error,
   } = useExport();
   const [templateIdSelected, setTemplateIdSelected] = useState<string>();
-  const [format, setFormat] = useState<'pdf' | 'docx'>('pdf');
+  const [format, setFormat] = useState<DocDownloadFormat>(
+    DocDownloadFormat.PDF,
+  );
 
   const templateOptions = useMemo(() => {
     if (!templates?.pages) {
@@ -123,61 +127,48 @@ export const ModalPDF = ({ onClose, doc }: ModalPDFProps) => {
 
   return (
     <Modal
+      data-testid="modal-export"
       isOpen
       closeOnClickOutside
-      hideCloseButton
-      leftActions={
-        <Button
-          aria-label={t('Close the modal')}
-          color="secondary"
-          fullWidth
-          onClick={() => onClose()}
-        >
-          {t('Cancel')}
-        </Button>
-      }
       onClose={() => onClose()}
       rightActions={
-        <Button
-          aria-label={t('Download')}
-          color="primary"
-          fullWidth
-          onClick={() => void onSubmit()}
-          disabled={isPending || !templateIdSelected}
-        >
-          {t('Download')}
-        </Button>
+        <>
+          <Button
+            aria-label={t('Close the modal')}
+            color="secondary"
+            fullWidth
+            onClick={() => onClose()}
+          >
+            {t('Cancel')}
+          </Button>
+          <Button
+            aria-label={t('Download')}
+            color="primary"
+            fullWidth
+            onClick={() => void onSubmit()}
+            disabled={isPending || !templateIdSelected}
+          >
+            {t('Download')}
+          </Button>
+        </>
       }
       size={ModalSize.MEDIUM}
       title={
-        <Box $align="center" $gap="1rem">
-          <Text
-            className="material-icons"
-            $size="3.5rem"
-            $theme="primary"
-            $variation="600"
-          >
-            picture_as_pdf
-          </Text>
-          <Text as="h2" $size="h3" $margin="none" $theme="primary">
-            {t('Export')}
-          </Text>
-        </Box>
+        <Text $size="h6" $variation="1000" $align="flex-start">
+          {t('Download')}
+        </Text>
       }
     >
       <Box
         $margin={{ bottom: 'xl' }}
         aria-label={t('Content modal to export the document')}
-        $gap="1.5rem"
+        $gap="1rem"
       >
-        <Alert canClose={false} type={VariantType.INFO}>
-          <Text>
-            {t(
-              'Export your document, it will be inserted in the selected template.',
-            )}
-          </Text>
-        </Alert>
-
+        <Text $variation="600" $size="sm">
+          {t(
+            'Upload your docs to a Microsoft Word, Open Office or PDF document.',
+          )}
+        </Text>
         <Select
           clearable={false}
           label={t('Template')}
@@ -187,22 +178,19 @@ export const ModalPDF = ({ onClose, doc }: ModalPDFProps) => {
             setTemplateIdSelected(options.target.value as string)
           }
         />
-
-        <RadioGroup>
-          <Radio
-            label={t('PDF')}
-            value="pdf"
-            name="format"
-            onChange={(evt) => setFormat(evt.target.value as 'pdf')}
-            defaultChecked={true}
-          />
-          <Radio
-            label={t('Docx')}
-            value="docx"
-            name="format"
-            onChange={(evt) => setFormat(evt.target.value as 'docx')}
-          />
-        </RadioGroup>
+        <Select
+          clearable={false}
+          fullWidth
+          label={t('Format')}
+          options={[
+            { label: t('Word / Open Office'), value: DocDownloadFormat.DOCX },
+            { label: t('PDF'), value: DocDownloadFormat.PDF },
+          ]}
+          value={format}
+          onChange={(options) =>
+            setFormat(options.target.value as DocDownloadFormat)
+          }
+        />
 
         {isPending && (
           <Box $align="center" $margin={{ top: 'big' }}>

src/frontend/apps/impress/src/features/docs/doc-header/components/index.ts

@@ -1 +1,2 @@
 export * from './DocHeader';
+export * from './DocVersionHeader';

src/frontend/apps/impress/src/features/docs/doc-management/api/index.ts

@@ -1,6 +1,8 @@
 export * from './useCreateDoc';
+export * from './useDeleteFavoriteDoc';
 export * from './useDoc';
 export * from './useDocOptions';
 export * from './useDocs';
+export * from './useCreateFavoriteDoc';
 export * from './useUpdateDoc';
 export * from './useUpdateDocLink';

src/frontend/apps/impress/src/features/docs/doc-management/api/useCreateFavoriteDoc.tsx

@@ -0,0 +1,42 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { APIError, errorCauses, fetchAPI } from '@/api';
+import { Doc } from '@/features/docs';
+
+export type CreateFavoriteDocParams = Pick<Doc, 'id'>;
+
+export const createFavoriteDoc = async ({ id }: CreateFavoriteDocParams) => {
+  const response = await fetchAPI(`documents/${id}/favorite/`, {
+    method: 'POST',
+  });
+
+  if (!response.ok) {
+    throw new APIError(
+      'Failed to make the doc as favorite',
+      await errorCauses(response),
+    );
+  }
+};
+
+interface CreateFavoriteDocProps {
+  onSuccess?: () => void;
+  listInvalideQueries?: string[];
+}
+
+export function useCreateFavoriteDoc({
+  onSuccess,
+  listInvalideQueries,
+}: CreateFavoriteDocProps) {
+  const queryClient = useQueryClient();
+  return useMutation<void, APIError, CreateFavoriteDocParams>({
+    mutationFn: createFavoriteDoc,
+    onSuccess: () => {
+      listInvalideQueries?.forEach((queryKey) => {
+        void queryClient.invalidateQueries({
+          queryKey: [queryKey],
+        });
+      });
+      onSuccess?.();
+    },
+  });
+}

src/frontend/apps/impress/src/features/docs/doc-management/api/useDeleteFavoriteDoc.tsx

@@ -0,0 +1,42 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { APIError, errorCauses, fetchAPI } from '@/api';
+import { Doc } from '@/features/docs';
+
+export type DeleteFavoriteDocParams = Pick<Doc, 'id'>;
+
+export const deleteFavoriteDoc = async ({ id }: DeleteFavoriteDocParams) => {
+  const response = await fetchAPI(`documents/${id}/favorite/`, {
+    method: 'DELETE',
+  });
+
+  if (!response.ok) {
+    throw new APIError(
+      'Failed to remove the doc as favorite',
+      await errorCauses(response),
+    );
+  }
+};
+
+interface DeleteFavoriteDocProps {
+  onSuccess?: () => void;
+  listInvalideQueries?: string[];
+}
+
+export function useDeleteFavoriteDoc({
+  onSuccess,
+  listInvalideQueries,
+}: DeleteFavoriteDocProps) {
+  const queryClient = useQueryClient();
+  return useMutation<void, APIError, DeleteFavoriteDocParams>({
+    mutationFn: deleteFavoriteDoc,
+    onSuccess: () => {
+      listInvalideQueries?.forEach((queryKey) => {
+        void queryClient.invalidateQueries({
+          queryKey: [queryKey],
+        });
+      });
+      onSuccess?.();
+    },
+  });
+}

src/frontend/apps/impress/src/features/docs/doc-management/api/useDocs.tsx

@@ -1,6 +1,12 @@
 import { UseQueryOptions, useQuery } from '@tanstack/react-query';
 
-import { APIError, APIList, errorCauses, fetchAPI } from '@/api';
+import {
+  APIError,
+  APIList,
+  errorCauses,
+  fetchAPI,
+  useAPIInfiniteQuery,
+} from '@/api';
 
 import { Doc } from '../types';
 
@@ -22,16 +28,33 @@ export type DocsOrdering = (typeof docsOrdering)[number];
 export type DocsParams = {
   page: number;
   ordering?: DocsOrdering;
+  is_creator_me?: boolean;
+  title?: string;
+  is_favorite?: boolean;
 };
 
 export type DocsResponse = APIList<Doc>;
+export const getDocs = async (params: DocsParams): Promise<DocsResponse> => {
+  const searchParams = new URLSearchParams();
+  if (params.page) {
+    searchParams.set('page', params.page.toString());
+  }
 
-export const getDocs = async ({
-  ordering,
-  page,
-}: DocsParams): Promise<DocsResponse> => {
-  const orderingQuery = ordering ? `&ordering=${ordering}` : '';
-  const response = await fetchAPI(`documents/?page=${page}${orderingQuery}`);
+  if (params.ordering) {
+    searchParams.set('ordering', params.ordering);
+  }
+  if (params.is_creator_me !== undefined) {
+    searchParams.set('is_creator_me', params.is_creator_me.toString());
+  }
+
+  if (params.title && params.title.length > 0) {
+    searchParams.set('title', params.title);
+  }
+  if (params.is_favorite !== undefined) {
+    searchParams.set('is_favorite', params.is_favorite.toString());
+  }
+
+  const response = await fetchAPI(`documents/?${searchParams.toString()}`);
 
   if (!response.ok) {
     throw new APIError('Failed to get the docs', await errorCauses(response));
@@ -52,3 +75,7 @@ export function useDocs(
     ...queryConfig,
   });
 }
+
+export const useInfiniteDocs = (params: DocsParams) => {
+  return useAPIInfiniteQuery(KEY_LIST_DOC, getDocs, params);
+};

src/frontend/apps/impress/src/features/docs/doc-management/api/useRemoveDoc.tsx

@@ -30,7 +30,7 @@ export const useRemoveDoc = (options?: UseRemoveDocOptions) => {
     mutationFn: removeDoc,
     ...options,
     onSuccess: (data, variables, context) => {
-      void queryClient.resetQueries({
+      void queryClient.invalidateQueries({
         queryKey: [KEY_LIST_DOC],
       });
       if (options?.onSuccess) {

src/frontend/apps/impress/src/features/docs/doc-management/api/useUpdateDoc.tsx

@@ -38,7 +38,7 @@ export function useUpdateDoc({
     mutationFn: updateDoc,
     onSuccess: (data) => {
       listInvalideQueries?.forEach((queryKey) => {
-        void queryClient.resetQueries({
+        void queryClient.invalidateQueries({
           queryKey: [queryKey],
         });
       });

src/frontend/apps/impress/src/features/docs/doc-management/api/useUpdateDocLink.tsx

@@ -44,7 +44,7 @@ export function useUpdateDocLink({
     mutationFn: updateDocLink,
     onSuccess: (data, variable) => {
       listInvalideQueries?.forEach((queryKey) => {
-        void queryClient.resetQueries({
+        void queryClient.invalidateQueries({
           queryKey: [queryKey],
         });
       });

src/frontend/apps/impress/src/features/docs/doc-management/components/DocVisibility.tsx

@@ -1,144 +0,0 @@
-import {
-  Radio,
-  RadioGroup,
-  Select,
-  VariantType,
-  useToastProvider,
-} from '@openfun/cunningham-react';
-import { useTranslation } from 'react-i18next';
-
-import { Box, Card, IconBG } from '@/components';
-import { useCunninghamTheme } from '@/cunningham';
-
-import { KEY_DOC, KEY_LIST_DOC, useUpdateDocLink } from '../api';
-import { Doc, LinkReach, LinkRole } from '../types';
-
-interface DocVisibilityProps {
-  doc: Doc;
-}
-
-export const DocVisibility = ({ doc }: DocVisibilityProps) => {
-  const { t } = useTranslation();
-  const { toast } = useToastProvider();
-  const { colorsTokens } = useCunninghamTheme();
-  const api = useUpdateDocLink({
-    onSuccess: () => {
-      toast(
-        t('The document visibility has been updated.'),
-        VariantType.SUCCESS,
-        {
-          duration: 4000,
-        },
-      );
-    },
-    listInvalideQueries: [KEY_LIST_DOC, KEY_DOC],
-  });
-
-  const transLinkReach = {
-    [LinkReach.RESTRICTED]: {
-      label: t('Restricted'),
-      description: t('Only for people with access'),
-    },
-    [LinkReach.AUTHENTICATED]: {
-      label: t('Authenticated'),
-      description: t('Only for authenticated users'),
-    },
-    [LinkReach.PUBLIC]: {
-      label: t('Public'),
-      description: t('Anyone on the internet with the link can view'),
-    },
-  };
-
-  const linkRoleList = [
-    {
-      label: t('Read only'),
-      value: LinkRole.READER,
-    },
-    {
-      label: t('Can read and edit'),
-      value: LinkRole.EDITOR,
-    },
-  ];
-
-  const showLinkRoleOptions = doc.link_reach !== LinkReach.RESTRICTED;
-
-  return (
-    <Card
-      $margin="tiny"
-      $padding={{ horizontal: 'small', vertical: 'tiny' }}
-      aria-label={t('Doc visibility card')}
-      $direction="row"
-      $align="center"
-      $justify="space-between"
-      $gap="1rem"
-      $wrap="wrap"
-    >
-      <IconBG iconName="public" />
-      <Box
-        $wrap="wrap"
-        $gap="1rem"
-        $direction="row"
-        $align="center"
-        $flex="1"
-        $css={`
-          & .c__field__footer .c__field__text {
-            ${!doc.abilities.link_configuration && `color: ${colorsTokens()['greyscale-400']};`};
-          }
-        `}
-      >
-        <Box $shrink="0" $flex="auto" $maxWidth="20rem">
-          <Select
-            label={t('Visibility')}
-            options={Object.values(LinkReach).map((linkReach) => ({
-              label: transLinkReach[linkReach].label,
-              value: linkReach,
-            }))}
-            onChange={(evt) =>
-              api.mutate({
-                link_reach: evt.target.value as LinkReach,
-                id: doc.id,
-              })
-            }
-            value={doc.link_reach}
-            clearable={false}
-            text={transLinkReach[doc.link_reach].description}
-            disabled={!doc.abilities.link_configuration}
-          />
-        </Box>
-        {showLinkRoleOptions && (
-          <Box
-            $css={`
-              & .c__checkbox{
-                padding: 0.15rem 0.25rem;
-              }
-            `}
-          >
-            <RadioGroup
-              compact
-              style={{
-                display: 'flex',
-              }}
-              text={t('How people can interact with the document')}
-            >
-              {linkRoleList.map((radio) => (
-                <Radio
-                  key={radio.value}
-                  label={radio.label}
-                  value={radio.value}
-                  onChange={() =>
-                    api.mutate({
-                      link_role: radio.value,
-                      id: doc.id,
-                    })
-                  }
-                  checked={doc.link_role === radio.value}
-                  disabled={!doc.abilities.link_configuration}
-                />
-              ))}
-            </RadioGroup>
-          </Box>
-        )}
-      </Box>
-    </Card>
-  );
-};

src/frontend/apps/impress/src/features/docs/doc-management/components/ModalRemoveDoc.tsx

@@ -1,19 +1,17 @@
 import {
-  Alert,
   Button,
   Modal,
   ModalSize,
   VariantType,
   useToastProvider,
 } from '@openfun/cunningham-react';
+import { t } from 'i18next';
+import { usePathname } from 'next/navigation';
 import { useRouter } from 'next/router';
-import { useTranslation } from 'react-i18next';
 
 import { Box, Text, TextErrors } from '@/components';
-import { useCunninghamTheme } from '@/cunningham/';
 
 import { useRemoveDoc } from '../api/useRemoveDoc';
-import IconDoc from '../assets/icon-doc.svg';
 import { Doc } from '../types';
 
 interface ModalRemoveDocProps {
@@ -22,13 +20,13 @@ interface ModalRemoveDocProps {
 }
 
 export const ModalRemoveDoc = ({ onClose, doc }: ModalRemoveDocProps) => {
-  const { t } = useTranslation();
-  const { colorsTokens } = useCunninghamTheme();
   const { toast } = useToastProvider();
   const { push } = useRouter();
+  const pathname = usePathname();
 
   const {
     mutate: removeDoc,
+
     isError,
     error,
   } = useRemoveDoc({
@@ -36,7 +34,11 @@ export const ModalRemoveDoc = ({ onClose, doc }: ModalRemoveDocProps) => {
       toast(t('The document has been deleted.'), VariantType.SUCCESS, {
         duration: 4000,
       });
-      void push('/');
+      if (pathname === '/') {
+        onClose();
+      } else {
+        void push('/');
+      }
     },
   });
 
@@ -44,85 +46,48 @@ export const ModalRemoveDoc = ({ onClose, doc }: ModalRemoveDocProps) => {
     <Modal
       isOpen
       closeOnClickOutside
-      hideCloseButton
-      leftActions={
-        <Button
-          aria-label={t('Close the modal')}
-          color="secondary"
-          fullWidth
-          onClick={() => onClose()}
-        >
-          {t('Cancel')}
-        </Button>
-      }
       onClose={() => onClose()}
       rightActions={
-        <Button
-          aria-label={t('Confirm deletion')}
-          color="primary"
-          fullWidth
-          onClick={() =>
-            removeDoc({
-              docId: doc.id,
-            })
-          }
-        >
-          {t('Confirm deletion')}
-        </Button>
+        <>
+          <Button
+            aria-label={t('Close the modal')}
+            color="secondary"
+            fullWidth
+            onClick={() => onClose()}
+          >
+            {t('Cancel')}
+          </Button>
+          <Button
+            aria-label={t('Confirm deletion')}
+            color="danger"
+            fullWidth
+            onClick={() =>
+              removeDoc({
+                docId: doc.id,
+              })
+            }
+          >
+            {t('Delete')}
+          </Button>
+        </>
       }
       size={ModalSize.MEDIUM}
       title={
-        <Box $align="center" $gap="1rem">
-          <Text $isMaterialIcon $size="48px" $theme="primary" $variation="600">
-            delete_forever
-          </Text>
-          <Text as="h2" $size="h3" $margin="none">
-            {t('Deleting the document "{{title}}"', { title: doc.title })}
-          </Text>
-        </Box>
+        <Text $size="h6" as="h6" $margin={{ all: '0' }} $align="flex-start">
+          {t('Delete a doc')}
+        </Text>
       }
     >
-      <Box
-        $margin={{ bottom: 'xl' }}
-        aria-label={t('Content modal to delete document')}
-      >
+      <Box aria-label={t('Content modal to delete document')}>
         {!isError && (
-          <Alert canClose={false} type={VariantType.WARNING}>
-            <Text>
-              {t('Are you sure you want to delete the document "{{title}}"?', {
-                title: doc.title,
-              })}
-            </Text>
-          </Alert>
+          <Text $size="sm" $variation="600">
+            {t('Are you sure you want to delete the document "{{title}}"?', {
+              title: doc.title,
+            })}
+          </Text>
         )}
 
         {isError && <TextErrors causes={error.cause} />}
-
-        <Text
-          as="p"
-          $padding="small"
-          $direction="row"
-          $gap="0.5rem"
-          $background={colorsTokens()['primary-150']}
-          $theme="primary"
-          $align="center"
-          $radius="2px"
-        >
-          <IconDoc
-            className="p-t"
-            aria-label={t(`Document icon`)}
-            color={colorsTokens()['primary-500']}
-            width={58}
-            style={{
-              borderRadius: '8px',
-              backgroundColor: '#ffffff',
-              border: `1px solid ${colorsTokens()['primary-300']}`,
-            }}
-          />
-          <Text $theme="primary" $weight="bold" $size="l">
-            {doc.title}
-          </Text>
-        </Text>
       </Box>
     </Modal>
   );

src/frontend/apps/impress/src/features/docs/doc-management/components/ModalShare.tsx

@@ -1,138 +0,0 @@
-import {
-  Button,
-  VariantType,
-  useToastProvider,
-} from '@openfun/cunningham-react';
-import { useTranslation } from 'react-i18next';
-import { createGlobalStyle } from 'styled-components';
-
-import { Box, Card, IconBG, SideModal, Text } from '@/components';
-import { InvitationList } from '@/features/docs/members/invitation-list';
-import { AddMembers } from '@/features/docs/members/members-add';
-import { MemberList } from '@/features/docs/members/members-list';
-import { useResponsiveStore } from '@/stores';
-
-import { Doc } from '../types';
-import { currentDocRole } from '../utils';
-
-import { DocVisibility } from './DocVisibility';
-
-const ModalShareStyle = createGlobalStyle`
-  & .c__modal__scroller{
-    background: #FAFAFA;
-    padding: 1.5rem .5rem;
-
-    .c__modal__title{
-      padding: 0;
-      margin: 0;
-    }
-
-    .c__modal__close{
-      margin-right: 1rem;
-
-      button{
-        border-bottom: 1px solid #E0E0E0;
-        border-left: 1px solid #E0E0E0;
-      }
-    }
-  }
-`;
-
-interface ModalShareProps {
-  onClose: () => void;
-  doc: Doc;
-}
-
-export const ModalShare = ({ onClose, doc }: ModalShareProps) => {
-  const { t } = useTranslation();
-  const { isMobile, isSmallMobile } = useResponsiveStore();
-  const width = isSmallMobile ? '100vw' : isMobile ? '90vw' : '70vw';
-  const { toast } = useToastProvider();
-
-  return (
-    <>
-      <ModalShareStyle />
-      <SideModal
-        isOpen
-        closeOnClickOutside
-        hideCloseButton={!isSmallMobile}
-        onClose={onClose}
-        width={width}
-        $css="min-width: 320px;max-width: 777px;"
-      >
-        <Box aria-label={t('Share modal')} $margin={{ bottom: 'small' }}>
-          <Box $shrink="0">
-            <Card
-              $direction="row"
-              $align="center"
-              $margin={{ horizontal: 'tiny', top: 'none', bottom: 'big' }}
-              $padding="tiny"
-              $gap="1rem"
-            >
-              <IconBG
-                $isMaterialIcon
-                $size="48px"
-                iconName="share"
-                $margin="none"
-              />
-              <Box
-                $justify="space-between"
-                $direction="row"
-                $align="center"
-                $width="100%"
-                $gap="1rem"
-                $wrap="wrap"
-              >
-                <Box $align="flex-start">
-                  <Text as="h3" $size="26px" $margin="none">
-                    {t('Share')}
-                  </Text>
-                  <Text $size="small" $weight="normal" $textAlign="left">
-                    {doc.title}
-                  </Text>
-                </Box>
-                <Box $margin={{ right: '1.5rem' }} $shrink="0">
-                  <Button
-                    onClick={() => {
-                      navigator.clipboard
-                        .writeText(window.location.href)
-                        .then(() => {
-                          toast(t('Link Copied !'), VariantType.SUCCESS, {
-                            duration: 3000,
-                          });
-                        })
-                        .catch(() => {
-                          toast(t('Failed to copy link'), VariantType.ERROR, {
-                            duration: 3000,
-                          });
-                        });
-                    }}
-                    color="primary"
-                    icon={<span className="material-icons">copy</span>}
-                  >
-                    {t('Copy link')}
-                  </Button>
-                </Box>
-              </Box>
-            </Card>
-            <DocVisibility doc={doc} />
-            {doc.abilities.accesses_manage && (
-              <AddMembers
-                doc={doc}
-                currentRole={currentDocRole(doc.abilities)}
-              />
-            )}
-          </Box>
-          <Box $minHeight="0">
-            {doc.abilities.accesses_view && (
-              <>
-                <InvitationList doc={doc} />
-                <MemberList doc={doc} />
-              </>
-            )}
-          </Box>
-        </Box>
-      </SideModal>
-    </>
-  );
-};

src/frontend/apps/impress/src/features/docs/doc-management/components/index.ts

@@ -1,2 +1 @@
 export * from './ModalRemoveDoc';
-export * from './ModalShare';

src/frontend/apps/impress/src/features/docs/doc-management/hooks/index.ts

@@ -1 +1,3 @@
+export * from './useCollaboration';
 export * from './useTrans';
+export * from './useCopyDocLink';

src/frontend/apps/impress/src/features/docs/doc-management/hooks/useCollaboration.tsx

@@ -0,0 +1,40 @@
+import { useEffect } from 'react';
+
+import { useCollaborationUrl } from '@/core/config';
+import { useBroadcastStore } from '@/stores';
+
+import { useProviderStore } from '../stores/useProviderStore';
+import { Base64 } from '../types';
+
+export const useCollaboration = (room?: string, initialContent?: Base64) => {
+  const collaborationUrl = useCollaborationUrl(room);
+  const { setBroadcastProvider } = useBroadcastStore();
+  const { provider, createProvider, destroyProvider } = useProviderStore();
+
+  useEffect(() => {
+    if (!room || !collaborationUrl || provider) {
+      return;
+    }
+
+    const newProvider = createProvider(collaborationUrl, room, initialContent);
+    setBroadcastProvider(newProvider);
+  }, [
+    provider,
+    collaborationUrl,
+    room,
+    initialContent,
+    createProvider,
+    setBroadcastProvider,
+  ]);
+
+  /**
+   * Destroy the provider when the component is unmounted
+   */
+  useEffect(() => {
+    return () => {
+      if (room) {
+        destroyProvider();
+      }
+    };
+  }, [destroyProvider, room]);
+};

src/frontend/apps/impress/src/features/docs/doc-management/hooks/useCopyDocLink.tsx

@@ -0,0 +1,19 @@
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useClipboard } from '@/hook';
+
+import { Doc } from '../types';
+
+export const useCopyDocLink = (docId: Doc['id']) => {
+  const { t } = useTranslation();
+  const copyToClipboard = useClipboard();
+
+  return useCallback(() => {
+    copyToClipboard(
+      `${window.location.origin}/docs/${docId}/`,
+      t('Link Copied !'),
+      t('Failed to copy link'),
+    );
+  }, [copyToClipboard, docId, t]);
+};