🔧(backend) fix sentry deprecated scope

`sentry_sdk.configure_scope` is deprecated and will
be removed in the next major version.

(commit taken from people by @qbey)

.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

@@ -3,6 +3,8 @@ run-name: Release Chart
 
 on:
   push:
+    paths:
+      - src/helm/impress/**
 
 jobs:
   release:
@@ -25,12 +27,8 @@ jobs:
         env:
           GITHUB_TOKEN: "${{ secrets.GITHUB_TOKEN }}"
 
-      - name: Run chart-releaser
-        uses: helm/chart-releaser-action@v1.6.0
+      - name: Publish Helm charts
+        uses: numerique-gouv/helm-gh-pages@add-overwrite-option
         with:
           charts_dir: ./src/helm
-          skip_existing: True
-          mark_as_latest: False
-        env:
-          CR_TOKEN: "${{ secrets.GITHUB_TOKEN }}"
-          CR_GIT_REPO: numerique-gouv/helm-repo
+          token: ${{ secrets.GITHUB_TOKEN }}

.gitmodules

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

CHANGELOG.md

@@ -11,7 +11,23 @@ and this project adheres to
 
 ## Added
 
-🔧(helm) add option to disable default tls setting by @dominikkaminski #519
+- 🔧(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 #446
+- 💄(frontend) update doc versioning ui #463
+- 💄(frontend) update doc summary ui #473
 
 
 ## [1.10.0] - 2024-12-17
@@ -31,6 +47,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
@@ -176,7 +197,7 @@ and this project adheres to
 
 - 🛂(frontend) match email if no existing user matches the sub
 - 🐛(backend) gitlab oicd userinfo endpoint #232
-- 🛂(frontend) redirect to the OIDC when private doc and unauthentified #292
+- 🛂(frontend) redirect to the OIDC when private doc and unauthenticated #292
 - ♻️(backend) getting list of document versions available for a user #258
 - 🔧(backend) fix configuration to avoid different ssl warning #297
 - 🐛(frontend) fix editor break line not working #302
@@ -305,7 +326,7 @@ and this project adheres to
 - ⚡️(e2e) unique login between tests (#80)
 - ⚡️(CI) improve e2e job (#86)
 - ♻️(frontend) improve the error and message info ui (#93)
-- ✏️(frontend) change all occurences of pad to doc (#99)
+- ✏️(frontend) change all occurrences of pad to doc (#99)
 
 ## Fixed
 

bin/start-kind.sh

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

docs/installation.md

@@ -1,6 +1,6 @@
 # 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.
+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
@@ -194,7 +194,7 @@ redis-master-0             1/1     Running     0          10m
 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://numerique-gouv.github.io/impress/
+$ 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

docs/release.md

@@ -6,7 +6,7 @@ Whenever we are cooking a new release (e.g. `4.18.1`) we should follow a standar
    2.  Bump the release number for backend project, frontend projects, and Helm files:
 
        - for backend, update the version number by hand in `pyproject.toml`,
-       - for each projects (`src/frontend`, `src/frontend/apps/*`, `src/frontend/packages/*`, `src/mail`), run `yarn version --new-version --no-git-tag-version 4.18.1` in their directory. This will update their `package.json` for you,
+       - for each project (`src/frontend`, `src/frontend/apps/*`, `src/frontend/packages/*`, `src/mail`), run `yarn version --new-version --no-git-tag-version 4.18.1` in their directory. This will update their `package.json` for you,
        - for Helm, update Docker image tag in files located at `src/helm/env.d` for both `preprod` and `production` environments:
 
          ```yaml

src/backend/core/api/viewsets.py

@@ -140,6 +140,7 @@ class UserViewSet(
     permission_classes = [permissions.IsSelf]
     queryset = models.User.objects.all()
     serializer_class = serializers.UserSerializer
+    ordering = ["-created_at"]
 
     def get_queryset(self):
         """
@@ -629,7 +630,7 @@ class DocumentViewSet(
         nginx.ingress.kubernetes.io/auth-url annotation to understand how the Nginx ingress
         is configured to do this.
 
-        Based on the original url and the logged in user, we must decide if we authorize Nginx
+        Based on the original url and the logged-in user, we must decide if we authorize Nginx
         to let this request go through (by returning a 200 code) or if we block it (by returning
         a 403 error). Note that we return 403 errors without any further details for security
         reasons.
@@ -834,7 +835,7 @@ class DocumentAccessViewSet(
     serializer_class = serializers.DocumentAccessSerializer
 
     def perform_create(self, serializer):
-        """Add a new access to the document and send an email to the new added user."""
+        """Add new access to the document and email the new added user."""
         access = serializer.save()
         language = self.request.headers.get("Content-Language", "en-us")
 
@@ -846,7 +847,7 @@ class DocumentAccessViewSet(
         )
 
     def perform_update(self, serializer):
-        """Update an access to the document and notify the collaboration server."""
+        """Update access to the document and notify the collaboration server."""
         access = serializer.save()
 
         access_user_id = None
@@ -859,7 +860,7 @@ class DocumentAccessViewSet(
         )
 
     def perform_destroy(self, instance):
-        """Delete an access to the document and notify the collaboration server."""
+        """Delete access to the document and notify the collaboration server."""
         instance.delete()
 
         # Notify collaboration server about the access removed
@@ -1098,7 +1099,7 @@ class InvitationViewset(
         return queryset
 
     def perform_create(self, serializer):
-        """Save invitation to a document then send an email to the invited user."""
+        """Save invitation to a document then email the invited user."""
         invitation = serializer.save()
 
         language = self.request.headers.get("Content-Language", "en-us")

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 _
@@ -11,6 +13,8 @@ from mozilla_django_oidc.auth import (
 
 from core.models import User
 
+logger = logging.getLogger(__name__)
+
 
 class OIDCAuthenticationBackend(MozillaOIDCAuthenticationBackend):
     """Custom OpenID Connect (OIDC) Authentication Backend.
@@ -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,12 +98,6 @@ 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)
 
         if user:
@@ -101,15 +118,13 @@ class OIDCAuthenticationBackend(MozillaOIDCAuthenticationBackend):
         return full_name or None
 
     def get_existing_user(self, sub, email):
-        """Fetch existing user by sub or email."""
+        """Fetch an existing user by sub (or email as a fallback respecting fallback setting."""
         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 User.objects.filter(email=email).first()
+
         return None
 
     def update_user_if_needed(self, user, claims):
@@ -119,4 +134,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/authentication/urls.py

@@ -2,7 +2,7 @@
 
 from django.urls import path
 
-from mozilla_django_oidc.urls import urlpatterns as mozzila_oidc_urls
+from mozilla_django_oidc.urls import urlpatterns as mozilla_oidc_urls
 
 from .views import OIDCLogoutCallbackView, OIDCLogoutView
 
@@ -14,5 +14,5 @@ urlpatterns = [
         OIDCLogoutCallbackView.as_view(),
         name="oidc_logout_callback",
     ),
-    *mozzila_oidc_urls,
+    *mozilla_oidc_urls,
 ]

src/backend/core/factories.py

@@ -19,6 +19,7 @@ class UserFactory(factory.django.DjangoModelFactory):
 
     class Meta:
         model = models.User
+        skip_postgeneration_save = True
 
     sub = factory.Sequence(lambda n: f"user{n!s}")
     email = factory.Faker("email")
@@ -36,6 +37,8 @@ class UserFactory(factory.django.DjangoModelFactory):
         if create and (extracted is True):
             UserDocumentAccessFactory(user=self, role="owner")
 
+        self.save()
+
     @factory.post_generation
     def with_owned_template(self, create, extracted, **kwargs):
         """
@@ -45,6 +48,8 @@ class UserFactory(factory.django.DjangoModelFactory):
         if create and (extracted is True):
             UserTemplateAccessFactory(user=self, role="owner")
 
+        self.save()
+
 
 class DocumentFactory(factory.django.DjangoModelFactory):
     """A factory to create documents"""

src/backend/core/migrations/0001_initial.py

@@ -1,7 +1,5 @@
 # Generated by Django 5.0.3 on 2024-05-28 20:29
 
-import django.contrib.auth.models
-import django.core.validators
 import django.db.models.deletion
 import timezone_field.fields
 import uuid
@@ -145,7 +143,7 @@ class Migration(migrations.Migration):
         ),
         migrations.AddConstraint(
             model_name='documentaccess',
-            constraint=models.CheckConstraint(check=models.Q(models.Q(('team', ''), ('user__isnull', False)), models.Q(('team__gt', ''), ('user__isnull', True)), _connector='OR'), name='check_document_access_either_user_or_team', violation_error_message='Either user or team must be set, not both.'),
+            constraint=models.CheckConstraint(condition=models.Q(models.Q(('team', ''), ('user__isnull', False)), models.Q(('team__gt', ''), ('user__isnull', True)), _connector='OR'), name='check_document_access_either_user_or_team', violation_error_message='Either user or team must be set, not both.'),
         ),
         migrations.AddConstraint(
             model_name='invitation',
@@ -161,6 +159,6 @@ class Migration(migrations.Migration):
         ),
         migrations.AddConstraint(
             model_name='templateaccess',
-            constraint=models.CheckConstraint(check=models.Q(models.Q(('team', ''), ('user__isnull', False)), models.Q(('team__gt', ''), ('user__isnull', True)), _connector='OR'), name='check_template_access_either_user_or_team', violation_error_message='Either user or team must be set, not both.'),
+            constraint=models.CheckConstraint(condition=models.Q(models.Q(('team', ''), ('user__isnull', False)), models.Q(('team__gt', ''), ('user__isnull', True)), _connector='OR'), name='check_template_access_either_user_or_team', violation_error_message='Either user or team must be set, not both.'),
         ),
     ]

src/backend/core/migrations/0013_alter_user_options.py

@@ -0,0 +1,17 @@
+# Generated by Django 5.1.4 on 2025-01-13 22:57
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('core', '0012_make_document_creator_and_invitation_issuer_optional'),
+    ]
+
+    operations = [
+        migrations.AlterModelOptions(
+            name='user',
+            options={'ordering': ('-created_at',), 'verbose_name': 'user', 'verbose_name_plural': 'users'},
+        ),
+    ]

src/backend/core/models.py

@@ -155,7 +155,7 @@ class User(AbstractBaseUser, BaseModel, auth_models.PermissionsMixin):
     email = models.EmailField(_("identity email address"), blank=True, null=True)
 
     # Unlike the "email" field which stores the email coming from the OIDC token, this field
-    # stores the email used by staff users to login to the admin site
+    # stores the email used by staff users to log in to the admin site
     admin_email = models.EmailField(
         _("admin email address"), unique=True, blank=True, null=True
     )
@@ -199,6 +199,7 @@ class User(AbstractBaseUser, BaseModel, auth_models.PermissionsMixin):
 
     class Meta:
         db_table = "impress_user"
+        ordering = ("-created_at",)
         verbose_name = _("user")
         verbose_name_plural = _("users")
 
@@ -695,7 +696,7 @@ class DocumentAccess(BaseAccess):
                 violation_error_message=_("This team is already in this document."),
             ),
             models.CheckConstraint(
-                check=models.Q(user__isnull=False, team="")
+                condition=models.Q(user__isnull=False, team="")
                 | models.Q(user__isnull=True, team__gt=""),
                 name="check_document_access_either_user_or_team",
                 violation_error_message=_("Either user or team must be set, not both."),
@@ -760,7 +761,7 @@ class Template(BaseModel):
         """
         document_html = weasyprint.HTML(
             string=DjangoTemplate(self.code).render(
-                Context({"body": html.format_html(body_html), **metadata})
+                Context({"body": html.format_html("{}", body_html), **metadata})
             )
         )
         css = weasyprint.CSS(
@@ -779,7 +780,7 @@ class Template(BaseModel):
         Generate and return a docx document wrapped around the current template
         """
         template_string = DjangoTemplate(self.code).render(
-            Context({"body": html.format_html(body_html), **metadata})
+            Context({"body": html.format_html("{}", body_html), **metadata})
         )
 
         html_string = f"""
@@ -797,7 +798,6 @@ class Template(BaseModel):
         """
 
         reference_docx = "core/static/reference.docx"
-        output = BytesIO()
 
         # Convert the HTML to a temporary docx file
         with tempfile.NamedTemporaryFile(suffix=".docx", prefix="docx_") as tmp_file:
@@ -884,7 +884,7 @@ class TemplateAccess(BaseAccess):
                 violation_error_message=_("This team is already in this template."),
             ),
             models.CheckConstraint(
-                check=models.Q(user__isnull=False, team="")
+                condition=models.Q(user__isnull=False, team="")
                 | models.Q(user__isnull=True, team__gt=""),
                 name="check_template_access_either_user_or_team",
                 violation_error_message=_("Either user or team must be set, not both."),

src/backend/core/services/collaboration_services.py

@@ -17,7 +17,7 @@ class CollaborationService:
     def reset_connections(self, room, user_id=None):
         """
         Reset connections of a room in the collaboration server.
-        Reseting a connection means that the user will be disconnected and will
+        Resetting a connection means that the user will be disconnected and will
         have to reconnect to the collaboration server, with updated rights.
         """
         endpoint = "reset-connections"

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

@@ -1,6 +1,8 @@
 """Unit tests for the Authentication Backends."""
 
 import re
+from logging import Logger
+from unittest import mock
 
 from django.core.exceptions import SuspiciousOperation
 from django.test.utils import override_settings
@@ -128,11 +130,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 +165,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 +258,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 +363,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 +387,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_document_accesses.py

@@ -698,7 +698,7 @@ def test_api_document_accesses_delete_administrators_except_owners(
     mock_reset_connections,  # pylint: disable=redefined-outer-name
 ):
     """
-    Users who are administrators in a document should be allowed to delete an access
+    Users who are administrators in a document should be allowed to delete access
     from the document provided it is not ownership.
     """
     user = factories.UserFactory()

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

@@ -285,7 +285,7 @@ def test_api_document_versions_retrieve_authenticated_related(via, mock_user_tea
     assert response.status_code == 404
 
     # Create a new version should not make it available to the user because
-    # only the current version is available to the user but it is excluded
+    # only the current version is available to the user, but it is excluded
     # from the list
     document.content = "new content 1"
     document.save()

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

@@ -134,7 +134,7 @@ def test_api_documents_ai_transform_authenticated_forbidden(reach, role):
 @patch("openai.resources.chat.completions.Completions.create")
 def test_api_documents_ai_transform_authenticated_success(mock_create, reach, role):
     """
-    Autenticated who are not related to a document should be able to request AI transform
+    Authenticated who are not related to a document should be able to request AI transform
     if the link reach and role permit it.
     """
     user = factories.UserFactory()

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

@@ -154,7 +154,7 @@ def test_api_documents_ai_translate_authenticated_forbidden(reach, role):
 @patch("openai.resources.chat.completions.Completions.create")
 def test_api_documents_ai_translate_authenticated_success(mock_create, reach, role):
     """
-    Autenticated who are not related to a document should be able to request AI translate
+    Authenticated who are not related to a document should be able to request AI translate
     if the link reach and role permit it.
     """
     user = factories.UserFactory()

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

@@ -111,7 +111,7 @@ def test_api_documents_attachment_upload_authenticated_forbidden(reach, role):
 )
 def test_api_documents_attachment_upload_authenticated_success(reach, role):
     """
-    Autenticated who are not related to a document should be able to upload a file
+    Authenticated who are not related to a document should be able to upload a file
     if the link reach and role permit it.
     """
     user = factories.UserFactory()
@@ -225,7 +225,7 @@ def test_api_documents_attachment_upload_invalid(client):
 
 
 def test_api_documents_attachment_upload_size_limit_exceeded(settings):
-    """The uploaded file should not exceeed the maximum size in settings."""
+    """The uploaded file should not exceed the maximum size in settings."""
     settings.DOCUMENT_IMAGE_MAX_SIZE = 1048576  # 1 MB for test
 
     user = factories.UserFactory()

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

@@ -160,7 +160,7 @@ def test_api_documents_media_auth_authenticated_restricted():
 @pytest.mark.parametrize("via", VIA)
 def test_api_documents_media_auth_related(via, mock_user_teams):
     """
-    Users who have a specific access to a document, whatever the role, should be able to
+    Users who have specific access to a document, whatever the role, should be able to
     retrieve related attachments.
     """
     user = factories.UserFactory()

src/backend/core/tests/templates/test_api_template_accesses.py

@@ -647,7 +647,7 @@ def test_api_template_accesses_delete_administrators_except_owners(
     via, mock_user_teams
 ):
     """
-    Users who are administrators in a template should be allowed to delete an access
+    Users who are administrators in a template should be allowed to delete access
     from the template provided it is not ownership.
     """
     user = factories.UserFactory()

src/backend/core/tests/test_models_documents.py

@@ -84,7 +84,7 @@ def test_models_documents_file_key():
 def test_models_documents_get_abilities_forbidden(is_authenticated, reach, role):
     """
     Check abilities returned for a document giving insufficient roles to link holders
-    i.e anonymous users or authenticated users who have no specific role on the document.
+    i.e. anonymous users or authenticated users who have no specific role on the document.
     """
     document = factories.DocumentFactory(link_reach=reach, link_role=role)
     user = factories.UserFactory() if is_authenticated else AnonymousUser()
@@ -121,7 +121,7 @@ def test_models_documents_get_abilities_forbidden(is_authenticated, reach, role)
 def test_models_documents_get_abilities_reader(is_authenticated, reach):
     """
     Check abilities returned for a document giving reader role to link holders
-    i.e anonymous users or authenticated users who have no specific role on the document.
+    i.e. anonymous users or authenticated users who have no specific role on the document.
     """
     document = factories.DocumentFactory(link_reach=reach, link_role="reader")
     user = factories.UserFactory() if is_authenticated else AnonymousUser()
@@ -158,7 +158,7 @@ def test_models_documents_get_abilities_reader(is_authenticated, reach):
 def test_models_documents_get_abilities_editor(is_authenticated, reach):
     """
     Check abilities returned for a document giving editor role to link holders
-    i.e anonymous users or authenticated users who have no specific role on the document.
+    i.e. anonymous users or authenticated users who have no specific role on the document.
     """
     document = factories.DocumentFactory(link_reach=reach, link_role="editor")
     user = factories.UserFactory() if is_authenticated else AnonymousUser()
@@ -449,7 +449,7 @@ def test_models_documents__email_invitation__success():
 
 def test_models_documents__email_invitation__success_fr():
     """
-    The email invitation is sent successfully in french.
+    The email invitation is sent successfully in French.
     """
     document = factories.DocumentFactory()
 

src/backend/core/tests/test_models_users.py

@@ -27,7 +27,7 @@ def test_models_users_id_unique():
 
 
 def test_models_users_send_mail_main_existing():
-    """The "email_user' method should send mail to the user's email address."""
+    """The 'email_user' method should send mail to the user's email address."""
     user = factories.UserFactory()
 
     with mock.patch("django.core.mail.send_mail") as mock_send:
@@ -37,7 +37,7 @@ def test_models_users_send_mail_main_existing():
 
 
 def test_models_users_send_mail_main_missing():
-    """The "email_user' method should fail if the user has no email address."""
+    """The 'email_user' method should fail if the user has no email address."""
     user = factories.UserFactory(email=None)
 
     with pytest.raises(ValueError) as excinfo:

src/backend/core/tests/test_services_ai_services.py

@@ -1,5 +1,5 @@
 """
-Test ai API endpoints in the impress core app.
+Test AI API endpoints in the impress core app.
 """
 
 import json

src/backend/demo/management/commands/createsuperuser.py

@@ -15,7 +15,7 @@ class Command(BaseCommand):
         """Define required arguments "email" and "password"."""
         parser.add_argument(
             "--email",
-            help=("Email for the user."),
+            help="Email for the user.",
         )
         parser.add_argument(
             "--password",

src/backend/impress/settings.py

@@ -474,6 +474,9 @@ class Base(Configuration):
         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",
@@ -619,8 +622,9 @@ class Base(Configuration):
                 release=get_release(),
                 integrations=[DjangoIntegration()],
             )
-            with sentry_sdk.configure_scope() as scope:
-                scope.set_extra("application", "backend")
+            # Add the application name to the Sentry scope
+            scope = sentry_sdk.get_global_scope()
+            scope.set_tag("application", "backend")
 
 
 class Build(Base):

src/backend/pyproject.toml

@@ -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)
+    // When the visibility is changed, the ws should close 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 }) => {
@@ -59,84 +60,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 +94,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 +113,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 +147,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 +161,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 +228,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 +241,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 +290,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 +303,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 +337,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 +372,7 @@ test.describe('Doc Header', () => {
     // create page and navigate to it
     await page
       .getByRole('button', {
-        name: 'Create a new document',
+        name: 'New doc',
       })
       .click();
 
@@ -471,9 +394,7 @@ test.describe('Doc Header', () => {
       navigator.clipboard.readText(),
     );
     const clipboardContent = await handle.jsonValue();
-    expect(clipboardContent.trim()).toBe(
-      `<h1 data-level="1">Hello World</h1><p></p>`,
-    );
+    expect(clipboardContent.trim()).toBe(`<h1>Hello World</h1><p></p>`);
   });
 });
 
@@ -501,6 +422,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 3 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: '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: /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,42 +36,38 @@ 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();
   });
 });
 
 test.describe('Doc Visibility: Restricted', () => {
   test.use({ storageState: { cookies: [], origins: [] } });
 
-  test('A doc is not accessible when not authentified.', async ({
+  test('A doc is not accessible when not authenticated.', async ({
     page,
     browserName,
   }) => {
@@ -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();
 
@@ -102,7 +98,7 @@ test.describe('Doc Visibility: Restricted', () => {
     await expect(page.getByRole('textbox', { name: 'password' })).toBeVisible();
   });
 
-  test('A doc is not accessible when authentified but not member.', async ({
+  test('A doc is not accessible when authenticated but not member.', async ({
     page,
     browserName,
   }) => {
@@ -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,20 +209,27 @@ 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();
 
     const urlDoc = page.url();
@@ -247,9 +246,10 @@ test.describe('Doc Visibility: Public', () => {
 
     await expect(page.locator('h2').getByText(docTitle)).toBeVisible();
     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 +261,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 +277,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,18 +308,15 @@ 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();
   });
 });
 
 test.describe('Doc Visibility: Authenticated', () => {
   test.use({ storageState: { cookies: [], origins: [] } });
 
-  test('A doc is not accessible when unauthentified.', async ({
+  test('A doc is not accessible when unauthenticated.', async ({
     page,
     browserName,
   }) => {
@@ -328,22 +325,19 @@ test.describe('Doc Visibility: Authenticated', () => {
 
     const [docTitle] = await createDoc(
       page,
-      'Authenticated unauthentified',
+      'Authenticated unauthenticated',
       browserName,
       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 +345,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 +377,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 +392,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();
 
@@ -422,19 +409,13 @@ test.describe('Doc Visibility: Authenticated', () => {
 
     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(selectVisibility).toBeHidden();
 
-    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();
+    const inputSearch = page.getByRole('combobox', {
+      name: 'Quick search input',
+    });
+    await expect(inputSearch).toBeHidden();
   });
 
   test('It checks a authenticated doc in editable mode', async ({
@@ -451,17 +432,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 +447,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 +468,14 @@ test.describe('Doc Visibility: Authenticated', () => {
 
     await page.goto(urlDoc);
 
-    await expect(page.locator('h2').getByText(docTitle)).toBeVisible();
+    await verifyDocName(page, docTitle);
     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(selectVisibility).toBeHidden();
 
-    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();
+    const inputSearch = page.getByRole('combobox', {
+      name: 'Quick search input',
+    });
+    await expect(inputSearch).toBeHidden();
   });
 });

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

@@ -16,7 +16,9 @@
     "@types/node": "*",
     "@types/pdf-parse": "1.1.4",
     "eslint-config-impress": "*",
-    "typescript": "*"
+    "typescript": "*",
+    "luxon": "3.5.0",
+    "@types/luxon": "3.4.2"
   },
   "dependencies": {
     "convert-stream": "1.0.2",

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

@@ -15,34 +15,37 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
-    "@blocknote/core": "*",
-    "@blocknote/mantine": "*",
-    "@blocknote/react": "*",
+    "@blocknote/core": "0.22.0",
+    "@blocknote/mantine": "0.22.0",
+    "@blocknote/react": "0.22.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/api/__tests__/fetchApi.test.tsx

@@ -29,7 +29,7 @@ describe('fetchAPI', () => {
     });
   });
 
-  it('check the versionning', () => {
+  it('check the versioning', () => {
     fetchMock.mock('http://test.jest/api/v2.0/some/url', 200);
 
     void fetchAPI('some/url', {}, '2.0');

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/Auth.tsx

@@ -33,7 +33,7 @@ export const Auth = ({ children }: PropsWithChildren) => {
     setPathAllowed(!regexpUrlsAuth.some((regexp) => !!asPath.match(regexp)));
   }, [asPath]);
 
-  // We force to login except on allowed paths
+  // We force to log in except on allowed paths
   useEffect(() => {
     if (!initiated || authenticated || pathAllowed) {
       return;

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/core/auth/useAuthStore.tsx

@@ -46,8 +46,8 @@ export const useAuthStore = create<AuthStore>((set, get) => ({
     terminateCrispSession();
     window.location.replace(`${baseApiUrl()}logout/`);
   },
-  // If we try to access a specific page and we are not authenticated
-  // we store the path in the local storage to redirect to it after login
+  // If we try to access a specific page, and we are not authenticated
+  // we store the path in the local storage to redirect to it after log in
   setAuthUrl() {
     if (window.location.pathname !== '/') {
       localStorage.setItem(PATH_AUTH_LOCAL_STORAGE, window.location.pathname);

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,13 @@ 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 * 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';
@@ -22,12 +22,53 @@ import { BlockNoteToolbar } from './BlockNoteToolbar';
 
 const cssEditor = (readonly: boolean) => `
   &, & > .bn-container, & .ProseMirror {
-    height:100%
-  };
-  & .bn-editor {
-    padding-right: 30px;
-    ${readonly && `padding-left: 30px;`}
+    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;
@@ -35,8 +76,7 @@ const cssEditor = (readonly: boolean) => `
   }
   @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"] {
@@ -127,23 +167,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);
 

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-editor/hook/useSaveDoc.tsx

@@ -10,7 +10,7 @@ import { toBase64 } from '../utils';
 
 const useSaveDoc = (docId: string, doc: Y.Doc, canSave: boolean) => {
   const { mutate: updateDoc } = useUpdateDoc({
-    listInvalideQueries: [KEY_LIST_DOC_VERSIONS],
+    listInvalidQueries: [KEY_LIST_DOC_VERSIONS],
   });
   const [initialDoc, setInitialDoc] = useState<string>(
     toBase64(Y.encodeStateAsUpdate(doc)),

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,86 @@ 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.')}
       >
-        <Box
-          $padding={isMobile ? 'tiny' : 'small'}
-          $direction="row"
-          $align="center"
-        >
-          <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>
+        {docIsPublic && (
           <Box
-            $width="1px"
-            $height="70%"
-            $background={colorsTokens()['greyscale-100']}
-            $margin={{ horizontal: 'tiny' }}
-          />
+            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 $direction="row" $align="center" $width="100%">
           <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={true} />
+      </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],
+    listInvalidQueries: [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,30 @@
 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 {
+  Box,
+  DropdownMenu,
+  DropdownMenuOption,
+  Icon,
+  IconOptions,
+} from '@/components';
 import { useAuthStore } from '@/core';
+import { useCunninghamTheme } from '@/cunningham';
+import { useEditorStore } from '@/features/docs/doc-editor/';
+import { Doc, ModalRemoveDoc } from '@/features/docs/doc-management';
+import { DocShareModal } from '@/features/docs/doc-share';
 import {
-  useEditorStore,
-  usePanelEditorStore,
-} from '@/features/docs/doc-editor/';
-import {
-  Doc,
-  ModalRemoveDoc,
-  ModalShare,
-} from '@/features/docs/doc-management';
-import { ModalVersion } from '@/features/docs/doc-versioning';
+  KEY_LIST_DOC_VERSIONS,
+  ModalSelectVersion,
+} from '@/features/docs/doc-versioning';
 import { useResponsiveStore } from '@/stores';
 
 import { ModalPDF } from './ModalExport';
@@ -28,21 +34,78 @@ 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 { 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 selectHistoryModal = useModal();
+  const modalShare = useModal();
+
+  const { isSmallMobile, isDesktop } = useResponsiveStore();
   const { authenticated } = useAuthStore();
   const { editor } = useEditorStore();
   const { toast } = useToastProvider();
 
+  const options: DropdownMenuOption[] = [
+    ...(isSmallMobile
+      ? [
+          {
+            label: t('Share'),
+            icon: 'upload',
+            callback: () => {
+              modalShare.open();
+            },
+          },
+          {
+            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 +129,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 +147,88 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
       $gap="0.5rem 1.5rem"
       $wrap={isSmallMobile ? 'wrap' : 'nowrap'}
     >
-      {versionId && (
-        <Box $margin={{ left: 'auto' }}>
-          <Button
-            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);
-            }}
-            size={isSmallMobile ? 'small' : 'medium'}
-          >
-            {t('Share')}
-          </Button>
+      <Box
+        $direction="row"
+        $align="center"
+        $margin={{ left: 'auto' }}
+        $gap={spacings['2xs']}
+      >
+        {authenticated && !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}
+                </Button>
+              </Box>
+            )}
+          </>
         )}
-        <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 +236,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-header/utils.ts

@@ -94,7 +94,7 @@ const convertToImg = (html: string) => {
   const doc = parser.parseFromString(html, 'text/html');
   const divs = doc.querySelectorAll('div[data-content-type="image"]');
 
-  // Loop through each div and replace it with a img
+  // Loop through each div and replace it with an img
   divs.forEach((div) => {
     const img = document.createElement('img');
 

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;
+  listInvalidQueries?: string[];
+}
+
+export function useCreateFavoriteDoc({
+  onSuccess,
+  listInvalidQueries,
+}: CreateFavoriteDocProps) {
+  const queryClient = useQueryClient();
+  return useMutation<void, APIError, CreateFavoriteDocParams>({
+    mutationFn: createFavoriteDoc,
+    onSuccess: () => {
+      listInvalidQueries?.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;
+  listInvalidQueries?: string[];
+}
+
+export function useDeleteFavoriteDoc({
+  onSuccess,
+  listInvalidQueries,
+}: DeleteFavoriteDocProps) {
+  const queryClient = useQueryClient();
+  return useMutation<void, APIError, DeleteFavoriteDocParams>({
+    mutationFn: deleteFavoriteDoc,
+    onSuccess: () => {
+      listInvalidQueries?.forEach((queryKey) => {
+        void queryClient.invalidateQueries({
+          queryKey: [queryKey],
+        });
+      });
+      onSuccess?.();
+    },
+  });
+}