📝(readme) add changelog entry

Added changelog entry so the pr passes the test

CHANGELOG.md

@@ -8,16 +8,12 @@ and this project adheres to
 
 ## [Unreleased]
 
-## Added
-
-- 💄(frontend) add error pages #643
-
 ## Changed
 
 - 🛂(frontend) Restore version visibility #629
 - 📝(doc) minor README.md formatting and wording enhancements
 - ♻️Stop setting a default title on doc creation #634
-- ♻️(frontend) misc ui improvements #644
+- 📝(readme) remove front-end local run instructions local.md #651 
 
 ## Fixed
 

README.md

@@ -40,7 +40,7 @@ Docs is a collaborative text editor designed to address common challenges in kno
 *   📚 Built-in wiki functionality to turn your team's collaborative work into organized knowledge `ETA 02/2025`
 
 ### Self-host
-*   🚀 Easy to install, scalable and secure alternative to Notion, Outline or Confluence
+*   🚀 Easy to install, scalable and secure alternative to Notion and Outline.
 
 ## Getting started 🔧
 
@@ -100,26 +100,6 @@ password: impress
 $ make run
 ```
 
-⚠️ For the frontend developer, it is often better to run the frontend in development mode locally.
-
-To do so, install the frontend dependencies with the following command:
-
-```shellscript
-$ make frontend-development-install
-```
-
-And run the frontend locally in development mode with the following command:
-
-```shellscript
-$ make run-frontend-development
-```
-
-To start all the services, except the frontend container, you can use the following command:
-
-```shellscript
-$ make run-backend
-```
-
 **Adding content**
 You can create a basic demo site by running:
 

docker/files/etc/nginx/conf.d/default.conf

@@ -68,8 +68,6 @@ server {
         # Get resource from Minio
         proxy_pass http://minio:9000/impress-media-storage/;
         proxy_set_header Host minio:9000;
-
-        add_header Content-Security-Policy "default-src 'none'" always;
     }
 
     location /media-auth {

docs/local.md

@@ -0,0 +1,92 @@
+# Run Docs locally
+
+> ⚠️ Running Docs locally using the methods described below is for testing purposes only.  It is based on building Docs using Minio as the S3 storage solution: if you want to use Minio for production deployment of Docs, you will need to comply with Minio's AGPL-3.0 licence.
+
+**Prerequisite**
+
+Make sure you have a recent version of Docker and [Docker Compose](https://docs.docker.com/compose/install) installed on your laptop:
+
+```shellscript
+$ docker -v
+
+Docker version 20.10.2, build 2291f61
+
+$ docker compose version
+
+Docker Compose version v2.32.4
+```
+
+> ⚠️ You may need to run the following commands with sudo but this can be avoided by adding your user to the `docker` group.
+
+**Project bootstrap**
+
+The easiest way to start working on the project is to use GNU Make:
+
+```shellscript
+$ make bootstrap FLUSH_ARGS='--no-input'
+```
+
+This command builds the `app` container, installs dependencies, performs database migrations and compile translations. It's a good idea to use this command each time you are pulling code from the project repository to avoid dependency-related or migration-related issues.
+
+Your Docker services should now be up and running 🎉
+
+You can access to the project by going to <http://localhost:3000>.
+
+You will be prompted to log in, the default credentials are:
+
+```
+username: impress
+password: impress
+```
+
+📝 Note that if you need to run them afterwards, you can use the eponym Make rule:
+
+```shellscript
+$ make run
+```
+
+**Adding content**
+You can create a basic demo site by running:
+
+```shellscript
+$ make demo
+```
+
+Finally, you can check all available Make rules using:
+
+```shellscript
+$ make help
+```
+
+**Django admin**
+
+You can access the Django admin site at
+
+<http://localhost:8071/admin>.
+
+You first need to create a superuser account:
+
+```shellscript
+$ make superuser
+```
+
+## Front-end dev instructions
+⚠️ For the frontend developer, it is often better to run the frontend in development mode locally.
+
+To do so, install the frontend dependencies with the following command:
+
+```shellscript
+$ make frontend-development-install
+```
+
+And run the frontend locally in development mode with the following command:
+
+```shellscript
+$ make run-frontend-development
+```
+
+To start all the services, except the frontend container, you can use the following command:
+
+```shellscript
+$ make run-backend
+```

src/backend/core/api/serializers.py

@@ -418,7 +418,6 @@ class FileUploadSerializer(serializers.Serializer):
 
         self.context["expected_extension"] = extension
         self.context["content_type"] = magic_mime_type
-        self.context["file_name"] = file.name
 
         return file
 
@@ -427,7 +426,6 @@ class FileUploadSerializer(serializers.Serializer):
         attrs["expected_extension"] = self.context["expected_extension"]
         attrs["is_unsafe"] = self.context["is_unsafe"]
         attrs["content_type"] = self.context["content_type"]
-        attrs["file_name"] = self.context["file_name"]
         return attrs
 
 

src/backend/core/api/viewsets.py

@@ -925,19 +925,6 @@ class DocumentViewSet(
         if serializer.validated_data["is_unsafe"]:
             extra_args["Metadata"]["is_unsafe"] = "true"
 
-        file_name = serializer.validated_data["file_name"]
-        if (
-            not serializer.validated_data["content_type"].startswith("image/")
-            or serializer.validated_data["is_unsafe"]
-        ):
-            extra_args.update(
-                {"ContentDisposition": f'attachment; filename="{file_name:s}"'}
-            )
-        else:
-            extra_args.update(
-                {"ContentDisposition": f'inline; filename="{file_name:s}"'}
-            )
-
         file = serializer.validated_data["file"]
         default_storage.connection.meta.client.upload_fileobj(
             file, default_storage.bucket_name, key, ExtraArgs=extra_args

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

@@ -79,7 +79,6 @@ def test_api_documents_attachment_upload_anonymous_success():
 
     assert file_head["Metadata"] == {"owner": "None"}
     assert file_head["ContentType"] == "image/png"
-    assert file_head["ContentDisposition"] == 'inline; filename="test.png"'
 
 
 @pytest.mark.parametrize(
@@ -218,7 +217,6 @@ def test_api_documents_attachment_upload_success(via, role, mock_user_teams):
     )
     assert file_head["Metadata"] == {"owner": str(user.id)}
     assert file_head["ContentType"] == "image/png"
-    assert file_head["ContentDisposition"] == 'inline; filename="test.png"'
 
 
 def test_api_documents_attachment_upload_invalid(client):
@@ -303,7 +301,6 @@ def test_api_documents_attachment_upload_fix_extension(
     )
     assert file_head["Metadata"] == {"owner": str(user.id), "is_unsafe": "true"}
     assert file_head["ContentType"] == content_type
-    assert file_head["ContentDisposition"] == f'attachment; filename="{name:s}"'
 
 
 def test_api_documents_attachment_upload_empty_file():
@@ -353,4 +350,3 @@ def test_api_documents_attachment_upload_unsafe():
     )
     assert file_head["Metadata"] == {"owner": str(user.id), "is_unsafe": "true"}
     assert file_head["ContentType"] == "application/octet-stream"
-    assert file_head["ContentDisposition"] == 'attachment; filename="script.exe"'

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

@@ -17,13 +17,13 @@ test.describe('404', () => {
         'It seems that the page you are looking for does not exist or cannot be displayed correctly.',
       ),
     ).toBeVisible();
-    await expect(page.getByText('Home')).toBeVisible();
+    await expect(page.getByText('Back to home page')).toBeVisible();
   });
 
   test('checks go back to home page redirects to home page', async ({
     page,
   }) => {
-    await page.getByText('Home').click();
+    await page.getByText('Back to home page').click();
     await expect(page).toHaveURL('/');
   });
 });

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

@@ -97,7 +97,7 @@ export const addNewMember = async (
 
   // Choose a role
   await page.getByLabel('doc-role-dropdown').click();
-  await page.getByRole('menuitem', { name: role }).click();
+  await page.getByRole('button', { name: role }).click();
   await page.getByRole('button', { name: 'Invite' }).click();
 
   return users[index].email;

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

@@ -37,10 +37,10 @@ test.describe('Doc Editor', () => {
 
     // Change language to French
     await header.click();
-    await header.getByRole('button', { name: /Language/ }).click();
-    await page.getByRole('menuitem', { name: 'Français' }).click();
+    await header.getByRole('combobox').getByText('English').click();
+    await header.getByRole('option', { name: 'Français' }).click();
     await expect(
-      header.getByRole('button').getByText('Français'),
+      header.getByRole('combobox').getByText('Français'),
     ).toBeVisible();
 
     // Trigger slash menu to show french menu
@@ -130,7 +130,7 @@ test.describe('Doc Editor', () => {
 
     await selectVisibility.click();
     await page
-      .getByRole('menuitem', {
+      .getByRole('button', {
         name: 'Connected',
       })
       .click();

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

@@ -7,9 +7,17 @@ type SmallDoc = {
   title: string;
 };
 
+test.beforeEach(async ({ page }) => {
+  await page.goto('/');
+});
+
 test.describe('Documents Grid mobile', () => {
   test.use({ viewport: { width: 500, height: 1200 } });
 
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/');
+  });
+
   test('it checks the grid when mobile', async ({ page }) => {
     await page.route('**/documents/**', async (route) => {
       const request = route.request();
@@ -86,10 +94,6 @@ test.describe('Documents Grid mobile', () => {
 });
 
 test.describe('Document grid item options', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto('/');
-  });
-
   test('it pins a document', async ({ page, browserName }) => {
     const [docTitle] = await createDoc(page, `Favorite doc`, browserName);
 
@@ -208,8 +212,6 @@ test.describe('Document grid item options', () => {
 
 test.describe('Documents filters', () => {
   test('it checks the prebuild left panel filters', async ({ page }) => {
-    await page.goto('/');
-
     // All Docs
     const response = await page.waitForResponse(
       (response) =>
@@ -280,9 +282,11 @@ test.describe('Documents filters', () => {
 });
 
 test.describe('Documents Grid', () => {
-  test('checks all the elements are visible', async ({ page }) => {
+  test.beforeEach(async ({ page }) => {
     await page.goto('/');
+  });
 
+  test('checks all the elements are visible', async ({ page }) => {
     let docs: SmallDoc[] = [];
     const response = await page.waitForResponse(
       (response) =>
@@ -310,12 +314,11 @@ test.describe('Documents Grid', () => {
 
   test('checks the infinite scroll', async ({ page }) => {
     let docs: SmallDoc[] = [];
-    const responsePromisePage1 = page.waitForResponse((response) => {
-      return (
+    const responsePromisePage1 = page.waitForResponse(
+      (response) =>
         response.url().endsWith(`/documents/?page=1`) &&
-        response.status() === 200
-      );
-    });
+        response.status() === 200,
+    );
 
     const responsePromisePage2 = page.waitForResponse(
       (response) =>
@@ -323,8 +326,6 @@ test.describe('Documents Grid', () => {
         response.status() === 200,
     );
 
-    await page.goto('/');
-
     const responsePage1 = await responsePromisePage1;
     expect(responsePage1.ok()).toBeTruthy();
     let result = await responsePage1.json();

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

@@ -89,7 +89,7 @@ test.describe('Doc Header', () => {
 
     await page.getByLabel('Open the document options').click();
     await page
-      .getByRole('menuitem', {
+      .getByRole('button', {
         name: 'Delete document',
       })
       .click();
@@ -153,7 +153,7 @@ test.describe('Doc Header', () => {
     await page.getByLabel('Open the document options').click();
 
     await expect(
-      page.getByRole('menuitem', { name: 'Delete document' }),
+      page.getByRole('button', { name: 'Delete document' }),
     ).toBeDisabled();
 
     // Click somewhere else to close the options
@@ -177,7 +177,7 @@ test.describe('Doc Header', () => {
     await invitationCard.getByRole('button', { name: 'more_horiz' }).click();
 
     await expect(
-      page.getByRole('menuitem', {
+      page.getByRole('button', {
         name: 'delete',
       }),
     ).toBeEnabled();
@@ -195,7 +195,7 @@ test.describe('Doc Header', () => {
     await memberCard.getByRole('button', { name: 'more_horiz' }).click();
 
     await expect(
-      page.getByRole('menuitem', {
+      page.getByRole('button', {
         name: 'delete',
       }),
     ).toBeEnabled();
@@ -233,7 +233,7 @@ test.describe('Doc Header', () => {
     await page.getByLabel('Open the document options').click();
 
     await expect(
-      page.getByRole('menuitem', { name: 'Delete document' }),
+      page.getByRole('button', { name: 'Delete document' }),
     ).toBeDisabled();
 
     // Click somewhere else to close the options
@@ -295,7 +295,7 @@ test.describe('Doc Header', () => {
     await page.getByLabel('Open the document options').click();
 
     await expect(
-      page.getByRole('menuitem', { name: 'Delete document' }),
+      page.getByRole('button', { name: 'Delete document' }),
     ).toBeDisabled();
 
     // Click somewhere else to close the options
@@ -352,7 +352,7 @@ test.describe('Doc Header', () => {
 
     // Copy content to clipboard
     await page.getByLabel('Open the document options').click();
-    await page.getByRole('menuitem', { name: 'Copy as Markdown' }).click();
+    await page.getByRole('button', { name: 'Copy as Markdown' }).click();
     await expect(page.getByText('Copied to clipboard')).toBeVisible();
 
     // Test that clipboard is in Markdown format
@@ -387,7 +387,7 @@ test.describe('Doc Header', () => {
 
     // Copy content to clipboard
     await page.getByLabel('Open the document options').click();
-    await page.getByRole('menuitem', { name: 'Copy as HTML' }).click();
+    await page.getByRole('button', { name: 'Copy as HTML' }).click();
     await expect(page.getByText('Copied to clipboard')).toBeVisible();
 
     // Test that clipboard is in HTML format
@@ -460,7 +460,7 @@ test.describe('Documents Header mobile', () => {
 
     await expect(page.getByRole('button', { name: 'Copy link' })).toBeHidden();
     await page.getByLabel('Open the document options').click();
-    await page.getByRole('menuitem', { name: 'Share' }).click();
+    await page.getByRole('button', { name: 'Share' }).click();
     await page.getByRole('button', { name: 'Copy link' }).click();
     await expect(page.getByText('Link Copied !')).toBeVisible();
     // Test that clipboard is in HTML format
@@ -494,7 +494,7 @@ test.describe('Documents Header mobile', () => {
     await goToGridDoc(page);
 
     await page.getByLabel('Open the document options').click();
-    await page.getByRole('menuitem', { name: 'Share' }).click();
+    await page.getByRole('button', { name: 'Share' }).click();
 
     await expect(page.getByLabel('Share modal')).toBeVisible();
     await page.getByRole('button', { name: 'close' }).click();

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

@@ -65,15 +65,15 @@ test.describe('Document create member', () => {
 
     // Check roles are displayed
     await list.getByLabel('doc-role-dropdown').click();
-    await expect(page.getByRole('menuitem', { name: 'Reader' })).toBeVisible();
-    await expect(page.getByRole('menuitem', { name: 'Editor' })).toBeVisible();
-    await expect(page.getByRole('menuitem', { name: 'Owner' })).toBeVisible();
+    await expect(page.getByRole('button', { name: 'Reader' })).toBeVisible();
+    await expect(page.getByRole('button', { name: 'Editor' })).toBeVisible();
+    await expect(page.getByRole('button', { name: 'Owner' })).toBeVisible();
     await expect(
-      page.getByRole('menuitem', { name: 'Administrator' }),
+      page.getByRole('button', { name: 'Administrator' }),
     ).toBeVisible();
 
     // Validate
-    await page.getByRole('menuitem', { name: 'Administrator' }).click();
+    await page.getByRole('button', { name: 'Administrator' }).click();
     await page.getByRole('button', { name: 'Invite' }).click();
 
     // Check invitation added
@@ -121,7 +121,7 @@ test.describe('Document create member', () => {
     // Choose a role
     const container = page.getByTestId('doc-share-add-member-list');
     await container.getByLabel('doc-role-dropdown').click();
-    await page.getByRole('menuitem', { name: 'Owner' }).click();
+    await page.getByRole('button', { name: 'Owner' }).click();
 
     const responsePromiseCreateInvitation = page.waitForResponse(
       (response) =>
@@ -139,7 +139,7 @@ test.describe('Document create member', () => {
 
     // Choose a role
     await container.getByLabel('doc-role-dropdown').click();
-    await page.getByRole('menuitem', { name: 'Owner' }).click();
+    await page.getByRole('button', { name: 'Owner' }).click();
 
     const responsePromiseCreateInvitationFail = page.waitForResponse(
       (response) =>
@@ -162,8 +162,8 @@ test.describe('Document create member', () => {
     await createDoc(page, 'user-invitation', browserName, 1);
 
     const header = page.locator('header').first();
-    await header.getByRole('button', { name: /Language/ }).click();
-    await page.getByRole('menuitem', { name: 'Français' }).click();
+    await header.getByRole('combobox').getByText('EN').click();
+    await header.getByRole('option', { name: 'translate Français' }).click();
 
     await page.getByRole('button', { name: 'Partager' }).click();
 
@@ -178,7 +178,7 @@ test.describe('Document create member', () => {
     // Choose a role
     const container = page.getByTestId('doc-share-add-member-list');
     await container.getByLabel('doc-role-dropdown').click();
-    await page.getByRole('menuitem', { name: 'Administrateur' }).click();
+    await page.getByRole('button', { name: 'Administrateur' }).click();
 
     const responsePromiseCreateInvitation = page.waitForResponse(
       (response) =>
@@ -212,7 +212,7 @@ test.describe('Document create member', () => {
     // Choose a role
     const container = page.getByTestId('doc-share-add-member-list');
     await container.getByLabel('doc-role-dropdown').click();
-    await page.getByRole('menuitem', { name: 'Administrator' }).click();
+    await page.getByRole('button', { name: 'Administrator' }).click();
 
     const responsePromiseCreateInvitation = page.waitForResponse(
       (response) =>
@@ -232,14 +232,14 @@ test.describe('Document create member', () => {
     await expect(userInvitation).toBeVisible();
 
     await userInvitation.getByLabel('doc-role-dropdown').click();
-    await page.getByRole('menuitem', { name: 'Reader' }).click();
+    await page.getByRole('button', { name: 'Reader' }).click();
 
     const moreActions = userInvitation.getByRole('button', {
       name: 'more_horiz',
     });
     await moreActions.click();
 
-    await page.getByRole('menuitem', { name: 'Delete' }).click();
+    await page.getByRole('button', { name: 'Delete' }).click();
 
     await expect(userInvitation).toBeHidden();
   });

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

@@ -161,12 +161,12 @@ test.describe('Document list members', () => {
     await list.click();
 
     await currentUserRole.click();
-    await page.getByRole('menuitem', { name: 'Administrator' }).click();
+    await page.getByRole('button', { name: 'Administrator' }).click();
     await list.click();
     await expect(currentUserRole).toBeVisible();
 
     await currentUserRole.click();
-    await page.getByRole('menuitem', { name: 'Reader' }).click();
+    await page.getByRole('button', { name: 'Reader' }).click();
     await list.click();
     await expect(currentUserRole).toBeHidden();
   });
@@ -215,13 +215,13 @@ test.describe('Document list members', () => {
     await expect(mySelfMoreActions).toBeVisible();
 
     await userReaderMoreActions.click();
-    await page.getByRole('menuitem', { name: 'Delete' }).click();
+    await page.getByRole('button', { name: 'Delete' }).click();
     await expect(userReader).toBeHidden();
 
     await mySelfMoreActions.click();
-    await page.getByRole('menuitem', { name: 'Delete' }).click();
+    await page.getByRole('button', { name: 'Delete' }).click();
     await expect(
-      page.getByText('You do not have permission to view this document.'),
+      page.getByText('You do not have permission to perform this action.'),
     ).toBeVisible();
   });
 });

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

@@ -19,7 +19,7 @@ test.describe('Doc Version', () => {
 
     await page.getByLabel('Open the document options').click();
     await page
-      .getByRole('menuitem', {
+      .getByRole('button', {
         name: 'Version history',
       })
       .click();
@@ -59,7 +59,7 @@ test.describe('Doc Version', () => {
 
     await page.getByLabel('Open the document options').click();
     await page
-      .getByRole('menuitem', {
+      .getByRole('button', {
         name: 'Version history',
       })
       .click();
@@ -91,7 +91,7 @@ test.describe('Doc Version', () => {
 
     await page.getByLabel('Open the document options').click();
     await expect(
-      page.getByRole('menuitem', { name: 'Version history' }),
+      page.getByRole('button', { name: 'Version history' }),
     ).toBeDisabled();
   });
 
@@ -120,7 +120,7 @@ test.describe('Doc Version', () => {
 
     await page.getByLabel('Open the document options').click();
     await page
-      .getByRole('menuitem', {
+      .getByRole('button', {
         name: 'Version history',
       })
       .click();

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

@@ -50,7 +50,7 @@ test.describe('Doc Visibility', () => {
 
     await selectVisibility.click();
     await page
-      .getByRole('menuitem', {
+      .getByRole('button', {
         name: 'Connected',
       })
       .click();
@@ -60,7 +60,7 @@ test.describe('Doc Visibility', () => {
     await selectVisibility.click();
 
     await page
-      .getByRole('menuitem', {
+      .getByRole('button', {
         name: 'Public',
       })
       .click();
@@ -100,9 +100,7 @@ test.describe('Doc Visibility: Restricted', () => {
 
     await page.goto(urlDoc);
 
-    await expect(
-      page.getByText('Log in to access the document.'),
-    ).toBeVisible();
+    await expect(page.getByRole('textbox', { name: 'password' })).toBeVisible();
   });
 
   test('A doc is not accessible when authentified but not member.', async ({
@@ -135,7 +133,7 @@ test.describe('Doc Visibility: Restricted', () => {
     await page.goto(urlDoc);
 
     await expect(
-      page.getByText('You do not have permission to view this document.'),
+      page.getByText('You do not have permission to perform this action.'),
     ).toBeVisible();
   });
 
@@ -162,7 +160,7 @@ test.describe('Doc Visibility: Restricted', () => {
     // Choose a role
     const container = page.getByTestId('doc-share-add-member-list');
     await container.getByLabel('doc-role-dropdown').click();
-    await page.getByRole('menuitem', { name: 'Administrator' }).click();
+    await page.getByRole('button', { name: 'Administrator' }).click();
 
     await page.getByRole('button', { name: 'Invite' }).click();
 
@@ -215,7 +213,7 @@ test.describe('Doc Visibility: Public', () => {
     await selectVisibility.click();
 
     await page
-      .getByRole('menuitem', {
+      .getByRole('button', {
         name: 'Public',
       })
       .click();
@@ -227,7 +225,7 @@ test.describe('Doc Visibility: Public', () => {
     await expect(page.getByLabel('Visibility mode')).toBeVisible();
     await page.getByLabel('Visibility mode').click();
     await page
-      .getByRole('menuitem', {
+      .getByRole('button', {
         name: 'Reading',
       })
       .click();
@@ -289,7 +287,7 @@ test.describe('Doc Visibility: Public', () => {
     await selectVisibility.click();
 
     await page
-      .getByRole('menuitem', {
+      .getByRole('button', {
         name: 'Public',
       })
       .click();
@@ -357,7 +355,7 @@ test.describe('Doc Visibility: Authenticated', () => {
     const selectVisibility = page.getByLabel('Visibility', { exact: true });
     await selectVisibility.click();
     await page
-      .getByRole('menuitem', {
+      .getByRole('button', {
         name: 'Connected',
       })
       .click();
@@ -381,10 +379,7 @@ test.describe('Doc Visibility: Authenticated', () => {
     await page.goto(urlDoc);
 
     await expect(page.locator('h2').getByText(docTitle)).toBeHidden();
-
-    await expect(
-      page.getByText('Log in to access the document.'),
-    ).toBeVisible();
+    await expect(page.getByRole('textbox', { name: 'password' })).toBeVisible();
   });
 
   test('It checks a authenticated doc in read only mode', async ({
@@ -407,7 +402,7 @@ test.describe('Doc Visibility: Authenticated', () => {
     const selectVisibility = page.getByLabel('Visibility', { exact: true });
     await selectVisibility.click();
     await page
-      .getByRole('menuitem', {
+      .getByRole('button', {
         name: 'Connected',
       })
       .click();
@@ -416,14 +411,6 @@ test.describe('Doc Visibility: Authenticated', () => {
       page.getByText('The document visibility has been updated.'),
     ).toBeVisible();
 
-    await expect(
-      page
-        .getByLabel('It is the card information about the document.')
-        .getByText('Document accessible to any connected person', {
-          exact: true,
-        }),
-    ).toBeVisible();
-
     await page.getByRole('button', { name: 'close' }).click();
 
     const urlDoc = page.url();
@@ -469,7 +456,7 @@ test.describe('Doc Visibility: Authenticated', () => {
     const selectVisibility = page.getByLabel('Visibility', { exact: true });
     await selectVisibility.click();
     await page
-      .getByRole('menuitem', {
+      .getByRole('button', {
         name: 'Connected',
       })
       .click();

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

@@ -12,7 +12,7 @@ test.describe('Home page', () => {
     const footer = page.locator('footer').first();
     await expect(header).toBeVisible();
     await expect(
-      header.getByRole('button', { name: /Language/ }),
+      header.getByRole('combobox', { name: 'Language' }),
     ).toBeVisible();
     await expect(
       header.getByRole('button', { name: 'Les services de La Suite numé' }),

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

@@ -9,20 +9,19 @@ test.describe('Language', () => {
     await expect(page.getByLabel('Logout')).toBeVisible();
 
     const header = page.locator('header').first();
-    await header
-      .getByRole('button', { name: /Language/ })
-      .getByText('English')
-      .click();
-    await page.getByRole('menuitem', { name: 'Français' }).click();
+    await header.getByRole('combobox').getByText('English').click();
+    await header.getByRole('option', { name: 'Français' }).click();
     await expect(
-      header.getByRole('button').getByText('Français'),
+      header.getByRole('combobox').getByText('Français'),
     ).toBeVisible();
 
     await expect(page.getByLabel('Se déconnecter')).toBeVisible();
 
-    await header.getByRole('button').getByText('Français').click();
-    await page.getByRole('menuitem', { name: 'Deutsch' }).click();
-    await expect(header.getByRole('button').getByText('Deutsch')).toBeVisible();
+    await header.getByRole('combobox').getByText('Français').click();
+    await header.getByRole('option', { name: 'Deutsch' }).click();
+    await expect(
+      header.getByRole('combobox').getByText('Deutsch'),
+    ).toBeVisible();
 
     await expect(page.getByLabel('Abmelden')).toBeVisible();
   });
@@ -54,11 +53,8 @@ test.describe('Language', () => {
 
     // Switch language to French
     const header = page.locator('header').first();
-    await header
-      .getByRole('button', { name: /Language/ })
-      .getByText('English')
-      .click();
-    await page.getByRole('menuitem', { name: 'Français' }).click();
+    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-panel.spec.ts

@@ -29,7 +29,7 @@ test.describe('Left panel mobile', () => {
     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('button', { name: /Language/ });
+    const languageButton = page.getByRole('combobox', { name: 'Language' });
     const logoutButton = page.getByRole('button', { name: 'Logout' });
 
     await expect(homeButton).not.toBeInViewport();

src/frontend/apps/impress/cunningham.ts

@@ -381,7 +381,6 @@ const config = {
               'color-active': 'var(--c--theme--colors--primary-100)',
             },
             'color-hover': 'var(--c--theme--colors--primary-text)',
-            color: 'var(--c--theme--colors--primary-800)',
           },
           secondary: {
             background: {

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

@@ -8,20 +8,17 @@ import {
 import { Button, Popover } from 'react-aria-components';
 import styled from 'styled-components';
 
-import { BoxProps } from './Box';
-
 const StyledPopover = styled(Popover)`
   background-color: white;
   border-radius: 4px;
   box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
