wip

We modify the left panel so that when the value changes in the
useResponsiveStore it is displayed on the screen

.github/workflows/deploy.yml

@@ -1,52 +0,0 @@
-name: Deploy
-
-on:
-  push:
-    tags:
-      - 'preprod'
-      - 'production'
-
-
-jobs:
-  notify-argocd:
-    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 }}
-      -
-        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 ''${ARGOCD_PRODUCTION_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_PRODUCTION_WEBHOOK_URL
-
-  start-test-on-preprod:
-    needs:
-      - notify-argocd
-    runs-on: ubuntu-latest
-    if: startsWith(github.event.ref, 'refs/tags/preprod')
-    steps:
-      -
-        name: Debug
-        run: |
-          echo "Start test when preprod is ready"

.github/workflows/docker-hub.yml

@@ -8,9 +8,6 @@ on:
       - 'main'
     tags:
       - 'v*'
-  pull_request:
-    branches:
-      - 'main'
 
 env:
   DOCKER_USER: 1001:127

.github/workflows/helmfile-linter.yaml

@@ -1,22 +0,0 @@
-name: Helmfile lint
-run-name: Helmfile lint
-
-on:
-  pull_request:
-    branches:
-      - 'main'
-
-jobs:
-  helmfile-lint:
-    runs-on: ubuntu-latest
-    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"

CHANGELOG.md

@@ -11,20 +11,74 @@ and this project adheres to
 
 ## Added
 
-- ✨AI to doc editor #250
-- ✨(backend) allow uploading more types of attachments #309
-- ✨(frontend) add buttons to copy document to clipboard as HTML/Markdown #300
+- 🌐(frontend) Add German translation #255
+- ✨(frontend) Add a broadcast store #387
+- ✨(frontend) WIP: New ui
+- 💄(frontend) Add left panel
+- 💄(frontend) update header layout #421
 
 ## Changed
 
-- ♻️(frontend) More multi theme friendly #325
+- 🚸(backend) improve users similarity search and sort results #391
+- 🌐(backend) add german translation #259
+
+## Fixed
+
+- 🦺(backend) add comma to sub regex #408
+- 🐛(editor) collaborative user tag hidden when read only #385
+- 🐛(frontend) user have view access when revoked #387
+
+
+## [1.7.0] - 2024-10-24
+
+## Added
+
+- 📝Contributing.md #352
+- 🌐(frontend) add localization to editor #368
+- ✨Public and restricted doc editable #357
+- ✨(frontend) Add full name if available #380
+- ✨(backend) Add view accesses ability #376
+
+## Changed
+
+- ♻️(frontend) list accesses if user has abilities #376
+- ♻️(frontend) avoid documents indexing in search engine #372
+- 👔(backend) doc restricted by default #388
+
+## Fixed
+
+- 🐛(backend) require right to manage document accesses to see invitations #369
+- 🐛(i18n) same frontend and backend language using shared cookies #365
+- 🐛(frontend) add default toolbar buttons #355
+- 🐛(frontend) throttle error correctly display #378
+
+## Removed
+
+- 🔥(helm) remove infra related codes #366
+
+
+## [1.6.0] - 2024-10-17
+
+## Added
+
+- ✨AI to doc editor #250
+- ✨(backend) allow uploading more types of attachments #309
+- ✨(frontend) add buttons to copy document to clipboard as HTML/Markdown #318
+
+## Changed
+
+- ♻️(frontend) more multi theme friendly #325
 - ♻️ Bootstrap frontend #257
 - ♻️ Add username in email #314
 
 ## Fixed
 
+- 🛂(backend) do not duplicate user when disabled
 - 🐛(frontend) invalidate queries after removing user #336
 - 🐛(backend) Fix dysfunctional permissions on document create #329
+- 🐛(backend) fix nginx docker container #340
+- 🐛(frontend) fix copy paste firefox #353
+
 
 ## [1.5.1] - 2024-10-10
 
@@ -204,7 +258,9 @@ and this project adheres to
 - 🚀 Impress, project to manage your documents easily and collaboratively.
 
 
-[unreleased]: https://github.com/numerique-gouv/impress/compare/v1.5.1...main
+[unreleased]: https://github.com/numerique-gouv/impress/compare/v1.7.0...main
+[v1.7.0]: https://github.com/numerique-gouv/impress/releases/v1.7.0
+[v1.6.0]: https://github.com/numerique-gouv/impress/releases/v1.6.0
 [1.5.1]: https://github.com/numerique-gouv/impress/releases/v1.5.1
 [1.5.0]: https://github.com/numerique-gouv/impress/releases/v1.5.0
 [1.4.0]: https://github.com/numerique-gouv/impress/releases/v1.4.0

CONTRIBUTING.md

@@ -0,0 +1,79 @@
+# Contributing to the Project
+
+Thank you for taking the time to contribute! Please follow these guidelines to ensure a smooth and productive workflow. 🚀🚀🚀
+
+To get started with the project, please refer to the [README.md](https://github.com/numerique-gouv/impress/blob/main/README.md) for detailed instructions.
+
+## Creating an Issue
+
+When creating an issue, please provide the following details:
+
+1.  **Title**: A concise and descriptive title for the issue.
+2.  **Description**: A detailed explanation of the issue, including relevant context or screenshots if applicable.
+3.  **Steps to Reproduce**: If the issue is a bug, include the steps needed to reproduce the problem.
+4.  **Expected vs. Actual Behavior**: Describe what you expected to happen and what actually happened.
+5.  **Labels**: Add appropriate labels to categorize the issue (e.g., bug, feature request, documentation).
+
+## Selecting an issue
+
+We use a [GitHub Project](https://github.com/orgs/numerique-gouv/projects/13) in order to prioritize our workload. 
+
+Please check in priority the issues that are in the **todo** column and have a higher priority (P0 -> P2). 
+
+## Commit Message Format
+
+All commit messages must adhere to the following format:
+
+`<gitmoji>(type) title description`
+
+*   <**gitmoji**>: Use a gitmoji to represent the purpose of the commit. For example, ✨ for adding a new feature or 🔥 for removing something, see the list here: <https://gitmoji.dev/>.
+*   **(type)**: Describe the type of change. Common types include `backend`, `frontend`, `CI`, `docker` etc...
+*   **title**: A short, descriptive title for the change, starting with a lowercase character.
+*   **description**: Include additional details about what was changed and why.
+
+### Example Commit Message
+
+```
+✨(frontend) add user authentication logic 
+
+Implemented login and signup features, and integrated OAuth2 for social login.
+```
+
+## Changelog Update
+
+Please add a line to the changelog describing your development. The changelog entry should include a brief summary of the changes, this helps in tracking changes effectively and keeping everyone informed. We usually include the title of the pull request, followed by the pull request ID to finish the log entry. The changelog line should be less than 80 characters in total.
+
+### Example Changelog Message
+```
+## [Unreleased]
+
+## Added
+
+- ✨(frontend) add AI to the project #321
+```
+
+## Pull Requests
+
+It is nice to add information about the purpose of the pull request to help reviewers understand the context and intent of the changes. If you can, add some pictures or a small video to show the changes.
+
+### Don't forget to: 
+- check your commits
+- check the linting: `make lint && make frontend-lint`
+- check the tests: `make test`
+- add a changelog entry
+
+Once all the required tests have passed, you can request a review from the project maintainers.
+
+## Code Style
+
+Please maintain consistency in code style. Run any linting tools available to make sure the code is clean and follows the project's conventions.
+
+## Tests
+
+Make sure that all new features or fixes have corresponding tests. Run the test suite before pushing your changes to ensure that nothing is broken.
+
+## Asking for Help
+
+If you need any help while contributing, feel free to open a discussion or ask for guidance in the issue tracker. We are more than happy to assist!
+
+Thank you for your contributions! 👍

Makefile

@@ -122,6 +122,7 @@ logs: ## display app-dev logs (follow mode)
 
 run: ## start the wsgi (production) and development server
 	@$(COMPOSE) up --force-recreate -d celery-dev
+	@$(COMPOSE) up --force-recreate -d nginx
 	@$(COMPOSE) up --force-recreate -d y-provider
 	@echo "Wait for postgresql to be up..."
 	@$(WAIT_DB)
@@ -313,6 +314,10 @@ frontend-install: ## install the frontend locally
 	cd $(PATH_FRONT_IMPRESS) && yarn
 .PHONY: frontend-install
 
+frontend-lint: ## run the frontend linter
+	cd $(PATH_FRONT) && yarn lint
+.PHONY: frontend-lint
+
 run-frontend-development: ## Run the frontend in development mode
 	@$(COMPOSE) stop frontend-dev
 	cd $(PATH_FRONT_IMPRESS) && yarn dev

docker-compose.yml

@@ -63,7 +63,6 @@ services:
         - mailcatcher
         - redis
         - createbuckets
-        - nginx
   
   celery-dev:
     user: ${DOCKER_USER:-1000}
@@ -118,6 +117,7 @@ services:
       - ./docker/files/etc/nginx/conf.d:/etc/nginx/conf.d:ro
     depends_on:
       - keycloak
+      - app-dev
 
   frontend-dev:
     user: "${DOCKER_USER:-1000}"

src/backend/core/api/permissions.py

@@ -1,9 +1,12 @@
 """Permission handlers for the impress core app."""
 
 from django.core import exceptions
+from django.db.models import Q
 
 from rest_framework import permissions
 
+from core.models import DocumentAccess, RoleChoices
+
 ACTION_FOR_METHOD_TO_PERMISSION = {
     "versions_detail": {"DELETE": "versions_destroy", "GET": "versions_retrieve"}
 }
@@ -59,6 +62,38 @@ class IsOwnedOrPublic(IsAuthenticated):
             return False
 
 
+class CanCreateInvitationPermission(permissions.BasePermission):
+    """
+    Custom permission class to handle permission checks for managing invitations.
+    """
+
+    def has_permission(self, request, view):
+        user = request.user
+
+        # Ensure the user is authenticated
+        if not (bool(request.auth) or request.user.is_authenticated):
+            return False
+
+        # Apply permission checks only for creation (POST requests)
+        if view.action != "create":
+            return True
+
+        # Check if resource_id is passed in the context
+        try:
+            document_id = view.kwargs["resource_id"]
+        except KeyError as exc:
+            raise exceptions.ValidationError(
+                "You must set a document ID in kwargs to manage document invitations."
+            ) from exc
+
+        # Check if the user has access to manage invitations (Owner/Admin roles)
+        return DocumentAccess.objects.filter(
+            Q(user=user) | Q(team__in=user.teams),
+            document=document_id,
+            role__in=[RoleChoices.OWNER, RoleChoices.ADMIN],
+        ).exists()
+
+
 class AccessPermission(permissions.BasePermission):
     """Permission class for access objects."""
 

src/backend/core/api/serializers.py

@@ -328,48 +328,36 @@ class InvitationSerializer(serializers.ModelSerializer):
         return {}
 
     def validate(self, attrs):
-        """Validate and restrict invitation to new user based on email."""
-
+        """Validate invitation data."""
         request = self.context.get("request")
         user = getattr(request, "user", None)
-        role = attrs.get("role")
 
-        try:
-            document_id = self.context["resource_id"]
-        except KeyError as exc:
-            raise exceptions.ValidationError(
-                "You must set a document ID in kwargs to create a new document invitation."
-            ) from exc
+        attrs["document_id"] = self.context["resource_id"]
 
-        if not user and user.is_authenticated:
-            raise exceptions.PermissionDenied(
-                "Anonymous users are not allowed to create invitations."
-            )
+        # Only set the issuer if the instance is being created
+        if self.instance is None:
+            attrs["issuer"] = user
 
-        if not models.DocumentAccess.objects.filter(
-            Q(user=user) | Q(team__in=user.teams),
-            document=document_id,
-            role__in=[models.RoleChoices.OWNER, models.RoleChoices.ADMIN],
-        ).exists():
-            raise exceptions.PermissionDenied(
-                "You are not allowed to manage invitations for this document."
-            )
+        return attrs
 
-        if (
-            role == models.RoleChoices.OWNER
-            and not models.DocumentAccess.objects.filter(
+    def validate_role(self, role):
+        """Custom validation for the role field."""
+        request = self.context.get("request")
+        user = getattr(request, "user", None)
+        document_id = self.context["resource_id"]
+
+        # If the role is OWNER, check if the user has OWNER access
+        if role == models.RoleChoices.OWNER:
+            if not models.DocumentAccess.objects.filter(
                 Q(user=user) | Q(team__in=user.teams),
                 document=document_id,
                 role=models.RoleChoices.OWNER,
-            ).exists()
-        ):
-            raise exceptions.PermissionDenied(
-                "Only owners of a document can invite other users as owners."
-            )
+            ).exists():
+                raise serializers.ValidationError(
+                    "Only owners of a document can invite other users as owners."
+                )
 
-        attrs["document_id"] = document_id
-        attrs["issuer"] = user
-        return attrs
+        return role
 
 
 class VersionFilterSerializer(serializers.Serializer):

src/backend/core/api/viewsets.py

@@ -6,6 +6,7 @@ from urllib.parse import urlparse
 
 from django.conf import settings
 from django.contrib.postgres.aggregates import ArrayAgg
+from django.contrib.postgres.search import TrigramSimilarity
 from django.core.exceptions import ValidationError
 from django.core.files.storage import default_storage
 from django.db.models import (
@@ -156,8 +157,21 @@ class UserViewSet(
 
             # Filter users by email similarity
             if query := self.request.GET.get("q", ""):
+                # For performance reasons we filter first by similarity, which relies on an index,
+                # then only calculate precise similarity scores for sorting purposes
                 queryset = queryset.filter(email__trigram_word_similar=query)
 
+                queryset = queryset.annotate(
+                    similarity=TrigramSimilarity("email", query)
+                )
+                # When the query only is on the name part, we should try to make many proposals
+                # But when the query looks like an email we should only propose serious matches
+                threshold = 0.6 if "@" in query else 0.1
+
+                queryset = queryset.filter(similarity__gt=threshold).order_by(
+                    "-similarity"
+                )
+
         return queryset
 
     @decorators.action(
@@ -807,7 +821,10 @@ class InvitationViewset(
 
     lookup_field = "id"
     pagination_class = Pagination
-    permission_classes = [permissions.IsAuthenticated, permissions.AccessPermission]
+    permission_classes = [
+        permissions.CanCreateInvitationPermission,
+        permissions.AccessPermission,
+    ]
     queryset = (
         models.Invitation.objects.all()
         .select_related("document")
@@ -842,10 +859,16 @@ class InvitationViewset(
             )
 
             queryset = (
-                # The logged-in user should be part of a document to see its accesses
+                # The logged-in user should be administrator or owner to see its accesses
                 queryset.filter(
-                    Q(document__accesses__user=user)
-                    | Q(document__accesses__team__in=teams),
+                    Q(
+                        document__accesses__user=user,
+                        document__accesses__role__in=models.PRIVILEGED_ROLES,
+                    )
+                    | Q(
+                        document__accesses__team__in=teams,
+                        document__accesses__role__in=models.PRIVILEGED_ROLES,
+                    ),
                 )
                 # Abilities are computed based on logged-in user's role and
                 # the user role on each document access

src/backend/core/authentication/backends.py

@@ -84,6 +84,8 @@ class OIDCAuthenticationBackend(MozillaOIDCAuthenticationBackend):
         user = self.get_existing_user(sub, email)
 
         if user:
+            if not user.is_active:
+                raise SuspiciousOperation(_("User account is disabled"))
             self.update_user_if_needed(user, claims)
         elif self.get_settings("OIDC_CREATE_USER", True):
             user = User.objects.create(sub=sub, password="!", **claims)  # noqa: S106
@@ -101,11 +103,11 @@ class OIDCAuthenticationBackend(MozillaOIDCAuthenticationBackend):
     def get_existing_user(self, sub, email):
         """Fetch existing user by sub or email."""
         try:
-            return User.objects.get(sub=sub, is_active=True)
+            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, is_active=True)
+                    return User.objects.get(email=email)
                 except User.DoesNotExist:
                     pass
         return None

src/backend/core/migrations/0008_alter_document_link_reach.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.1.2 on 2024-10-25 11:41
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('core', '0007_fix_users_duplicate'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='document',
+            name='link_reach',
+            field=models.CharField(choices=[('restricted', 'Restricted'), ('authenticated', 'Authenticated'), ('public', 'Public')], default='restricted', max_length=20),
+        ),
+    ]

src/backend/core/models.py

@@ -72,6 +72,9 @@ class RoleChoices(models.TextChoices):
     OWNER = "owner", _("Owner")
 
 
+PRIVILEGED_ROLES = [RoleChoices.ADMIN, RoleChoices.OWNER]
+
+
 class LinkReachChoices(models.TextChoices):
     """Defines types of access for links"""
 
@@ -127,17 +130,17 @@ class User(AbstractBaseUser, BaseModel, auth_models.PermissionsMixin):
     """User model to work with OIDC only authentication."""
 
     sub_validator = validators.RegexValidator(
-        regex=r"^[\w.@+-]+\Z",
+        regex=r"^[\w.@+-:]+\Z",
         message=_(
             "Enter a valid sub. This value may contain only letters, "
-            "numbers, and @/./+/-/_ characters."
+            "numbers, and @/./+/-/_/: characters."
         ),
     )
 
     sub = models.CharField(
         _("sub"),
         help_text=_(
-            "Required. 255 characters or fewer. Letters, numbers, and @/./+/-/_ characters only."
+            "Required. 255 characters or fewer. Letters, numbers, and @/./+/-/_/: characters only."
         ),
         max_length=255,
         unique=True,
@@ -333,7 +336,7 @@ class Document(BaseModel):
     link_reach = models.CharField(
         max_length=20,
         choices=LinkReachChoices.choices,
-        default=LinkReachChoices.AUTHENTICATED,
+        default=LinkReachChoices.RESTRICTED,
     )
     link_role = models.CharField(
         max_length=20, choices=LinkRoleChoices.choices, default=LinkRoleChoices.READER
@@ -493,7 +496,8 @@ class Document(BaseModel):
         # Compute version roles before adding link roles because we don't
         # want anonymous users to access versions (we wouldn't know from
         # which date to allow them anyway)
-        can_get_versions = bool(roles)
+        # Anonymous users should also not see document accesses
+        has_role = bool(roles)
 
         # Add role provided by the document link
         if self.link_reach == LinkReachChoices.PUBLIC or (
@@ -508,18 +512,20 @@ class Document(BaseModel):
         can_get = bool(roles)
 
         return {
+            "accesses_manage": is_owner_or_admin,
+            "accesses_view": has_role,
             "ai_transform": is_owner_or_admin or is_editor,
             "ai_translate": is_owner_or_admin or is_editor,
             "attachment_upload": is_owner_or_admin or is_editor,
             "destroy": RoleChoices.OWNER in roles,
             "link_configuration": is_owner_or_admin,
-            "manage_accesses": is_owner_or_admin,
+            "invite_owner": RoleChoices.OWNER in roles,
             "partial_update": is_owner_or_admin or is_editor,
             "retrieve": can_get,
             "update": is_owner_or_admin or is_editor,
             "versions_destroy": is_owner_or_admin,
-            "versions_list": can_get_versions,
-            "versions_retrieve": can_get_versions,
+            "versions_list": has_role,
+            "versions_retrieve": has_role,
         }
 
     def email_invitation(self, language, email, role, sender):
@@ -675,7 +681,7 @@ class Template(BaseModel):
         return {
             "destroy": RoleChoices.OWNER in roles,
             "generate_document": can_get,
-            "manage_accesses": is_owner_or_admin,
+            "accesses_manage": is_owner_or_admin,
             "update": is_owner_or_admin or is_editor,
             "partial_update": is_owner_or_admin or is_editor,
             "retrieve": can_get,
@@ -880,8 +886,6 @@ class Invitation(BaseModel):
 
     def get_abilities(self, user):
         """Compute and return abilities for a given user."""
-        can_delete = False
-        can_update = False
         roles = []
 
         if user.is_authenticated:
@@ -896,17 +900,13 @@ class Invitation(BaseModel):
                 except (self._meta.model.DoesNotExist, IndexError):
                     roles = []
 
-            can_delete = bool(
-                set(roles).intersection({RoleChoices.OWNER, RoleChoices.ADMIN})
-            )
-
-            can_update = bool(
-                set(roles).intersection({RoleChoices.OWNER, RoleChoices.ADMIN})
-            )
+        is_admin_or_owner = bool(
+            set(roles).intersection({RoleChoices.OWNER, RoleChoices.ADMIN})
+        )
 
         return {
-            "destroy": can_delete,
-            "update": can_update,
-            "partial_update": can_update,
-            "retrieve": bool(roles),
+            "destroy": is_admin_or_owner,
+            "update": is_admin_or_owner,
+            "partial_update": is_admin_or_owner,
+            "retrieve": is_admin_or_owner,
         }

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

@@ -305,3 +305,63 @@ def test_authentication_get_userinfo_invalid_response():
         match="Invalid response format or token verification failed",
     ):
         oidc_backend.get_userinfo("fake_access_token", None, None)
+
+
+def test_authentication_getter_existing_disabled_user_via_sub(
+    django_assert_num_queries, monkeypatch
+):
+    """
+    If an existing user matches the sub but is disabled,
+    an error should be raised and a user should not be created.
+    """
+
+    klass = OIDCAuthenticationBackend()
+    db_user = UserFactory(is_active=False)
+
+    def get_userinfo_mocked(*args):
+        return {
+            "sub": db_user.sub,
+            "email": db_user.email,
+            "first_name": "John",
+            "last_name": "Doe",
+        }
+
+    monkeypatch.setattr(OIDCAuthenticationBackend, "get_userinfo", get_userinfo_mocked)
+
+    with (
+        django_assert_num_queries(1),
+        pytest.raises(SuspiciousOperation, match="User account is disabled"),
+    ):
+        klass.get_or_create_user(access_token="test-token", id_token=None, payload=None)
+
+    assert models.User.objects.count() == 1
+
+
+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,
+    an error should be raised and a user should not be created.
+    """
+
+    klass = OIDCAuthenticationBackend()
+    db_user = UserFactory(is_active=False)
+
+    def get_userinfo_mocked(*args):
+        return {
+            "sub": "random",
+            "email": db_user.email,
+            "first_name": "John",
+            "last_name": "Doe",
+        }
+
+    monkeypatch.setattr(OIDCAuthenticationBackend, "get_userinfo", get_userinfo_mocked)
+
+    with (
+        django_assert_num_queries(2),
+        pytest.raises(SuspiciousOperation, match="User account is disabled"),
+    ):
+        klass.get_or_create_user(access_token="test-token", id_token=None, payload=None)
+
+    assert models.User.objects.count() == 1

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

@@ -47,6 +47,7 @@ def test_api_documents_create_authenticated_success():
     assert response.status_code == 201
     document = Document.objects.get()
     assert document.title == "my document"
+    assert document.link_reach == "restricted"
     assert document.accesses.filter(role="owner", user=user).exists()
 
 

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

@@ -21,12 +21,14 @@ def test_api_documents_retrieve_anonymous_public():
     assert response.json() == {
         "id": str(document.id),
         "abilities": {
+            "accesses_manage": False,
+            "accesses_view": False,
             "ai_transform": document.link_role == "editor",
             "ai_translate": document.link_role == "editor",
             "attachment_upload": document.link_role == "editor",
             "destroy": False,
+            "invite_owner": False,
             "link_configuration": False,
-            "manage_accesses": False,
             "partial_update": document.link_role == "editor",
             "retrieve": True,
             "update": document.link_role == "editor",
@@ -77,12 +79,14 @@ def test_api_documents_retrieve_authenticated_unrelated_public_or_authenticated(
     assert response.json() == {
         "id": str(document.id),
         "abilities": {
+            "accesses_manage": False,
+            "accesses_view": False,
             "ai_transform": document.link_role == "editor",
             "ai_translate": document.link_role == "editor",
             "attachment_upload": document.link_role == "editor",
             "link_configuration": False,
             "destroy": False,
-            "manage_accesses": False,
+            "invite_owner": False,
             "partial_update": document.link_role == "editor",
             "retrieve": True,
             "update": document.link_role == "editor",

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

@@ -22,7 +22,7 @@ def test_api_templates_retrieve_anonymous_public():
         "abilities": {
             "destroy": False,
             "generate_document": True,
-            "manage_accesses": False,
+            "accesses_manage": False,
             "partial_update": False,
             "retrieve": True,
             "update": False,
@@ -68,7 +68,7 @@ def test_api_templates_retrieve_authenticated_unrelated_public():
         "abilities": {
             "destroy": False,
             "generate_document": True,
-            "manage_accesses": False,
+            "accesses_manage": False,
             "partial_update": False,
             "retrieve": True,
             "update": False,

src/backend/core/tests/test_api_users.py

@@ -69,6 +69,48 @@ def test_api_users_list_query_email():
     assert user_ids == [str(nicole.id), str(frank.id)]
 
 
+def test_api_users_list_query_email_matching():
+    """While filtering by email, results should be filtered and sorted by similarity"""
+    user = factories.UserFactory()
+
+    client = APIClient()
+    client.force_login(user)
+
+    alice = factories.UserFactory(email="alice.johnson@example.gouv.fr")
+    factories.UserFactory(email="jane.smith@example.gouv.fr")
+    michael_wilson = factories.UserFactory(email="michael.wilson@example.gouv.fr")
+    factories.UserFactory(email="david.jones@example.gouv.fr")
+    michael_brown = factories.UserFactory(email="michael.brown@example.gouv.fr")
+    factories.UserFactory(email="sophia.taylor@example.gouv.fr")
+
+    response = client.get(
+        "/api/v1.0/users/?q=michael.johnson@example.gouv.f",
+    )
+    assert response.status_code == 200
+    user_ids = [user["id"] for user in response.json()["results"]]
+    assert user_ids == [str(michael_wilson.id)]
+
+    response = client.get("/api/v1.0/users/?q=michael.johnson@example.gouv.fr")
+
+    assert response.status_code == 200
+    user_ids = [user["id"] for user in response.json()["results"]]
+    assert user_ids == [str(michael_wilson.id), str(alice.id), str(michael_brown.id)]
+
+    response = client.get(
+        "/api/v1.0/users/?q=ajohnson@example.gouv.f",
+    )
+    assert response.status_code == 200
+    user_ids = [user["id"] for user in response.json()["results"]]
+    assert user_ids == [str(alice.id)]
+
+    response = client.get(
+        "/api/v1.0/users/?q=michael.wilson@example.gouv.f",
+    )
+    assert response.status_code == 200
+    user_ids = [user["id"] for user in response.json()["results"]]
+    assert user_ids == [str(michael_wilson.id)]
+
+
 def test_api_users_list_query_email_exclude_doc_user():
     """
     Authenticated users should be able to list users

src/backend/core/tests/test_models_documents.py

@@ -83,12 +83,14 @@ def test_models_documents_get_abilities_forbidden(is_authenticated, reach, role)
     user = factories.UserFactory() if is_authenticated else AnonymousUser()
     abilities = document.get_abilities(user)
     assert abilities == {
+        "accesses_manage": False,
+        "accesses_view": False,
         "ai_transform": False,
         "ai_translate": False,
         "attachment_upload": False,
         "link_configuration": False,
         "destroy": False,
-        "manage_accesses": False,
+        "invite_owner": False,
         "partial_update": False,
         "retrieve": False,
         "update": False,
@@ -115,12 +117,14 @@ def test_models_documents_get_abilities_reader(is_authenticated, reach):
     user = factories.UserFactory() if is_authenticated else AnonymousUser()
     abilities = document.get_abilities(user)
     assert abilities == {
+        "accesses_manage": False,
+        "accesses_view": False,
         "ai_transform": False,
         "ai_translate": False,
         "attachment_upload": False,
         "destroy": False,
         "link_configuration": False,
-        "manage_accesses": False,
+        "invite_owner": False,
         "partial_update": False,
         "retrieve": True,
         "update": False,
@@ -147,12 +151,14 @@ def test_models_documents_get_abilities_editor(is_authenticated, reach):
     user = factories.UserFactory() if is_authenticated else AnonymousUser()
     abilities = document.get_abilities(user)
     assert abilities == {
+        "accesses_manage": False,
+        "accesses_view": False,
         "ai_transform": True,
         "ai_translate": True,
         "attachment_upload": True,
         "destroy": False,
         "link_configuration": False,
-        "manage_accesses": False,
+        "invite_owner": False,
         "partial_update": True,
         "retrieve": True,
         "update": True,
@@ -168,12 +174,14 @@ def test_models_documents_get_abilities_owner():
     access = factories.UserDocumentAccessFactory(role="owner", user=user)
     abilities = access.document.get_abilities(access.user)
     assert abilities == {
+        "accesses_manage": True,
+        "accesses_view": True,
         "ai_transform": True,
         "ai_translate": True,
         "attachment_upload": True,
         "destroy": True,
         "link_configuration": True,
-        "manage_accesses": True,
+        "invite_owner": True,
         "partial_update": True,
         "retrieve": True,
         "update": True,
@@ -188,12 +196,14 @@ def test_models_documents_get_abilities_administrator():
     access = factories.UserDocumentAccessFactory(role="administrator")
     abilities = access.document.get_abilities(access.user)
     assert abilities == {
+        "accesses_manage": True,
+        "accesses_view": True,
         "ai_transform": True,
         "ai_translate": True,
         "attachment_upload": True,
         "destroy": False,
         "link_configuration": True,
-        "manage_accesses": True,
+        "invite_owner": False,
         "partial_update": True,
         "retrieve": True,
         "update": True,
@@ -211,12 +221,14 @@ def test_models_documents_get_abilities_editor_user(django_assert_num_queries):
         abilities = access.document.get_abilities(access.user)
 
     assert abilities == {
+        "accesses_manage": False,
+        "accesses_view": True,
         "ai_transform": True,
         "ai_translate": True,
         "attachment_upload": True,
         "destroy": False,
         "link_configuration": False,
-        "manage_accesses": False,
+        "invite_owner": False,
         "partial_update": True,
         "retrieve": True,
         "update": True,
@@ -236,12 +248,14 @@ def test_models_documents_get_abilities_reader_user(django_assert_num_queries):
         abilities = access.document.get_abilities(access.user)
 
     assert abilities == {
+        "accesses_manage": False,
+        "accesses_view": True,
         "ai_transform": False,
         "ai_translate": False,
         "attachment_upload": False,
         "destroy": False,
         "link_configuration": False,
-        "manage_accesses": False,
+        "invite_owner": False,
         "partial_update": False,
         "retrieve": True,
         "update": False,
@@ -262,12 +276,14 @@ def test_models_documents_get_abilities_preset_role(django_assert_num_queries):
         abilities = access.document.get_abilities(access.user)
 
     assert abilities == {
+        "accesses_manage": False,
+        "accesses_view": True,
         "ai_transform": False,
         "ai_translate": False,
         "attachment_upload": False,
         "destroy": False,
         "link_configuration": False,
-        "manage_accesses": False,
+        "invite_owner": False,
         "partial_update": False,
         "retrieve": True,
         "update": False,

src/backend/core/tests/test_models_invitations.py

@@ -2,10 +2,12 @@
 Unit tests for the Invitation model
 """
 
-import time
+from datetime import timedelta
+from unittest import mock
 
 from django.contrib.auth.models import AnonymousUser
 from django.core import exceptions
+from django.utils import timezone
 
 import pytest
 from faker import Faker
@@ -60,7 +62,7 @@ def test_models_invitations_role_among_choices():
         factories.InvitationFactory(role="boss")
 
 
-def test_models_invitations__is_expired(settings):
+def test_models_invitations_is_expired():
     """
     The 'is_expired' property should return False until validity duration
     is exceeded and True afterwards.
@@ -68,13 +70,16 @@ def test_models_invitations__is_expired(settings):
     expired_invitation = factories.InvitationFactory()
     assert expired_invitation.is_expired is False
 
-    settings.INVITATION_VALIDITY_DURATION = 1
-    time.sleep(1)
+    not_late = timezone.now() + timedelta(seconds=604799)
+    with mock.patch("django.utils.timezone.now", return_value=not_late):
+        assert expired_invitation.is_expired is False
 
-    assert expired_invitation.is_expired is True
+    too_late = timezone.now() + timedelta(seconds=604800)  # 7 days
+    with mock.patch("django.utils.timezone.now", return_value=too_late):
+        assert expired_invitation.is_expired is True
 
 
-def test_models_invitation__new_user__convert_invitations_to_accesses():
+def test_models_invitationd_new_userd_convert_invitations_to_accesses():
     """
     Upon creating a new user, invitations linked to the email
     should be converted to accesses and then deleted.
@@ -109,7 +114,7 @@ def test_models_invitation__new_user__convert_invitations_to_accesses():
     ).exists()  # the other invitation remains
 
 
-def test_models_invitation__new_user__filter_expired_invitations():
+def test_models_invitationd_new_user_filter_expired_invitations():
     """
     Upon creating a new identity, valid invitations should be converted into accesses
     and expired invitations should remain unchanged.
@@ -140,7 +145,7 @@ def test_models_invitation__new_user__filter_expired_invitations():
 
 
 @pytest.mark.parametrize("num_invitations, num_queries", [(0, 3), (1, 6), (20, 6)])
-def test_models_invitation__new_user__user_creation_constant_num_queries(
+def test_models_invitationd_new_userd_user_creation_constant_num_queries(
     django_assert_num_queries, num_invitations, num_queries
 ):
     """
@@ -235,7 +240,7 @@ def test_models_document_invitations_get_abilities_reader(via, mock_user_teams):
 
     assert abilities == {
         "destroy": False,
-        "retrieve": True,
+        "retrieve": False,
         "partial_update": False,
         "update": False,
     }
@@ -260,7 +265,7 @@ def test_models_document_invitations_get_abilities_editor(via, mock_user_teams):
 
     assert abilities == {
         "destroy": False,
-        "retrieve": True,
+        "retrieve": False,
         "partial_update": False,
         "update": False,
     }

src/backend/core/tests/test_models_templates.py

@@ -62,7 +62,7 @@ def test_models_templates_get_abilities_anonymous_public():
         "destroy": False,
         "retrieve": True,
         "update": False,
-        "manage_accesses": False,
+        "accesses_manage": False,
         "partial_update": False,
         "generate_document": True,
     }
@@ -76,7 +76,7 @@ def test_models_templates_get_abilities_anonymous_not_public():
         "destroy": False,
         "retrieve": False,
         "update": False,
-        "manage_accesses": False,
+        "accesses_manage": False,
         "partial_update": False,
         "generate_document": False,
     }
@@ -90,7 +90,7 @@ def test_models_templates_get_abilities_authenticated_public():
         "destroy": False,
         "retrieve": True,
         "update": False,
-        "manage_accesses": False,
+        "accesses_manage": False,
         "partial_update": False,
         "generate_document": True,
     }
@@ -104,7 +104,7 @@ def test_models_templates_get_abilities_authenticated_not_public():
         "destroy": False,
         "retrieve": False,
         "update": False,
-        "manage_accesses": False,
+        "accesses_manage": False,
         "partial_update": False,
         "generate_document": False,
     }
@@ -119,7 +119,7 @@ def test_models_templates_get_abilities_owner():
         "destroy": True,
         "retrieve": True,
         "update": True,
-        "manage_accesses": True,
+        "accesses_manage": True,
         "partial_update": True,
         "generate_document": True,
     }
@@ -133,7 +133,7 @@ def test_models_templates_get_abilities_administrator():
         "destroy": False,
         "retrieve": True,
         "update": True,
-        "manage_accesses": True,
+        "accesses_manage": True,
         "partial_update": True,
         "generate_document": True,
     }
@@ -150,7 +150,7 @@ def test_models_templates_get_abilities_editor_user(django_assert_num_queries):
         "destroy": False,
         "retrieve": True,
         "update": True,
-        "manage_accesses": False,
+        "accesses_manage": False,
         "partial_update": True,
         "generate_document": True,
     }
@@ -167,7 +167,7 @@ def test_models_templates_get_abilities_reader_user(django_assert_num_queries):
         "destroy": False,
         "retrieve": True,
         "update": False,
-        "manage_accesses": False,
+        "accesses_manage": False,
         "partial_update": False,
         "generate_document": True,
     }
@@ -185,7 +185,7 @@ def test_models_templates_get_abilities_preset_role(django_assert_num_queries):
         "destroy": False,
         "retrieve": True,
         "update": False,
-        "manage_accesses": False,
+        "accesses_manage": False,
         "partial_update": False,
         "generate_document": True,
     }

src/backend/impress/settings.py

@@ -223,6 +223,7 @@ class Base(Configuration):
 
     # Languages
     LANGUAGE_CODE = values.Value("en-us")
+    LANGUAGE_COOKIE_NAME = "docs_language"  # cookie & language is set from frontend
 
     DRF_NESTED_MULTIPART_PARSER = {
         # output of parser is converted to querydict
@@ -236,6 +237,7 @@ class Base(Configuration):
         (
             ("en-us", _("English")),
             ("fr-fr", _("French")),
+            ("de-de", _("German")),
         )
     )
 

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

@@ -0,0 +1,349 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: lasuite-people\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2024-09-25 10:15+0000\n"
+"PO-Revision-Date: 2024-09-25 10:21\n"
+"Last-Translator: \n"
+"Language-Team: German\n"
+"Language: de_DE\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n > 1);\n"
+"X-Crowdin-Project: lasuite-people\n"
+"X-Crowdin-Project-ID: 637934\n"
+"X-Crowdin-Language: de\n"
+"X-Crowdin-File: backend-impress.pot\n"
+"X-Crowdin-File-ID: 8\n"
+
+#: core/admin.py:32
+msgid "Personal info"
+msgstr "Persönliche Angaben"
+
+#: core/admin.py:34
+msgid "Permissions"
+msgstr "Berechtigungen"
+
+#: core/admin.py:46
+msgid "Important dates"
+msgstr "Wichtige Termine"
+
+#: core/api/serializers.py:253
+msgid "Body"
+msgstr ""
+
+#: core/api/serializers.py:256
+msgid "Body type"
+msgstr ""
+
+#: core/api/serializers.py:262
+msgid "Format"
+msgstr ""
+
+#: core/authentication/backends.py:56
+msgid "Invalid response format or token verification failed"
+msgstr ""
+
+#: core/authentication/backends.py:81
+msgid "User info contained no recognizable user identification"
+msgstr ""
+
+#: core/authentication/backends.py:101
+msgid "Claims contained no recognizable user identification"
+msgstr ""
+
+#: core/models.py:62 core/models.py:69
+msgid "Reader"
+msgstr "Leser"
+
+#: core/models.py:63 core/models.py:70
+msgid "Editor"
+msgstr "Bearbeiter"
+
+#: core/models.py:71
+msgid "Administrator"
+msgstr "Administrator"
+
+#: core/models.py:72
+msgid "Owner"
+msgstr "Eigentümer"
+
+#: core/models.py:80
+msgid "Restricted"
+msgstr "Eingeschränkt"
+
+#: core/models.py:84
+msgid "Authenticated"
+msgstr "Authentifiziert"
+
+#: core/models.py:86
+msgid "Public"
+msgstr "Öffentlich"
+
+#: core/models.py:98
+msgid "id"
+msgstr ""
+
+#: core/models.py:99
+msgid "primary key for the record as UUID"
+msgstr ""
+
+#: core/models.py:105
+msgid "created on"
+msgstr ""
+
+#: core/models.py:106
+msgid "date and time at which a record was created"
+msgstr ""
+
+#: core/models.py:111
+msgid "updated on"
+msgstr ""
+
+#: core/models.py:112
+msgid "date and time at which a record was last updated"
+msgstr ""
+
+#: core/models.py:132
+msgid "Enter a valid sub. This value may contain only letters, numbers, and @/./+/-/_ characters."
+msgstr ""
+
+#: core/models.py:138
+msgid "sub"
+msgstr ""
+
+#: core/models.py:140
+msgid "Required. 255 characters or fewer. Letters, numbers, and @/./+/-/_ characters only."
+msgstr ""
+
+#: core/models.py:148
+msgid "identity email address"
+msgstr ""
+
+#: core/models.py:153
+msgid "admin email address"
+msgstr ""
+
+#: core/models.py:160
+msgid "language"
+msgstr ""
+
+#: core/models.py:161
+msgid "The language in which the user wants to see the interface."
+msgstr ""
+
+#: core/models.py:167
+msgid "The timezone in which the user wants to see times."
+msgstr ""
+
+#: core/models.py:170
+msgid "device"
+msgstr ""
+
+#: core/models.py:172
+msgid "Whether the user is a device or a real user."
+msgstr ""
+
+#: core/models.py:175
+msgid "staff status"
+msgstr ""
+
+#: core/models.py:177
+msgid "Whether the user can log into this admin site."
+msgstr ""
+
+#: core/models.py:180
+msgid "active"
+msgstr ""
+
+#: core/models.py:183
+msgid "Whether this user should be treated as active. Unselect this instead of deleting accounts."
+msgstr ""
+
+#: core/models.py:195
+msgid "user"
+msgstr ""
+
+#: core/models.py:196
+msgid "users"
+msgstr ""
+
+#: core/models.py:328 core/models.py:644
+msgid "title"
+msgstr ""
+
+#: core/models.py:343
+msgid "Document"
+msgstr ""
+
+#: core/models.py:344
+msgid "Documents"
+msgstr ""
+
+#: core/models.py:347
+msgid "Untitled Document"
+msgstr ""
+
+#: core/models.py:537
+#, python-format
+msgid "%(username)s shared a document with you: %(document)s"
+msgstr "%(username)s hat ein Dokument mit Ihnen geteilt: %(document)s"
+
+#: core/models.py:580
+msgid "Document/user link trace"
+msgstr ""
+
+#: core/models.py:581
+msgid "Document/user link traces"
+msgstr ""
+
+#: core/models.py:587
+msgid "A link trace already exists for this document/user."
+msgstr ""
+
+#: core/models.py:608
+msgid "Document/user relation"
+msgstr ""
+
+#: core/models.py:609
+msgid "Document/user relations"
+msgstr ""
+
+#: core/models.py:615
+msgid "This user is already in this document."
+msgstr ""
+
+#: core/models.py:621
+msgid "This team is already in this document."
+msgstr ""
+
+#: core/models.py:627 core/models.py:816
+msgid "Either user or team must be set, not both."
+msgstr ""
+
+#: core/models.py:645
+msgid "description"
+msgstr ""
+
+#: core/models.py:646
+msgid "code"
+msgstr ""
+
+#: core/models.py:647
+msgid "css"
+msgstr ""
+
+#: core/models.py:649
+msgid "public"
+msgstr ""
+
+#: core/models.py:651
+msgid "Whether this template is public for anyone to use."
+msgstr ""
+
+#: core/models.py:657
+msgid "Template"
+msgstr ""
+
+#: core/models.py:658
+msgid "Templates"
+msgstr ""
+
+#: core/models.py:797
+msgid "Template/user relation"
+msgstr ""
+
+#: core/models.py:798
+msgid "Template/user relations"
+msgstr ""
+
+#: core/models.py:804
+msgid "This user is already in this template."
+msgstr ""
+
+#: core/models.py:810
+msgid "This team is already in this template."
+msgstr ""
+
+#: core/models.py:833
+msgid "email address"
+msgstr ""
+
+#: core/models.py:850
+msgid "Document invitation"
+msgstr ""
+
+#: core/models.py:851
+msgid "Document invitations"
+msgstr ""
+
+#: core/models.py:868
+msgid "This email is already associated to a registered user."
+msgstr ""
+
+#: core/templates/mail/html/invitation.html:160
+#: core/templates/mail/html/invitation2.html:160
+#: core/templates/mail/text/invitation.txt:3
+#: core/templates/mail/text/invitation2.txt:3
+msgid "La Suite Numérique"
+msgstr ""
+
+#: core/templates/mail/html/invitation.html:190
+#: core/templates/mail/text/invitation.txt:6
+#, python-format
+msgid " %(username)s shared a document with you ! "
+msgstr " %(username)s hat ein Dokument mit Ihnen geteilt! "
+
+#: core/templates/mail/html/invitation.html:197
+#: core/templates/mail/text/invitation.txt:8
+#, python-format
+msgid " %(username)s invited you as an %(role)s on the following document : "
+msgstr " %(username)s hat Sie als %(role)s zum folgenden Dokument eingeladen: "
+
+#: core/templates/mail/html/invitation.html:206
+#: core/templates/mail/html/invitation2.html:211
+#: core/templates/mail/text/invitation.txt:10
+#: core/templates/mail/text/invitation2.txt:11
+msgid "Open"
+msgstr "Öffnen"
+
+#: core/templates/mail/html/invitation.html:223
+#: core/templates/mail/text/invitation.txt:14
+msgid " Docs, your new essential tool for organizing, sharing and collaborate on your documents as a team. "
+msgstr " Docs, Ihr neues unverzichtbares Werkzeug zum Organisieren, Teilen und Zusammenarbeiten an Dokumenten im Team. "
+
+#: core/templates/mail/html/invitation.html:230
+#: core/templates/mail/html/invitation2.html:235
+#: core/templates/mail/text/invitation.txt:16
+#: core/templates/mail/text/invitation2.txt:17
+msgid "Brought to you by La Suite Numérique"
+msgstr "Bereitgestellt von La Suite Numérique"
+
+#: core/templates/mail/html/invitation2.html:190
+#, python-format
+msgid "%(username)s shared a document with you"
+msgstr "%(username)s hat ein Dokument mit Ihnen geteilt"
+
+#: core/templates/mail/html/invitation2.html:197
+#: core/templates/mail/text/invitation2.txt:8
+#, python-format
+msgid "%(username)s invited you as an %(role)s on the following document :"
+msgstr "%(username)s hat Sie als %(role)s zum folgenden Dokument eingeladen:"
+
+#: core/templates/mail/html/invitation2.html:228
+#: core/templates/mail/text/invitation2.txt:15
+msgid "Docs, your new essential tool for organizing, sharing and collaborate on your document as a team."
+msgstr "Docs, Ihr neues unverzichtbares Werkzeug zum Organisieren, Teilen und gemeinsamen Arbeiten an Dokumenten im Team."
+
+#: impress/settings.py:177
+msgid "English"
+msgstr ""
+
+#: impress/settings.py:178
+msgid "French"
+msgstr ""
+
+#: impress/settings.py:176
+msgid "German"
+msgstr ""

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

@@ -345,11 +345,14 @@ msgstr ""
 msgid "This mail has been sent to %(email)s by %(name)s [%(href)s]"
 msgstr ""
 
-#: impress/settings.py:176
+#: impress/settings.py:177
 msgid "English"
 msgstr ""
 
-#: impress/settings.py:177
+#: impress/settings.py:178
 msgid "French"
 msgstr ""
 
+#: impress/settings.py:176
+msgid "German"
+msgstr ""

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

@@ -345,11 +345,14 @@ msgstr "Proposé par La Suite Numérique"
 msgid "This mail has been sent to %(email)s by %(name)s [%(href)s]"
 msgstr ""
 
-#: impress/settings.py:176
+#: impress/settings.py:177
 msgid "English"
 msgstr ""
 
-#: impress/settings.py:177
+#: impress/settings.py:178
 msgid "French"
 msgstr ""
 
+#: impress/settings.py:176
+msgid "German"
+msgstr ""

src/backend/pyproject.toml

@@ -7,7 +7,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "impress"
-version = "1.5.1"
+version = "1.7.0"
 authors = [{ "name" = "DINUM", "email" = "dev@mail.numerique.gouv.fr" }]
 classifiers = [
     "Development Status :: 5 - Production/Stable",
@@ -25,7 +25,7 @@ license = { file = "LICENSE" }
 readme = "README.md"
 requires-python = ">=3.10"
 dependencies = [
-    "boto3==1.35.41",
+    "boto3==1.35.44",
     "Brotli==1.1.0",
     "celery[redis]==5.4.0",
     "django-configurations==2.5.1",
@@ -46,14 +46,14 @@ dependencies = [
     "jsonschema==4.23.0",
     "markdown==3.7",
     "nested-multipart-parser==1.5.0",
-    "openai==1.44.1",
+    "openai==1.52.0",
     "psycopg[binary]==3.2.3",
     "PyJWT==2.9.0",
     "pypandoc==1.14",
     "python-frontmatter==1.1.0",
     "python-magic==0.4.27",
     "requests==2.32.3",
-    "sentry-sdk==2.16.0",
+    "sentry-sdk==2.17.0",
     "url-normalize==1.4.3",
     "WeasyPrint>=60.2",
     "whitenoise==6.7.0",
@@ -82,7 +82,7 @@ dev = [
     "pytest-icdiff==0.9",
     "pytest-xdist==3.6.1",
     "responses==0.25.3",
-    "ruff==0.6.9",
+    "ruff==0.7.0",
     "types-requests==2.32.0.20241016",
 ]
 

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

@@ -4,17 +4,17 @@ export const keyCloakSignIn = async (page: Page, browserName: string) => {
   const login = `user-e2e-${browserName}`;
   const password = `password-e2e-${browserName}`;
 
+  await expect(
+    page.locator('.login-pf-page-header').getByText('impress'),
+  ).toBeVisible();
+
   if (await page.getByLabel('Restart login').isVisible()) {
-    await page.getByRole('textbox', { name: 'password' }).fill(password);
-
-    await page.click('input[type="submit"]', { force: true });
-  } else {
-    await page.getByRole('textbox', { name: 'username' }).fill(login);
-
-    await page.getByRole('textbox', { name: 'password' }).fill(password);
-
-    await page.click('input[type="submit"]', { force: true });
+    await page.getByLabel('Restart login').click();
   }
+
+  await page.getByRole('textbox', { name: 'username' }).fill(login);
+  await page.getByRole('textbox', { name: 'password' }).fill(password);
+  await page.click('input[type="submit"]', { force: true });
 };
 
 export const randomName = (name: string, browserName: string, length: number) =>
@@ -27,7 +27,6 @@ export const createDoc = async (
   docName: string,
   browserName: string,
   length: number,
-  isPublic: boolean = false,
 ) => {
   const randomDocs = randomName(docName, browserName, length);
 
@@ -37,29 +36,13 @@ 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();
-
-    if (isPublic) {
-      await page.getByRole('button', { name: 'Share' }).click();
-      await page.getByText('Doc private').click();
-
-      await page.locator('.c__modal__backdrop').click({
-        position: { x: 0, y: 0 },
-        force: true,
-      });
-
-      await expect(
-        page
-          .getByLabel('It is the card information about the document.')
-          .getByText('Public'),
-      ).toBeVisible();
-    }
   }
 
   return randomDocs;
@@ -161,7 +144,7 @@ export const mockedDocument = async (page: Page, json: object) => {
             versions_destroy: false,
             versions_list: true,
             versions_retrieve: true,
-            manage_accesses: false, // Means not admin
+            accesses_manage: false, // Means not admin
             update: false,
             partial_update: false, // Means not editor
             retrieve: true,

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

@@ -9,6 +9,78 @@ test.beforeEach(async ({ page }) => {
 });
 
 test.describe('Doc Editor', () => {
+  test('it check translations of the slash menu when changing language', async ({
+    page,
+    browserName,
+  }) => {
+    await createDoc(page, 'doc-toolbar', browserName, 1);
+
+    const header = page.locator('header').first();
+    const editor = page.locator('.ProseMirror');
+    // Trigger slash menu to show english menu
+    await editor.click();
+    await editor.fill('/');
+    await expect(page.getByText('Headings', { exact: true })).toBeVisible();
+    await header.click();
+    await expect(page.getByText('Headings', { exact: true })).toBeHidden();
+
+    // Reset menu
+    await editor.click();
+    await editor.fill('');
+
+    // Change language to French
+    await header.click();
+    await header.getByRole('combobox').getByText('English').click();
+    await header.getByRole('option', { name: 'Français' }).click();
+    await expect(
+      header.getByRole('combobox').getByText('Français'),
+    ).toBeVisible();
+
+    // Trigger slash menu to show french menu
+    await editor.click();
+    await editor.fill('/');
+    await expect(page.getByText('Titres', { exact: true })).toBeVisible();
+    await header.click();
+    await expect(page.getByText('Titres', { exact: true })).toBeHidden();
+  });
+
+  test('it checks default toolbar buttons are displayed', async ({
+    page,
+    browserName,
+  }) => {
+    await createDoc(page, 'doc-toolbar', browserName, 1);
+
+    const editor = page.locator('.ProseMirror');
+    await editor.click();
+    await editor.fill('test content');
+
+    await editor.getByText('test content').dblclick();
+
+    const toolbar = page.locator('.bn-formatting-toolbar');
+    await expect(toolbar.locator('button[data-test="bold"]')).toBeVisible();
+    await expect(toolbar.locator('button[data-test="italic"]')).toBeVisible();
+    await expect(
+      toolbar.locator('button[data-test="underline"]'),
+    ).toBeVisible();
+    await expect(toolbar.locator('button[data-test="strike"]')).toBeVisible();
+    await expect(
+      toolbar.locator('button[data-test="alignTextLeft"]'),
+    ).toBeVisible();
+    await expect(
+      toolbar.locator('button[data-test="alignTextCenter"]'),
+    ).toBeVisible();
+    await expect(
+      toolbar.locator('button[data-test="alignTextRight"]'),
+    ).toBeVisible();
+    await expect(toolbar.locator('button[data-test="colors"]')).toBeVisible();
+    await expect(
+      toolbar.locator('button[data-test="unnestBlock"]'),
+    ).toBeVisible();
+    await expect(
+      toolbar.locator('button[data-test="createLink"]'),
+    ).toBeVisible();
+  });
+
   test('checks the Doc is connected to the provider server', async ({
     page,
     browserName,
@@ -59,9 +131,10 @@ test.describe('Doc Editor', () => {
 
   test('it renders correctly when we switch from one doc to another', async ({
     page,
+    browserName,
   }) => {
     // Check the first doc
-    const firstDoc = await goToGridDoc(page);
+    const [firstDoc] = await createDoc(page, 'doc-switch-1', browserName, 1);
     await expect(page.locator('h2').getByText(firstDoc)).toBeVisible();
 
     const editor = page.locator('.ProseMirror');
@@ -70,9 +143,7 @@ test.describe('Doc Editor', () => {
     await expect(editor.getByText('Hello World Doc 1')).toBeVisible();
 
     // Check the second doc
-    const secondDoc = await goToGridDoc(page, {
-      nthRow: 2,
-    });
+    const [secondDoc] = await createDoc(page, 'doc-switch-2', browserName, 1);
     await expect(page.locator('h2').getByText(secondDoc)).toBeVisible();
     await expect(editor.getByText('Hello World Doc 1')).toBeHidden();
     await editor.click();
@@ -88,9 +159,12 @@ test.describe('Doc Editor', () => {
     await expect(editor.getByText('Hello World Doc 1')).toBeVisible();
   });
 
-  test('it saves the doc when we change pages', async ({ page }) => {
+  test('it saves the doc when we change pages', async ({
+    page,
+    browserName,
+  }) => {
     // Check the first doc
-    const doc = await goToGridDoc(page);
+    const [doc] = await createDoc(page, 'doc-saves-change', browserName, 1);
     await expect(page.locator('h2').getByText(doc)).toBeVisible();
 
     const editor = page.locator('.ProseMirror');
@@ -141,7 +215,7 @@ test.describe('Doc Editor', () => {
         versions_destroy: false,
         versions_list: true,
         versions_retrieve: true,
-        manage_accesses: false, // Means not admin
+        accesses_manage: false, // Means not admin
         update: false,
         partial_update: false, // Means not editor
         retrieve: true,

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

@@ -303,7 +303,7 @@ test.describe('Documents Grid mobile', () => {
                   attachment_upload: true,
                   destroy: true,
                   link_configuration: true,
-                  manage_accesses: true,
+                  accesses_manage: true,
                   partial_update: true,
                   retrieve: true,
                   update: true,

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

@@ -21,6 +21,7 @@ test.describe('Doc Header', () => {
           role: 'owner',
           user: {
             email: 'super@owner.com',
+            full_name: 'Super Owner',
           },
         },
         {
@@ -44,7 +45,7 @@ test.describe('Doc Header', () => {
         versions_destroy: true,
         versions_list: true,
         versions_retrieve: true,
-        manage_accesses: true,
+        accesses_manage: true,
         update: true,
         partial_update: true,
         retrieve: true,
@@ -65,7 +66,7 @@ test.describe('Doc Header', () => {
       card.getByText('Created at 09/01/2021, 11:00 AM'),
     ).toBeVisible();
     await expect(
-      card.getByText('Owners: super@owner.com / super2@owner.com'),
+      card.getByText('Owners: Super Owner / super2@owner.com'),
     ).toBeVisible();
     await expect(card.getByText('Your role: Owner')).toBeVisible();
     await expect(page.getByRole('button', { name: 'Share' })).toBeVisible();
@@ -85,7 +86,7 @@ test.describe('Doc Header', () => {
   test('it updates the title doc from editor heading', async ({ page }) => {
     await page
       .getByRole('button', {
-        name: 'Create a new document',
+        name: 'New doc',
       })
       .click();
 
@@ -158,9 +159,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')
@@ -176,12 +175,13 @@ test.describe('Doc Header', () => {
   test('it checks the options available if administrator', async ({ page }) => {
     await mockedDocument(page, {
       abilities: {
+        accesses_manage: true, // Means admin
+        accesses_view: true,
         destroy: false, // Means not owner
         link_configuration: true,
         versions_destroy: true,
         versions_list: true,
         versions_retrieve: true,
-        manage_accesses: true, // Means admin
         update: true,
         partial_update: true,
         retrieve: true,
@@ -211,7 +211,11 @@ test.describe('Doc Header', () => {
 
     const shareModal = page.getByLabel('Share modal');
 
-    await expect(shareModal.getByLabel('Doc private')).toBeEnabled();
+    await expect(
+      shareModal.getByRole('combobox', {
+        name: 'Visibility',
+      }),
+    ).not.toHaveAttribute('disabled');
     await expect(shareModal.getByText('Search by email')).toBeVisible();
 
     const invitationCard = shareModal.getByLabel('List invitation card');
@@ -242,12 +246,13 @@ test.describe('Doc Header', () => {
   test('it checks the options available if editor', async ({ page }) => {
     await mockedDocument(page, {
       abilities: {
+        accesses_manage: false, // Means not admin
+        accesses_view: true,
         destroy: false, // Means not owner
         link_configuration: false,
         versions_destroy: true,
         versions_list: true,
         versions_retrieve: true,
-        manage_accesses: false, // Means not admin
         update: true,
         partial_update: true, // Means editor
         retrieve: true,
@@ -284,7 +289,11 @@ test.describe('Doc Header', () => {
 
     const shareModal = page.getByLabel('Share modal');
 
-    await expect(shareModal.getByLabel('Doc private')).toBeDisabled();
+    await expect(
+      shareModal.getByRole('combobox', {
+        name: 'Visibility',
+      }),
+    ).toHaveAttribute('disabled');
     await expect(shareModal.getByText('Search by email')).toBeHidden();
 
     const invitationCard = shareModal.getByLabel('List invitation card');
@@ -315,12 +324,13 @@ test.describe('Doc Header', () => {
   test('it checks the options available if reader', async ({ page }) => {
     await mockedDocument(page, {
       abilities: {
+        accesses_manage: false, // Means not admin
+        accesses_view: true,
         destroy: false, // Means not owner
         link_configuration: false,
         versions_destroy: false,
         versions_list: true,
         versions_retrieve: true,
-        manage_accesses: false, // Means not admin
         update: false,
         partial_update: false, // Means not editor
         retrieve: true,
@@ -357,7 +367,11 @@ test.describe('Doc Header', () => {
 
     const shareModal = page.getByLabel('Share modal');
 
-    await expect(shareModal.getByLabel('Doc private')).toBeDisabled();
+    await expect(
+      shareModal.getByRole('combobox', {
+        name: 'Visibility',
+      }),
+    ).toHaveAttribute('disabled');
     await expect(shareModal.getByText('Search by email')).toBeHidden();
 
     const invitationCard = shareModal.getByLabel('List invitation card');
@@ -398,7 +412,7 @@ test.describe('Doc Header', () => {
     // create page and navigate to it
     await page
       .getByRole('button', {
-        name: 'Create a new document',
+        name: 'New doc',
       })
       .click();
 
@@ -433,7 +447,7 @@ test.describe('Doc Header', () => {
     // create page and navigate to it
     await page
       .getByRole('button', {
-        name: 'Create a new document',
+        name: 'New doc',
       })
       .click();
 
@@ -476,7 +490,7 @@ test.describe('Documents Header mobile', () => {
         versions_destroy: true,
         versions_list: true,
         versions_retrieve: true,
-        manage_accesses: true,
+        accesses_manage: true,
         update: true,
         partial_update: true,
         retrieve: true,

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

@@ -25,6 +25,7 @@ test.describe('Document list members', () => {
             user: {
               id: `fc092149-cafa-4ffa-a29d-e4b18af751-${pageId}-${i}`,
               email: `impress@impress.world-page-${pageId}-${i}`,
+              full_name: `Impress World Page ${pageId}-${i}`,
             },
             team: '',
             role: 'editor',
@@ -58,9 +59,11 @@ test.describe('Document list members', () => {
     await waitForElementCount(list.locator('li'), 21, 10000);
 
     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();
@@ -164,14 +167,22 @@ test.describe('Document list members', () => {
     const shareModal = page.getByLabel('Share modal');
 
     // Admin still have the right to share
-    await expect(shareModal.getByLabel('Doc private')).toBeEnabled();
+    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.getByLabel('Doc private')).toBeDisabled();
+    await expect(
+      shareModal.getByRole('combobox', {
+        name: 'Visibility',
+      }),
+    ).toHaveAttribute('disabled');
   });
 
   test('it checks the delete members', async ({ page, browserName }) => {

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

@@ -7,11 +7,27 @@ test.describe('Doc Routing', () => {
     await page.goto('/');
   });
 
+  test('Check the presence of the meta tag noindex', async ({ page }) => {
+    const buttonCreateHomepage = page.getByRole('button', {
+      name: 'New doc',
+    });
+
+    await expect(buttonCreateHomepage).toBeVisible();
+    await buttonCreateHomepage.click();
+    await expect(
+      page.getByRole('button', {
+        name: 'Share',
+      }),
+    ).toBeVisible();
+    const metaDescription = page.locator('meta[name="robots"]');
+    await expect(metaDescription).toHaveAttribute('content', 'noindex');
+  });
+
   test('checks alias docs url with homepage', async ({ page }) => {
     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-table-content.spec.ts

@@ -36,6 +36,7 @@ test.describe('Doc Table Content', () => {
     await page.getByRole('button', { name: 'Strike' }).click();
 
     await page.locator('.bn-block-outer').first().click();
+    await editor.click();
     await page.locator('.bn-block-outer').last().click();
 
     // Create space to fill the viewport

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

@@ -2,39 +2,13 @@ import { expect, test } from '@playwright/test';
 
 import { createDoc, keyCloakSignIn } from './common';
 
+const browsersName = ['chromium', 'webkit', 'firefox'];
+
 test.describe('Doc Visibility', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto('/');
   });
 
-  test('Make a public doc', async ({ page, browserName }) => {
-    const [docTitle] = await createDoc(
-      page,
-      'My new doc',
-      browserName,
-      1,
-      true,
-    );
-
-    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(datagrid.getByLabel('Loading data')).toBeHidden({
-      timeout: 10000,
-    });
-
-    await expect(datagridTable.getByText(docTitle)).toBeVisible();
-
-    const row = datagridTable.getByRole('row').filter({
-      hasText: docTitle,
-    });
-
-    await expect(row.getByRole('cell').nth(0)).toHaveText('Public');
-  });
-
   test('It checks the copy link button', async ({ page, browserName }) => {
     // eslint-disable-next-line playwright/no-skipped-test
     test.skip(
@@ -56,12 +30,48 @@ test.describe('Doc Visibility', () => {
 
     expect(clipboardContent).toMatch(page.url());
   });
+
+  test('It checks the link role options', async ({ page, browserName }) => {
+    await createDoc(page, 'Doc role options', browserName, 1);
+
+    await page.getByRole('button', { name: 'Share' }).click();
+
+    const selectVisibility = page.getByRole('combobox', {
+      name: 'Visibility',
+    });
+
+    await expect(selectVisibility.getByText('Restricted')).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',
+      })
+      .click();
+
+    await expect(page.getByLabel('Read only')).toBeVisible();
+    await expect(page.getByLabel('Can read and edit')).toBeVisible();
+
+    await selectVisibility.click();
+
+    await page
+      .getByRole('option', {
+        name: 'Public',
+      })
+      .click();
+
+    await expect(page.getByLabel('Read only')).toBeVisible();
+    await expect(page.getByLabel('Can read and edit')).toBeVisible();
+  });
 });
 
-test.describe('Doc Visibility: Not loggued', () => {
+test.describe('Doc Visibility: Restricted', () => {
   test.use({ storageState: { cookies: [], origins: [] } });
 
-  test('A public doc is accessible even when not authentified.', async ({
+  test('A doc is not accessible when not authentified.', async ({
     page,
     browserName,
   }) => {
@@ -70,14 +80,157 @@ test.describe('Doc Visibility: Not loggued', () => {
 
     const [docTitle] = await createDoc(
       page,
-      'My new doc',
+      'Restricted no auth',
       browserName,
       1,
-      true,
     );
 
+    await expect(page.getByRole('heading', { name: docTitle })).toBeVisible();
+
+    const urlDoc = page.url();
+
+    await page
+      .getByRole('button', {
+        name: 'Logout',
+      })
+      .click();
+
+    await expect(page.getByRole('button', { name: 'Sign in' })).toBeVisible();
+
+    await page.goto(urlDoc);
+
+    await expect(page.getByRole('textbox', { name: 'password' })).toBeVisible();
+  });
+
+  test('A doc is not accessible when authentified but not member.', async ({
+    page,
+    browserName,
+  }) => {
+    await page.goto('/');
+    await keyCloakSignIn(page, browserName);
+
+    const [docTitle] = await createDoc(page, 'Restricted auth', browserName, 1);
+
+    await expect(page.getByRole('heading', { name: docTitle })).toBeVisible();
+
+    const urlDoc = page.url();
+
+    await page
+      .getByRole('button', {
+        name: 'Logout',
+      })
+      .click();
+
+    const otherBrowser = browsersName.find((b) => b !== browserName);
+
+    await keyCloakSignIn(page, otherBrowser!);
+
+    await page.goto(urlDoc);
+
     await expect(
-      page.getByText('The document visiblitity has been updated.'),
+      page.getByText('You do not have permission to perform this action.'),
+    ).toBeVisible();
+  });
+
+  test('A doc is accessible when member.', async ({ page, browserName }) => {
+    test.slow();
+    await page.goto('/');
+    await keyCloakSignIn(page, browserName);
+
+    const [docTitle] = await createDoc(page, 'Restricted auth', browserName, 1);
+
+    await expect(page.getByRole('heading', { name: docTitle })).toBeVisible();
+
+    await page.getByRole('button', { name: 'Share' }).click();
+
+    const inputSearch = page.getByLabel(/Find a member to add to the document/);
+
+    const otherBrowser = browsersName.find((b) => b !== browserName);
+    const username = `user@${otherBrowser}.e2e`;
+    await inputSearch.fill(username);
+    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();
+
+    await page.getByRole('button', { name: 'Validate' }).click();
+
+    await expect(
+      page.getByText(`User ${username} added to the document.`),
+    ).toBeVisible();
+
+    await page.locator('.c__modal__backdrop').click({
+      position: { x: 0, y: 0 },
+    });
+
+    const urlDoc = page.url();
+
+    await page
+      .getByRole('button', {
+        name: 'Logout',
+      })
+      .click();
+
+    await keyCloakSignIn(page, otherBrowser!);
+
+    await page.goto(urlDoc);
+
+    await expect(page.locator('h2').getByText(docTitle)).toBeVisible();
+    await expect(page.getByRole('button', { name: 'Share' })).toBeVisible();
+  });
+});
+
+test.describe('Doc Visibility: Public', () => {
+  test.use({ storageState: { cookies: [], origins: [] } });
+
+  test('It checks a public doc in read only mode', async ({
+    page,
+    browserName,
+  }) => {
+    await page.goto('/');
+    await keyCloakSignIn(page, browserName);
+
+    const [docTitle] = await createDoc(
+      page,
+      'Public read only',
+      browserName,
+      1,
+    );
+
+    await expect(page.getByRole('heading', { name: docTitle })).toBeVisible();
+
+    await page.getByRole('button', { name: 'Share' }).click();
+    await page
+      .getByRole('combobox', {
+        name: 'Visibility',
+      })
+      .click();
+
+    await page
+      .getByRole('option', {
+        name: 'Public',
+      })
+      .click();
+
+    await expect(
+      page.getByText('The document visibility has been updated.'),
+    ).toBeVisible();
+
+    await page.getByLabel('Read only').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 expect(
+      page
+        .getByLabel('It is the card information about the document.')
+        .getByText('Public', { exact: true }),
     ).toBeVisible();
 
     const urlDoc = page.url();
@@ -94,19 +247,54 @@ test.describe('Doc Visibility: Not loggued', () => {
 
     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();
   });
 
-  test('A private doc redirect to the OIDC when not authentified.', async ({
+  test('It checks a public doc in editable mode', async ({
     page,
     browserName,
   }) => {
-    test.slow();
     await page.goto('/');
     await keyCloakSignIn(page, browserName);
 
-    const [docTitle] = await createDoc(page, 'My private doc', browserName, 1);
+    const [docTitle] = await createDoc(page, 'Public editable', browserName, 1);
 
-    await expect(page.locator('h2').getByText(docTitle)).toBeVisible();
+    await expect(page.getByRole('heading', { name: docTitle })).toBeVisible();
+
+    await page.getByRole('button', { name: 'Share' }).click();
+    await page
+      .getByRole('combobox', {
+        name: 'Visibility',
+      })
+      .click();
+
+    await page
+      .getByRole('option', {
+        name: 'Public',
+      })
+      .click();
+
+    await expect(
+      page.getByText('The document visibility has been updated.'),
+    ).toBeVisible();
+
+    await page.getByLabel('Can read and edit').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 expect(
+      page
+        .getByLabel('It is the card information about the document.')
+        .getByText('Public', { exact: true }),
+    ).toBeVisible();
 
     const urlDoc = page.url();
 
@@ -116,10 +304,214 @@ test.describe('Doc Visibility: Not loggued', () => {
       })
       .click();
 
-    await expect(page.getByRole('textbox', { name: 'password' })).toBeVisible();
+    await expect(page.getByRole('button', { name: 'Sign in' })).toBeVisible();
 
     await page.goto(urlDoc);
 
-    await expect(page.getByRole('textbox', { name: 'password' })).toBeVisible();
+    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'),
+    ).toBeHidden();
+  });
+});
+
+test.describe('Doc Visibility: Authenticated', () => {
+  test.use({ storageState: { cookies: [], origins: [] } });
+
+  test('A doc is not accessible when unauthentified.', async ({
+    page,
+    browserName,
+  }) => {
+    await page.goto('/');
+    await keyCloakSignIn(page, browserName);
+
+    const [docTitle] = await createDoc(
+      page,
+      'Authenticated unauthentified',
+      browserName,
+      1,
+    );
+
+    await expect(page.getByRole('heading', { name: docTitle })).toBeVisible();
+
+    await page.getByRole('button', { name: 'Share' }).click();
+    await page
+      .getByRole('combobox', {
+        name: 'Visibility',
+      })
+      .click();
+    await page
+      .getByRole('option', {
+        name: 'Authenticated',
+      })
+      .click();
+
+    await expect(
+      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: 'Logout',
+      })
+      .click();
+
+    await expect(page.getByRole('button', { name: 'Sign in' })).toBeVisible();
+
+    await page.goto(urlDoc);
+
+    await expect(page.locator('h2').getByText(docTitle)).toBeHidden();
+    await expect(page.getByRole('textbox', { name: 'password' })).toBeVisible();
+  });
+
+  test('It checks a authenticated doc in read only mode', async ({
+    page,
+    browserName,
+  }) => {
+    await page.goto('/');
+    await keyCloakSignIn(page, browserName);
+
+    const [docTitle] = await createDoc(
+      page,
+      'Authenticated read only',
+      browserName,
+      1,
+    );
+
+    await expect(page.getByRole('heading', { name: docTitle })).toBeVisible();
+
+    await page.getByRole('button', { name: 'Share' }).click();
+    await page
+      .getByRole('combobox', {
+        name: 'Visibility',
+      })
+      .click();
+    await page
+      .getByRole('option', {
+        name: 'Authenticated',
+      })
+      .click();
+
+    await expect(
+      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: 'Logout',
+      })
+      .click();
+
+    const otherBrowser = browsersName.find((b) => b !== browserName);
+    await keyCloakSignIn(page, otherBrowser!);
+
+    await page.goto(urlDoc);
+
+    await expect(page.locator('h2').getByText(docTitle)).toBeVisible();
+    await page.getByRole('button', { name: 'Share' }).click();
+    await expect(
+      page.getByText('Read only, you cannot edit this document'),
+    ).toBeVisible();
+
+    const shareModal = page.getByLabel('Share modal');
+
+    await expect(
+      shareModal.getByRole('combobox', {
+        name: 'Visibility',
+      }),
+    ).toHaveAttribute('disabled');
+    await expect(shareModal.getByText('Search by email')).toBeHidden();
+    await expect(shareModal.getByLabel('List members card')).toBeHidden();
+  });
+
+  test('It checks a authenticated doc in editable mode', async ({
+    page,
+    browserName,
+  }) => {
+    await page.goto('/');
+    await keyCloakSignIn(page, browserName);
+
+    const [docTitle] = await createDoc(
+      page,
+      'Authenticated editable',
+      browserName,
+      1,
+    );
+
+    await expect(page.getByRole('heading', { name: docTitle })).toBeVisible();
+
+    await page.getByRole('button', { name: 'Share' }).click();
+    await page
+      .getByRole('combobox', {
+        name: 'Visibility',
+      })
+      .click();
+    await page
+      .getByRole('option', {
+        name: 'Authenticated',
+      })
+      .click();
+
+    await expect(
+      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 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: 'Logout',
+      })
+      .click();
+
+    const otherBrowser = browsersName.find((b) => b !== browserName);
+    await keyCloakSignIn(page, otherBrowser!);
+
+    await page.goto(urlDoc);
+
+    await expect(page.locator('h2').getByText(docTitle)).toBeVisible();
+    await page.getByRole('button', { name: 'Share' }).click();
+    await expect(
+      page.getByText('Read only, you cannot edit this document'),
+    ).toBeHidden();
+
+    const shareModal = page.getByLabel('Share modal');
+
+    await expect(
+      shareModal.getByRole('combobox', {
+        name: 'Visibility',
+      }),
+    ).toHaveAttribute('disabled');
+    await expect(shareModal.getByText('Search by email')).toBeHidden();
+    await expect(shareModal.getByLabel('List members card')).toBeHidden();
   });
 });

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

@@ -1,77 +0,0 @@
-import { expect, test } from '@playwright/test';
-
-import { goToGridDoc } from './common';
-
-test.beforeEach(async ({ page }) => {
-  await page.goto('/');
-});
-
-test.describe('Footer', () => {
-  test('checks all the elements are visible', async ({ page }) => {
-    const footer = page.locator('footer').first();
-
-    await expect(footer.getByAltText('Gouvernement Logo')).toBeVisible();
-
-    await expect(
-      footer.getByRole('link', { name: 'legifrance.gouv.fr' }),
-    ).toBeVisible();
-
-    await expect(
-      footer.getByRole('link', { name: 'info.gouv.fr' }),
-    ).toBeVisible();
-
-    await expect(
-      footer.getByRole('link', { name: 'service-public.fr' }),
-    ).toBeVisible();
-
-    await expect(
-      footer.getByRole('link', { name: 'data.gouv.fr' }),
-    ).toBeVisible();
-
-    await expect(
-      footer.getByRole('link', { name: 'Legal Notice' }),
-    ).toBeVisible();
-
-    await expect(
-      footer.getByRole('link', { name: 'Personal data and cookies' }),
-    ).toBeVisible();
-
-    await expect(
-      footer.getByRole('link', { name: 'Accessibility' }),
-    ).toBeVisible();
-
-    await expect(
-      footer.getByText(
-        'Unless otherwise stated, all content on this site is under licence',
-      ),
-    ).toBeVisible();
-  });
-
-  test('checks footer is not visible on doc editor', async ({ page }) => {
-    await expect(page.locator('footer')).toBeVisible();
-    await goToGridDoc(page);
-    await expect(page.locator('footer')).toBeHidden();
-  });
-
-  const legalPages = [
-    { name: 'Legal Notice', url: '/legal-notice/' },
-    { name: 'Personal data and cookies', url: '/personal-data-cookies/' },
-    { name: 'Accessibility', url: '/accessibility/' },
-  ];
-  for (const { name, url } of legalPages) {
-    test(`checks ${name} page`, async ({ page }) => {
-      const footer = page.locator('footer').first();
-      await footer.getByRole('link', { name }).click();
-
-      await expect(
-        page
-          .getByRole('heading', {
-            name,
-          })
-          .first(),
-      ).toBeVisible();
-
-      await expect(page).toHaveURL(url);
-    });
-  }
-});

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('button', {
-        name: 'Les services de La Suite numérique',
-      }),
+      header.getByRole('link', { name: 'Docs Logo Docs' }),
     ).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',
-      }),
+      header.getByRole('button', { name: 'Les services de La Suite numé' }),
     ).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,10 +15,48 @@ test.describe('Language', () => {
       header.getByRole('combobox').getByText('Français'),
     ).toBeVisible();
 
+    await expect(page.getByLabel('Se déconnecter')).toBeVisible();
+
+    await header.getByRole('combobox').getByText('Français').click();
+    await header.getByRole('option', { name: 'Deutsch' }).click();
     await expect(
-      page.getByRole('button', {
-        name: 'Créer un nouveau document',
-      }),
+      header.getByRole('combobox').getByText('Deutsch'),
     ).toBeVisible();
+
+    await expect(page.getByLabel('Abmelden')).toBeVisible();
+  });
+
+  test('checks that backend uses the same language as the frontend', async ({
+    page,
+  }) => {
+    // Helper function to intercept and assert 404 response
+    const check404Response = async (expectedDetail: string) => {
+      const expectedBackendResponse = page.waitForResponse(
+        (response) =>
+          response.url().includes('/api') &&
+          response.url().includes('non-existent-doc-uuid') &&
+          response.status() === 404,
+      );
+
+      // Trigger the specific 404 XHR response by navigating to a non-existent document
+      await page.goto('/docs/non-existent-doc-uuid');
+
+      // Assert that the intercepted error message is in the expected language
+      const interceptedBackendResponse = await expectedBackendResponse;
+      expect(await interceptedBackendResponse.json()).toStrictEqual({
+        detail: expectedDetail,
+      });
+    };
+
+    // Check for English 404 response
+    await check404Response('Not found.');
+
+    // Switch language to French
+    const header = page.locator('header').first();
+    await header.getByRole('combobox').getByText('English').click();
+    await header.getByRole('option', { name: 'Français' }).click();
+
+    // Check for French 404 response
+    await check404Response('Pas trouvé.');
   });
 });

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

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

src/frontend/apps/e2e/package.json

@@ -1,6 +1,6 @@
 {
   "name": "app-e2e",
-  "version": "1.5.1",
+  "version": "1.7.0",
   "private": true,
   "scripts": {
     "lint": "eslint . --ext .ts",
@@ -12,7 +12,7 @@
     "test:ui::chromium": "yarn test:ui --project=chromium"
   },
   "devDependencies": {
-    "@playwright/test": "1.47.2",
+    "@playwright/test": "1.48.1",
     "@types/node": "*",
     "@types/pdf-parse": "1.1.4",
     "eslint-config-impress": "*",

src/frontend/apps/impress/cunningham.ts

@@ -3,24 +3,30 @@ const config = {
     default: {
       theme: {
         colors: {
-          'card-border': '#ededed',
+          'card-border': '#E5E5E5',
           'primary-bg': '#FAFAFA',
           'primary-100': '#EDF5FA',
           'primary-150': '#E5EEFA',
           'info-150': '#E5EEFA',
+          'greyscale-000': '#fff',
+          'greyscale-1000': '#161616',
         },
         font: {
           sizes: {
             ml: '0.938rem',
-            xl: '1.50rem',
             t: '0.6875rem',
             s: '0.75rem',
-            h1: '2.2rem',
-            h2: '1.7rem',
-            h3: '1.37rem',
-            h4: '1.15rem',
-            h5: '1rem',
-            h6: '0.87rem',
+            xl: '20px',
+            lg: '18px',
+            md: '16px',
+            sm: '14px',
+            xs: '12px',
+            h1: '32px',
+            h2: '28px',
+            h3: '24px',
+            h4: '22px',
+            h5: '20px',
+            h6: '18px',
           },
           weights: {
             thin: 100,
@@ -34,6 +40,21 @@ const config = {
           auto: 'auto',
           bx: '2.2rem',
           full: '100%',
+          '050V': '2px',
+          '100V': '4px',
+          '150V': '6px',
+          '100W': '8px',
+          '300V': '12px',
+          '200W': '16px',
+          '300W': '24px',
+          '400W': '32px',
+          '500W': '40px',
+          '600W': '48px',
+          '700W': '56px',
+          '800W': '64px',
+          '900W': '72px',
+          '1200W': '96px',
+          '1500W': '120px',
         },
         breakpoints: {
           xxs: '320px',
@@ -46,6 +67,11 @@ const config = {
           alt: '',
         },
       },
+      global: {
+        hover: {
+          'greyscale-100': '#055fd214',
+        },
+      },
       components: {
         datagrid: {
           header: {
@@ -104,7 +130,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 +152,7 @@ const config = {
           },
         },
         modal: {
-          'background-color': '#ffffff',
+          'background-color': '#fff',
         },
         button: {
           'border-radius': {
@@ -196,6 +222,23 @@ const config = {
     },
     dsfr: {
       theme: {
+        spacings: {
+          '050V': '2px',
+          '100V': '4px',
+          '150V': '6px',
+          '100W': '8px',
+          '300V': '12px',
+          '200W': '16px',
+          '300W': '24px',
+          '400W': '32px',
+          '500W': '40px',
+          '600W': '48px',
+          '700W': '56px',
+          '800W': '64px',
+          '900W': '72px',
+          '1200W': '96px',
+          '1500W': '120px',
+        },
         colors: {
           'card-border': '#ededed',
           'primary-text': '#000091',
@@ -209,7 +252,7 @@ const config = {
           'primary-700': '#272747',
           'primary-800': '#21213f',
           'primary-900': '#1c1a36',
-          'secondary-text': '#FFFFFF',
+          'secondary-text': '#fff',
           'secondary-100': '#fee9ea',
           'secondary-200': '#fedfdf',
           'secondary-300': '#fdbfbf',
@@ -220,16 +263,16 @@ 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-400': '#929292',
+          'greyscale-500': '#666',
+          'greyscale-700': '#3A3A3A',
+          'greyscale-1000': '#161616',
           'success-text': '#1f8d49',
           'success-100': '#dffee6',
           'success-200': '#b8fec9',
@@ -276,6 +319,22 @@ const config = {
             accent: 'Marianne',
             base: 'Marianne',
           },
+          size: {
+            ml: '0.938rem',
+            t: '0.6875rem',
+            s: '0.75rem',
+            xl: '20px',
+            lg: '18px',
+            md: '16px',
+            sm: '14px',
+            xs: '12px',
+            h1: '32px',
+            h2: '28px',
+            h3: '24px',
+            h4: '22px',
+            h5: '20px',
+            h6: '18px',
+          },
         },
         logo: {
           src: '/assets/logo-gouv.svg',
@@ -297,9 +356,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: {
@@ -358,10 +417,12 @@ const config = {
         },
         'forms-field': {
           color: 'var(--c--theme--colors--primary-text)',
+          'footer-font-size': 'var(--c--theme--font--sizes--t)',
+          'footer-color': 'var(--c--theme--colors--greyscale-text)',
         },
         '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)',
@@ -372,11 +433,14 @@ const config = {
             big: 'var(--c--theme--colors--primary-text)',
           },
         },
+        'forms-radio': {
+          'accent-color': 'var(--c--theme--colors--primary-600)',
+        },
         'forms-select': {
           'item-font-size': '14px',
           'border-radius': '4px',
           'border-radius-hover': '4px',
-          'background-color': '#ffffff',
+          'background-color': '#fff',
           'border-color': 'var(--c--theme--colors--primary-text)',
           'border-color-hover': 'var(--c--theme--colors--primary-text)',
           'box-shadow-color': 'var(--c--theme--colors--primary-text)',

src/frontend/apps/impress/package.json

@@ -1,6 +1,6 @@
 {
   "name": "app-impress",
-  "version": "1.5.1",
+  "version": "1.7.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -19,36 +19,38 @@
     "@blocknote/mantine": "*",
     "@blocknote/react": "*",
     "@gouvfr-lasuite/integration": "1.0.2",
-    "@hocuspocus/provider": "2.13.6",
+    "@hocuspocus/provider": "2.13.7",
     "@openfun/cunningham-react": "2.9.4",
-    "@tanstack/react-query": "5.56.2",
-    "i18next": "23.15.1",
+    "@tanstack/react-query": "5.59.15",
+    "i18next": "23.16.2",
+    "i18next-browser-languagedetector": "8.0.0",
     "idb": "8.0.0",
     "lodash": "4.17.21",
     "luxon": "3.5.0",
-    "next": "14.2.13",
+    "next": "14.2.15",
     "react": "*",
-    "react-aria-components": "1.3.3",
+    "react-aria-components": "1.4.1",
     "react-dom": "*",
-    "react-i18next": "15.0.2",
+    "react-i18next": "15.0.3",
     "react-select": "5.8.1",
+    "react-intersection-observer": "9.13.1",
     "styled-components": "6.1.13",
     "y-protocols": "1.0.6",
     "yjs": "*",
-    "zustand": "4.5.5"
+    "zustand": "5.0.0"
   },
   "devDependencies": {
     "@svgr/webpack": "8.1.0",
-    "@tanstack/react-query-devtools": "5.58.0",
+    "@tanstack/react-query-devtools": "5.59.15",
     "@testing-library/dom": "10.4.0",
-    "@testing-library/jest-dom": "6.5.0",
+    "@testing-library/jest-dom": "6.6.2",
     "@testing-library/react": "16.0.1",
     "@testing-library/user-event": "14.5.2",
     "@types/jest": "29.5.13",
-    "@types/lodash": "4.17.9",
+    "@types/lodash": "4.17.12",
     "@types/luxon": "3.4.2",
     "@types/node": "*",
-    "@types/react": "18.3.10",
+    "@types/react": "18.3.11",
     "@types/react-dom": "*",
     "cross-env": "*",
     "dotenv": "16.4.5",
@@ -58,7 +60,7 @@
     "jest-environment-jsdom": "29.7.0",
     "node-fetch": "2.7.0",
     "prettier": "3.3.3",
-    "stylelint": "16.9.0",
+    "stylelint": "16.10.0",
     "stylelint-config-standard": "36.0.1",
     "stylelint-prettier": "5.0.2",
     "typescript": "*",

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

@@ -1,26 +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/navigation', () => ({
-  useRouter() {
-    return {
-      push: jest.fn(),
-    };
-  },
-}));
-
-describe('Page', () => {
-  it('checks Page rendering', () => {
-    render(<Page />, { wrapper: AppWrapper });
-
-    expect(
-      screen.getByRole('button', {
-        name: /Create a new document/i,
-      }),
-    ).toBeInTheDocument();
-  });
-});

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

@@ -1,6 +1,6 @@
 import { ComponentPropsWithRef, ReactHTML } from 'react';
 import styled from 'styled-components';
-import { CSSProperties } from 'styled-components/dist/types';
+import { CSSProperties, RuleSet } from 'styled-components/dist/types';
 
 import {
   MarginPadding,
@@ -15,11 +15,11 @@ export interface BoxProps {
   $align?: CSSProperties['alignItems'];
   $background?: CSSProperties['background'];
   $color?: CSSProperties['color'];
-  $css?: string;
+  $css?: string | RuleSet<object>;
   $direction?: CSSProperties['flexDirection'];
   $display?: CSSProperties['display'];
   $effect?: 'show' | 'hide';
-  $flex?: boolean;
+  $flex?: CSSProperties['flex'];
   $gap?: CSSProperties['gap'];
   $hasTransition?: boolean | 'slow';
   $height?: CSSProperties['height'];
@@ -45,12 +45,13 @@ export type BoxType = ComponentPropsWithRef<typeof Box>;
 export const Box = styled('div')<BoxProps>`
   display: flex;
   flex-direction: column;
+
   ${({ $align }) => $align && `align-items: ${$align};`}
   ${({ $background }) => $background && `background: ${$background};`}
   ${({ $color }) => $color && `color: ${$color};`}
   ${({ $direction }) => $direction && `flex-direction: ${$direction};`}
   ${({ $display }) => $display && `display: ${$display};`}
-  ${({ $flex }) => $flex === false && `display: block;`}
+  ${({ $flex }) => $flex && `flex: ${$flex};`}
   ${({ $gap }) => $gap && `gap: ${$gap};`}
   ${({ $height }) => $height && `height: ${$height};`}
   ${({ $hasTransition }) =>
@@ -73,7 +74,7 @@ export const Box = styled('div')<BoxProps>`
   ${({ $transition }) => $transition && `transition: ${$transition};`}
   ${({ $width }) => $width && `width: ${$width};`}
   ${({ $wrap }) => $wrap && `flex-wrap: ${$wrap};`}
-  ${({ $css }) => $css && `${$css};`}
+  ${({ $css }) => $css && (typeof $css === 'string' ? `${$css};` : $css)}
   ${({ $zIndex }) => $zIndex && `z-index: ${$zIndex};`}
   ${({ $effect }) => {
     let effect;

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

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

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

@@ -1,9 +1,4 @@
-import React, {
-  PropsWithChildren,
-  ReactNode,
-  useEffect,
-  useState,
-} from 'react';
+import { PropsWithChildren, ReactNode, useEffect, useState } from 'react';
 import { Button, DialogTrigger, Popover } from 'react-aria-components';
 import styled from 'styled-components';
 
@@ -29,7 +24,7 @@ const StyledButton = styled(Button)`
   text-wrap: nowrap;
 `;
 
-interface DropButtonProps {
+export interface DropButtonProps {
   button: ReactNode;
   isOpen?: boolean;
   onOpenChange?: (isOpen: boolean) => void;

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

@@ -1,6 +1,14 @@
 import { Text, TextType } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 
+type Props = {
+  iconName: string;
+  className?: string;
+};
+export const Icon = ({ iconName, className }: Props) => {
+  return <span className={`material-icons ${className}`}>{iconName}</span>;
+};
+
 interface IconBGProps extends TextType {
   iconName: string;
 }

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

@@ -1,4 +1,9 @@
-import { CSSProperties, ComponentPropsWithRef, ReactHTML } from 'react';
+import {
+  CSSProperties,
+  ComponentPropsWithRef,
+  ReactHTML,
+  forwardRef,
+} from 'react';
 import styled from 'styled-components';
 
 import { tokens } from '@/cunningham';
@@ -18,6 +23,7 @@ export interface TextProps extends BoxProps {
   $weight?: CSSProperties['fontWeight'];
   $textAlign?: CSSProperties['textAlign'];
   $size?: TextSizes | (string & {});
+
   $theme?:
     | 'primary'
     | 'secondary'
@@ -26,6 +32,7 @@ export interface TextProps extends BoxProps {
     | 'warning'
     | 'danger'
     | 'greyscale';
+
   $variation?:
     | 'text'
     | '100'
@@ -36,7 +43,8 @@ export interface TextProps extends BoxProps {
     | '600'
     | '700'
     | '800'
-    | '900';
+    | '900'
+    | '1000';
 }
 
 export type TextType = ComponentPropsWithRef<typeof Text>;
@@ -55,18 +63,23 @@ export const TextStyled = styled(Box)<TextProps>`
     `white-space: nowrap; overflow: hidden; text-overflow: ellipsis;`}
 `;
 
-export const Text = ({
-  className,
-  $isMaterialIcon,
-  ...props
-}: ComponentPropsWithRef<typeof TextStyled>) => {
-  return (
-    <TextStyled
-      as="span"
-      $theme="greyscale"
-      $variation="text"
-      className={`${className || ''}${$isMaterialIcon ? ' material-icons' : ''}`}
-      {...props}
-    />
-  );
-};
+const Text = forwardRef<HTMLElement, ComponentPropsWithRef<typeof TextStyled>>(
+  ({ className, $isMaterialIcon, ...props }, ref) => {
+    return (
+      <>
+        <TextStyled
+          ref={ref}
+          as="span"
+          $theme={props.$theme ?? 'greyscale'}
+          $variation={props.$variation ?? 'text'}
+          className={`${className || ''}${$isMaterialIcon ? ' material-icons' : ''}`}
+          {...props}
+        />
+      </>
+    );
+  },
+);
+
+Text.displayName = 'Text';
+
+export { Text };

src/frontend/apps/impress/src/components/dropdown-menu/DropdownMenu.tsx

@@ -0,0 +1,87 @@
+import { PropsWithChildren, useMemo } from 'react';
+
+import { DropButton, DropButtonProps } from '@/components';
+import { Icon } from '@/components/Icon';
+
+import styles from './dropdown-menu.module.scss';
+
+export type DropdownMenuOption = {
+  icon?: string;
+  label: string;
+  callback?: () => void | Promise<unknown>;
+  danger?: boolean;
+  show?: boolean;
+};
+
+export type DropdownMenuProps = Omit<DropButtonProps, 'button'> & {
+  options: DropdownMenuOption[];
+  showArrow?: boolean;
+  arrowClassname?: string;
+};
+
+export const DropdownMenu = ({
+  options,
+  children,
+  showArrow = false,
+  arrowClassname,
+  ...dropButtonProps
+}: PropsWithChildren<DropdownMenuProps>) => {
+  const showDropdown = useMemo(() => {
+    let show = false;
+    options.forEach((option) => {
+      show = show || (option.show !== undefined ? option.show : true);
+    });
+    return show;
+  }, [options]);
+
+  const getButton = () => {
+    if (!showArrow) {
+      return children;
+    }
+
+    return (
+      <div className={styles.withArrowContainer}>
+        <div>{children}</div>
+        <Icon
+          className={arrowClassname ?? 'clr-primary-600'}
+          iconName={
+            dropButtonProps.isOpen ? 'arrow_drop_up' : 'arrow_drop_down'
+          }
+        />
+      </div>
+    );
+  };
+
+  if (!showDropdown) {
+    return;
+  }
+
+  return (
+    <DropButton {...dropButtonProps} button={getButton()}>
+      <div className={styles.listOption}>
+        {options.map((option) => {
+          if (option.show !== undefined && !option.show) {
+            return;
+          }
+          return (
+            <button
+              onClick={(event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                dropButtonProps.onOpenChange?.(false);
+                void option.callback?.();
+              }}
+              key={option.label}
+              className={styles.item}
+            >
+              {option.icon && (
+                <Icon className={styles.itemIcon} iconName={option.icon} />
+              )}
+              {option.label}
+            </button>
+          );
+        })}
+      </div>
+    </DropButton>
+  );
+};

src/frontend/apps/impress/src/components/dropdown-menu/dropdown-menu.module.scss

@@ -0,0 +1,42 @@
+.simpleContent {
+  display: flex;
+  align-items: center;
+  gap: var(--c--theme--spacings--st);
+}
+
+.listOption {
+  display: flex;
+  flex-direction: column;
+  .item:not(:last-child) {
+    border-bottom: 1px solid var(--c--theme--colors--greyscale-200);
+  }
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: var(--c--theme--spacings--200W);
+  border: none;
+  background-color: white;
+  font-size: var(--c--theme--font--sizes--sm);
+  color: var(--c--theme--colors--primary-600);
+  font-weight: 500;
+  padding: var(--c--theme--spacings--100W) var(--c--theme--spacings--200W);
+  width: 100%;
+  cursor: pointer;
+  user-select: none;
+
+  &:hover {
+    background-color: var(--c--theme--colors--greyscale-050);
+  }
+
+  .itemIcon {
+    font-size: 24px;
+  }
+}
+
+.withArrowContainer {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}

src/frontend/apps/impress/src/components/dropdown-menu/useDropdownMenu.tsx

@@ -0,0 +1,14 @@
+import { useState } from 'react';
+
+export const useDropdownMenu = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const onOpenChange = (isOpen: boolean) => {
+    setIsOpen(isOpen);
+  };
+
+  return {
+    isOpen,
+    onOpenChange,
+  };
+};

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

@@ -0,0 +1,34 @@
+import { useCunninghamTheme } from '@/cunningham';
+
+import { Box } from '../Box';
+
+export enum SeparatorVariant {
+  LIGHT = 'light',
+  DARK = 'dark',
+}
+
+type Props = {
+  variant?: SeparatorVariant;
+};
+
+export const HorizontalSeparator = ({
+  variant = SeparatorVariant.LIGHT,
+}: Props) => {
+  const { colorsTokens, themeTokens } = useCunninghamTheme();
+  const colors = colorsTokens();
+  const spacings = themeTokens().spacings;
+  return (
+    <Box
+      $css={`
+        width: 100%;
+        height: 1px;
+        margin: ${spacings?.['300W'] ?? '0.5rem'} 0 ;
+        background-color: ${
+          variant === SeparatorVariant.LIGHT
+            ? colors['greyscale-200']
+            : colors['greyscale-800']
+        };
+  `}
+    />
+  );
+};

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

@@ -0,0 +1,29 @@
+import { PropsWithChildren } from 'react';
+
+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();
+  return (
+    <Box
+      className="toto"
+      $padding={{ vertical: '100V' }}
+      $css={`
+        padding: 12px 0;
+        ${showSeparator ? `border-bottom: 1px solid ${(colors?.['greyscale-200'] as string) ?? '#E5E5E5'};` : ''}
+    `}
+    >
+      {children}
+    </Box>
+  );
+};

src/frontend/apps/impress/src/core/auth/api/types.ts

@@ -8,4 +8,6 @@
 export interface User {
   id: string;
   email: string;
+  full_name: string;
+  short_name: string;
 }

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

@@ -16,6 +16,12 @@
   line-height: initial;
 }
 
+.c__field .c__field__footer {
+  padding: 2px 0 0;
+  font-size: var(--c--components--forms-field--footer-font-size);
+  color: var(--c--components--forms-field--footer-color);
+}
+
 .labelled-box label {
   color: var(--c--theme--colors--primary-text);
 }
@@ -328,6 +334,10 @@ input:-webkit-autofill:focus {
   cursor: not-allowed;
 }
 
+.c__checkbox.c__checkbox--disabled .c__checkbox__label {
+  color: var(--c--theme--colors--greyscale-400);
+}
+
 /**
  * Button
 */
@@ -532,3 +542,10 @@ input:-webkit-autofill:focus {
 .c__toast__container {
   z-index: 10000;
 }
+
+/**
+ * Tooltip
+*/
+.c__tooltip {
+  padding: 4px 6px;
+}

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,29 +69,34 @@ export const tokens = {
           'danger-700': '#9B0000',
           'danger-800': '#780000',
           'danger-900': '#5C0000',
-          'primary-text': '#FFFFFF',
-          'success-text': '#FFFFFF',
-          'warning-text': '#FFFFFF',
-          'danger-text': '#FFFFFF',
-          'card-border': '#ededed',
+          'primary-text': '#fff',
+          'success-text': '#fff',
+          'warning-text': '#fff',
+          'danger-text': '#fff',
+          'card-border': '#E5E5E5',
           'primary-bg': '#FAFAFA',
           'primary-150': '#E5EEFA',
           'info-150': '#E5EEFA',
+          'greyscale-1000': '#161616',
         },
         font: {
           sizes: {
-            h1: '2.2rem',
-            h2: '1.7rem',
-            h3: '1.37rem',
-            h4: '1.15rem',
-            h5: '1rem',
-            h6: '0.87rem',
+            h1: '32px',
+            h2: '28px',
+            h3: '24px',
+            h4: '22px',
+            h5: '20px',
+            h6: '18px',
             l: '1rem',
             m: '0.8125rem',
             s: '0.75rem',
             ml: '0.938rem',
-            xl: '1.50rem',
             t: '0.6875rem',
+            xl: '20px',
+            lg: '18px',
+            md: '16px',
+            sm: '14px',
+            xs: '12px',
           },
           weights: {
             thin: 100,
@@ -130,6 +135,21 @@ export const tokens = {
           auto: 'auto',
           bx: '2.2rem',
           full: '100%',
+          '050V': '2px',
+          '100V': '4px',
+          '150V': '6px',
+          '100W': '8px',
+          '300V': '12px',
+          '200W': '16px',
+          '300W': '24px',
+          '400W': '32px',
+          '500W': '40px',
+          '600W': '48px',
+          '700W': '56px',
+          '800W': '64px',
+          '900W': '72px',
+          '1200W': '96px',
+          '1500W': '120px',
         },
         transitions: {
           'ease-in': 'cubic-bezier(0.32, 0, 0.67, 0)',
@@ -202,7 +222,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 +243,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)',
@@ -333,6 +353,23 @@ export const tokens = {
     },
     dsfr: {
       theme: {
+        spacings: {
+          '050V': '2px',
+          '100V': '4px',
+          '150V': '6px',
+          '100W': '8px',
+          '300V': '12px',
+          '200W': '16px',
+          '300W': '24px',
+          '400W': '32px',
+          '500W': '40px',
+          '600W': '48px',
+          '700W': '56px',
+          '800W': '64px',
+          '900W': '72px',
+          '1200W': '96px',
+          '1500W': '120px',
+        },
         colors: {
           'card-border': '#ededed',
           'primary-text': '#000091',
@@ -346,7 +383,7 @@ export const tokens = {
           'primary-700': '#272747',
           'primary-800': '#21213f',
           'primary-900': '#1c1a36',
-          'secondary-text': '#FFFFFF',
+          'secondary-text': '#fff',
           'secondary-100': '#fee9ea',
           'secondary-200': '#fedfdf',
           'secondary-300': '#fdbfbf',
@@ -357,16 +394,16 @@ 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-400': '#929292',
+          'greyscale-500': '#666',
+          'greyscale-700': '#3A3A3A',
+          'greyscale-1000': '#161616',
           'success-text': '#1f8d49',
           'success-100': '#dffee6',
           'success-200': '#b8fec9',
@@ -408,7 +445,25 @@ export const tokens = {
           'danger-800': '#412121',
           'danger-900': '#3a1c1c',
         },
-        font: { families: { accent: 'Marianne', base: 'Marianne' } },
+        font: {
+          families: { accent: 'Marianne', base: 'Marianne' },
+          size: {
+            ml: '0.938rem',
+            t: '0.6875rem',
+            s: '0.75rem',
+            xl: '20px',
+            lg: '18px',
+            md: '16px',
+            sm: '14px',
+            xs: '12px',
+            h1: '32px',
+            h2: '28px',
+            h3: '24px',
+            h4: '22px',
+            h5: '20px',
+            h6: '18px',
+          },
+        },
         logo: {
           src: '/assets/logo-gouv.svg',
           widthHeader: '110px',
@@ -427,9 +482,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: {
@@ -479,10 +534,14 @@ export const tokens = {
         },
         'forms-datepicker': { 'border-radius': '0' },
         'forms-fileuploader': { 'border-radius': '0' },
-        'forms-field': { color: 'var(--c--theme--colors--primary-text)' },
+        'forms-field': {
+          color: 'var(--c--theme--colors--primary-text)',
+          'footer-font-size': 'var(--c--theme--font--sizes--t)',
+          'footer-color': 'var(--c--theme--colors--greyscale-text)',
+        },
         '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)',
@@ -491,11 +550,14 @@ export const tokens = {
         'forms-labelledbox': {
           'label-color': { big: 'var(--c--theme--colors--primary-text)' },
         },
+        'forms-radio': {
+          'accent-color': 'var(--c--theme--colors--primary-600)',
+        },
         'forms-select': {
           '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,7 @@ import { tokens } from './cunningham-tokens';
 
 type Tokens = typeof tokens.themes.default & Partial<typeof tokens.themes.dsfr>;
 type ColorsTokens = Tokens['theme']['colors'];
+type SpacingsTokens = Tokens['theme']['spacings'];
 type ComponentTokens = Tokens['components'];
 type Theme = 'default' | 'dsfr';
 
@@ -13,6 +14,7 @@ interface AuthStore {
   setTheme: (theme: Theme) => void;
   themeTokens: () => Partial<Tokens['theme']>;
   colorsTokens: () => Partial<ColorsTokens>;
+  spacingsTokens: () => SpacingsTokens;
   componentTokens: () => ComponentTokens;
 }
 
@@ -25,6 +27,7 @@ const useCunninghamTheme = create<AuthStore>((set, get) => {
     themeTokens: () => currentTheme().theme,
     colorsTokens: () => currentTheme().theme.colors,
     componentTokens: () => currentTheme().components,
+    spacingsTokens: () => currentTheme().theme.spacings,
     setTheme: (theme: Theme) => {
       set({ theme });
     },

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

@@ -9,26 +9,18 @@ import {
   VariantType,
   useToastProvider,
 } from '@openfun/cunningham-react';
-import {
-  PropsWithChildren,
-  ReactNode,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
+import { PropsWithChildren, ReactNode, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { isAPIError } from '@/api';
 import { Box, Text } from '@/components';
-import { useDocOptions } from '@/features/docs/doc-management/';
+import { useDocOptions, useDocStore } from '@/features/docs/doc-management/';
 
 import {
   AITransformActions,
   useDocAITransform,
   useDocAITranslate,
 } from '../api/';
-import { useDocStore } from '../stores';
 
 type LanguageTranslate = {
   value: string;
@@ -70,9 +62,8 @@ export function AIGroupButton() {
   const { t } = useTranslation();
   const { currentDoc } = useDocStore();
   const { data: docOptions } = useDocOptions();
-  const [languages, setLanguages] = useState<LanguageTranslate[]>([]);
 
-  useEffect(() => {
+  const languages = useMemo(() => {
     const languages = docOptions?.actions.POST.language.choices;
 
     if (!languages) {
@@ -90,7 +81,7 @@ export function AIGroupButton() {
       'pl',
     ]);
 
-    setLanguages(languages);
+    return languages;
   }, [docOptions?.actions.POST.language.choices]);
 
   const show = useMemo(() => {
@@ -220,45 +211,19 @@ const AIMenuItemTransform = ({
   children,
   icon,
 }: PropsWithChildren<AIMenuItemTransform>) => {
-  const editor = useBlockNoteEditor();
   const { mutateAsync: requestAI, isPending } = useDocAITransform();
-  const handleAIError = useHandleAIError();
 
-  const handleAIAction = useCallback(async () => {
-    const selectedBlocks = editor.getSelection()?.blocks;
-
-    if (!selectedBlocks || selectedBlocks.length === 0) {
-      return;
-    }
-
-    const markdown = await editor.blocksToMarkdownLossy(selectedBlocks);
-
-    try {
-      const responseAI = await requestAI({
-        text: markdown,
-        action,
-        docId,
-      });
-
-      if (!responseAI.answer) {
-        return;
-      }
-
-      const blockMarkdown = await editor.tryParseMarkdownToBlocks(
-        responseAI.answer,
-      );
-      editor.replaceBlocks(selectedBlocks, blockMarkdown);
-    } catch (error) {
-      handleAIError(error);
-    }
-  }, [editor, requestAI, action, docId, handleAIError]);
+  const requestAIAction = async (markdown: string) => {
+    const responseAI = await requestAI({
+      text: markdown,
+      action,
+      docId,
+    });
+    return responseAI.answer;
+  };
 
   return (
-    <AIMenuItem
-      icon={icon}
-      handleAIAction={handleAIAction}
-      isPending={isPending}
-    >
+    <AIMenuItem icon={icon} requestAI={requestAIAction} isPending={isPending}>
       {children}
     </AIMenuItem>
   );
@@ -276,11 +241,46 @@ const AIMenuItemTranslate = ({
   icon,
   language,
 }: PropsWithChildren<AIMenuItemTranslate>) => {
-  const editor = useBlockNoteEditor();
   const { mutateAsync: requestAI, isPending } = useDocAITranslate();
+
+  const requestAITranslate = async (markdown: string) => {
+    const responseAI = await requestAI({
+      text: markdown,
+      language,
+      docId,
+    });
+    return responseAI.answer;
+  };
+
+  return (
+    <AIMenuItem
+      icon={icon}
+      requestAI={requestAITranslate}
+      isPending={isPending}
+    >
+      {children}
+    </AIMenuItem>
+  );
+};
+
+interface AIMenuItemProps {
+  requestAI: (markdown: string) => Promise<string>;
+  isPending: boolean;
+  icon?: ReactNode;
+}
+
+const AIMenuItem = ({
+  requestAI,
+  isPending,
+  children,
+  icon,
+}: PropsWithChildren<AIMenuItemProps>) => {
+  const Components = useComponentsContext();
+
+  const editor = useBlockNoteEditor();
   const handleAIError = useHandleAIError();
 
-  const handleAIAction = useCallback(async () => {
+  const handleAIAction = async () => {
     const selectedBlocks = editor.getSelection()?.blocks;
 
     if (!selectedBlocks || selectedBlocks.length === 0) {
@@ -290,49 +290,18 @@ const AIMenuItemTranslate = ({
     const markdown = await editor.blocksToMarkdownLossy(selectedBlocks);
 
     try {
-      const responseAI = await requestAI({
-        text: markdown,
-        language,
-        docId,
-      });
+      const responseAI = await requestAI(markdown);
 
-      if (!responseAI.answer) {
+      if (!responseAI) {
         return;
       }
 
-      const blockMarkdown = await editor.tryParseMarkdownToBlocks(
-        responseAI.answer,
-      );
+      const blockMarkdown = await editor.tryParseMarkdownToBlocks(responseAI);
       editor.replaceBlocks(selectedBlocks, blockMarkdown);
     } catch (error) {
       handleAIError(error);
     }
-  }, [editor, requestAI, language, docId, handleAIError]);
-
-  return (
-    <AIMenuItem
-      icon={icon}
-      handleAIAction={handleAIAction}
-      isPending={isPending}
-    >
-      {children}
-    </AIMenuItem>
-  );
-};
-
-interface AIMenuItemProps {
-  handleAIAction: () => Promise<void>;
-  isPending: boolean;
-  icon?: ReactNode;
-}
-
-const AIMenuItem = ({
-  handleAIAction,
-  isPending,
-  children,
-  icon,
-}: PropsWithChildren<AIMenuItemProps>) => {
-  const Components = useComponentsContext();
+  };
 
   if (!Components) {
     return null;
@@ -359,25 +328,12 @@ const useHandleAIError = () => {
   const { toast } = useToastProvider();
   const { t } = useTranslation();
 
-  const handleAIError = useCallback(
-    (error: unknown) => {
-      if (isAPIError(error)) {
-        error.cause?.forEach((cause) => {
-          if (
-            cause === 'Request was throttled. Expected available in 60 seconds.'
-          ) {
-            toast(
-              t('Too many requests. Please wait 60 seconds.'),
-              VariantType.ERROR,
-            );
-          }
-        });
-      }
+  return (error: unknown) => {
+    if (isAPIError(error) && error.status === 429) {
+      toast(t('Too many requests. Please wait 60 seconds.'), VariantType.ERROR);
+      return;
+    }
 
-      console.error(error);
-    },
-    [toast, t],
-  );
-
-  return handleAIError;
+    toast(t('AI seems busy! Please try again.'), VariantType.ERROR);
+  };
 };

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

@@ -1,19 +1,21 @@
-import { BlockNoteEditor as BlockNoteEditorCore } from '@blocknote/core';
+import { locales } from '@blocknote/core';
 import '@blocknote/core/fonts/inter.css';
 import { BlockNoteView } from '@blocknote/mantine';
 import '@blocknote/mantine/style.css';
+import { useCreateBlockNote } from '@blocknote/react';
 import { HocuspocusProvider } from '@hocuspocus/provider';
-import React, { useCallback, useEffect, useMemo } from 'react';
+import { t } from 'i18next';
+import React, { useCallback, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { Box, TextErrors } from '@/components';
 import { mediaUrl } from '@/core';
 import { useAuthStore } from '@/core/auth';
-import { Doc } from '@/features/docs/doc-management';
-import { Version } from '@/features/docs/doc-versioning/';
+import { Doc, useDocStore } from '@/features/docs/doc-management';
 
 import { useCreateDocAttachment } from '../api/useCreateDocUpload';
 import useSaveDoc from '../hook/useSaveDoc';
-import { useDocStore, useHeadingStore } from '../stores';
+import { useHeadingStore } from '../stores';
 import { randomColor } from '../utils';
 
 import { BlockNoteToolbar } from './BlockNoteToolbar';
@@ -24,7 +26,13 @@ const cssEditor = (readonly: boolean) => `
   };
   & .bn-editor {
     padding-right: 30px;
-    ${readonly && `padding-left: 30px;`}
+    ${
+      readonly &&
+      `
+        padding-left: 30px;
+        pointer-events: none;
+      `
+    }
   };
   & .collaboration-cursor__caret.ProseMirror-widget{
     word-wrap: initial;
@@ -66,40 +74,16 @@ const cssEditor = (readonly: boolean) => `
 `;
 
 interface BlockNoteEditorProps {
-  doc: Doc;
-  version?: Version;
-}
-
-export const BlockNoteEditor = ({ doc, version }: BlockNoteEditorProps) => {
-  const { createProvider, docsStore } = useDocStore();
-  const storeId = version?.id || doc.id;
-  const initialContent = version?.content || doc.content;
-  const provider = docsStore?.[storeId]?.provider;
-
-  useEffect(() => {
-    if (!provider || provider.document.guid !== storeId) {
-      createProvider(storeId, initialContent);
-    }
-  }, [createProvider, initialContent, provider, storeId]);
-
-  if (!provider) {
-    return null;
-  }
-
-  return <BlockNoteContent doc={doc} provider={provider} storeId={storeId} />;
-};
-
-interface BlockNoteContentProps {
   doc: Doc;
   provider: HocuspocusProvider;
   storeId: string;
 }
 
-export const BlockNoteContent = ({
+export const BlockNoteEditor = ({
   doc,
   provider,
   storeId,
-}: BlockNoteContentProps) => {
+}: BlockNoteEditorProps) => {
   const isVersion = doc.id !== storeId;
   const { userData } = useAuthStore();
   const { setStore, docsStore } = useDocStore();
@@ -113,6 +97,8 @@ export const BlockNoteContent = ({
     error: errorAttachment,
   } = useCreateDocAttachment();
   const { setHeadings, resetHeadings } = useHeadingStore();
+  const { i18n } = useTranslation();
+  const lang = i18n.language;
 
   const uploadFile = useCallback(
     async (file: File) => {
@@ -129,23 +115,21 @@ export const BlockNoteContent = ({
     [createDocAttachment, doc.id],
   );
 
-  const editor = useMemo(() => {
-    if (storedEditor) {
-      return storedEditor;
-    }
-
-    return BlockNoteEditorCore.create({
+  const editor = useCreateBlockNote(
+    {
       collaboration: {
         provider,
         fragment: provider.document.getXmlFragment('document-store'),
         user: {
-          name: userData?.email || 'Anonymous',
+          name: userData?.full_name || userData?.email || t('Anonymous'),
           color: randomColor(),
         },
       },
+      dictionary: locales[lang as keyof typeof locales],
       uploadFile,
-    });
-  }, [provider, storedEditor, uploadFile, userData?.email]);
+    },
+    [lang, provider, uploadFile, userData?.email, userData?.full_name],
+  );
 
   useEffect(() => {
     setStore(storeId, { editor });
@@ -176,7 +160,7 @@ export const BlockNoteContent = ({
       )}
 
       <BlockNoteView
-        editor={editor}
+        editor={storedEditor ?? editor}
         formattingToolbar={false}
         editable={!readOnly}
         theme="light"

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

@@ -1,14 +1,8 @@
 import '@blocknote/mantine/style.css';
 import {
-  BasicTextStyleButton,
-  BlockTypeSelect,
-  ColorStyleButton,
-  CreateLinkButton,
   FormattingToolbar,
   FormattingToolbarController,
-  NestBlockButton,
-  TextAlignButton,
-  UnnestBlockButton,
+  getFormattingToolbarItems,
 } from '@blocknote/react';
 import React from 'react';
 
@@ -18,42 +12,15 @@ import { MarkdownButton } from './MarkdownButton';
 export const BlockNoteToolbar = () => {
   return (
     <FormattingToolbarController
-      formattingToolbar={() => (
+      formattingToolbar={({ blockTypeSelectItems }) => (
         <FormattingToolbar>
-          <BlockTypeSelect key="blockTypeSelect" />
+          {getFormattingToolbarItems(blockTypeSelectItems)}
 
           {/* Extra button to do some AI powered actions */}
           <AIGroupButton key="AIButton" />
 
           {/* Extra button to convert from markdown to json */}
           <MarkdownButton key="customButton" />
-
-          <BasicTextStyleButton basicTextStyle="bold" key="boldStyleButton" />
-          <BasicTextStyleButton
-            basicTextStyle="italic"
-            key="italicStyleButton"
-          />
-          <BasicTextStyleButton
-            basicTextStyle="underline"
-            key="underlineStyleButton"
-          />
-          <BasicTextStyleButton
-            basicTextStyle="strike"
-            key="strikeStyleButton"
-          />
-          {/* Extra button to toggle code styles */}
-          <BasicTextStyleButton key="codeStyleButton" basicTextStyle="code" />
-
-          <TextAlignButton textAlignment="left" key="textAlignLeftButton" />
-          <TextAlignButton textAlignment="center" key="textAlignCenterButton" />
-          <TextAlignButton textAlignment="right" key="textAlignRightButton" />
-
-          <ColorStyleButton key="colorStyleButton" />
-
-          <NestBlockButton key="nestBlockButton" />
-          <UnnestBlockButton key="unnestBlockButton" />
-
-          <CreateLinkButton key="createLinkButton" />
         </FormattingToolbar>
       )}
     />

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

@@ -1,13 +1,13 @@
 import { Alert, Loader, VariantType } from '@openfun/cunningham-react';
 import { useRouter as useNavigate } from 'next/navigation';
 import { useRouter } from 'next/router';
-import React from 'react';
+import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Box, Card, Text, TextErrors } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 import { DocHeader } from '@/features/docs/doc-header';
-import { Doc } from '@/features/docs/doc-management';
+import { Doc, useDocStore } from '@/features/docs/doc-management';
 import { Versions, useDocVersion } from '@/features/docs/doc-versioning/';
 import { useResponsiveStore } from '@/stores';
 
@@ -32,6 +32,13 @@ export const DocEditor = ({ doc }: DocEditorProps) => {
 
   const { colorsTokens } = useCunninghamTheme();
 
+  const { docsStore } = useDocStore();
+  const provider = docsStore?.[doc.id]?.provider;
+
+  if (!provider) {
+    return null;
+  }
+
   return (
     <>
       <DocHeader doc={doc} versionId={versionId as Versions['version_id']} />
@@ -51,10 +58,10 @@ export const DocEditor = ({ doc }: DocEditorProps) => {
       )}
       <Box
         $background={colorsTokens()['primary-bg']}
-        $height="100%"
         $direction="row"
+        $width="100%"
         $margin={{ all: isMobile ? 'tiny' : 'small', top: 'none' }}
-        $css="overflow-x: clip;"
+        $css="overflow-x: clip; flex: 1;"
         $position="relative"
       >
         <Card
@@ -66,7 +73,7 @@ export const DocEditor = ({ doc }: DocEditorProps) => {
           {isVersion ? (
             <DocVersionEditor doc={doc} versionId={versionId} />
           ) : (
-            <BlockNoteEditor doc={doc} />
+            <BlockNoteEditor doc={doc} storeId={doc.id} provider={provider} />
           )}
           {!isMobile && <IconOpenPanelEditor headings={headings} />}
         </Card>
@@ -91,9 +98,21 @@ export const DocVersionEditor = ({ doc, versionId }: DocVersionEditorProps) => {
     docId: doc.id,
     versionId,
   });
+  const { createProvider, docsStore } = useDocStore();
 
   const navigate = useNavigate();
 
+  useEffect(() => {
+    if (!version?.id) {
+      return;
+    }
+
+    const provider = docsStore?.[version.id]?.provider;
+    if (!provider || provider.document.guid !== version.id) {
+      createProvider(version.id, version.content);
+    }
+  }, [createProvider, docsStore, version]);
+
   if (isError && error) {
     if (error.status === 404) {
       navigate.replace(`/404`);
@@ -124,5 +143,11 @@ export const DocVersionEditor = ({ doc, versionId }: DocVersionEditorProps) => {
     );
   }
 
-  return <BlockNoteEditor doc={doc} version={version} />;
+  const provider = docsStore?.[version.id]?.provider;
+
+  if (!provider) {
+    return null;
+  }
+
+  return <BlockNoteEditor doc={doc} storeId={version.id} provider={provider} />;
 };

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

@@ -6,6 +6,7 @@ import {
 } from '@blocknote/react';
 import { forEach, isArray } from 'lodash';
 import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 
 type Block = {
   type: string;
@@ -42,6 +43,7 @@ export function MarkdownButton() {
   const editor = useBlockNoteEditor();
   const Components = useComponentsContext();
   const selectedBlocks = useSelectedBlocks(editor);
+  const { t } = useTranslation();
 
   const handleConvertMarkdown = () => {
     const blocks = editor.getSelection()?.blocks;
@@ -75,7 +77,7 @@ export function MarkdownButton() {
 
   return (
     <Components.FormattingToolbar.Button
-      mainTooltip="Convert Markdown"
+      mainTooltip={t('Convert Markdown')}
       onClick={handleConvertMarkdown}
     >
       M

src/frontend/apps/impress/src/features/docs/doc-editor/stores/index.ts

@@ -1,3 +1,2 @@
-export * from './useDocStore';
 export * from './useHeadingStore';
 export * from './usePanelEditorStore';

src/frontend/apps/impress/src/features/docs/doc-editor/utils.ts

@@ -1,5 +1,3 @@
-import * as Y from 'yjs';
-
 export const randomColor = () => {
   const randomInt = (min: number, max: number) => {
     return Math.floor(Math.random() * (max - min + 1)) + min;
@@ -28,20 +26,3 @@ function hslToHex(h: number, s: number, l: number) {
 export const toBase64 = (
   str: WithImplicitCoercion<ArrayBuffer | SharedArrayBuffer>,
 ) => Buffer.from(str).toString('base64');
-
-type BasicBlock = {
-  type: string;
-  content: string;
-};
-export const blocksToYDoc = (blocks: BasicBlock[], doc: Y.Doc) => {
-  const xmlFragment = doc.getXmlFragment('document-store');
-
-  blocks.forEach((block) => {
-    const xmlElement = new Y.XmlElement(block.type);
-    if (block.content) {
-      xmlElement.insert(0, [new Y.XmlText(block.content)]);
-    }
-
-    xmlFragment.push([xmlElement]);
-  });
-};

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

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Box, Card, StyledLink, Text } from '@/components';
@@ -32,6 +32,7 @@ export const DocHeader = ({ doc, versionId }: DocHeaderProps) => {
   return (
     <>
       <Card
+        $width="100%"
         $margin={isMobile ? 'tiny' : 'small'}
         aria-label={t('It is the card information about the document.')}
       >
@@ -104,7 +105,7 @@ export const DocHeader = ({ doc, versionId }: DocHeaderProps) => {
                   )
                   .map((access, index, accesses) => (
                     <Fragment key={`access-${index}`}>
-                      {access.user.email}{' '}
+                      {access.user.full_name || access.user.email}{' '}
                       {index < accesses.length - 1 ? ' / ' : ''}
                     </Fragment>
                   ))}

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

@@ -7,7 +7,6 @@ import {
 } from '@openfun/cunningham-react';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { createGlobalStyle } from 'styled-components';
 
 import { Box, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
@@ -19,15 +18,9 @@ import {
   useTrans,
   useUpdateDoc,
 } from '@/features/docs/doc-management';
-import { useResponsiveStore } from '@/stores';
+import { useBroadcastStore, useResponsiveStore } from '@/stores';
 import { isFirefox } from '@/utils/userAgent';
 
-const DocTitleStyle = createGlobalStyle`
-  .c__tooltip {
-    padding: 4px 6px;
-  }
-`;
-
 interface DocTitleProps {
   doc: Doc;
 }
@@ -61,6 +54,7 @@ const DocTitleInput = ({ doc }: DocTitleProps) => {
   const headingText = headings?.[0]?.contentText;
   const debounceRef = useRef<NodeJS.Timeout>();
   const { isMobile } = useResponsiveStore();
+  const { broadcast } = useBroadcastStore();
 
   const { mutate: updateDoc } = useUpdateDoc({
     listInvalideQueries: [KEY_DOC, KEY_LIST_DOC],
@@ -68,6 +62,9 @@ const DocTitleInput = ({ doc }: DocTitleProps) => {
       if (data.title !== untitledDocument) {
         toast(t('Document title updated successfully'), VariantType.SUCCESS);
       }
+
+      // Broadcast to every user connected to the document
+      broadcast(`${KEY_DOC}-${data.id}`);
     },
   });
 
@@ -126,7 +123,6 @@ const DocTitleInput = ({ doc }: DocTitleProps) => {
 
   return (
     <>
-      <DocTitleStyle />
       <Tooltip content={t('Rename')} placement="top">
         <Box
           as="h2"

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

@@ -8,11 +8,12 @@ import { useTranslation } from 'react-i18next';
 
 import { Box, DropButton, IconOptions } from '@/components';
 import { useAuthStore } from '@/core';
-import { useDocStore, usePanelEditorStore } from '@/features/docs/doc-editor/';
+import { usePanelEditorStore } from '@/features/docs/doc-editor/';
 import {
   Doc,
   ModalRemoveDoc,
   ModalShare,
+  useDocStore,
 } from '@/features/docs/doc-management';
 import { useResponsiveStore } from '@/stores';
 

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

@@ -14,8 +14,7 @@ import { t } from 'i18next';
 import { useEffect, useMemo, useState } from 'react';
 
 import { Box, Text } from '@/components';
-import { useDocStore } from '@/features/docs/doc-editor/';
-import { Doc } from '@/features/docs/doc-management';
+import { Doc, useDocStore } from '@/features/docs/doc-management';
 
 import { useExport } from '../api/useExport';
 import { TemplatesOrdering, useTemplates } from '../api/useTemplates';

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

@@ -5,7 +5,7 @@ export interface Template {
   abilities: {
     destroy: boolean;
     generate_document: boolean;
-    manage_accesses: boolean;
+    accesses_manage: boolean;
     retrieve: boolean;
     update: boolean;
     partial_update: boolean;

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

@@ -1,4 +1,8 @@
-import { UseQueryOptions, useQuery } from '@tanstack/react-query';
+import {
+  UseQueryOptions,
+  useInfiniteQuery,
+  useQuery,
+} from '@tanstack/react-query';
 
 import { APIError, APIList, errorCauses, fetchAPI } from '@/api';
 
@@ -52,3 +56,14 @@ export function useDocs(
     ...queryConfig,
   });
 }
+
+export const useInfiniteDocs = (params: DocsParams) => {
+  return useInfiniteQuery({
+    initialPageParam: 1,
+    queryKey: [KEY_LIST_DOC, 'infinite', params],
+    queryFn: ({ pageParam }) => getDocs({ ...params, page: pageParam }),
+    getNextPageParam: (lastPage, allPages) => {
+      return lastPage.next ? allPages.length + 1 : undefined;
+    },
+  });
+};

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

@@ -1,7 +1,8 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 import { APIError, errorCauses, fetchAPI } from '@/api';
-import { Doc } from '@/features/docs';
+import { Doc, KEY_DOC } from '@/features/docs/doc-management';
+import { useBroadcastStore } from '@/stores';
 
 export type UpdateDocLinkParams = Pick<Doc, 'id'> &
   Partial<Pick<Doc, 'link_role' | 'link_reach'>>;
@@ -37,14 +38,20 @@ export function useUpdateDocLink({
   listInvalideQueries,
 }: UpdateDocLinkProps = {}) {
   const queryClient = useQueryClient();
+  const { broadcast } = useBroadcastStore();
+
   return useMutation<Doc, APIError, UpdateDocLinkParams>({
     mutationFn: updateDocLink,
-    onSuccess: (data) => {
+    onSuccess: (data, variable) => {
       listInvalideQueries?.forEach((queryKey) => {
         void queryClient.resetQueries({
           queryKey: [queryKey],
         });
       });
+
+      // Broadcast to every user connected to the document
+      broadcast(`${KEY_DOC}-${variable.id}`);
+
       onSuccess?.(data);
     },
   });

src/frontend/apps/impress/src/features/docs/doc-management/assets/pinned-document.svg

@@ -0,0 +1,9 @@
+<svg width="32" height="36" viewBox="0 0 32 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2.01394" y="1.23611" width="25.9722" height="33.5278" rx="3.54167" fill="white"/>
+<rect x="2.01394" y="1.23611" width="25.9722" height="33.5278" rx="3.54167" stroke="#DCDCFC" stroke-width="0.472222"/>
+<path d="M6.5 8.55556H15" stroke="#6A6AF4" stroke-width="1.88889" stroke-linecap="round"/>
+<path d="M6.5 11.3889H23.5M6.5 14.2222H23.5M6.5 17.0556H23.5M6.5 19.8889H23.5M6.5 22.7222H20.6667" stroke="#CACAFB" stroke-width="1.88889" stroke-linecap="round"/>
+<rect x="7" y="10" width="16" height="16" rx="8" fill="#6A6AF4"/>
+<rect x="7" y="10" width="16" height="16" rx="8" stroke="white" stroke-width="1.5"/>
+<path d="M16.8 18L18 19.2V20.1H15.45V22.95L15 23.4L14.55 22.95V20.1H12V19.2L13.2 18V14.7H12.6V13.8H17.4V14.7H16.8V18Z" fill="white"/>
+</svg>

src/frontend/apps/impress/src/features/docs/doc-management/assets/simple-document.svg

@@ -0,0 +1,6 @@
+<svg width="28" height="34" viewBox="0 0 28 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1.01394" y="0.236111" width="25.9722" height="33.5278" rx="3.54167" fill="white"/>
+<rect x="1.01394" y="0.236111" width="25.9722" height="33.5278" rx="3.54167" stroke="#DCDCFC" stroke-width="0.472222"/>
+<path d="M5.5 7.55554H14" stroke="#6A6AF4" stroke-width="1.88889" stroke-linecap="round"/>
+<path d="M5.5 10.3889H22.5M5.5 13.2222H22.5M5.5 16.0556H22.5M5.5 18.8889H22.5M5.5 21.7222H22.5M5.5 24.5556H22.5M5.5 27.3889H22.5M5.5 30.2222H22.5M5.5 33.0556H22.5" stroke="#CACAFB" stroke-width="1.88889" stroke-linecap="round"/>
+</svg>

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

@@ -1,16 +1,17 @@
 import {
-  Button,
-  Switch,
+  Radio,
+  RadioGroup,
+  Select,
   VariantType,
   useToastProvider,
 } from '@openfun/cunningham-react';
-import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Box, Card, IconBG } from '@/components';
+import { useCunninghamTheme } from '@/cunningham';
 
 import { KEY_DOC, KEY_LIST_DOC, useUpdateDocLink } from '../api';
-import { Doc, LinkReach } from '../types';
+import { Doc, LinkReach, LinkRole } from '../types';
 
 interface DocVisibilityProps {
   doc: Doc;
@@ -18,14 +19,12 @@ interface DocVisibilityProps {
 
 export const DocVisibility = ({ doc }: DocVisibilityProps) => {
   const { t } = useTranslation();
-  const [docPublic, setDocPublic] = useState(
-    doc.link_reach === LinkReach.PUBLIC,
-  );
   const { toast } = useToastProvider();
+  const { colorsTokens } = useCunninghamTheme();
   const api = useUpdateDocLink({
     onSuccess: () => {
       toast(
-        t('The document visiblitity has been updated.'),
+        t('The document visibility has been updated.'),
         VariantType.SUCCESS,
         {
           duration: 4000,
@@ -35,6 +34,34 @@ export const DocVisibility = ({ doc }: DocVisibilityProps) => {
     listInvalideQueries: [KEY_LIST_DOC, KEY_DOC],
   });
 
+  const transLinkReach = {
+    [LinkReach.RESTRICTED]: {
+      label: t('Restricted'),
+      description: t('Only for people with access'),
+    },
+    [LinkReach.AUTHENTICATED]: {
+      label: t('Authenticated'),
+      description: t('Only for authenticated users'),
+    },
+    [LinkReach.PUBLIC]: {
+      label: t('Public'),
+      description: t('Anyone on the internet with the link can view'),
+    },
+  };
+
+  const linkRoleList = [
+    {
+      label: t('Read only'),
+      value: LinkRole.READER,
+    },
+    {
+      label: t('Can read and edit'),
+      value: LinkRole.EDITOR,
+    },
+  ];
+
+  const showLinkRoleOptions = doc.link_reach !== LinkReach.RESTRICTED;
+
   return (
     <Card
       $margin="tiny"
@@ -44,55 +71,73 @@ export const DocVisibility = ({ doc }: DocVisibilityProps) => {
       $align="center"
       $justify="space-between"
       $gap="1rem"
+      $wrap="wrap"
     >
-      <IconBG iconName="public" $margin="none" />
+      <IconBG iconName="public" />
       <Box
-        $width="100%"
         $wrap="wrap"
         $gap="1rem"
-        $justify="space-between"
         $direction="row"
+        $align="center"
+        $flex="1"
+        $css={`
+          & .c__field__footer .c__field__text {
+            ${!doc.abilities.link_configuration && `color: ${colorsTokens()['greyscale-400']};`};
+          }
+        `}
       >
-        <Box $direction="row" $gap="1rem" $align="center">
-          <Switch
-            label={t(docPublic ? 'Doc public' : 'Doc private')}
-            defaultChecked={docPublic}
-            onChange={() => {
+        <Box $shrink="0" $flex="auto" $maxWidth="20rem">
+          <Select
+            label={t('Visibility')}
+            options={Object.values(LinkReach).map((linkReach) => ({
+              label: transLinkReach[linkReach].label,
+              value: linkReach,
+            }))}
+            onChange={(evt) =>
               api.mutate({
+                link_reach: evt.target.value as LinkReach,
                 id: doc.id,
-                link_reach: docPublic ? LinkReach.RESTRICTED : LinkReach.PUBLIC,
-                link_role: 'reader',
-              });
-              setDocPublic(!docPublic);
-            }}
-            disabled={!doc.abilities.link_configuration}
-            text={
-              docPublic
-                ? t('Anyone on the internet with the link can view')
-                : t('Only for people with access')
+              })
             }
+            value={doc.link_reach}
+            clearable={false}
+            text={transLinkReach[doc.link_reach].description}
+            disabled={!doc.abilities.link_configuration}
           />
         </Box>
-        <Button
-          onClick={() => {
-            navigator.clipboard
-              .writeText(window.location.href)
-              .then(() => {
-                toast(t('Link Copied !'), VariantType.SUCCESS, {
-                  duration: 3000,
-                });
-              })
-              .catch(() => {
-                toast(t('Failed to copy link'), VariantType.ERROR, {
-                  duration: 3000,
-                });
-              });
-          }}
-          color="primary"
-          icon={<span className="material-icons">copy</span>}
-        >
-          {t('Copy link')}
-        </Button>
+        {showLinkRoleOptions && (
+          <Box
+            $css={`
+              & .c__checkbox{
+                padding: 0.15rem 0.25rem;
+              }
+            `}
+          >
+            <RadioGroup
+              compact
+              style={{
+                display: 'flex',
+              }}
+              text={t('How people can interact with the document')}
+            >
+              {linkRoleList.map((radio) => (
+                <Radio
+                  key={radio.value}
+                  label={radio.label}
+                  value={radio.value}
+                  onChange={() =>
+                    api.mutate({
+                      link_role: radio.value,
+                      id: doc.id,
+                    })
+                  }
+                  checked={doc.link_role === radio.value}
+                  disabled={!doc.abilities.link_configuration}
+                />
+              ))}
+            </RadioGroup>
+          </Box>
+        )}
       </Box>
     </Card>
   );

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

@@ -1,3 +1,8 @@
+import {
+  Button,
+  VariantType,
+  useToastProvider,
+} from '@openfun/cunningham-react';
 import { t } from 'i18next';
 import { createGlobalStyle } from 'styled-components';
 
@@ -41,6 +46,7 @@ interface ModalShareProps {
 export const ModalShare = ({ onClose, doc }: ModalShareProps) => {
   const { isMobile, isSmallMobile } = useResponsiveStore();
   const width = isSmallMobile ? '100vw' : isMobile ? '90vw' : '70vw';
+  const { toast } = useToastProvider();
 
   return (
     <>
@@ -68,17 +74,48 @@ export const ModalShare = ({ onClose, doc }: ModalShareProps) => {
                 iconName="share"
                 $margin="none"
               />
-              <Box $align="flex-start">
-                <Text as="h3" $size="26px" $margin="none">
-                  {t('Share')}
-                </Text>
-                <Text $size="small" $weight="normal" $textAlign="left">
-                  {doc.title}
-                </Text>
+              <Box
+                $justify="space-between"
+                $direction="row"
+                $align="center"
+                $width="100%"
+                $gap="1rem"
+                $wrap="wrap"
+              >
+                <Box $align="flex-start">
+                  <Text as="h3" $size="26px" $margin="none">
+                    {t('Share')}
+                  </Text>
+                  <Text $size="small" $weight="normal" $textAlign="left">
+                    {doc.title}
+                  </Text>
+                </Box>
+                <Box $margin={{ right: '1.5rem' }} $shrink="0">
+                  <Button
+                    onClick={() => {
+                      navigator.clipboard
+                        .writeText(window.location.href)
+                        .then(() => {
+                          toast(t('Link Copied !'), VariantType.SUCCESS, {
+                            duration: 3000,
+                          });
+                        })
+                        .catch(() => {
+                          toast(t('Failed to copy link'), VariantType.ERROR, {
+                            duration: 3000,
+                          });
+                        });
+                    }}
+                    color="primary"
+                    icon={<span className="material-icons">copy</span>}
+                  >
+                    {t('Copy link')}
+                  </Button>
+                </Box>
               </Box>
             </Card>
             <DocVisibility doc={doc} />
-            {doc.abilities.manage_accesses && (
+            {doc.abilities.accesses_manage && (
               <AddMembers
                 doc={doc}
                 currentRole={currentDocRole(doc.abilities)}
@@ -86,8 +123,12 @@ export const ModalShare = ({ onClose, doc }: ModalShareProps) => {
             )}
           </Box>
           <Box $minHeight="0">
-            <InvitationList doc={doc} />
-            <MemberList doc={doc} />
+            {doc.abilities.accesses_view && (
+              <>
+                <InvitationList doc={doc} />
+                <MemberList doc={doc} />
+              </>
+            )}
           </Box>
         </Box>
       </SideModal>

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

@@ -0,0 +1,60 @@
+import { ReactNode } from 'react';
+import styled, { css } from 'styled-components';
+
+import { Box, Text } from '@/components';
+import { Doc } from '@/features/docs';
+import PinnedDocumentIcon from '@/features/docs/doc-management/assets/pinned-document.svg';
+import SimpleFileIcon from '@/features/docs/doc-management/assets/simple-document.svg';
+
+const ItemContainer = styled(Box)`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--c--theme--spacings--100W);
+  border-radius: var(--c--theme--spacings--100V);
+  padding: var(--c--theme--spacings--150V);
+  cursor: pointer;
+`;
+
+const ItemTextCss = css`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: initial;
+  display: -webkit-box;
+  line-clamp: 1;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+`;
+
+type Props = {
+  doc: Doc;
+  isPinned?: boolean;
+  subText?: ReactNode | string;
+};
+
+export const SimpleDocItem = ({ doc, isPinned = false, subText }: Props) => {
+  return (
+    <ItemContainer>
+      <Box
+        $css={`
+          background-color: transparent;
+          filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.05));
+          display: flex;
+          align-items: center;
+        `}
+      >
+        {isPinned ? <PinnedDocumentIcon /> : <SimpleFileIcon />}
+      </Box>
+      <div>
+        <Text $weight={500} $variation="1000" $size="sm" $css={ItemTextCss}>
+          {doc.title}
+        </Text>
+
+        <Text $variation="500" $size="xs" $css={ItemTextCss}>
+          {subText ??
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel ante libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed imperdiet neque quam, sed euismod metus mollis ut. '}
+        </Text>
+      </div>
+    </ItemContainer>
+  );
+};

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

@@ -1,5 +1,6 @@
 export * from './api';
 export * from './components';
 export * from './hooks';
+export * from './stores';
 export * from './types';
 export * from './utils';

src/frontend/apps/impress/src/features/docs/doc-management/stores/index.tsx

@@ -0,0 +1 @@
+export * from './useDocStore';

src/frontend/apps/impress/src/features/docs/doc-management/stores/useDocStore.tsx

@@ -4,9 +4,7 @@ import * as Y from 'yjs';
 import { create } from 'zustand';
 
 import { providerUrl } from '@/core';
-import { Base64, Doc } from '@/features/docs/doc-management';
-
-import { blocksToYDoc } from '../utils';
+import { Base64, Doc, blocksToYDoc } from '@/features/docs/doc-management';
 
 interface DocStore {
   provider: HocuspocusProvider;

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

@@ -27,6 +27,11 @@ export enum LinkReach {
   AUTHENTICATED = 'authenticated',
 }
 
+export enum LinkRole {
+  READER = 'reader',
+  EDITOR = 'editor',
+}
+
 export type Base64 = string;
 
 export interface Doc {
@@ -34,15 +39,16 @@ export interface Doc {
   title: string;
   content: Base64;
   link_reach: LinkReach;
-  link_role: 'reader' | 'editor';
+  link_role: LinkRole;
   accesses: Access[];
   created_at: string;
   updated_at: string;
   abilities: {
+    accesses_manage: boolean;
+    accesses_view: boolean;
     attachment_upload: true;
     destroy: boolean;
     link_configuration: boolean;
-    manage_accesses: boolean;
     partial_update: boolean;
     retrieve: boolean;
     update: boolean;

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

@@ -1,11 +1,30 @@
+import * as Y from 'yjs';
+
 import { Doc, Role } from './types';
 
 export const currentDocRole = (abilities: Doc['abilities']): Role => {
   return abilities.destroy
     ? Role.OWNER
-    : abilities.manage_accesses
+    : abilities.accesses_manage
       ? Role.ADMIN
       : abilities.partial_update
         ? Role.EDITOR
         : Role.READER;
 };
+
+type BasicBlock = {
+  type: string;
+  content: string;
+};
+export const blocksToYDoc = (blocks: BasicBlock[], doc: Y.Doc) => {
+  const xmlFragment = doc.getXmlFragment('document-store');
+
+  blocks.forEach((block) => {
+    const xmlElement = new Y.XmlElement(block.type);
+    if (block.content) {
+      xmlElement.insert(0, [new Y.XmlText(block.content)]);
+    }
+
+    xmlFragment.push([xmlElement]);
+  });
+};

src/frontend/apps/impress/src/features/docs/doc-table-content/components/TableContent.tsx

@@ -1,9 +1,9 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Box, BoxButton, Text } from '@/components';
-import { HeadingBlock, useDocStore } from '@/features/docs/doc-editor';
-import { Doc } from '@/features/docs/doc-management';
+import { HeadingBlock } from '@/features/docs/doc-editor';
+import { Doc, useDocStore } from '@/features/docs/doc-management';
 import { useResponsiveStore } from '@/stores';
 
 import { Heading } from './Heading';
@@ -49,7 +49,7 @@ export const TableContent = ({ doc, headings }: TableContentProps) => {
       }
     };
 
-    window.addEventListener('scroll', () => {
+    document.getElementById('mainContent')?.addEventListener('scroll', () => {
       setTimeout(() => {
         handleScroll();
       }, 300);

src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalVersion.tsx

@@ -11,8 +11,8 @@ import { useRouter } from 'next/navigation';
 import * as Y from 'yjs';
 
 import { Box, Text } from '@/components';
-import { toBase64, useDocStore } from '@/features/docs/doc-editor';
-import { Doc, useUpdateDoc } from '@/features/docs/doc-management';
+import { toBase64 } from '@/features/docs/doc-editor';
+import { Doc, useDocStore, useUpdateDoc } from '@/features/docs/doc-management';
 
 import { KEY_LIST_DOC_VERSIONS } from '../api/useDocVersions';
 import { Versions } from '../types';

src/frontend/apps/impress/src/features/docs/docs-grid/components/DocGridListItem.tsx

@@ -0,0 +1,14 @@
+import { Doc } from '../../doc-management';
+import { SimpleDocItem } from '../../doc-management/components/items/SimpleDocItem';
+
+type Props = {
+  doc: Doc;
+};
+
+export const DocGridListItem = ({ doc }: Props) => {
+  return (
+    <div>
+      <SimpleDocItem doc={doc} />
+    </div>
+  );
+};

src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridContainer.tsx

@@ -1,40 +0,0 @@
-import { Button } from '@openfun/cunningham-react';
-import { useRouter } from 'next/navigation';
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { Box } from '@/components';
-import { useCreateDoc, useTrans } from '@/features/docs/doc-management/';
-import { useResponsiveStore } from '@/stores';
-
-import { DocsGrid } from './DocsGrid';
-
-export const DocsGridContainer = () => {
-  const { t } = useTranslation();
-  const { untitledDocument } = useTrans();
-  const router = useRouter();
-  const { isMobile } = useResponsiveStore();
-
-  const { mutate: createDoc } = useCreateDoc({
-    onSuccess: (doc) => {
-      router.push(`/docs/${doc.id}`);
-    },
-  });
-
-  const handleCreateDoc = () => {
-    createDoc({ title: untitledDocument });
-  };
-
-  return (
-    <Box $overflow="auto">
-      <Box
-        $align="flex-end"
-        $justify="center"
-        $margin={isMobile ? 'small' : 'big'}
-      >
-        <Button onClick={handleCreateDoc}>{t('Create a new document')}</Button>
-      </Box>
-      <DocsGrid />
-    </Box>
-  );
-};

src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridList.tsx

@@ -0,0 +1,75 @@
+import { useTranslation } from 'react-i18next';
+import { css } from 'styled-components';
+
+import { Box, Card, Text } from '@/components';
+import { useCunninghamTheme } from '@/cunningham';
+import { useInfiniteDocs } from '@/features/docs/doc-management/api/useDocs';
+import { LEFT_PANEL_WIDTH } from '@/features/left-pannel/conf';
+import { useResponsiveStore } from '@/stores';
+
+import { DocGridListItem } from './DocGridListItem';
+
+export const DocsGridList = () => {
+  const { themeTokens, spacingsTokens, colorsTokens } = useCunninghamTheme();
+  const spacings = spacingsTokens();
+  const colors = colorsTokens();
+
+  const { t } = useTranslation();
+  const { isResponsive } = useResponsiveStore();
+
+  const { data, isFetching, isLoading, fetchNextPage, hasNextPage } =
+    useInfiniteDocs({
+      page: 1,
+    });
+  const loading = isFetching || isLoading;
+
+  const loadMore = (inView: boolean) => {
+    if (!inView) {
+      return;
+    }
+    void fetchNextPage();
+  };
+
+  return (
+    <Card
+      $css={`
+        width: 960px;
+        max-width: calc(100dvw - ${isResponsive ? 34 : LEFT_PANEL_WIDTH}px);
+        padding: ${spacings['300W']};
+      `}
+    >
+      <Text
+        $margin={{ bottom: `${spacings['100W']}` }}
+        $css="margin-block: 0"
+        as="h4"
+      >
+        {t('All docs')}
+      </Text>
+      <section>
+        <Box
+          as="header"
+          $css={css`
+            display: flex;
+            flex-direction: row;
+            margin-bottom: ${spacings['100W']};
+            font-size: ${themeTokens().font?.sizes.xs};
+            color: ${colors['greyscale-500']};
+            padding-bottom: ${spacings['150V']} ${spacings['100W']};
+          `}
+        >
+          <Box $flex={7}>{t('Name')}</Box>
+
+          {!isResponsive && <Box $flex={1}>{t('Update at')}</Box>}
+          <Box $flex={1} />
+        </Box>
+      </section>
+      <Box $gap={`${spacings['150V']}`}>
+        {data?.pages.map((currentPage) => {
+          return currentPage.results.map((doc) => (
+            <DocGridListItem doc={doc} key={doc.id} />
+          ));
+        })}
+      </Box>
+    </Card>
+  );
+};

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

@@ -1 +0,0 @@
-export * from './DocsGridContainer';

src/frontend/apps/impress/src/features/docs/docs-grid/index.ts

@@ -1 +0,0 @@
-export * from './components';

src/frontend/apps/impress/src/features/docs/members/invitation-list/components/InvitationItem.tsx

@@ -112,7 +112,7 @@ export const InvitationItem = ({
                 }}
               />
             </Box>
-            {doc.abilities.manage_accesses && (
+            {doc.abilities.accesses_manage && (
               <Box $margin={isSmallMobile ? 'auto' : ''}>
                 <Button
                   color="tertiary-text"

src/frontend/apps/impress/src/features/docs/members/members-add/api/useCreateDocAccess.tsx

@@ -5,11 +5,13 @@ import { User } from '@/core/auth';
 import {
   Access,
   Doc,
+  KEY_DOC,
   KEY_LIST_DOC,
   Role,
 } from '@/features/docs/doc-management';
 import { KEY_LIST_DOC_ACCESSES } from '@/features/docs/members/members-list';
 import { ContentLanguage } from '@/i18n/types';
+import { useBroadcastStore } from '@/stores';
 
 import { OptionType } from '../types';
 
@@ -53,9 +55,11 @@ export const createDocAccess = async ({
 
 export function useCreateDocAccess() {
   const queryClient = useQueryClient();
+  const { broadcast } = useBroadcastStore();
+
   return useMutation<Access, APIError, CreateDocAccessParams>({
     mutationFn: createDocAccess,
-    onSuccess: () => {
+    onSuccess: (_data, variable) => {
       void queryClient.resetQueries({
         queryKey: [KEY_LIST_DOC],
       });
@@ -65,6 +69,9 @@ export function useCreateDocAccess() {
       void queryClient.resetQueries({
         queryKey: [KEY_LIST_DOC_ACCESSES],
       });
+
+      // Broadcast to every user connected to the document
+      broadcast(`${KEY_DOC}-${variable.docId}`);
     },
   });
 }

src/frontend/apps/impress/src/features/docs/members/members-add/components/AddMembers.tsx

@@ -170,14 +170,14 @@ export const AddMembers = ({ currentRole, doc }: ModalAddMembersProps) => {
               doc={doc}
               setSelectedUsers={setSelectedUsers}
               selectedUsers={selectedUsers}
-              disabled={isPending || !doc.abilities.manage_accesses}
+              disabled={isPending || !doc.abilities.accesses_manage}
             />
           </Box>
           <Box $css="flex: auto;">
             <ChooseRole
               key={resetKey}
               currentRole={currentRole}
-              disabled={isPending || !doc.abilities.manage_accesses}
+              disabled={isPending || !doc.abilities.accesses_manage}
               setRole={setSelectedRole}
             />
           </Box>
@@ -189,7 +189,7 @@ export const AddMembers = ({ currentRole, doc }: ModalAddMembersProps) => {
               !selectedUsers.length ||
               isPending ||
               !selectedRole ||
-              !doc.abilities.manage_accesses
+              !doc.abilities.accesses_manage
             }
             onClick={() => void handleValidate()}
             style={{ height: '100%', maxHeight: '55px' }}

src/frontend/apps/impress/src/features/docs/members/members-list/api/useDeleteDocAccess.ts

@@ -7,6 +7,7 @@ import {
 import { APIError, errorCauses, fetchAPI } from '@/api';
 import { KEY_DOC, KEY_LIST_DOC } from '@/features/docs/doc-management';
 import { KEY_LIST_USER } from '@/features/docs/members/members-add';
+import { useBroadcastStore } from '@/stores';
 
 import { KEY_LIST_DOC_ACCESSES } from './useDocAccesses';
 
@@ -39,6 +40,8 @@ type UseDeleteDocAccessOptions = UseMutationOptions<
 
 export const useDeleteDocAccess = (options?: UseDeleteDocAccessOptions) => {
   const queryClient = useQueryClient();
+  const { broadcast } = useBroadcastStore();
+
   return useMutation<void, APIError, DeleteDocAccessProps>({
     mutationFn: deleteDocAccess,
     ...options,
@@ -49,6 +52,10 @@ export const useDeleteDocAccess = (options?: UseDeleteDocAccessOptions) => {
       void queryClient.invalidateQueries({
         queryKey: [KEY_DOC],
       });
+
+      // Broadcast to every user connected to the document
+      broadcast(`${KEY_DOC}-${variables.docId}`);
+
       void queryClient.resetQueries({
         queryKey: [KEY_LIST_DOC],
       });

src/frontend/apps/impress/src/features/docs/members/members-list/api/useUpdateDocAccess.ts

@@ -11,6 +11,7 @@ import {
   KEY_LIST_DOC,
   Role,
 } from '@/features/docs/doc-management';
+import { useBroadcastStore } from '@/stores';
 
 import { KEY_LIST_DOC_ACCESSES } from './useDocAccesses';
 
@@ -49,6 +50,8 @@ type UseUpdateDocAccessOptions = UseMutationOptions<
 
 export const useUpdateDocAccess = (options?: UseUpdateDocAccessOptions) => {
   const queryClient = useQueryClient();
+  const { broadcast } = useBroadcastStore();
+
   return useMutation<Access, APIError, UpdateDocAccessProps>({
     mutationFn: updateDocAccess,
     ...options,
@@ -59,6 +62,10 @@ export const useUpdateDocAccess = (options?: UseUpdateDocAccessOptions) => {
       void queryClient.invalidateQueries({
         queryKey: [KEY_DOC],
       });
+
+      // Broadcast to every user connected to the document
+      broadcast(`${KEY_DOC}-${variables.docId}`);
+
       void queryClient.invalidateQueries({
         queryKey: [KEY_LIST_DOC],
       });

src/frontend/apps/impress/src/features/docs/members/members-list/components/MemberItem.tsx

@@ -61,7 +61,7 @@ export const MemberItem = ({
   });
 
   const isNotAllowed =
-    isOtherOwner || isLastOwner || !doc.abilities.manage_accesses;
+    isOtherOwner || isLastOwner || !doc.abilities.accesses_manage;
 
   if (!access.user) {
     return (
@@ -84,9 +84,10 @@ export const MemberItem = ({
           $css={`flex: ${isSmallMobile ? '100%' : '70%'};`}
         >
           <IconBG iconName="account_circle" $size="2rem" />
-          <Text $justify="center" $css="flex:1;">
-            {access.user.email}
-          </Text>
+          <Box $justify="center" $css="flex:1;">
+            {access.user.full_name && <Text>{access.user.full_name}</Text>}
+            <Text>{access.user.email}</Text>
+          </Box>
           <Box
             $direction="row"
             $gap="1rem"
@@ -111,7 +112,7 @@ export const MemberItem = ({
                 }}
               />
             </Box>
-            {doc.abilities.manage_accesses && (
+            {doc.abilities.accesses_manage && (
               <Box $margin={isSmallMobile ? 'auto' : ''}>
                 <Button
                   color="tertiary-text"
@@ -135,7 +136,7 @@ export const MemberItem = ({
           <TextErrors causes={errorUpdate?.cause || errorDelete?.cause} />
         </Box>
       )}
-      {(isLastOwner || isOtherOwner) && doc.abilities.manage_accesses && (
+      {(isLastOwner || isOtherOwner) && doc.abilities.accesses_manage && (
         <Box $margin={{ top: 'tiny' }}>
           <Alert
             canClose={false}

src/frontend/apps/impress/src/features/header/assets/icon-docs.svg

@@ -1,31 +1,4 @@
-<svg viewBox="0 0 36 42" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <g clip-path="url(#clip0_5_830)">
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M26.5706 16.681V20.756H9.59985V16.681H26.5706ZM26.5706 23.0467V27.1215H9.59985V23.0467H26.5706ZM19.5375 29.2926V33.3674H9.59985V29.2926H19.5375Z"
-      fill="#E1000F"
-    />
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M35.6982 16.7351V33.2911C35.6826 33.2845 35.667 33.2756 35.6492 33.269V37.4663C35.6492 39.8874 33.641 41.8683 31.1867 41.8683H4.461C2.00664 41.8683 -0.00146484 39.8874 -0.00146484 37.4663V4.45137C-0.00146484 2.03028 2.00664 0.0493774 4.461 0.0493774H18.723V4.45137H4.461V37.4663H31.1867V16.7351H35.6982Z"
-      fill="#000091"
-    />
-    <path
-      d="M33.9524 0.0360107H23.626C22.6794 0.0360107 21.9049 0.799997 21.9049 1.73376V11.9202C21.9049 12.854 22.6794 13.618 23.626 13.618H33.9524C34.899 13.618 35.6735 12.854 35.6735 11.9202V1.73376C35.6735 0.799997 34.899 0.0360107 33.9524 0.0360107ZM26.6378 6.40257C26.6378 7.10713 26.0613 7.67588 25.347 7.67588H24.4865V8.73697C24.4865 9.08501 24.1939 9.37362 23.8411 9.37362C23.4883 9.37362 23.1957 9.08501 23.1957 8.73697V5.12925C23.1957 4.66237 23.5829 4.28038 24.0562 4.28038H25.347C26.0613 4.28038 26.6378 4.84913 26.6378 5.55369V6.40257ZM30.9405 8.10031C30.9405 8.80488 30.364 9.37362 29.6497 9.37362H27.9286C27.6877 9.37362 27.4984 9.18687 27.4984 8.94919V4.70482C27.4984 4.46713 27.6877 4.28038 27.9286 4.28038H29.6497C30.364 4.28038 30.9405 4.84913 30.9405 5.55369V8.10031ZM34.3827 4.91704C34.3827 5.26507 34.0901 5.55369 33.7373 5.55369H33.0919V6.40257H33.7373C34.0901 6.40257 34.3827 6.69118 34.3827 7.03922C34.3827 7.38726 34.0901 7.67588 33.7373 7.67588H33.0919V8.73697C33.0919 9.08501 32.7993 9.37362 32.4465 9.37362C32.0936 9.37362 31.8011 9.08501 31.8011 8.73697V5.12925C31.8011 4.66237 32.1883 4.28038 32.6616 4.28038H33.7373C34.0901 4.28038 34.3827 4.569 34.3827 4.91704ZM24.4865 6.40257H25.347V5.55369H24.4865V6.40257ZM28.7892 8.10031H29.6497V5.55369H28.7892V8.10031Z"
-      fill="#000091"
-    />
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M35.6734 10.0666V13.6574H32.4942V10.0666H35.6734ZM25.0866 0.0441895V3.59171H21.9041V0.0441895H25.0866Z"
-      fill="#000091"
-    />
-  </g>
-  <defs>
-    <clipPath id="clip0_5_830">
-      <rect width="36" height="42" fill="white" />
-    </clipPath>
-  </defs>
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.6305 28.8312C22.7983 28.5038 23.9166 27.9062 24.6505 26.8503C25.3749 25.8163 25.5789 24.5047 25.5789 23.2425V4.75099C25.5789 4.42358 25.5611 4.09557 25.5216 3.77148C26.1016 3.99961 26.5486 4.37658 26.8626 4.90239C27.2331 5.50024 27.4184 6.28757 27.4184 7.26435V26.0464C27.4184 27.3684 27.0942 28.3578 26.4458 29.0146C25.7974 29.6714 24.8207 29.9998 23.5155 29.9998H16.4209C16.5889 29.9704 16.7574 29.9401 16.9262 29.909C18.4067 29.6444 19.9713 29.2854 21.6185 28.8346L21.6305 28.8312Z" fill="#C9191E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.58203 25.655V6.8477C4.58203 5.70251 4.88938 4.83519 5.50408 4.24575C6.1272 3.65631 6.95242 3.33212 7.97972 3.27318C9.49542 3.18055 10.9311 3.05425 12.2868 2.89425C13.6425 2.72584 14.9393 2.53217 16.1771 2.31324C17.4234 2.0943 18.6359 1.85011 19.8148 1.58065C21.0274 1.29435 21.9578 1.4375 22.6062 2.0101C23.2546 2.58269 23.5788 3.49632 23.5788 4.75099V23.2425C23.5788 24.3456 23.3893 25.1666 23.0104 25.7055C22.6315 26.2529 21.9915 26.6528 21.0905 26.9054C19.4906 27.3433 17.9833 27.6886 16.5687 27.9412C15.154 28.2022 13.7731 28.4001 12.4258 28.5348C11.0785 28.6696 9.69751 28.7748 8.28286 28.8506C7.11241 28.918 6.20299 28.6738 5.5546 28.118C4.90622 27.5707 4.58203 26.7497 4.58203 25.655ZM9.20865 10.2624C11.0635 10.1444 12.7632 9.96305 14.3075 9.71831C14.6822 9.65722 15.0564 9.5936 15.4291 9.52759C15.8192 9.45851 16.1013 9.11859 16.1013 8.72337C16.1013 8.21154 15.638 7.82609 15.135 7.91189C14.846 7.96118 14.5555 8.00909 14.2635 8.05562C12.7346 8.29923 11.0452 8.47998 9.19523 8.5977C8.91819 8.61558 8.69776 8.70188 8.55608 8.87391C8.42209 9.03661 8.35645 9.23229 8.35645 9.45535C8.35645 9.68212 8.43296 9.87951 8.58568 10.0418L8.58783 10.0439C8.75336 10.2095 8.96369 10.2811 9.20865 10.2624ZM9.20801 14.456C11.0631 14.338 12.763 14.1566 14.3075 13.9119C15.8588 13.6589 17.3936 13.3638 18.9112 13.0266C19.2191 12.9581 19.4498 12.8503 19.5652 12.683C19.6786 12.5221 19.7347 12.3376 19.7347 12.1332C19.7347 11.9026 19.6469 11.704 19.476 11.5426C19.2921 11.3689 19.0348 11.3284 18.7304 11.3911L18.7285 11.3915C17.2823 11.7194 15.794 12.0053 14.2635 12.2492C12.7346 12.4928 11.0452 12.6735 9.19523 12.7913C8.91819 12.8091 8.69776 12.8954 8.55608 13.0675C8.42276 13.2294 8.35645 13.4205 8.35645 13.6363C8.35645 13.8703 8.43209 14.0723 8.58558 14.2354L8.59 14.2396C8.75499 14.3949 8.96316 14.4655 9.20551 14.4562L9.20801 14.456ZM9.20847 18.6494C11.0634 18.5229 12.7631 18.3374 14.3075 18.0927C15.8589 17.8482 17.3934 17.5573 18.9112 17.22C19.2199 17.1514 19.4508 17.0391 19.566 16.8627C19.6783 16.7029 19.7347 16.5233 19.7347 16.3266C19.7347 16.0961 19.6469 15.8974 19.476 15.7361C19.2921 15.5623 19.0348 15.5218 18.7304 15.5845L18.729 15.5848C17.2827 15.9043 15.7942 16.1861 14.2635 16.43C12.7345 16.6736 11.045 16.8586 9.19495 16.9847C8.91804 17.0026 8.69771 17.0889 8.55608 17.2609C8.42276 17.4228 8.35645 17.6139 8.35645 17.8297C8.35645 18.0637 8.43209 18.2658 8.58558 18.4289L8.59 18.433C8.75499 18.5883 8.96316 18.6589 9.20551 18.6496L9.20847 18.6494ZM14.3075 22.257C12.7632 22.5018 11.0635 22.6831 9.20867 22.8012C8.9637 22.8198 8.75337 22.7482 8.58783 22.5826L8.58572 22.5805C8.433 22.4182 8.35645 22.2208 8.35645 21.9941C8.35645 21.771 8.42209 21.5753 8.55608 21.4126C8.69776 21.2406 8.91827 21.1543 9.19531 21.1364C11.0453 21.0187 12.7346 20.838 14.2635 20.5943C14.5555 20.5478 14.846 20.4999 15.135 20.4506C15.638 20.3648 16.1013 20.7503 16.1013 21.2621C16.1013 21.6573 15.8192 21.9972 15.4291 22.0663C15.0564 22.1323 14.6822 22.1959 14.3075 22.257Z" fill="#000091"/>
 </svg>

src/frontend/apps/impress/src/features/header/components/Header.tsx

@@ -1,90 +1,91 @@
+import { Button } from '@openfun/cunningham-react';
 import Image from 'next/image';
-import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { Box, StyledLink, Text } from '@/components/';
+import { Box, Icon, StyledLink, Text } from '@/components/';
 import { ButtonLogin } from '@/core/auth';
+import { useCunninghamTheme } from '@/cunningham';
 import { LanguagePicker } from '@/features/language';
 import { useResponsiveStore } from '@/stores';
 
 import { default as IconDocs } from '../assets/icon-docs.svg?url';
+import { HEADER_HEIGHT } from '../conf';
 
-import { DropdownMenu } from './DropdownMenu';
 import { LaGaufre } from './LaGaufre';
 
 export const Header = () => {
   const { t } = useTranslation();
-  const { isSmallMobile } = useResponsiveStore();
+  const theme = useCunninghamTheme();
+  const tokens = theme.themeTokens();
+  const colors = theme.colorsTokens();
+  const { isResponsive, toggleMobileMenu } = useResponsiveStore();
 
   return (
     <Box
       as="header"
-      $justify="center"
-      $width="100%"
-      $zIndex="100"
-      $padding={{ vertical: 'xtiny' }}
-      $css="box-shadow: 0 1px 4px #00000040;"
+      $css={`
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        height: ${HEADER_HEIGHT}px;
+        min-height: ${HEADER_HEIGHT}px;
+        padding: 0 ${tokens.spacings?.['300V'] ?? '1rem'};
+        background-color: ${colors?.['greyscale-000'] ?? '#FFFFFF'};
+        border-bottom: 1px solid ${(colors?.['greyscale-200'] as string) ?? '#E5E5E5'};
+      `}
     >
-      <Box
-        $margin={{
-          left: 'big',
-          right: isSmallMobile ? 'none' : 'big',
-        }}
-        $align="center"
-        $justify="space-between"
-        $direction="row"
-      >
-        <Box>
-          <StyledLink href="/">
-            <Box
-              $align="center"
-              $gap="0.8rem"
-              $direction="row"
-              $position="relative"
-              $height="fit-content"
-              $margin={{ top: 'auto' }}
-            >
-              <Image priority src={IconDocs} alt={t('Docs Logo')} width={25} />
-              <Text
-                $padding="2px 3px"
-                $size="8px"
-                $background="#368bd6"
-                $color="white"
-                $position="absolute"
-                $radius="5px"
-                $css={`
-                  bottom: 13px;
-                  right: -17px;
-                `}
-              >
-                BETA
-              </Text>
-              <Text
-                $margin="none"
-                as="h2"
-                $color="#000091"
-                $zIndex={1}
-                $size="1.30rem"
-                $css="font-family: 'Marianne'"
-              >
-                {t('Docs')}
-              </Text>
-            </Box>
-          </StyledLink>
+      {isResponsive && (
+        <Button
+          size="medium"
+          onClick={toggleMobileMenu}
+          aria-label={t('Open the header menu')}
+          color="primary-text"
+          icon={<Icon iconName="menu" />}
+        />
+      )}
+
+      <StyledLink href="/">
+        <Box
+          $align="center"
+          $gap={(tokens.spacings?.['100V'] as string) ?? '0.8rem'}
+          $direction="row"
+          $position="relative"
+          $height="fit-content"
+          $margin={{ top: 'auto' }}
+        >
+          <Image priority src={IconDocs} alt={t('Docs Logo')} width={25} />
+
+          <Text
+            $margin="none"
+            as="h2"
+            $color="#000091"
+            $zIndex={1}
+            $size="1.30rem"
+            $css="font-family: 'Marianne'"
+          >
+            {t('Docs')}
+          </Text>
         </Box>
-        {isSmallMobile ? (
-          <Box $direction="row" $gap="2rem">
-            <LaGaufre />
-            <DropdownMenu />
-          </Box>
-        ) : (
-          <Box $align="center" $gap="2vw" $direction="row">
-            <ButtonLogin />
-            <LanguagePicker />
-            <LaGaufre />
-          </Box>
-        )}
-      </Box>
+      </StyledLink>
+      {isResponsive ? (
+        <Box
+          $direction="row"
+          $gap={(tokens.spacings?.['300V'] as string) ?? '0.625rem'}
+        >
+          <LaGaufre />
+        </Box>
+      ) : (
+        <Box
+          $align="center"
+          $gap={(tokens.spacings?.['300V'] as string) ?? '0.625rem'}
+          $direction="row"
+        >
+          <ButtonLogin />
+          <LanguagePicker />
+          <LaGaufre />
+        </Box>
+      )}
     </Box>
   );
 };

src/frontend/apps/impress/src/features/header/conf.ts

@@ -0,0 +1 @@
+export const HEADER_HEIGHT = 52;

src/frontend/apps/impress/src/features/left-pannel/components/LeftPanel.tsx

@@ -0,0 +1,114 @@
+import { Button } from '@openfun/cunningham-react';
+import { useRouter } from 'next/navigation';
+import { PropsWithChildren, ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Box, Icon } from '@/components';
+import { HorizontalSeparator } from '@/components/separators/HorizontalSeparator';
+import { SeparatedSection } from '@/components/separators/SeparatedSection';
+import { ButtonLogin } from '@/core';
+import { useCunninghamTheme } from '@/cunningham';
+import { useCreateDoc } from '@/features/docs';
+import { HEADER_HEIGHT } from '@/features/header/conf';
+import { LanguagePicker } from '@/features/language';
+import { useResponsiveStore } from '@/stores';
+
+export const LeftPanel = ({ children }: PropsWithChildren) => {
+  const { t } = useTranslation();
+  const router = useRouter();
+  const { isResponsive, isMobileMenuOpen, toggleMobileMenu } =
+    useResponsiveStore();
+  const theme = useCunninghamTheme();
+  const colors = theme.colorsTokens();
+
+  const { mutate: createDoc } = useCreateDoc({
+    onSuccess: (doc) => {
+      router.push(`/docs/${doc.id}`);
+      toggleMobileMenu();
+    },
+  });
+
+  const goToHome = () => {
+    router.push('/');
+    toggleMobileMenu();
+  };
+
+  const createNewDoc = () => {
+    createDoc({ title: t('Untitled document') });
+  };
+
+  const getContent = (): ReactNode => {
+    return (
+      <div>
+        <SeparatedSection>
+          <Box
+            $padding={{ horizontal: '300V' }}
+            $direction="row"
+            $justify="space-between"
+            $align="center"
+          >
+            <Box $direction="row" $gap="2px">
+              <Button
+                onClick={goToHome}
+                size="medium"
+                color="primary-text"
+                icon={<Icon iconName="house" />}
+              />
+            </Box>
+            <Button onClick={createNewDoc}>{t('New doc')}</Button>
+          </Box>
+        </SeparatedSection>
+        {children}
+      </div>
+    );
+  };
+
+  return (
+    <>
+      {!isResponsive && (
+        <Box
+          data-testid="left-panel-desktop"
+          $css={`
+            height: calc(100vh - ${HEADER_HEIGHT}px);
+            width: 300px;
+            min-width: 300px;
+            border-right: 1px solid ${(colors?.['greyscale-200'] as string) ?? '#E5E5E5'};
+        `}
+        >
+          {getContent()}
+        </Box>
+      )}
+      {isResponsive && (
+        <Box
+          data-testid="left-panel-mobile"
+          $css={`
+            z-index: 1000;
+            width: 100dvw;
+            height: calc(100dvh - ${HEADER_HEIGHT}px);
+            position: fixed;
+            transition: 0.15s;
+            background-color: ${(colors?.['greyscale-000'] as string) ?? '#fff'};
+            left: ${isMobileMenuOpen ? '0' : '-100dvw'};
+          `}
+        >
+          {getContent()}
+
+          <Box
+            $css={`
+                width: 100%;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                gap: var(--c--theme--spacings--200W);
+            `}
+          >
+            {children && <HorizontalSeparator />}
+            <ButtonLogin />
+            <LanguagePicker />
+          </Box>
+        </Box>
+      )}
+    </>
+  );
+};