+
   border: 1px solid #dddddd;
+
   transition: opacity 0.2s ease-in-out;
 `;
 
-interface StyledButtonProps {
-  $css?: BoxProps['$css'];
-}
-const StyledButton = styled(Button)<StyledButtonProps>`
+const StyledButton = styled(Button)`
   cursor: pointer;
   border: none;
   background: none;
@@ -32,12 +29,10 @@ const StyledButton = styled(Button)<StyledButtonProps>`
   font-size: 0.938rem;
   padding: 0;
   text-wrap: nowrap;
-  ${({ $css }) => $css};
 `;
 
 export interface DropButtonProps {
   button: ReactNode;
-  buttonCss?: BoxProps['$css'];
   isOpen?: boolean;
   onOpenChange?: (isOpen: boolean) => void;
   label?: string;
@@ -45,7 +40,6 @@ export interface DropButtonProps {
 
 export const DropButton = ({
   button,
-  buttonCss,
   isOpen = false,
   onOpenChange,
   children,
@@ -70,7 +64,6 @@ export const DropButton = ({
         ref={triggerRef}
         onPress={() => onOpenChangeHandler(true)}
         aria-label={label}
-        $css={buttonCss}
       >
         {button}
       </StyledButton>

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

@@ -1,4 +1,4 @@
-import { PropsWithChildren, useRef, useState } from 'react';
+import { PropsWithChildren, useState } from 'react';
 import { css } from 'styled-components';
 
 import { Box, BoxButton, BoxProps, DropButton, Icon, Text } from '@/components';
@@ -20,7 +20,6 @@ export type DropdownMenuProps = {
   showArrow?: boolean;
   label?: string;
   arrowCss?: BoxProps['$css'];
-  buttonCss?: BoxProps['$css'];
   disabled?: boolean;
   topMessage?: string;
 };
@@ -31,7 +30,6 @@ export const DropdownMenu = ({
   disabled = false,
   showArrow = false,
   arrowCss,
-  buttonCss,
   label,
   topMessage,
 }: PropsWithChildren<DropdownMenuProps>) => {
@@ -39,7 +37,6 @@ export const DropdownMenu = ({
   const spacings = theme.spacingsTokens();
   const colors = theme.colorsTokens();
   const [isOpen, setIsOpen] = useState(false);
-  const blockButtonRef = useRef<HTMLDivElement>(null);
 
   const onOpenChange = (isOpen: boolean) => {
     setIsOpen(isOpen);
@@ -54,17 +51,10 @@ export const DropdownMenu = ({
       isOpen={isOpen}
       onOpenChange={onOpenChange}
       label={label}
-      buttonCss={buttonCss}
       button={
         showArrow ? (
-          <Box
-            ref={blockButtonRef}
-            $direction="row"
-            $align="center"
-            $position="relative"
-            aria-controls="menu"
-          >
-            <Box>{children}</Box>
+          <Box $direction="row" $align="center">
+            <div>{children}</div>
             <Icon
               $variation="600"
               $css={
@@ -77,17 +67,11 @@ export const DropdownMenu = ({
             />
           </Box>
         ) : (
-          <Box ref={blockButtonRef} aria-controls="menu">
-            {children}
-          </Box>
+          children
         )
       }
     >
-      <Box
-        $maxWidth="320px"
-        $minWidth={`${blockButtonRef.current?.clientWidth}px`}
-        role="menu"
-      >
+      <Box $maxWidth="320px">
         {topMessage && (
           <Text
             $variation="700"
@@ -106,7 +90,6 @@ export const DropdownMenu = ({
           const isDisabled = option.disabled !== undefined && option.disabled;
           return (
             <BoxButton
-              role="menuitem"
               aria-label={option.label}
               data-testid={option.testId}
               $direction="row"

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

@@ -25,9 +25,7 @@ export interface TextProps extends BoxProps {
   $size?: TextSizes | (string & {});
   $theme?:
     | 'primary'
-    | 'primary-text'
     | 'secondary'
-    | 'secondary-text'
     | 'info'
     | 'success'
     | 'warning'

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

@@ -406,10 +406,6 @@ input:-webkit-autofill:focus {
   );
 }
 
-.c__button--primary-text {
-  color: var(--c--components--button--primary-text--color);
-}
-
 .c__button--primary-text:hover,
 .c__button--primary-text:focus-visible {
   background-color: var(

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

@@ -505,9 +505,6 @@
   --c--components--button--primary-text--color-hover: var(
     --c--theme--colors--primary-text
   );
-  --c--components--button--primary-text--color: var(
-    --c--theme--colors--primary-800
-  );
   --c--components--button--secondary--background--color-hover: #f6f6f6;
   --c--components--button--secondary--background--color-active: #ededed;
   --c--components--button--secondary--border--color: var(

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

@@ -505,7 +505,6 @@ export const tokens = {
               'color-active': 'var(--c--theme--colors--primary-100)',
             },
             'color-hover': 'var(--c--theme--colors--primary-text)',
-            color: 'var(--c--theme--colors--primary-800)',
           },
           secondary: {
             background: { 'color-hover': '#F6F6F6', 'color-active': '#EDEDED' },

src/frontend/apps/impress/src/features/auth/components/ButtonLogin.tsx

@@ -14,11 +14,7 @@ export const ButtonLogin = () => {
 
   if (!authenticated) {
     return (
-      <Button
-        onClick={() => gotoLogin()}
-        color="primary-text"
-        aria-label={t('Login')}
-      >
+      <Button onClick={gotoLogin} color="primary-text" aria-label={t('Login')}>
         {t('Login')}
       </Button>
     );
@@ -36,7 +32,7 @@ export const ProConnectButton = () => {
 
   return (
     <BoxButton
-      onClick={() => gotoLogin()}
+      onClick={gotoLogin}
       aria-label={t('Proconnect Login')}
       $css={css`
         background-color: var(--c--theme--colors--primary-text);

src/frontend/apps/impress/src/features/auth/utils.ts

@@ -16,11 +16,8 @@ export const setAuthUrl = () => {
   }
 };
 
-export const gotoLogin = (withRedirect = true) => {
-  if (withRedirect) {
-    setAuthUrl();
-  }
-
+export const gotoLogin = () => {
+  setAuthUrl();
   window.location.replace(LOGIN_URL);
 };
 

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

@@ -76,13 +76,13 @@ export const cssEditor = (readonly: boolean) => css`
 
   .bn-block-outer:not(:first-child) {
     &:has(h1) {
-      margin-top: 32px;
+      padding-top: 32px;
     }
     &:has(h2) {
-      margin-top: 24px;
+      padding-top: 24px;
     }
     &:has(h3) {
-      margin-top: 16px;
+      padding-top: 16px;
     }
   }
 
@@ -92,16 +92,9 @@ export const cssEditor = (readonly: boolean) => css`
     border-radius: 4px;
   }
 
-  @media screen and (width <= 768px) {
-    & .bn-editor {
-      padding-right: 36px;
-    }
-  }
-
   @media screen and (width <= 560px) {
     & .bn-editor {
       ${readonly && `padding-left: 10px;`}
-      padding-right: 10px;
     }
     .bn-side-menu[data-block-type='heading'][data-level='1'] {
       height: 46px;

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

@@ -27,7 +27,6 @@ export const DocHeader = ({ doc }: DocHeaderProps) => {
 
   const { t } = useTranslation();
   const docIsPublic = doc.link_reach === LinkReach.PUBLIC;
-  const docIsAuth = doc.link_reach === LinkReach.AUTHENTICATED;
 
   const { transRole } = useTrans();
 
@@ -39,7 +38,7 @@ export const DocHeader = ({ doc }: DocHeaderProps) => {
         $gap={spacings['base']}
         aria-label={t('It is the card information about the document.')}
       >
-        {(docIsPublic || docIsAuth) && (
+        {docIsPublic && (
           <Box
             aria-label={t('Public document')}
             $color={colors['primary-800']}
@@ -58,12 +57,10 @@ export const DocHeader = ({ doc }: DocHeaderProps) => {
               $theme="primary"
               $variation="800"
               data-testid="public-icon"
-              iconName={docIsPublic ? 'public' : 'vpn_lock'}
+              iconName="public"
             />
             <Text $theme="primary" $variation="800">
-              {docIsPublic
-                ? t('Public document')
-                : t('Document accessible to any connected person')}
+              {t('Public document')}
             </Text>
           </Box>
         )}
@@ -79,9 +76,8 @@ export const DocHeader = ({ doc }: DocHeaderProps) => {
             $css="flex:1;"
             $gap="0.5rem 1rem"
             $align="center"
-            $maxWidth="100%"
           >
-            <Box $gap={spacings['3xs']} $overflow="auto">
+            <Box $gap={spacings['3xs']}>
               <DocTitle doc={doc} />
 
               <Box $direction="row">

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

@@ -101,35 +101,39 @@ const DocTitleInput = ({ doc }: DocTitleProps) => {
   }, [doc]);
 
   return (
-    <Tooltip content={t('Rename')} placement="top">
-      <Box
-        as="span"
-        role="textbox"
-        contentEditable
-        defaultValue={titleDisplay || undefined}
-        onKeyDownCapture={handleKeyDown}
-        suppressContentEditableWarning={true}
-        aria-label="doc title input"
-        onBlurCapture={(event) =>
-          handleTitleSubmit(event.target.textContent || '')
-        }
-        $color={colorsTokens()['greyscale-1000']}
-        $css={css`
-          &[contenteditable='true']:empty:not(:focus):before {
-            content: '${untitledDocument}';
-            color: grey;
-            pointer-events: none;
-            font-style: italic;
+    <>
+      <Tooltip content={t('Rename')} placement="top">
+        <Box
+          as="span"
+          role="textbox"
+          contentEditable
+          defaultValue={titleDisplay || undefined}
+          onKeyDownCapture={handleKeyDown}
+          suppressContentEditableWarning={true}
+          aria-label="doc title input"
+          onBlurCapture={(event) =>
+            handleTitleSubmit(event.target.textContent || '')
           }
-          font-size: ${isDesktop
-            ? css`var(--c--theme--font--sizes--h2)`
-            : css`var(--c--theme--font--sizes--sm)`};
-          font-weight: 700;
-          outline: none;
-        `}
-      >
-        {titleDisplay}
-      </Box>
-    </Tooltip>
+          $color={colorsTokens()['greyscale-1000']}
+          $margin={{ left: '-2px', right: '10px' }}
+          $css={css`
+            &[contenteditable='true']:empty:not(:focus):before {
+              content: '${untitledDocument}';
+              color: grey;
+              pointer-events: none;
+              font-style: italic;
+            }
+            font-size: ${isDesktop
+              ? css`var(--c--theme--font--sizes--h2)`
+              : css`var(--c--theme--font--sizes--sm)`};
+            font-weight: 700;
+
+            outline: none;
+          `}
+        >
+          {titleDisplay}
+        </Box>
+      </Tooltip>
+    </>
   );
 };

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

@@ -18,11 +18,7 @@ import {
 } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 import { useEditorStore } from '@/features/docs/doc-editor/';
-import {
-  Doc,
-  ModalRemoveDoc,
-  useCopyDocLink,
-} from '@/features/docs/doc-management';
+import { Doc, ModalRemoveDoc } from '@/features/docs/doc-management';
 import { DocShareModal } from '@/features/docs/doc-share';
 import {
   KEY_LIST_DOC_VERSIONS,
@@ -38,7 +34,7 @@ interface DocToolBoxProps {
 
 export const DocToolBox = ({ doc }: DocToolBoxProps) => {
   const { t } = useTranslation();
-  const hasAccesses = doc.nb_accesses > 1 && doc.abilities.accesses_view;
+  const hasAccesses = doc.nb_accesses > 1;
   const queryClient = useQueryClient();
 
   const { spacingsTokens, colorsTokens } = useCunninghamTheme();
@@ -54,7 +50,6 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
   const { isSmallMobile, isDesktop } = useResponsiveStore();
   const { editor } = useEditorStore();
   const { toast } = useToastProvider();
-  const copyDocLink = useCopyDocLink(doc.id);
 
   const options: DropdownMenuOption[] = [
     ...(isSmallMobile
@@ -71,11 +66,6 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
               setIsModalExportOpen(true);
             },
           },
-          {
-            label: t('Copy link'),
-            icon: 'add_link',
-            callback: copyDocLink,
-          },
         ]
       : []),
 

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

@@ -71,15 +71,9 @@ export const ModalRemoveDoc = ({ onClose, doc }: ModalRemoveDocProps) => {
           </Button>
         </>
       }
-      size={ModalSize.SMALL}
+      size={ModalSize.MEDIUM}
       title={
-        <Text
-          $size="h6"
-          as="h6"
-          $margin={{ all: '0' }}
-          $align="flex-start"
-          $variation="1000"
-        >
+        <Text $size="h6" as="h6" $margin={{ all: '0' }} $align="flex-start">
           {t('Delete a doc')}
         </Text>
       }

src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModalFooter.tsx

@@ -33,7 +33,9 @@ export const DocShareModalFooter = ({ doc, onClose }: Props) => {
       >
         <Button
           fullWidth={false}
-          onClick={copyDocLink}
+          onClick={() => {
+            copyDocLink();
+          }}
           color="tertiary"
           icon={<span className="material-icons">add_link</span>}
         >

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

@@ -100,21 +100,17 @@ export const ModalConfirmationVersion = ({
           </Button>
         </>
       }
-      size={ModalSize.SMALL}
+      size={ModalSize.MEDIUM}
       title={
-        <Text $size="h6" $align="flex-start" $variation="1000">
+        <Text $size="h6" $align="flex-start">
           {t('Warning')}
         </Text>
       }
     >
       <Box aria-label={t('Modal confirmation to restore the version')}>
         <Box>
-          <Text $variation="600">
-            {t('Your current document will revert to this version.')}
-          </Text>
-          <Text $variation="600">
-            {t('If a member is editing, his works can be lost.')}
-          </Text>
+          <Text>{t('Your current document will revert to this version.')}</Text>
+          <Text>{t('If a member is editing, his works can be lost.')}</Text>
         </Box>
       </Box>
     </Modal>

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

@@ -61,8 +61,12 @@ export const DocsGrid = ({
       $position="relative"
       $width="100%"
       $maxWidth="960px"
-      $maxHeight="calc(100vh - 52px - 2rem)"
+      $maxHeight="calc(100vh - 52px - 1rem)"
       $align="center"
+      $css={css`
+        overflow-x: hidden;
+        overflow-y: auto;
+      `}
     >
       <DocsGridLoader isLoading={isRefetching || loading} />
       <Card
@@ -71,7 +75,8 @@ export const DocsGrid = ({
         $height="100%"
         $width="100%"
         $css={css`
-          ${!isDesktop ? 'border: none;' : ''}
+          overflow-x: hidden;
+          overflow-y: auto;
         `}
         $padding={{
           top: 'base',
@@ -96,7 +101,7 @@ export const DocsGrid = ({
           </Box>
         )}
         {hasDocs && (
-          <Box $gap="6px" $overflow="auto">
+          <Box $gap="6px">
             <Box
               $direction="row"
               $padding={{ horizontal: 'xs' }}
@@ -117,30 +122,28 @@ export const DocsGrid = ({
               )}
             </Box>
 
+            {/* Body */}
             {data?.pages.map((currentPage) => {
               return currentPage.results.map((doc) => (
                 <DocsGridItem doc={doc} key={doc.id} />
               ));
             })}
-
-            {hasNextPage && !loading && (
-              <InView
-                data-testid="infinite-scroll-trigger"
-                as="div"
-                onChange={loadMore}
-              >
-                {!isFetching && hasNextPage && (
-                  <Button
-                    onClick={() => void fetchNextPage()}
-                    color="primary-text"
-                  >
-                    {t('More docs')}
-                  </Button>
-                )}
-              </InView>
-            )}
           </Box>
         )}
+
+        {hasNextPage && !loading && (
+          <InView
+            data-testid="infinite-scroll-trigger"
+            as="div"
+            onChange={loadMore}
+          >
+            {!isFetching && hasNextPage && (
+              <Button onClick={() => void fetchNextPage()} color="primary-text">
+                {t('More docs')}
+              </Button>
+            )}
+          </InView>
+        )}
       </Card>
     </Box>
   );

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

@@ -54,7 +54,6 @@ export const DocsGridItem = ({ doc }: DocsGridItemProps) => {
           $css={css`
             flex: ${flexLeft};
             align-items: center;
-            min-width: 0;
           `}
           href={`/docs/${doc.id}`}
         >
@@ -65,7 +64,6 @@ export const DocsGridItem = ({ doc }: DocsGridItemProps) => {
             $gap={spacings.xs}
             $flex={flexLeft}
             $padding={{ right: isDesktop ? 'md' : '3xs' }}
-            $maxWidth="100%"
           >
             <SimpleDocItem isPinned={doc.is_favorite} doc={doc} />
             {showAccesses && (

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

@@ -38,7 +38,7 @@ export const SimpleDocItem = ({
   const { untitledDocument } = useTrans();
 
   return (
-    <Box $direction="row" $gap={spacings.sm} $overflow="auto">
+    <Box $direction="row" $gap={spacings.sm}>
       <Box
         $direction="row"
         $align="center"
@@ -53,7 +53,7 @@ export const SimpleDocItem = ({
           <SimpleFileIcon aria-label={t('Simple document icon')} />
         )}
       </Box>
-      <Box $justify="center" $overflow="auto">
+      <Box $justify="center">
         <Text
           aria-describedby="doc-title"
           aria-label={doc.title}

src/frontend/apps/impress/src/features/home/components/HomeBanner.tsx

@@ -55,7 +55,7 @@ export default function HomeBanner() {
             $textAlign="center"
             $margin="none"
             $css={css`
-              line-height: ${!isMobile ? '56px' : '45px'};
+              line-height: 56px;
             `}
           >
             {t('Collaborative writing, Simplified.')}
@@ -74,7 +74,7 @@ export default function HomeBanner() {
             <ProConnectButton />
           ) : (
             <Button
-              onClick={() => gotoLogin()}
+              onClick={gotoLogin}
               icon={
                 <Text $isMaterialIcon $color="white">
                   bolt

src/frontend/apps/impress/src/features/home/components/HomeSection.tsx

@@ -116,8 +116,8 @@ export const HomeSection = ({
             `}
             $variation="1000"
             $weight="bold"
-            $size={!isSmallDevice ? 'xs-alt' : isSmallMobile ? 'h6' : 'h4'}
-            $textAlign="left"
+            $size={!isSmallDevice ? 'xs-alt' : 'h4'}
+            $textAlign={isSmallMobile ? 'center' : 'left'}
             $margin="none"
           >
             {title}

src/frontend/apps/impress/src/features/language/LanguagePicker.tsx

@@ -1,61 +1,84 @@
+import { Select } from '@openfun/cunningham-react';
 import { Settings } from 'luxon';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { css } from 'styled-components';
+import styled from 'styled-components';
 
-import { DropdownMenu, Text } from '@/components/';
+import { Box, Text } from '@/components/';
 import { LANGUAGES_ALLOWED } from '@/i18n/conf';
 
+const SelectStyled = styled(Select)<{ $isSmall?: boolean }>`
+  flex-shrink: 0;
+  width: auto;
+
+  .c__select__wrapper {
+    min-height: 2rem;
+    height: auto;
+    border-color: transparent;
+    padding: 0 0.15rem 0 0.45rem;
+    border-radius: 1px;
+
+    .labelled-box .labelled-box__children {
+      padding-right: 2rem;
+
+      .c_select__render .typo-text {
+        ${({ $isSmall }) => $isSmall && `display: none;`}
+      }
+    }
+
+    &:hover {
+      box-shadow: none !important;
+    }
+  }
+`;
+
 export const LanguagePicker = () => {
   const { t, i18n } = useTranslation();
   const { preload: languages } = i18n.options;
-  const language = i18n.language;
-  Settings.defaultLocale = language;
+  Settings.defaultLocale = i18n.language;
 
   const optionsPicker = useMemo(() => {
     return (languages || []).map((lang) => ({
-      label: LANGUAGES_ALLOWED[lang],
-      isSelected: language === lang,
-      callback: () => {
-        i18n.changeLanguage(lang).catch((err) => {
-          console.error('Error changing language', err);
-        });
-      },
+      value: lang,
+      label: lang,
+      render: () => (
+        <Box
+          className="c_select__render"
+          $direction="row"
+          $gap="0.7rem"
+          $align="center"
+        >
+          <Text
+            $isMaterialIcon
+            $size="1rem"
+            $theme="primary"
+            $weight="bold"
+            $variation="800"
+          >
+            translate
+          </Text>
+          <Text $theme="primary" $weight="500" $variation="800">
+            {LANGUAGES_ALLOWED[lang]}
+          </Text>
+        </Box>
+      ),
     }));
-  }, [i18n, language, languages]);
+  }, [languages]);
 
   return (
-    <DropdownMenu
+    <SelectStyled
+      label={t('Language')}
+      showLabelWhenSelected={false}
+      clearable={false}
+      hideLabel
+      defaultValue={i18n.language}
+      className="c_select__no_bg"
       options={optionsPicker}
-      showArrow
-      buttonCss={css`
-        &:hover {
-          background-color: var(
-            --c--components--button--primary-text--background--color-hover
-          );
-        }
-        border-radius: 4px;
-        padding: 0.5rem 0.6rem;
-        & > div {
-          gap: 0.2rem;
-          display: flex;
-        }
-        & .material-icons {
-          color: var(--c--components--button--primary-text--color) !important;
-        }
-      `}
-    >
-      <Text
-        $theme="primary"
-        aria-label={t('Language')}
-        $direction="row"
-        $gap="0.5rem"
-      >
-        <Text $isMaterialIcon $color="inherit" $size="xl">
-          translate
-        </Text>
-        {LANGUAGES_ALLOWED[language]}
-      </Text>
-    </DropdownMenu>
+      onChange={(e) => {
+        i18n.changeLanguage(e.target.value as string).catch((err) => {
+          console.error('Error changing language', err);
+        });
+      }}
+    />
   );
 };

src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavoriteItem.tsx

@@ -39,7 +39,7 @@ export const LeftPanelFavoriteItem = ({ doc }: LeftPanelFavoriteItemProps) => {
       `}
       key={doc.id}
     >
-      <StyledLink href={`/docs/${doc.id}`} $css="overflow: auto;">
+      <StyledLink href={`/docs/${doc.id}`}>
         <SimpleDocItem showAccesses doc={doc} />
       </StyledLink>
       <div className="pinned-actions">

src/frontend/apps/impress/src/layouts/MainLayout.tsx

@@ -19,8 +19,8 @@ export function MainLayout({
 }: PropsWithChildren<MainLayoutProps>) {
   const { isDesktop } = useResponsiveStore();
   const { colorsTokens } = useCunninghamTheme();
+
   const colors = colorsTokens();
-  const currentBackgroundColor = !isDesktop ? 'white' : backgroundColor;
 
   return (
     <div>
@@ -39,10 +39,10 @@ export function MainLayout({
           $width="100%"
           $height={`calc(100dvh - ${HEADER_HEIGHT}px)`}
           $padding={{
-            all: isDesktop ? 'base' : '0',
+            all: isDesktop ? 'base' : '2xs',
           }}
           $background={
-            currentBackgroundColor === 'white'
+            backgroundColor === 'white'
               ? colors['greyscale-000']
               : colors['greyscale-050']
           }

src/frontend/apps/impress/src/layouts/PageLayout.tsx

@@ -6,27 +6,17 @@ import { HEADER_HEIGHT, Header } from '@/features/header';
 import { LeftPanel } from '@/features/left-panel';
 import { useResponsiveStore } from '@/stores';
 
-interface PageLayoutProps {
-  withFooter?: boolean;
-}
-
-export function PageLayout({
-  children,
-  withFooter = true,
-}: PropsWithChildren<PageLayoutProps>) {
+export function PageLayout({ children }: PropsWithChildren) {
   const { isDesktop } = useResponsiveStore();
 
   return (
-    <Box
-      $minHeight={`calc(100vh - ${HEADER_HEIGHT}px)`}
-      $margin={{ top: `${HEADER_HEIGHT}px` }}
-    >
+    <Box $minHeight="100vh" $margin={{ top: `${HEADER_HEIGHT}px` }}>
       <Header />
       <Box as="main" $width="100%" $css="flex-grow:1;">
         {!isDesktop && <LeftPanel />}
         {children}
       </Box>
-      {withFooter && <Footer />}
+      <Footer />
     </Box>
   );
 }

src/frontend/apps/impress/src/pages/401.tsx

@@ -1,57 +0,0 @@
-import { Button } from '@openfun/cunningham-react';
-import Image from 'next/image';
-import { useRouter } from 'next/router';
-import { ReactElement, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import img401 from '@/assets/icons/icon-401.png';
-import { Box, Text } from '@/components';
-import { gotoLogin, useAuth } from '@/features/auth';
-import { PageLayout } from '@/layouts';
-import { NextPageWithLayout } from '@/types/next';
-
-const Page: NextPageWithLayout = () => {
-  const { t } = useTranslation();
-  const { authenticated } = useAuth();
-  const { replace } = useRouter();
-
-  useEffect(() => {
-    if (authenticated) {
-      void replace(`/`);
-    }
-  }, [authenticated, replace]);
-
-  return (
-    <Box
-      $align="center"
-      $margin="auto"
-      $gap="1rem"
-      $padding={{ bottom: '2rem' }}
-    >
-      <Image
-        src={img401}
-        alt={t('Image 401')}
-        style={{
-          maxWidth: '100%',
-          height: 'auto',
-        }}
-      />
-
-      <Box $align="center" $gap="0.8rem">
-        <Text as="p" $textAlign="center" $maxWidth="350px" $theme="primary">
-          {t('Log in to access the document.')}
-        </Text>
-
-        <Button onClick={() => gotoLogin(false)} aria-label={t('Login')}>
-          {t('Login')}
-        </Button>
-      </Box>
-    </Box>
-  );
-};
-
-Page.getLayout = function getLayout(page: ReactElement) {
-  return <PageLayout withFooter={false}>{page}</PageLayout>;
-};
-
-export default Page;

src/frontend/apps/impress/src/pages/403.tsx

@@ -1,60 +0,0 @@
-import { Button } from '@openfun/cunningham-react';
-import Image from 'next/image';
-import { ReactElement } from 'react';
-import { useTranslation } from 'react-i18next';
-import styled from 'styled-components';
-
-import img403 from '@/assets/icons/icon-403.png';
-import { Box, StyledLink, Text } from '@/components';
-import { PageLayout } from '@/layouts';
-import { NextPageWithLayout } from '@/types/next';
-
-const StyledButton = styled(Button)`
-  width: fit-content;
-`;
-
-const Page: NextPageWithLayout = () => {
-  const { t } = useTranslation();
-
-  return (
-    <Box
-      $align="center"
-      $margin="auto"
-      $gap="1rem"
-      $padding={{ bottom: '2rem' }}
-    >
-      <Image
-        src={img403}
-        alt={t('Image 403')}
-        style={{
-          maxWidth: '100%',
-          height: 'auto',
-        }}
-      />
-
-      <Box $align="center" $gap="0.8rem">
-        <Text as="p" $textAlign="center" $maxWidth="350px" $theme="primary">
-          {t('You do not have permission to view this document.')}
-        </Text>
-
-        <StyledLink href="/">
-          <StyledButton
-            icon={
-              <Text $isMaterialIcon $color="white">
-                house
-              </Text>
-            }
-          >
-            {t('Home')}
-          </StyledButton>
-        </StyledLink>
-      </Box>
-    </Box>
-  );
-};
-
-Page.getLayout = function getLayout(page: ReactElement) {
-  return <PageLayout withFooter={false}>{page}</PageLayout>;
-};
-
-export default Page;

src/frontend/apps/impress/src/pages/404.tsx

@@ -5,7 +5,7 @@ import styled from 'styled-components';
 
 import Icon404 from '@/assets/icons/icon-404.svg';
 import { Box, StyledLink, Text } from '@/components';
-import { PageLayout } from '@/layouts';
+import { MainLayout } from '@/layouts';
 import { NextPageWithLayout } from '@/types/next';
 
 const StyledButton = styled(Button)`
@@ -33,15 +33,7 @@ const Page: NextPageWithLayout = () => {
 
       <Box $margin={{ top: 'large' }}>
         <StyledLink href="/">
-          <StyledButton
-            icon={
-              <Text $isMaterialIcon $color="white">
-                house
-              </Text>
-            }
-          >
-            {t('Home')}
-          </StyledButton>
+          <StyledButton>{t('Back to home page')}</StyledButton>
         </StyledLink>
       </Box>
     </Box>
@@ -49,7 +41,7 @@ const Page: NextPageWithLayout = () => {
 };
 
 Page.getLayout = function getLayout(page: ReactElement) {
-  return <PageLayout withFooter={false}>{page}</PageLayout>;
+  return <MainLayout>{page}</MainLayout>;
 };
 
 export default Page;

src/frontend/apps/impress/src/pages/docs/[id]/index.tsx

@@ -5,7 +5,7 @@ import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 
 import { Box, Text, TextErrors } from '@/components';
-import { setAuthUrl } from '@/features/auth';
+import { gotoLogin } from '@/features/auth';
 import { DocEditor } from '@/features/docs/doc-editor';
 import {
   Doc,
@@ -99,19 +99,13 @@ const DocPage = ({ id }: DocProps) => {
   }, [addTask, doc?.id, queryClient]);
 
   if (isError && error) {
-    if (error.status === 403) {
-      void replace(`/403`);
-      return null;
-    }
-
     if (error.status === 404) {
       void replace(`/404`);
       return null;
     }
 
     if (error.status === 401) {
-      setAuthUrl();
-      void replace(`/401`);
+      gotoLogin();
       return null;
     }
 

src/frontend/apps/impress/src/pages/offline/index.tsx

@@ -31,15 +31,7 @@ const Page: NextPageWithLayout = () => {
 
       <Box $margin={{ top: 'large' }}>
         <StyledLink href="/">
-          <StyledButton
-            icon={
-              <Text $isMaterialIcon $color="white">
-                house
-              </Text>
-            }
-          >
-            {t('Home')}
-          </StyledButton>
+          <StyledButton>{t('Back to home page')}</StyledButton>
         </StyledLink>
       </Box>
     </Box>

src/helm/impress/values.yaml

@@ -170,8 +170,6 @@ ingressMedia:
     nginx.ingress.kubernetes.io/auth-url: https://impress.example.com/api/v1.0/documents/media-auth/
     nginx.ingress.kubernetes.io/auth-response-headers: "Authorization, X-Amz-Date, X-Amz-Content-SHA256"
     nginx.ingress.kubernetes.io/upstream-vhost: minio.impress.svc.cluster.local:9000
-    nginx.ingress.kubernetes.io/configuration-snippet: |
-      add_header Content-Security-Policy "default-src 'none'" always;
 
 ## @param serviceMedia.host
 ## @param serviceMedia.port