wip

In the new interface, the export modal changes a little.

- We put the buttons on the right
- We remove the alert
- We transform the radio into select

.github/workflows/docker-hub.yml

@@ -6,6 +6,7 @@ on:
   push:
     branches:
       - 'main'
+      - 'main-new-ui'
     tags:
       - 'v*'
   pull_request:

CHANGELOG.md

@@ -17,11 +17,19 @@ and this project adheres to
 - 🌐(backend) add german translation #259
 - 🌐(frontend) Add German translation #255
 - ✨(frontend) Add a broadcast store #387
+- ✨(frontend) WIP: New ui
+- 💄(frontend) Add left panel #420
+- 💄(frontend) updating the header and leftpanel for responsive #421
+- ✨(backend) config endpoint #425
+- 💄(frontend) update DocsGrid component #431
 - ✨(backend) whitelist pod's IP address #443
 - ✨(backend) config endpoint #425
 - ✨(frontend) config endpoint #424
 - ✨(frontend) add sentry #424
 - ✨(frontend) add crisp chatbot #450
+- 💄(frontend) update DocsGridOptions component #432
+- 💄(frontend) update DocHeader ui #446
+
 
 ## Changed
 

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

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

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

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

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

@@ -18,14 +18,11 @@ test.describe('Doc Create', () => {
     const header = page.locator('header').first();
     await header.locator('h2').getByText('Docs').click();
 
-    const datagrid = page.getByLabel('Datagrid of the documents page 1');
-    const datagridTable = datagrid.getByRole('table');
+    await expect(page.getByTestId('docs-grid-loader')).toBeVisible();
 
-    await expect(datagrid.getByLabel('Loading data')).toBeHidden({
-      timeout: 10000,
-    });
-    await expect(datagridTable.getByText(docTitle)).toBeVisible({
-      timeout: 5000,
-    });
+    const docsGrid = page.getByTestId('docs-grid');
+    await expect(docsGrid).toBeVisible();
+    await expect(page.getByTestId('docs-grid-loader')).toBeHidden();
+    await expect(docsGrid.getByText(docTitle)).toBeVisible();
   });
 });

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

@@ -2,7 +2,12 @@ import path from 'path';
 
 import { expect, test } from '@playwright/test';
 
-import { createDoc, goToGridDoc, mockedDocument } from './common';
+import {
+  createDoc,
+  goToGridDoc,
+  mockedDocument,
+  verifyDocName,
+} from './common';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/');
@@ -90,7 +95,7 @@ test.describe('Doc Editor', () => {
     });
 
     const randomDoc = await createDoc(page, 'doc-editor', browserName, 1);
-    await expect(page.locator('h2').getByText(randomDoc[0])).toBeVisible();
+    await verifyDocName(page, randomDoc[0]);
 
     const webSocket = await webSocketPromise;
     expect(webSocket.url()).toContain('ws://localhost:4444/');
@@ -110,7 +115,7 @@ test.describe('Doc Editor', () => {
   }) => {
     const randomDoc = await createDoc(page, 'doc-markdown', browserName, 1);
 
-    await expect(page.locator('h2').getByText(randomDoc[0])).toBeVisible();
+    await verifyDocName(page, randomDoc[0]);
 
     const editor = page.locator('.ProseMirror');
     await editor.click();
@@ -135,7 +140,7 @@ test.describe('Doc Editor', () => {
   }) => {
     // Check the first doc
     const [firstDoc] = await createDoc(page, 'doc-switch-1', browserName, 1);
-    await expect(page.locator('h2').getByText(firstDoc)).toBeVisible();
+    await verifyDocName(page, firstDoc);
 
     const editor = page.locator('.ProseMirror');
     await editor.click();
@@ -144,7 +149,8 @@ test.describe('Doc Editor', () => {
 
     // Check the second doc
     const [secondDoc] = await createDoc(page, 'doc-switch-2', browserName, 1);
-    await expect(page.locator('h2').getByText(secondDoc)).toBeVisible();
+    await verifyDocName(page, secondDoc);
+
     await expect(editor.getByText('Hello World Doc 1')).toBeHidden();
     await editor.click();
     await editor.fill('Hello World Doc 2');
@@ -154,7 +160,7 @@ test.describe('Doc Editor', () => {
     await goToGridDoc(page, {
       title: firstDoc,
     });
-    await expect(page.locator('h2').getByText(firstDoc)).toBeVisible();
+    await verifyDocName(page, firstDoc);
     await expect(editor.getByText('Hello World Doc 2')).toBeHidden();
     await expect(editor.getByText('Hello World Doc 1')).toBeVisible();
   });
@@ -165,7 +171,7 @@ test.describe('Doc Editor', () => {
   }) => {
     // Check the first doc
     const [doc] = await createDoc(page, 'doc-saves-change', browserName, 1);
-    await expect(page.locator('h2').getByText(doc)).toBeVisible();
+    await verifyDocName(page, doc);
 
     const editor = page.locator('.ProseMirror');
     await editor.click();
@@ -176,7 +182,7 @@ test.describe('Doc Editor', () => {
       nthRow: 2,
     });
 
-    await expect(page.locator('h2').getByText(secondDoc)).toBeVisible();
+    await verifyDocName(page, secondDoc);
 
     await goToGridDoc(page, {
       title: doc,
@@ -191,7 +197,8 @@ test.describe('Doc Editor', () => {
 
     // Check the first doc
     const doc = await goToGridDoc(page);
-    await expect(page.locator('h2').getByText(doc)).toBeVisible();
+
+    await verifyDocName(page, doc);
 
     const editor = page.locator('.ProseMirror');
     await editor.click();

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

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

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

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

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

@@ -6,6 +6,7 @@ import {
   mockedAccesses,
   mockedDocument,
   mockedInvitations,
+  verifyDocName,
 } from './common';
 
 test.beforeEach(async ({ page }) => {
@@ -59,88 +60,35 @@ test.describe('Doc Header', () => {
     const card = page.getByLabel(
       'It is the card information about the document.',
     );
-    await expect(card.locator('a').getByText('home')).toBeVisible();
-    await expect(card.locator('h2').getByText('Mocked document')).toBeVisible();
-    await expect(card.getByText('Public')).toBeVisible();
-    await expect(
-      card.getByText('Created at 09/01/2021, 11:00 AM'),
-    ).toBeVisible();
-    await expect(
-      card.getByText('Owners: Super Owner / super2@owner.com'),
-    ).toBeVisible();
-    await expect(card.getByText('Your role: Owner')).toBeVisible();
+
+    const docTitle = card.getByRole('textbox', { name: 'doc title input' });
+    await expect(docTitle).toBeVisible();
+
+    await expect(card.getByText('Public document')).toBeVisible();
+
+    await expect(card.getByText('Owner ·')).toBeVisible();
     await expect(page.getByRole('button', { name: 'Share' })).toBeVisible();
+    await expect(page.getByRole('button', { name: 'download' })).toBeVisible();
+    await expect(
+      page.getByRole('button', { name: 'Open the document options' }),
+    ).toBeVisible();
   });
 
   test('it updates the title doc', async ({ page, browserName }) => {
-    const [randomDoc] = await createDoc(page, 'doc-update', browserName, 1);
-
-    await page.getByRole('heading', { name: randomDoc }).fill(' ');
-    await page.getByText('Created at').click();
-
-    await expect(
-      page.getByRole('heading', { name: 'Untitled document' }),
-    ).toBeVisible();
-  });
-
-  test('it updates the title doc from editor heading', async ({ page }) => {
-    await page
-      .getByRole('button', {
-        name: 'Create a new document',
-      })
-      .click();
-
-    const docHeader = page.getByLabel(
-      'It is the card information about the document.',
-    );
-
-    await expect(
-      docHeader.getByRole('heading', { name: 'Untitled document', level: 2 }),
-    ).toBeVisible();
-
-    const editor = page.locator('.ProseMirror');
-
-    await editor.locator('h1').click();
-    await page.keyboard.type('Hello World', { delay: 100 });
-
-    await expect(
-      docHeader.getByRole('heading', { name: 'Hello World', level: 2 }),
-    ).toBeVisible();
-
-    await expect(
-      page.getByText('Document title updated successfully'),
-    ).toBeVisible();
-
-    await docHeader
-      .getByRole('heading', { name: 'Hello World', level: 2 })
-      .fill('Top World');
-
-    await editor.locator('h1').fill('Super World');
-
-    await expect(
-      docHeader.getByRole('heading', { name: 'Top World', level: 2 }),
-    ).toBeVisible();
-
-    await editor.locator('h1').fill('');
-
-    await docHeader
-      .getByRole('heading', { name: 'Top World', level: 2 })
-      .fill(' ');
-
-    await page.getByText('Created at').click();
-
-    await expect(
-      docHeader.getByRole('heading', { name: 'Untitled  document', level: 2 }),
-    ).toBeVisible();
+    await createDoc(page, 'doc-update', browserName, 1);
+    const docTitle = page.getByRole('textbox', { name: 'doc title input' });
+    await expect(docTitle).toBeVisible();
+    await docTitle.fill('Hello World');
+    await docTitle.blur();
+    await verifyDocName(page, 'Hello World');
   });
 
   test('it deletes the doc', async ({ page, browserName }) => {
     const [randomDoc] = await createDoc(page, 'doc-delete', browserName, 1);
-    await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
 
     await page.getByLabel('Open the document options').click();
     await page
-      .getByRole('button', {
+      .getByRole('option', {
         name: 'Delete document',
       })
       .click();
@@ -159,9 +107,7 @@ test.describe('Doc Header', () => {
       page.getByText('The document has been deleted.'),
     ).toBeVisible();
 
-    await expect(
-      page.getByRole('button', { name: 'Create a new document' }),
-    ).toBeVisible();
+    await expect(page.getByRole('button', { name: 'New do' })).toBeVisible();
 
     const row = page
       .getByLabel('Datagrid of the documents page 1')
@@ -195,16 +141,13 @@ test.describe('Doc Header', () => {
 
     await goToGridDoc(page);
 
-    await expect(
-      page.locator('h2').getByText('Mocked document'),
-    ).toHaveAttribute('contenteditable');
+    await expect(page.getByRole('button', { name: 'download' })).toBeVisible();
 
     await page.getByLabel('Open the document options').click();
 
-    await expect(page.getByRole('button', { name: 'Export' })).toBeVisible();
     await expect(
-      page.getByRole('button', { name: 'Delete document' }),
-    ).toBeHidden();
+      page.getByRole('option', { name: 'Delete document' }),
+    ).toBeDisabled();
 
     // Click somewhere else to close the options
     await page.click('body', { position: { x: 0, y: 0 } });
@@ -218,29 +161,22 @@ test.describe('Doc Header', () => {
         name: 'Visibility',
       }),
     ).not.toHaveAttribute('disabled');
-    await expect(shareModal.getByText('Search by email')).toBeVisible();
 
-    const invitationCard = shareModal.getByLabel('List invitation card');
-    await expect(
-      invitationCard.getByText('test@invitation.test'),
-    ).toBeVisible();
-    await expect(
-      invitationCard.getByRole('combobox', { name: 'Role' }),
-    ).toBeEnabled();
-    await expect(
-      invitationCard.getByRole('button', {
-        name: 'delete',
-      }),
-    ).toBeEnabled();
+    const inputSearch = page.getByRole('combobox', {
+      name: 'Find a member to add to the document',
+    });
+    await expect(inputSearch).toBeVisible();
+
+    const member = shareModal
+      .getByTestId('doc-share-member-row-test@accesses.test')
+      .first();
+    await expect(member.getByText('test@accesses.test')).toBeVisible();
+    await expect(member.getByLabel('doc-role-dropdown')).toBeVisible();
+    await member.getByRole('button', { name: 'more_vert' }).click();
 
-    const memberCard = shareModal.getByLabel('List members card');
-    await expect(memberCard.getByText('test@accesses.test')).toBeVisible();
     await expect(
-      memberCard.getByRole('combobox', { name: 'Role' }),
-    ).toBeEnabled();
-    await expect(
-      memberCard.getByRole('button', {
-        name: 'delete',
+      page.getByRole('option', {
+        name: 'Delete',
       }),
     ).toBeEnabled();
   });
@@ -273,16 +209,12 @@ test.describe('Doc Header', () => {
 
     await goToGridDoc(page);
 
-    await expect(
-      page.locator('h2').getByText('Mocked document'),
-    ).toHaveAttribute('contenteditable');
-
+    await expect(page.getByRole('button', { name: 'download' })).toBeVisible();
     await page.getByLabel('Open the document options').click();
 
-    await expect(page.getByRole('button', { name: 'Export' })).toBeVisible();
     await expect(
-      page.getByRole('button', { name: 'Delete document' }),
-    ).toBeHidden();
+      page.getByRole('option', { name: 'Delete document' }),
+    ).toBeDisabled();
 
     // Click somewhere else to close the options
     await page.click('body', { position: { x: 0, y: 0 } });
@@ -296,12 +228,17 @@ test.describe('Doc Header', () => {
         name: 'Visibility',
       }),
     ).toHaveAttribute('disabled');
-    await expect(shareModal.getByText('Search by email')).toBeHidden();
+    const inputSearch = page.getByRole('combobox', {
+      name: 'Find a member to add to the document',
+    });
+    await expect(inputSearch).toBeHidden();
 
     const invitationCard = shareModal.getByLabel('List invitation card');
-    await expect(
-      invitationCard.getByText('test@invitation.test'),
-    ).toBeVisible();
+
+    const invitationRow = shareModal.getByTestId(
+      `doc-share-invitation-row-test@invitation.test`,
+    );
+    await expect(invitationRow).toBeVisible();
     await expect(
       invitationCard.getByRole('combobox', { name: 'Role' }),
     ).toHaveAttribute('disabled');
@@ -351,16 +288,12 @@ test.describe('Doc Header', () => {
 
     await goToGridDoc(page);
 
-    await expect(
-      page.locator('h2').getByText('Mocked document'),
-    ).not.toHaveAttribute('contenteditable');
-
+    await expect(page.getByRole('button', { name: 'download' })).toBeVisible();
     await page.getByLabel('Open the document options').click();
 
-    await expect(page.getByRole('button', { name: 'Export' })).toBeVisible();
     await expect(
       page.getByRole('button', { name: 'Delete document' }),
-    ).toBeHidden();
+    ).toBeDisabled();
 
     // Click somewhere else to close the options
     await page.click('body', { position: { x: 0, y: 0 } });
@@ -414,7 +347,7 @@ test.describe('Doc Header', () => {
     // create page and navigate to it
     await page
       .getByRole('button', {
-        name: 'Create a new document',
+        name: 'New doc',
       })
       .click();
 
@@ -449,7 +382,7 @@ test.describe('Doc Header', () => {
     // create page and navigate to it
     await page
       .getByRole('button', {
-        name: 'Create a new document',
+        name: 'New doc',
       })
       .click();
 
@@ -501,6 +434,7 @@ test.describe('Documents Header mobile', () => {
 
     await goToGridDoc(page);
 
+    await page.getByLabel('Open the document options').click();
     await page.getByRole('button', { name: 'Share' }).click();
 
     await expect(page.getByLabel('Share modal')).toBeVisible();

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

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

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

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

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

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

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

@@ -1,6 +1,6 @@
 import { expect, test } from '@playwright/test';
 
-import { createDoc, goToGridDoc } from './common';
+import { createDoc, goToGridDoc, verifyDocName } from './common';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/');
@@ -17,7 +17,7 @@ test.describe('Doc Table Content', () => {
       1,
     );
 
-    await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
+    await verifyDocName(page, randomDoc);
 
     await page.getByLabel('Open the document options').click();
     await page
@@ -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
@@ -107,7 +108,7 @@ test.describe('Doc Table Content', () => {
       1,
     );
 
-    await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
+    await verifyDocName(page, randomDoc);
     await expect(page.getByLabel('Open the panel')).toBeHidden();
 
     const editor = page.locator('.ProseMirror');

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

@@ -1,6 +1,11 @@
 import { expect, test } from '@playwright/test';
 
-import { createDoc, goToGridDoc, mockedDocument } from './common';
+import {
+  createDoc,
+  goToGridDoc,
+  mockedDocument,
+  verifyDocName,
+} from './common';
 
 test.beforeEach(async ({ page }) => {
   await page.goto('/');
@@ -10,7 +15,7 @@ test.describe('Doc Version', () => {
   test('it displays the doc versions', async ({ page, browserName }) => {
     const [randomDoc] = await createDoc(page, 'doc-version', browserName, 1);
 
-    await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
+    await verifyDocName(page, randomDoc);
 
     await page.getByLabel('Open the document options').click();
     await page
@@ -79,12 +84,12 @@ test.describe('Doc Version', () => {
 
     await goToGridDoc(page);
 
-    await expect(page.locator('h2').getByText('Mocked document')).toBeVisible();
+    await verifyDocName(page, 'Mocked document');
 
     await page.getByLabel('Open the document options').click();
     await expect(
       page.getByRole('button', { name: 'Version history' }),
-    ).toBeHidden();
+    ).toBeDisabled();
 
     await page.getByRole('button', { name: 'Table of content' }).click();
 
@@ -95,12 +100,12 @@ test.describe('Doc Version', () => {
 
   test('it restores the doc version', async ({ page, browserName }) => {
     const [randomDoc] = await createDoc(page, 'doc-version', browserName, 1);
-
-    await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
+    await verifyDocName(page, randomDoc);
 
     await page.locator('.bn-block-outer').last().click();
     await page.locator('.bn-block-outer').last().fill('Hello');
 
+    expect(true).toBe(true);
     await goToGridDoc(page, {
       title: randomDoc,
     });
@@ -152,7 +157,7 @@ test.describe('Doc Version', () => {
   }) => {
     const [randomDoc] = await createDoc(page, 'doc-version', browserName, 1);
 
-    await expect(page.locator('h2').getByText(randomDoc)).toBeVisible();
+    await verifyDocName(page, randomDoc);
 
     const editor = page.locator('.ProseMirror');
     await editor.locator('.bn-block-outer').last().click();

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

@@ -1,6 +1,6 @@
 import { expect, test } from '@playwright/test';
 
-import { createDoc, keyCloakSignIn } from './common';
+import { createDoc, keyCloakSignIn, verifyDocName } from './common';
 
 const browsersName = ['chromium', 'webkit', 'firefox'];
 
@@ -85,7 +85,7 @@ test.describe('Doc Visibility: Restricted', () => {
       1,
     );
 
-    await expect(page.getByRole('heading', { name: docTitle })).toBeVisible();
+    await verifyDocName(page, docTitle);
 
     const urlDoc = page.url();
 
@@ -111,7 +111,7 @@ test.describe('Doc Visibility: Restricted', () => {
 
     const [docTitle] = await createDoc(page, 'Restricted auth', browserName, 1);
 
-    await expect(page.getByRole('heading', { name: docTitle })).toBeVisible();
+    await verifyDocName(page, docTitle);
 
     const urlDoc = page.url();
 
@@ -139,26 +139,26 @@ test.describe('Doc Visibility: Restricted', () => {
 
     const [docTitle] = await createDoc(page, 'Restricted auth', browserName, 1);
 
-    await expect(page.getByRole('heading', { name: docTitle })).toBeVisible();
+    await verifyDocName(page, docTitle);
 
     await page.getByRole('button', { name: 'Share' }).click();
 
-    const inputSearch = page.getByLabel(/Find a member to add to the document/);
+    const inputSearch = page.getByRole('combobox', {
+      name: '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();
+    await page.getByTestId(`search-user-row-${username}`).click();
 
     // Choose a role
-    await page.getByRole('combobox', { name: /Choose a role/ }).click();
+
+    const container = page.getByTestId('doc-share-add-member-list');
+    await container.getByLabel('doc-role-dropdown').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.getByRole('button', { name: 'Invite' }).click();
 
     await page.locator('.c__modal__backdrop').click({
       position: { x: 0, y: 0 },
@@ -176,7 +176,7 @@ test.describe('Doc Visibility: Restricted', () => {
 
     await page.goto(urlDoc);
 
-    await expect(page.locator('h2').getByText(docTitle)).toBeVisible();
+    await verifyDocName(page, docTitle);
     await expect(page.getByRole('button', { name: 'Share' })).toBeVisible();
   });
 });
@@ -198,7 +198,7 @@ test.describe('Doc Visibility: Public', () => {
       1,
     );
 
-    await expect(page.getByRole('heading', { name: docTitle })).toBeVisible();
+    await verifyDocName(page, docTitle);
 
     await page.getByRole('button', { name: 'Share' }).click();
     await page
@@ -227,10 +227,14 @@ test.describe('Doc Visibility: Public', () => {
       position: { x: 0, y: 0 },
     });
 
+    const cardContainer = page.getByLabel(
+      'It is the card information about the document.',
+    );
+
+    await expect(cardContainer.getByTestId('public-icon')).toBeVisible();
+
     await expect(
-      page
-        .getByLabel('It is the card information about the document.')
-        .getByText('Public', { exact: true }),
+      cardContainer.getByText('Public document', { exact: true }),
     ).toBeVisible();
 
     const urlDoc = page.url();
@@ -261,7 +265,7 @@ test.describe('Doc Visibility: Public', () => {
 
     const [docTitle] = await createDoc(page, 'Public editable', browserName, 1);
 
-    await expect(page.getByRole('heading', { name: docTitle })).toBeVisible();
+    await verifyDocName(page, docTitle);
 
     await page.getByRole('button', { name: 'Share' }).click();
     await page
@@ -290,10 +294,14 @@ test.describe('Doc Visibility: Public', () => {
       position: { x: 0, y: 0 },
     });
 
+    const cardContainer = page.getByLabel(
+      'It is the card information about the document.',
+    );
+
+    await expect(cardContainer.getByTestId('public-icon')).toBeVisible();
+
     await expect(
-      page
-        .getByLabel('It is the card information about the document.')
-        .getByText('Public', { exact: true }),
+      cardContainer.getByText('Public document', { exact: true }),
     ).toBeVisible();
 
     const urlDoc = page.url();
@@ -308,7 +316,7 @@ test.describe('Doc Visibility: Public', () => {
 
     await page.goto(urlDoc);
 
-    await expect(page.locator('h2').getByText(docTitle)).toBeVisible();
+    await verifyDocName(page, docTitle);
     await expect(page.getByRole('button', { name: 'Share' })).toBeHidden();
     await expect(
       page.getByText('Read only, you cannot edit this document'),
@@ -333,7 +341,7 @@ test.describe('Doc Visibility: Authenticated', () => {
       1,
     );
 
-    await expect(page.getByRole('heading', { name: docTitle })).toBeVisible();
+    await verifyDocName(page, docTitle);
 
     await page.getByRole('button', { name: 'Share' }).click();
     await page
@@ -385,7 +393,7 @@ test.describe('Doc Visibility: Authenticated', () => {
       1,
     );
 
-    await expect(page.getByRole('heading', { name: docTitle })).toBeVisible();
+    await verifyDocName(page, docTitle);
 
     await page.getByRole('button', { name: 'Share' }).click();
     await page
@@ -426,15 +434,17 @@ test.describe('Doc Visibility: Authenticated', () => {
       page.getByText('Read only, you cannot edit this document'),
     ).toBeVisible();
 
-    const shareModal = page.getByLabel('Share modal');
-
     await expect(
-      shareModal.getByRole('combobox', {
+      page.getByRole('combobox', {
         name: 'Visibility',
       }),
     ).toHaveAttribute('disabled');
-    await expect(shareModal.getByText('Search by email')).toBeHidden();
-    await expect(shareModal.getByLabel('List members card')).toBeHidden();
+
+    const inputSearch = page.getByRole('combobox', {
+      name: 'Find a member to add to the document',
+    });
+
+    await expect(inputSearch).toBeHidden();
   });
 
   test('It checks a authenticated doc in editable mode', async ({
@@ -451,7 +461,7 @@ test.describe('Doc Visibility: Authenticated', () => {
       1,
     );
 
-    await expect(page.getByRole('heading', { name: docTitle })).toBeVisible();
+    await verifyDocName(page, docTitle);
 
     await page.getByRole('button', { name: 'Share' }).click();
     await page
@@ -498,20 +508,21 @@ test.describe('Doc Visibility: Authenticated', () => {
 
     await page.goto(urlDoc);
 
-    await expect(page.locator('h2').getByText(docTitle)).toBeVisible();
+    await verifyDocName(page, docTitle);
     await page.getByRole('button', { name: 'Share' }).click();
     await expect(
       page.getByText('Read only, you cannot edit this document'),
     ).toBeHidden();
 
-    const shareModal = page.getByLabel('Share modal');
-
     await expect(
-      shareModal.getByRole('combobox', {
+      page.getByRole('combobox', {
         name: 'Visibility',
       }),
     ).toHaveAttribute('disabled');
-    await expect(shareModal.getByText('Search by email')).toBeHidden();
-    await expect(shareModal.getByLabel('List members card')).toBeHidden();
+    const inputSearch = page.getByRole('combobox', {
+      name: 'Find a member to add to the document',
+    });
+
+    await expect(inputSearch).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,15 @@ test.describe('Header mobile', () => {
   test('it checks the header when mobile', async ({ page }) => {
     const header = page.locator('header').first();
 
+    await expect(header.getByLabel('Open the header menu')).toBeVisible();
+    await expect(
+      header.getByRole('link', { name: 'Docs Logo Docs' }),
+    ).toBeVisible();
     await expect(
       header.getByRole('button', {
         name: 'Les services de La Suite numérique',
       }),
     ).toBeVisible();
-
-    await expect(
-      page.getByRole('button', {
-        name: 'Logout',
-      }),
-    ).toBeHidden();
-
-    await expect(page.getByText('English')).toBeHidden();
-
-    await header.getByLabel('Open the header menu').click();
-
-    await expect(
-      page.getByRole('button', {
-        name: 'Logout',
-      }),
-    ).toBeVisible();
-
-    await expect(page.getByText('English')).toBeVisible();
   });
 });
 

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

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

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

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

src/frontend/apps/impress/cunningham.ts

@@ -5,22 +5,60 @@ const config = {
         colors: {
           'card-border': '#ededed',
           'primary-bg': '#FAFAFA',
+          'primary-050': '#F5F5FE',
           'primary-100': '#EDF5FA',
           'primary-150': '#E5EEFA',
+          'primary-950': '#1B1B35',
           'info-150': '#E5EEFA',
+          'greyscale-000': '#fff',
+          'greyscale-1000': '#161616',
+          'blue-400': '#7AB1E8',
+          'blue-500': '#417DC4',
+          'blue-600': '#3558A2',
+          'brown-400': '#E6BE92',
+          'brown-500': '#BD987A',
+          'brown-600': '#745B47',
+          'cyan-400': '#34BAB5',
+          'cyan-500': '#009099',
+          'cyan-600': '#006A6F',
+          'gold-400': '#FFCA00',
+          'gold-500': '#C3992A',
+          'gold-600': '#695240',
+          'green-400': '#34CB6A',
+          'green-500': '#00A95F',
+          'green-600': '#297254',
+          'olive-400': '#99C221',
+          'olive-500': '#68A532',
+          'olive-600': '#447049',
+          'orange-400': '#FF732C',
+          'orange-500': '#E4794A',
+          'orange-600': '#755348',
+          'pink-400': '#FFB7AE',
+          'pink-500': '#E18B76',
+          'pink-600': '#8D533E',
+          'purple-400': '#CE70CC',
+          'purple-500': '#A558A0',
+          'purple-600': '#6E445A',
+          'yellow-400': '#D8C634',
+          'yellow-500': '#B7A73F',
+          'yellow-600': '#66673D',
         },
         font: {
           sizes: {
+            xs: '0.75rem',
+            sm: '0.875rem',
+            md: '1rem',
+            lg: '1.125rem',
             ml: '0.938rem',
-            xl: '1.50rem',
+            xl: '1.25rem',
             t: '0.6875rem',
             s: '0.75rem',
-            h1: '2.2rem',
-            h2: '1.7rem',
-            h3: '1.37rem',
-            h4: '1.15rem',
-            h5: '1rem',
-            h6: '0.87rem',
+            h1: '2rem',
+            h2: '1.75rem',
+            h3: '1.5rem',
+            h4: '1.375rem',
+            h5: '1.25rem',
+            h6: '1.125rem',
           },
           weights: {
             thin: 100,
@@ -34,6 +72,21 @@ const config = {
           auto: 'auto',
           bx: '2.2rem',
           full: '100%',
+          '4xs': '0.125rem',
+          '3xs': '0.25rem',
+          '2xs': '0.375rem',
+          xs: '0.5rem',
+          sm: '0.75rem',
+          base: '1rem',
+          md: '1.5rem',
+          lg: '2rem',
+          xl: '2.5rem',
+          xxl: '3rem',
+          xxxl: '3.5rem',
+          '4xl': '4rem',
+          '5xl': '4.5rem',
+          '6xl': '6rem',
+          '7xl': '7.5rem',
         },
         breakpoints: {
           xxs: '320px',
@@ -104,7 +157,7 @@ const config = {
             focus: 'var(--c--components--forms-select--border-radius)',
           },
           'font-size': 'var(--c--theme--font--sizes--ml)',
-          'menu-background-color': '#ffffff',
+          'menu-background-color': '#fff',
           'item-background-color': {
             hover: 'var(--c--theme--colors--primary-300)',
           },
@@ -126,7 +179,7 @@ const config = {
           },
         },
         modal: {
-          'background-color': '#ffffff',
+          'background-color': '#fff',
         },
         button: {
           'border-radius': {
@@ -178,7 +231,9 @@ const config = {
             color: 'var(--c--theme--colors--primary-text)',
             'color-disabled': 'var(--c--theme--colors--greyscale-600)',
             background: {
-              'color-hover': 'var(--c--theme--colors--primary-100)',
+              color: 'var(--c--theme--colors--primary-100)',
+              'color-hover': 'var(--c--theme--colors--primary-300)',
+              'color-active': 'var(--c--theme--colors--primary-100)',
               'color-disabled': 'var(--c--theme--colors--greyscale-200)',
             },
           },
@@ -197,19 +252,19 @@ const config = {
     dsfr: {
       theme: {
         colors: {
-          'card-border': '#ededed',
+          'card-border': '#E5E5E5',
           'primary-text': '#000091',
-          'primary-100': '#f5f5fe',
+          'primary-100': '#ECECFE',
           'primary-150': '#F4F4FD',
-          'primary-200': '#ececfe',
-          'primary-300': '#e3e3fd',
-          'primary-400': '#cacafb',
-          'primary-500': '#6a6af4',
-          'primary-600': '#000091',
+          'primary-200': '#E3E3FD',
+          'primary-300': '#CACAFB',
+          'primary-400': '#8585F6',
+          'primary-500': '#6A6AF4',
+          'primary-600': '#313178',
           'primary-700': '#272747',
-          'primary-800': '#21213f',
-          'primary-900': '#1c1a36',
-          'secondary-text': '#FFFFFF',
+          'primary-800': '#000091',
+          'primary-900': '#21213F',
+          'secondary-text': '#fff',
           'secondary-100': '#fee9ea',
           'secondary-200': '#fedfdf',
           'secondary-300': '#fdbfbf',
@@ -220,16 +275,22 @@ const config = {
           'secondary-800': '#341f1f',
           'secondary-900': '#2b1919',
           'greyscale-text': '#303C4B',
-          'greyscale-000': '#f6f6f6',
-          'greyscale-100': '#eeeeee',
-          'greyscale-200': '#e5e5e5',
-          'greyscale-300': '#e1e1e1',
-          'greyscale-400': '#dddddd',
-          'greyscale-500': '#cecece',
-          'greyscale-600': '#7b7b7b',
-          'greyscale-700': '#666666',
-          'greyscale-800': '#2a2a2a',
-          'greyscale-900': '#1e1e1e',
+          'greyscale-000': '#fff',
+          'greyscale-050': '#F6F6F6',
+          'greyscale-100': '#eee',
+          'greyscale-200': '#E5E5E5',
+          'greyscale-250': '#ddd',
+          'greyscale-300': '#CECECE',
+          'greyscale-350': '#ddd',
+          'greyscale-400': '#929292',
+          'greyscale-500': '#7C7C7C',
+          'greyscale-600': '#666666',
+          'greyscale-700': '#3A3A3A',
+          'greyscale-750': '#353535',
+          'greyscale-800': '#2A2A2A',
+          'greyscale-900': '#242424',
+          'greyscale-950': '#1E1E1E',
+          'greyscale-1000': '#161616',
           'success-text': '#1f8d49',
           'success-100': '#dffee6',
           'success-200': '#b8fec9',
@@ -297,9 +358,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: {
@@ -363,7 +424,7 @@ const config = {
         },
         'forms-input': {
           'border-radius': '4px',
-          'background-color': '#ffffff',
+          'background-color': '#fff',
           'border-color': 'var(--c--theme--colors--primary-text)',
           'box-shadow-color': 'var(--c--theme--colors--primary-text)',
           'value-color': 'var(--c--theme--colors--primary-text)',
@@ -381,7 +442,7 @@ const config = {
           'item-font-size': '14px',
           'border-radius': '4px',
           'border-radius-hover': '4px',
-          'background-color': '#ffffff',
+          'background-color': '#fff',
           'border-color': 'var(--c--theme--colors--primary-text)',
           'border-color-hover': 'var(--c--theme--colors--primary-text)',
           'box-shadow-color': 'var(--c--theme--colors--primary-text)',

src/frontend/apps/impress/package.json

@@ -23,6 +23,7 @@
     "@openfun/cunningham-react": "2.9.4",
     "@sentry/nextjs": "8.40.0",
     "@tanstack/react-query": "5.61.3",
+    "cmdk": "^1.0.4",
     "crisp-sdk-web": "1.0.25",
     "i18next": "24.0.0",
     "i18next-browser-languagedetector": "8.0.0",
@@ -34,8 +35,10 @@
     "react-aria-components": "1.5.0",
     "react-dom": "*",
     "react-i18next": "15.1.1",
+    "react-intersection-observer": "9.13.1",
     "react-select": "5.8.3",
     "styled-components": "6.1.13",
+    "use-debounce": "10.0.4",
     "y-protocols": "1.0.6",
     "yjs": "*",
     "zustand": "5.0.1"

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

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

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

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

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

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

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

@@ -1,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';
 
@@ -11,7 +6,7 @@ const StyledPopover = styled(Popover)`
   background-color: white;
   border-radius: 4px;
   box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
-  padding: 0.5rem;
+
   border: 1px solid #dddddd;
   opacity: 0;
   transition: opacity 0.2s ease-in-out;
@@ -29,9 +24,10 @@ const StyledButton = styled(Button)`
   text-wrap: nowrap;
 `;
 
-interface DropButtonProps {
+export interface DropButtonProps {
   button: ReactNode;
   isOpen?: boolean;
+  label?: string;
   onOpenChange?: (isOpen: boolean) => void;
 }
 
@@ -39,6 +35,7 @@ export const DropButton = ({
   button,
   isOpen = false,
   onOpenChange,
+  label,
   children,
 }: PropsWithChildren<DropButtonProps>) => {
   const [opacity, setOpacity] = useState(false);
@@ -58,7 +55,7 @@ export const DropButton = ({
 
   return (
     <DialogTrigger onOpenChange={onOpenChangeHandler} isOpen={isLocalOpen}>
-      <StyledButton>{button}</StyledButton>
+      <StyledButton aria-label={label}>{button}</StyledButton>
       <StyledPopover
         style={{ opacity: opacity ? 1 : 0 }}
         isOpen={isLocalOpen}

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

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

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

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

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

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

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

@@ -0,0 +1,48 @@
+import { css } from 'styled-components';
+
+import { Box } from './Box';
+
+type Props = {
+  size?: 'small' | 'medium' | 'large';
+};
+export const SimpleLoader = ({ size = 'medium' }: Props) => {
+  return (
+    <Box
+      className={size}
+      $css={css`
+        display: inline-block;
+        border: 3px solid var(--c--theme--colors--primary-300);
+        border-radius: 50%;
+        border-top-color: var(--c--theme--colors--primary-600);
+        animation: spin 1s ease-in-out infinite;
+        -webkit-animation: spin 1s ease-in-out infinite;
+
+        &.small {
+          width: 24px;
+          height: 24px;
+        }
+
+        &.medium {
+          width: 38px;
+          height: 38px;
+        }
+
+        &.large {
+          width: 50px;
+          height: 50px;
+        }
+
+        @keyframes spin {
+          to {
+            -webkit-transform: rotate(360deg);
+          }
+        }
+        @-webkit-keyframes spin {
+          to {
+            -webkit-transform: rotate(360deg);
+          }
+        }
+      `}
+    />
+  );
+};

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,31 @@
+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 } = useCunninghamTheme();
+
+  return (
+    <Box
+      $height="1px"
+      $width="100%"
+      $margin={{ vertical: 'base' }}
+      $background={
+        variant === SeparatorVariant.DARK
+          ? '#e5e5e533'
+          : colorsTokens()['greyscale-200']
+      }
+    />
+  );
+};

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

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

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

@@ -351,6 +351,11 @@ input:-webkit-autofill:focus {
   background-color: transparent;
 }
 
+.c__button--nano {
+  padding: 0 var(--c--theme--spacings--2xs);
+  gap: var(--c--theme--spacings--2xs);
+}
+
 .c__button--medium {
   padding: 0.9rem var(--c--theme--spacings--s);
 }
@@ -442,6 +447,7 @@ input:-webkit-autofill:focus {
 }
 
 .c__button--tertiary {
+  background-color: var(--c--components--button--tertiary--background--color);
   color: var(--c--components--button--tertiary--color);
   border: none;
 }
@@ -454,6 +460,13 @@ input:-webkit-autofill:focus {
   color: var(--c--components--button--tertiary--color);
 }
 
+.c__button--tertiary:active {
+  background-color: var(
+    --c--components--button--tertiary--background--color-active
+  );
+  color: var(--c--components--button--tertiary--color-active);
+}
+
 .c__button--tertiary:disabled {
   background-color: var(
     --c--components--button--tertiary--background--color-disabled
@@ -519,6 +532,12 @@ input:-webkit-autofill:focus {
   overflow-y: auto;
 }
 
+.c__modal__title {
+  padding: 0;
+  font-size: 1.125rem;
+  margin-bottom: var(--c--theme--spacings--sm);
+}
+
 @media screen and (width <= 420px) {
   .c__modal__scroller {
     padding: 0.7rem;

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

@@ -13,7 +13,7 @@ export const tokens = {
           'secondary-700': '#97A3AE',
           'secondary-800': '#757E87',
           'secondary-900': '#596067',
-          'info-text': '#FFFFFF',
+          'info-text': '#fff',
           'info-100': '#EBF2FC',
           'info-200': '#8CB5EA',
           'info-300': '#5894E1',
@@ -32,7 +32,7 @@ export const tokens = {
           'greyscale-700': '#555F6B',
           'greyscale-800': '#303C4B',
           'greyscale-900': '#0C1A2B',
-          'greyscale-000': '#FFFFFF',
+          'greyscale-000': '#fff',
           'primary-100': '#EDF5FA',
           'primary-200': '#8CB5EA',
           'primary-300': '#5894E1',
@@ -69,28 +69,65 @@ export const tokens = {
           'danger-700': '#9B0000',
           'danger-800': '#780000',
           'danger-900': '#5C0000',
-          'primary-text': '#FFFFFF',
-          'success-text': '#FFFFFF',
-          'warning-text': '#FFFFFF',
-          'danger-text': '#FFFFFF',
+          'primary-text': '#fff',
+          'success-text': '#fff',
+          'warning-text': '#fff',
+          'danger-text': '#fff',
           'card-border': '#ededed',
           'primary-bg': '#FAFAFA',
+          'primary-050': '#F5F5FE',
           'primary-150': '#E5EEFA',
+          'primary-950': '#1B1B35',
           'info-150': '#E5EEFA',
+          'greyscale-1000': '#161616',
+          'blue-400': '#7AB1E8',
+          'blue-500': '#417DC4',
+          'blue-600': '#3558A2',
+          'brown-400': '#E6BE92',
+          'brown-500': '#BD987A',
+          'brown-600': '#745B47',
+          'cyan-400': '#34BAB5',
+          'cyan-500': '#009099',
+          'cyan-600': '#006A6F',
+          'gold-400': '#FFCA00',
+          'gold-500': '#C3992A',
+          'gold-600': '#695240',
+          'green-400': '#34CB6A',
+          'green-500': '#00A95F',
+          'green-600': '#297254',
+          'olive-400': '#99C221',
+          'olive-500': '#68A532',
+          'olive-600': '#447049',
+          'orange-400': '#FF732C',
+          'orange-500': '#E4794A',
+          'orange-600': '#755348',
+          'pink-400': '#FFB7AE',
+          'pink-500': '#E18B76',
+          'pink-600': '#8D533E',
+          'purple-400': '#CE70CC',
+          'purple-500': '#A558A0',
+          'purple-600': '#6E445A',
+          'yellow-400': '#D8C634',
+          'yellow-500': '#B7A73F',
+          'yellow-600': '#66673D',
         },
         font: {
           sizes: {
-            h1: '2.2rem',
-            h2: '1.7rem',
-            h3: '1.37rem',
-            h4: '1.15rem',
-            h5: '1rem',
-            h6: '0.87rem',
+            h1: '2rem',
+            h2: '1.75rem',
+            h3: '1.5rem',
+            h4: '1.375rem',
+            h5: '1.25rem',
+            h6: '1.125rem',
             l: '1rem',
             m: '0.8125rem',
             s: '0.75rem',
+            xs: '0.75rem',
+            sm: '0.875rem',
+            md: '1rem',
+            lg: '1.125rem',
             ml: '0.938rem',
-            xl: '1.50rem',
+            xl: '1.25rem',
             t: '0.6875rem',
           },
           weights: {
@@ -120,7 +157,7 @@ export const tokens = {
         },
         spacings: {
           '0': '0',
-          xl: '4rem',
+          xl: '2.5rem',
           l: '3rem',
           b: '1.625rem',
           s: '1rem',
@@ -130,6 +167,20 @@ export const tokens = {
           auto: 'auto',
           bx: '2.2rem',
           full: '100%',
+          '4xs': '0.125rem',
+          '3xs': '0.25rem',
+          '2xs': '0.375rem',
+          xs: '0.5rem',
+          sm: '0.75rem',
+          base: '1rem',
+          md: '1.5rem',
+          lg: '2rem',
+          xxl: '3rem',
+          xxxl: '3.5rem',
+          '4xl': '4rem',
+          '5xl': '4.5rem',
+          '6xl': '6rem',
+          '7xl': '7.5rem',
         },
         transitions: {
           'ease-in': 'cubic-bezier(0.32, 0, 0.67, 0)',
@@ -202,7 +253,7 @@ export const tokens = {
             focus: 'var(--c--components--forms-select--border-radius)',
           },
           'font-size': 'var(--c--theme--font--sizes--ml)',
-          'menu-background-color': '#ffffff',
+          'menu-background-color': '#fff',
           'item-background-color': {
             hover: 'var(--c--theme--colors--primary-300)',
           },
@@ -223,7 +274,7 @@ export const tokens = {
             'border-color-hover': 'var(--c--theme--colors--greyscale-200)',
           },
         },
-        modal: { 'background-color': '#ffffff' },
+        modal: { 'background-color': '#fff' },
         button: {
           'border-radius': {
             active: 'var(--c--components--button--border-radius)',
@@ -270,7 +321,9 @@ export const tokens = {
             color: 'var(--c--theme--colors--primary-text)',
             'color-disabled': 'var(--c--theme--colors--greyscale-600)',
             background: {
-              'color-hover': 'var(--c--theme--colors--primary-100)',
+              color: 'var(--c--theme--colors--primary-100)',
+              'color-hover': 'var(--c--theme--colors--primary-300)',
+              'color-active': 'var(--c--theme--colors--primary-100)',
               'color-disabled': 'var(--c--theme--colors--greyscale-200)',
             },
           },
@@ -334,19 +387,19 @@ export const tokens = {
     dsfr: {
       theme: {
         colors: {
-          'card-border': '#ededed',
+          'card-border': '#E5E5E5',
           'primary-text': '#000091',
-          'primary-100': '#f5f5fe',
+          'primary-100': '#ECECFE',
           'primary-150': '#F4F4FD',
-          'primary-200': '#ececfe',
-          'primary-300': '#e3e3fd',
-          'primary-400': '#cacafb',
-          'primary-500': '#6a6af4',
-          'primary-600': '#000091',
+          'primary-200': '#E3E3FD',
+          'primary-300': '#CACAFB',
+          'primary-400': '#8585F6',
+          'primary-500': '#6A6AF4',
+          'primary-600': '#313178',
           'primary-700': '#272747',
-          'primary-800': '#21213f',
-          'primary-900': '#1c1a36',
-          'secondary-text': '#FFFFFF',
+          'primary-800': '#000091',
+          'primary-900': '#21213F',
+          'secondary-text': '#fff',
           'secondary-100': '#fee9ea',
           'secondary-200': '#fedfdf',
           'secondary-300': '#fdbfbf',
@@ -357,16 +410,22 @@ export const tokens = {
           'secondary-800': '#341f1f',
           'secondary-900': '#2b1919',
           'greyscale-text': '#303C4B',
-          'greyscale-000': '#f6f6f6',
-          'greyscale-100': '#eeeeee',
-          'greyscale-200': '#e5e5e5',
-          'greyscale-300': '#e1e1e1',
-          'greyscale-400': '#dddddd',
-          'greyscale-500': '#cecece',
-          'greyscale-600': '#7b7b7b',
-          'greyscale-700': '#666666',
-          'greyscale-800': '#2a2a2a',
-          'greyscale-900': '#1e1e1e',
+          'greyscale-000': '#fff',
+          'greyscale-050': '#F6F6F6',
+          'greyscale-100': '#eee',
+          'greyscale-200': '#E5E5E5',
+          'greyscale-250': '#ddd',
+          'greyscale-300': '#CECECE',
+          'greyscale-350': '#ddd',
+          'greyscale-400': '#929292',
+          'greyscale-500': '#7C7C7C',
+          'greyscale-600': '#666666',
+          'greyscale-700': '#3A3A3A',
+          'greyscale-750': '#353535',
+          'greyscale-800': '#2A2A2A',
+          'greyscale-900': '#242424',
+          'greyscale-950': '#1E1E1E',
+          'greyscale-1000': '#161616',
           'success-text': '#1f8d49',
           'success-100': '#dffee6',
           'success-200': '#b8fec9',
@@ -427,9 +486,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: {
@@ -486,7 +545,7 @@ export const tokens = {
         },
         'forms-input': {
           'border-radius': '4px',
-          'background-color': '#ffffff',
+          'background-color': '#fff',
           'border-color': 'var(--c--theme--colors--primary-text)',
           'box-shadow-color': 'var(--c--theme--colors--primary-text)',
           'value-color': 'var(--c--theme--colors--primary-text)',
@@ -502,7 +561,7 @@ export const tokens = {
           'item-font-size': '14px',
           'border-radius': '4px',
           'border-radius-hover': '4px',
-          'background-color': '#ffffff',
+          'background-color': '#fff',
           'border-color': 'var(--c--theme--colors--primary-text)',
           'border-color-hover': 'var(--c--theme--colors--primary-text)',
           'box-shadow-color': 'var(--c--theme--colors--primary-text)',

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

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

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

@@ -1,6 +1,6 @@
 import { Alert, Loader, VariantType } from '@openfun/cunningham-react';
 import { useRouter } from 'next/router';
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { Box, Card, Text, TextErrors } from '@/components';
@@ -43,7 +43,7 @@ export const DocEditor = ({ doc }: DocEditorProps) => {
     <>
       <DocHeader doc={doc} versionId={versionId as Versions['version_id']} />
       {!doc.abilities.partial_update && (
-        <Box $margin={{ all: 'small', top: 'none' }}>
+        <Box $width="100%" $margin={{ all: 'small', top: 'none' }}>
           <Alert type={VariantType.WARNING}>
             {t(`Read only, you cannot edit this document.`)}
           </Alert>
@@ -58,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

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

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

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

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

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

@@ -1,25 +1,32 @@
 import {
   Button,
   VariantType,
+  useModal,
   useToastProvider,
 } from '@openfun/cunningham-react';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { css } from 'styled-components';
 
-import { Box, DropButton, IconOptions } from '@/components';
+import {
+  Box,
+  DropdownMenu,
+  DropdownMenuOption,
+  Icon,
+  IconOptions,
+} from '@/components';
 import { useAuthStore } from '@/core';
+import { useCunninghamTheme } from '@/cunningham';
 import {
   useEditorStore,
   usePanelEditorStore,
 } from '@/features/docs/doc-editor/';
-import {
-  Doc,
-  ModalRemoveDoc,
-  ModalShare,
-} from '@/features/docs/doc-management';
+import { Doc, ModalRemoveDoc } from '@/features/docs/doc-management';
 import { ModalVersion, Versions } from '@/features/docs/doc-versioning';
 import { useResponsiveStore } from '@/stores';
 
+import { DocShareModal } from '../../doc-management/components/share/DocShareModal';
+
 import { ModalPDF } from './ModalExport';
 
 interface DocToolBoxProps {
@@ -29,10 +36,17 @@ interface DocToolBoxProps {
 
 export const DocToolBox = ({ doc, versionId }: DocToolBoxProps) => {
   const { t } = useTranslation();
+  const { spacingsTokens, colorsTokens } = useCunninghamTheme();
+
+  const spacings = spacingsTokens();
+  const colors = colorsTokens();
+
   const [isModalShareOpen, setIsModalShareOpen] = useState(false);
   const [isModalRemoveOpen, setIsModalRemoveOpen] = useState(false);
   const [isModalPDFOpen, setIsModalPDFOpen] = useState(false);
-  const [isDropOpen, setIsDropOpen] = useState(false);
+
+  const modalShare = useModal();
+
   const { setIsPanelOpen, setIsPanelTableContentOpen } = usePanelEditorStore();
   const [isModalVersionOpen, setIsModalVersionOpen] = useState(false);
   const { isSmallMobile } = useResponsiveStore();
@@ -40,6 +54,66 @@ export const DocToolBox = ({ doc, versionId }: DocToolBoxProps) => {
   const { editor } = useEditorStore();
   const { toast } = useToastProvider();
 
+  const options: DropdownMenuOption[] = [
+    ...(isSmallMobile
+      ? [
+          {
+            label: t('Share'),
+            icon: 'upload',
+            callback: () => {
+              setIsModalShareOpen(true);
+            },
+          },
+          {
+            label: t('Export'),
+            icon: 'download',
+            callback: () => {
+              setIsModalPDFOpen(true);
+            },
+          },
+        ]
+      : []),
+    {
+      label: t('Version history'),
+      icon: 'history',
+      disabled: !doc.abilities.versions_list,
+      callback: () => {
+        setIsPanelOpen(true);
+        setIsPanelTableContentOpen(false);
+      },
+    },
+    {
+      label: t('Table of contents'),
+      icon: 'summarize',
+      callback: () => {
+        setIsPanelOpen(true);
+        setIsPanelTableContentOpen(true);
+      },
+    },
+    {
+      label: t('Copy as {{format}}', { format: 'Markdown' }),
+      icon: 'content_copy',
+      callback: () => {
+        void copyCurrentEditorToClipboard('markdown');
+      },
+    },
+    {
+      label: t('Copy as {{format}}', { format: 'HTML' }),
+      icon: 'content_copy',
+      callback: () => {
+        void copyCurrentEditorToClipboard('html');
+      },
+    },
+    {
+      label: t('Delete document'),
+      icon: 'delete',
+      disabled: !doc.abilities.destroy,
+      callback: () => {
+        setIsModalRemoveOpen(true);
+      },
+    },
+  ];
+
   const copyCurrentEditorToClipboard = async (
     asFormat: 'html' | 'markdown',
   ) => {
@@ -84,105 +158,53 @@ export const DocToolBox = ({ doc, versionId }: DocToolBoxProps) => {
           </Button>
         </Box>
       )}
-      <Box $direction="row" $margin={{ left: 'auto' }} $gap="1rem">
-        {authenticated && (
+      <Box $direction="row" $margin={{ left: 'auto' }} $gap={spacings['2xs']}>
+        {authenticated && !isSmallMobile && (
           <Button
+            color="primary-text"
             onClick={() => {
-              setIsModalShareOpen(true);
+              modalShare.open();
+              // setIsModalShareOpen(true);
             }}
             size={isSmallMobile ? 'small' : 'medium'}
           >
             {t('Share')}
           </Button>
         )}
-        <DropButton
-          button={
-            <IconOptions
-              isOpen={isDropOpen}
-              aria-label={t('Open the document options')}
-            />
-          }
-          onOpenChange={(isOpen) => setIsDropOpen(isOpen)}
-          isOpen={isDropOpen}
-        >
-          <Box>
-            {doc.abilities.versions_list && (
-              <Button
-                onClick={() => {
-                  setIsPanelOpen(true);
-                  setIsPanelTableContentOpen(false);
-                  setIsDropOpen(false);
-                }}
-                color="primary-text"
-                icon={<span className="material-icons">history</span>}
-                size="small"
-              >
-                {t('Version history')}
-              </Button>
-            )}
-            <Button
-              onClick={() => {
-                setIsPanelOpen(true);
-                setIsPanelTableContentOpen(true);
-                setIsDropOpen(false);
-              }}
-              color="primary-text"
-              icon={<span className="material-icons">summarize</span>}
-              size="small"
-            >
-              {t('Table of contents')}
-            </Button>
-            <Button
-              onClick={() => {
-                setIsModalPDFOpen(true);
-                setIsDropOpen(false);
-              }}
-              color="primary-text"
-              icon={<span className="material-icons">file_download</span>}
-              size="small"
-            >
-              {t('Export')}
-            </Button>
-            {doc.abilities.destroy && (
-              <Button
-                onClick={() => {
-                  setIsModalRemoveOpen(true);
-                  setIsDropOpen(false);
-                }}
-                color="primary-text"
-                icon={<span className="material-icons">delete</span>}
-                size="small"
-              >
-                {t('Delete document')}
-              </Button>
-            )}
-            <Button
-              onClick={() => {
-                setIsDropOpen(false);
-                void copyCurrentEditorToClipboard('markdown');
-              }}
-              color="primary-text"
-              icon={<span className="material-icons">content_copy</span>}
-              size="small"
-            >
-              {t('Copy as {{format}}', { format: 'Markdown' })}
-            </Button>
-            <Button
-              onClick={() => {
-                setIsDropOpen(false);
-                void copyCurrentEditorToClipboard('html');
-              }}
-              color="primary-text"
-              icon={<span className="material-icons">content_copy</span>}
-              size="small"
-            >
-              {t('Copy as {{format}}', { format: 'HTML' })}
-            </Button>
-          </Box>
-        </DropButton>
+        {!isSmallMobile && (
+          <Button
+            color="primary-text"
+            icon={
+              <Icon iconName="download" $theme="primary" $variation="800" />
+            }
+            onClick={() => {
+              setIsModalPDFOpen(true);
+            }}
+            size={isSmallMobile ? 'small' : 'medium'}
+          />
+        )}
+        <DropdownMenu options={options}>
+          <IconOptions
+            isHorizontal
+            $theme="primary"
+            $radius={spacings['3xs']}
+            $css={
+              isSmallMobile
+                ? css`
+                    padding: 10px;
+                    border: 1px solid ${colors['greyscale-300']};
+                  `
+                : ''
+            }
+            aria-label={t('Open the document options')}
+          />
+        </DropdownMenu>
       </Box>
-      {isModalShareOpen && (
+      {/* {isModalShareOpen && (
         <ModalShare onClose={() => setIsModalShareOpen(false)} doc={doc} />
+      )} */}
+      {modalShare.isOpen && (
+        <DocShareModal doc={doc} onClose={modalShare.onClose} />
       )}
       {isModalPDFOpen && (
         <ModalPDF onClose={() => setIsModalPDFOpen(false)} doc={doc} />

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

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

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

@@ -1,6 +1,12 @@
 import { UseQueryOptions, useQuery } from '@tanstack/react-query';
 
-import { APIError, APIList, errorCauses, fetchAPI } from '@/api';
+import {
+  APIError,
+  APIList,
+  errorCauses,
+  fetchAPI,
+  useAPIInfiniteQuery,
+} from '@/api';
 
 import { Doc } from '../types';
 
@@ -52,3 +58,7 @@ export function useDocs(
     ...queryConfig,
   });
 }
+
+export const useInfiniteDocs = (params: DocsParams) => {
+  return useAPIInfiniteQuery(KEY_LIST_DOC, getDocs, params);
+};

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

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

src/frontend/apps/impress/src/features/docs/doc-management/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/DocRoleDropdown.tsx

@@ -0,0 +1,71 @@
+import { useTranslation } from 'react-i18next';
+import { css } from 'styled-components';
+
+import { DropdownMenu, DropdownMenuOption, Text } from '@/components';
+
+import { useTrans } from '../hooks';
+import { Role } from '../types';
+
+type Props = {
+  currentRole: Role;
+  onSelectRole?: (role: Role) => void;
+  canUpdate?: boolean;
+  isLastOwner?: boolean;
+  isOtherOwner?: boolean;
+};
+export const DocRoleDropdown = ({
+  canUpdate = true,
+  currentRole,
+  onSelectRole,
+  isLastOwner,
+  isOtherOwner,
+}: Props) => {
+  const { t } = useTranslation();
+  const { transRole, translatedRoles, getNotAllowedMessage } = useTrans();
+
+  const roles: DropdownMenuOption[] = Object.keys(translatedRoles).map(
+    (key) => {
+      return {
+        label: transRole(key as Role),
+        callback: () => onSelectRole?.(key as Role),
+        disabled: isLastOwner || isOtherOwner,
+        isSelected: currentRole === (key as Role),
+      };
+    },
+  );
+
+  if (!canUpdate) {
+    return (
+      <Text
+        $variation="600"
+        $css={css`
+          font-family: Arial, Helvetica, sans-serif;
+        `}
+      >
+        {transRole(currentRole)}
+      </Text>
+    );
+  }
+
+  return (
+    <DropdownMenu
+      topMessage={getNotAllowedMessage(
+        canUpdate,
+        !!isLastOwner,
+        !!isOtherOwner,
+      )}
+      label="doc-role-dropdown"
+      showArrow={true}
+      options={roles}
+    >
+      <Text
+        $variation="600"
+        $css={css`
+          font-family: Arial, Helvetica, sans-serif;
+        `}
+      >
+        {transRole(currentRole)}
+      </Text>
+    </DropdownMenu>
+  );
+};

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

@@ -7,13 +7,12 @@ import {
   useToastProvider,
 } from '@openfun/cunningham-react';
 import { t } from 'i18next';
+import { usePathname } from 'next/navigation';
 import { useRouter } from 'next/router';
 
 import { Box, Text, TextErrors } from '@/components';
-import { useCunninghamTheme } from '@/cunningham/';
 
 import { useRemoveDoc } from '../api/useRemoveDoc';
-import IconDoc from '../assets/icon-doc.svg';
 import { Doc } from '../types';
 
 interface ModalRemoveDocProps {
@@ -22,12 +21,13 @@ interface ModalRemoveDocProps {
 }
 
 export const ModalRemoveDoc = ({ onClose, doc }: ModalRemoveDocProps) => {
-  const { colorsTokens } = useCunninghamTheme();
   const { toast } = useToastProvider();
   const { push } = useRouter();
+  const pathname = usePathname();
 
   const {
     mutate: removeDoc,
+
     isError,
     error,
   } = useRemoveDoc({
@@ -35,7 +35,11 @@ export const ModalRemoveDoc = ({ onClose, doc }: ModalRemoveDocProps) => {
       toast(t('The document has been deleted.'), VariantType.SUCCESS, {
         duration: 4000,
       });
-      void push('/');
+      if (pathname === '/') {
+        onClose();
+      } else {
+        void push('/');
+      }
     },
   });
 
@@ -58,7 +62,7 @@ export const ModalRemoveDoc = ({ onClose, doc }: ModalRemoveDocProps) => {
       rightActions={
         <Button
           aria-label={t('Confirm deletion')}
-          color="primary"
+          color="danger"
           fullWidth
           onClick={() =>
             removeDoc({
@@ -96,32 +100,6 @@ export const ModalRemoveDoc = ({ onClose, doc }: ModalRemoveDocProps) => {
         )}
 
         {isError && <TextErrors causes={error.cause} />}
-
-        <Text
-          as="p"
-          $padding="small"
-          $direction="row"
-          $gap="0.5rem"
-          $background={colorsTokens()['primary-150']}
-          $theme="primary"
-          $align="center"
-          $radius="2px"
-        >
-          <IconDoc
-            className="p-t"
-            aria-label={t(`Document icon`)}
-            color={colorsTokens()['primary-500']}
-            width={58}
-            style={{
-              borderRadius: '8px',
-              backgroundColor: '#ffffff',
-              border: `1px solid ${colorsTokens()['primary-300']}`,
-            }}
-          />
-          <Text $theme="primary" $weight="bold" $size="l">
-            {doc.title}
-          </Text>
-        </Text>
       </Box>
     </Modal>
   );

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

@@ -0,0 +1,161 @@
+import {
+  Button,
+  VariantType,
+  useToastProvider,
+} from '@openfun/cunningham-react';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { css } from 'styled-components';
+
+import { APIError } from '@/api';
+import { Box } from '@/components';
+import { User } from '@/core';
+import { useCunninghamTheme } from '@/cunningham';
+import { Doc, Role } from '@/features/docs';
+import { useCreateDocInvitation } from '@/features/docs/members/invitation-list';
+import { useCreateDocAccess } from '@/features/docs/members/members-add';
+import { OptionType } from '@/features/docs/members/members-add/types';
+import { useLanguage } from '@/i18n/hooks/useLanguage';
+
+import { DocRoleDropdown } from '../DocRoleDropdown';
+
+import { DocShareAddMemberListItem } from './DocShareAddMemberListItem';
+
+type APIErrorUser = APIError<{
+  value: string;
+  type: OptionType;
+}>;
+
+type Props = {
+  doc: Doc;
+  selectedUsers: User[];
+  onRemoveUser?: (user: User) => void;
+  onSubmit?: (selectedUsers: User[], role: Role) => void;
+  afterInvite?: () => void;
+};
+export const DocShareAddMemberList = ({
+  doc,
+  selectedUsers,
+  onRemoveUser,
+  afterInvite,
+}: Props) => {
+  const { t } = useTranslation();
+  const { toast } = useToastProvider();
+  const [isLoading, setIsLoading] = useState(false);
+  const { spacingsTokens, colorsTokens } = useCunninghamTheme();
+  const { contentLanguage } = useLanguage();
+  const [invitationRole, setInvitationRole] = useState<Role>(Role.EDITOR);
+  const canShare = doc.abilities.accesses_manage;
+  const spacing = spacingsTokens();
+  const color = colorsTokens();
+
+  const { mutateAsync: createInvitation } = useCreateDocInvitation();
+  const { mutateAsync: createDocAccess } = useCreateDocAccess();
+
+  const onError = (dataError: APIErrorUser) => {
+    let messageError =
+      dataError['data']?.type === OptionType.INVITATION
+        ? t(`Failed to create the invitation for {{email}}.`, {
+            email: dataError['data']?.value,
+          })
+        : t(`Failed to add the member in the document.`);
+
+    if (
+      dataError.cause?.[0] ===
+      'Document invitation with this Email address and Document already exists.'
+    ) {
+      messageError = t('"{{email}}" is already invited to the document.', {
+        email: dataError['data']?.value,
+      });
+    }
+
+    if (
+      dataError.cause?.[0] ===
+      'This email is already associated to a registered user.'
+    ) {
+      messageError = t('"{{email}}" is already member of the document.', {
+        email: dataError['data']?.value,
+      });
+    }
+
+    toast(messageError, VariantType.ERROR, {
+      duration: 4000,
+    });
+  };
+
+  const onInvite = async () => {
+    setIsLoading(true);
+    const promises = selectedUsers.map((user) => {
+      const isInvitationMode = user.id === user.email;
+
+      const payload = {
+        role: invitationRole,
+        docId: doc.id,
+        contentLanguage,
+      };
+
+      return isInvitationMode
+        ? createInvitation({
+            ...payload,
+            email: user.email,
+          })
+        : createDocAccess({
+            ...payload,
+            memberId: user.id,
+          });
+    });
+
+    const settledPromises = await Promise.allSettled(promises);
+    settledPromises.forEach((settledPromise) => {
+      if (settledPromise.status === 'rejected') {
+        onError(settledPromise.reason as APIErrorUser);
+      }
+    });
+    afterInvite?.();
+    setIsLoading(false);
+  };
+
+  return (
+    <Box
+      data-testid="doc-share-add-member-list"
+      $direction="row"
+      $padding={spacing.sm}
+      $align="center"
+      $background={color['greyscale-050']}
+      $radius={spacing['3xs']}
+      $css={css`
+        border: 1px solid ${color['greyscale-200']};
+      `}
+    >
+      <Box
+        $direction="row"
+        $align="center"
+        $wrap="wrap"
+        $flex={1}
+        $gap={spacing.xs}
+      >
+        {selectedUsers.map((user) => (
+          <DocShareAddMemberListItem
+            key={user.id}
+            user={user}
+            onRemoveUser={onRemoveUser}
+          />
+        ))}
+      </Box>
+      <Box $direction="row" $align="center">
+        <DocRoleDropdown
+          canUpdate={canShare}
+          currentRole={invitationRole}
+          onSelectRole={setInvitationRole}
+        />
+        <Button
+          onClick={() => void onInvite()}
+          size="small"
+          disabled={isLoading}
+        >
+          {t('Invite')}
+        </Button>
+      </Box>
+    </Box>
+  );
+};

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

@@ -0,0 +1,43 @@
+import { Button } from '@openfun/cunningham-react';
+import { css } from 'styled-components';
+
+import { Box, Icon, Text } from '@/components';
+import { User } from '@/core';
+import { useCunninghamTheme } from '@/cunningham';
+
+type Props = {
+  user: User;
+  onRemoveUser?: (user: User) => void;
+};
+export const DocShareAddMemberListItem = ({ user, onRemoveUser }: Props) => {
+  const { spacingsTokens, colorsTokens, fontSizesTokens } =
+    useCunninghamTheme();
+  const spacing = spacingsTokens();
+  const color = colorsTokens();
+  const fontSize = fontSizesTokens();
+  return (
+    <Box
+      data-testid={`doc-share-add-member-${user.email}`}
+      $radius={spacing['3xs']}
+      $direction="row"
+      $height="fit-content"
+      $justify="center"
+      $align="center"
+      $gap={spacing.xs}
+      $background={color['greyscale-250']}
+      $padding={{ horizontal: spacing['2xs'], vertical: spacing['3xs'] }}
+      $css={css`
+        color: ${color['greyscale-1000']};
+        font-size: ${fontSize['xs']};
+      `}
+    >
+      <Text $margin={{ top: '-3px' }}>{user.full_name || user.email}</Text>
+      <Button
+        color="primary-text"
+        size="nano"
+        onClick={() => onRemoveUser?.(user)}
+        icon={<Icon $variation="500" $size="sm" iconName="close" />}
+      />
+    </Box>
+  );
+};

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

@@ -0,0 +1,108 @@
+import { VariantType, useToastProvider } from '@openfun/cunningham-react';
+import { useTranslation } from 'react-i18next';
+
+import {
+  Box,
+  DropdownMenu,
+  DropdownMenuOption,
+  IconOptions,
+} from '@/components';
+import { User } from '@/core';
+import {
+  useDeleteDocInvitation,
+  useUpdateDocInvitation,
+} from '@/features/docs/members/invitation-list';
+import { Invitation } from '@/features/docs/members/invitation-list/types';
+import { SearchUserRow } from '@/features/users/components/SearchUserRow';
+
+import { Doc, Role } from '../../types';
+import { DocRoleDropdown } from '../DocRoleDropdown';
+
+type Props = {
+  doc: Doc;
+  invitation: Invitation;
+};
+export const DocShareInvitationItem = ({ doc, invitation }: Props) => {
+  const { t } = useTranslation();
+  const fakeUser: User = {
+    id: invitation.email,
+    full_name: invitation.email,
+    email: invitation.email,
+    short_name: invitation.email,
+  };
+
+  const { toast } = useToastProvider();
+  const canUpdate = doc.abilities.accesses_manage;
+
+  const { mutate: updateDocInvitation } = useUpdateDocInvitation({
+    onError: (error) => {
+      toast(
+        error?.data?.role?.[0] ?? t('Error during update invitation'),
+        VariantType.ERROR,
+        {
+          duration: 4000,
+        },
+      );
+    },
+  });
+
+  const { mutate: removeDocInvitation } = useDeleteDocInvitation({
+    onError: (error) => {
+      toast(
+        error?.data?.role?.[0] ?? t('Error during delete invitation'),
+        VariantType.ERROR,
+        {
+          duration: 4000,
+        },
+      );
+    },
+  });
+
+  const onUpdate = (newRole: Role) => {
+    updateDocInvitation({
+      docId: doc.id,
+      role: newRole,
+      invitationId: invitation.id,
+    });
+  };
+
+  const onRemove = () => {
+    removeDocInvitation({ invitationId: invitation.id, docId: doc.id });
+  };
+
+  const moreActions: DropdownMenuOption[] = [
+    {
+      label: t('Delete'),
+      icon: 'delete',
+      callback: onRemove,
+      disabled: !canUpdate,
+    },
+  ];
+  return (
+    <Box
+      $width="100%"
+      data-testid={`doc-share-invitation-row-${invitation.email}`}
+    >
+      <SearchUserRow
+        alwaysShowRight={true}
+        user={fakeUser}
+        right={
+          <Box $direction="row" $align="center">
+            <DocRoleDropdown
+              currentRole={invitation.role}
+              onSelectRole={onUpdate}
+              canUpdate={canUpdate}
+            />
+
+            <DropdownMenu
+              data-testid="doc-share-invitation-more-actions"
+              options={moreActions}
+            >
+              <IconOptions $variation="600" />
+            </DropdownMenu>
+          </Box>
+        }
+      />
+    </Box>
+  );
+};

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

@@ -0,0 +1,101 @@
+import { VariantType, useToastProvider } from '@openfun/cunningham-react';
+import { useTranslation } from 'react-i18next';
+
+import {
+  Box,
+  DropdownMenu,
+  DropdownMenuOption,
+  IconOptions,
+} from '@/components';
+import {
+  useDeleteDocAccess,
+  useUpdateDocAccess,
+} from '@/features/docs/members/members-list';
+import { useWhoAmI } from '@/features/docs/members/members-list/hooks/useWhoAmI';
+import { SearchUserRow } from '@/features/users/components/SearchUserRow';
+import { useResponsiveStore } from '@/stores';
+
+import { Access, Doc, Role } from '../../types';
+import { DocRoleDropdown } from '../DocRoleDropdown';
+
+type Props = {
+  doc: Doc;
+  access: Access;
+};
+export const DocShareMemberItem = ({ doc, access }: Props) => {
+  const { t } = useTranslation();
+  const { isLastOwner, isOtherOwner } = useWhoAmI(access);
+  const { toast } = useToastProvider();
+  const { isDesktop } = useResponsiveStore();
+  const isNotAllowed =
+    isOtherOwner || !!isLastOwner || !doc.abilities.accesses_manage;
+
+  const { mutate: updateDocAccess } = useUpdateDocAccess({
+    onError: () => {
+      toast(t('Error during invitation update'), VariantType.ERROR, {
+        duration: 4000,
+      });
+    },
+  });
+
+  const { mutate: removeDocAccess } = useDeleteDocAccess({
+    onError: () => {
+      toast(t('Error while deleting invitation'), VariantType.ERROR, {
+        duration: 4000,
+      });
+    },
+  });
+
+  const onUpdate = (newRole: Role) => {
+    updateDocAccess({
+      docId: doc.id,
+      role: newRole,
+      accessId: access.id,
+    });
+  };
+
+  const onRemove = () => {
+    removeDocAccess({ accessId: access.id, docId: doc.id });
+  };
+
+  const moreActions: DropdownMenuOption[] = [
+    {
+      label: t('Delete'),
+      icon: 'delete',
+      callback: onRemove,
+      disabled: isNotAllowed,
+    },
+  ];
+
+  return (
+    <Box
+      $width="100%"
+      data-testid={`doc-share-member-row-${access.user.email}`}
+    >
+      <SearchUserRow
+        alwaysShowRight={true}
+        user={access.user}
+        right={
+          <Box $direction="row" $align="center">
+            <DocRoleDropdown
+              currentRole={access.role}
+              onSelectRole={onUpdate}
+              canUpdate={doc.abilities.accesses_manage}
+              isLastOwner={isLastOwner}
+              isOtherOwner={!!isOtherOwner}
+            />
+
+            {isDesktop && doc.abilities.accesses_manage && (
+              <DropdownMenu options={moreActions}>
+                <IconOptions
+                  data-testid="doc-share-member-more-actions"
+                  $variation="600"
+                />
+              </DropdownMenu>
+            )}
+          </Box>
+        }
+      />
+    </Box>
+  );
+};

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

@@ -0,0 +1,294 @@
+import {
+  Button,
+  Modal,
+  ModalSize,
+  VariantType,
+  useToastProvider,
+} from '@openfun/cunningham-react';
+import { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { css } from 'styled-components';
+import { useDebouncedCallback } from 'use-debounce';
+
+import { Box } from '@/components';
+import { LoadMoreText } from '@/components/LoadMoreText';
+import {
+  QuickSearch,
+  QuickSearchData,
+} from '@/components/quick-search/QuickSearch';
+import { QuickSearchGroup } from '@/components/quick-search/QuickSearchGroup';
+import { HorizontalSeparator } from '@/components/separators/HorizontalSeparator';
+import { User } from '@/core';
+import { Access, Doc } from '@/features/docs';
+import { useDocInvitationsInfinite } from '@/features/docs/members/invitation-list';
+import { Invitation } from '@/features/docs/members/invitation-list/types';
+import { KEY_LIST_USER, useUsers } from '@/features/docs/members/members-add';
+import { useDocAccessesInfinite } from '@/features/docs/members/members-list';
+import { useResponsiveStore } from '@/stores';
+import { isValidEmail } from '@/utils';
+
+import { DocVisibility } from '../DocVisibility';
+
+import { DocShareAddMemberList } from './DocShareAddMemberList';
+import { DocShareInvitationItem } from './DocShareInvitationItem';
+import { DocShareMemberItem } from './DocShareMemberItem';
+import { DocShareModalInviteUserRow } from './DocShareModalInviteUserByEmail';
+
+type Props = {
+  doc: Doc;
+  onClose: () => void;
+};
+export const DocShareModal = ({ doc, onClose }: Props) => {
+  const { t } = useTranslation();
+  const { toast } = useToastProvider();
+  const { isDesktop } = useResponsiveStore();
+
+  const [selectedUsers, setSelectedUsers] = useState<User[]>([]);
+  const [userQuery, setUserQuery] = useState('');
+  const [inputValue, setInputValue] = useState('');
+  const canShare = doc.abilities.accesses_manage;
+  const showMemberSection = inputValue === '' && selectedUsers.length === 0;
+
+  const onSelect = (user: User) => {
+    setSelectedUsers((prev) => [...prev, user]);
+    setUserQuery('');
+    setInputValue('');
+  };
+
+  const membersQuery = useDocAccessesInfinite({
+    docId: doc.id,
+  });
+
+  const invitationQuery = useDocInvitationsInfinite({
+    docId: doc.id,
+  });
+
+  const searchUsersQuery = useUsers(
+    { query: userQuery, docId: doc.id },
+    {
+      enabled: !!userQuery,
+      queryKey: [KEY_LIST_USER, { query: userQuery }],
+    },
+  );
+
+  const membersData: QuickSearchData<Access> = useMemo(() => {
+    const members =
+      membersQuery.data?.pages.flatMap((page) => page.results) || [];
+
+    const count = membersQuery.data?.pages[0]?.count ?? 1;
+
+    return {
+      groupName: t('Share with {{count}} users', {
+        count: count,
+      }),
+      elements: members,
+      endActions: membersQuery.hasNextPage
+        ? [
+            {
+              content: <LoadMoreText data-testid="load-more-members" />,
+              onSelect: () => void membersQuery.fetchNextPage(),
+            },
+          ]
+        : undefined,
+    };
+  }, [membersQuery, t]);
+
+  const invitationsData: QuickSearchData<Invitation> = useMemo(() => {
+    const invitations =
+      invitationQuery.data?.pages.flatMap((page) => page.results) || [];
+
+    return {
+      groupName: t('Pending invitations'),
+      elements: invitations,
+      endActions: invitationQuery.hasNextPage
+        ? [
+            {
+              content: <LoadMoreText data-testid="load-more-invitations" />,
+              onSelect: () => void invitationQuery.fetchNextPage(),
+            },
+          ]
+        : undefined,
+    };
+  }, [invitationQuery, t]);
+
+  const searchUserData: QuickSearchData<User> = useMemo(() => {
+    const users = searchUsersQuery.data?.results || [];
+    const isEmail = isValidEmail(userQuery);
+    const fakeUser: User = {
+      id: userQuery,
+      full_name: '',
+      email: userQuery,
+      short_name: '',
+    };
+
+    return {
+      groupName: t('Search user result', { count: users.length }),
+      elements: users,
+      endActions:
+        isEmail && users.length === 0
+          ? [
+              {
+                content: <DocShareModalInviteUserRow user={fakeUser} />,
+                onSelect: () => void onSelect(fakeUser),
+              },
+            ]
+          : undefined,
+    };
+  }, [searchUsersQuery.data, t, userQuery]);
+
+  const onFilter = useDebouncedCallback((str: string) => {
+    setUserQuery(str);
+  }, 300);
+
+  const onRemoveUser = (row: User) => {
+    setSelectedUsers((prevState) => {
+      const index = prevState.findIndex((value) => value.id === row.id);
+      if (index < 0) {
+        return prevState;
+      }
+      const newArray = [...prevState];
+      newArray.splice(index, 1);
+      return newArray;
+    });
+  };
+
+  return (
+    <Modal
+      isOpen
+      closeOnClickOutside
+      data-testid="doc-share-modal"
+      aria-label={t('Share modal')}
+      size={isDesktop ? ModalSize.LARGE : ModalSize.FULL}
+      onClose={onClose}
+      title={
+        <Box $padding="base" $align="flex-start">
+          {t('Share the document')}
+        </Box>
+      }
+    >
+      <Box
+        aria-label={t('Share modal')}
+        $direction="column"
+        $height={isDesktop ? undefined : 'calc(100vh - 50px)'}
+        $justify="space-between"
+      >
+        <Box
+          $flex={1}
+          $css={css`
+            overflow-y: auto;
+            [cmdk-list] {
+              overflow-y: auto;
+              max-height: ${isDesktop ? '400px' : '100%'};
+            }
+          `}
+        >
+          {canShare && selectedUsers.length > 0 && (
+            <Box
+              $padding={{ horizontal: 'base' }}
+              $margin={{ vertical: '11px' }}
+            >
+              <DocShareAddMemberList
+                doc={doc}
+                selectedUsers={selectedUsers}
+                onRemoveUser={onRemoveUser}
+                afterInvite={() => {
+                  setUserQuery('');
+                  setInputValue('');
+                  setSelectedUsers([]);
+                }}
+              />
+            </Box>
+          )}
+
+          <Box
+            aria-label={t('List members card')}
+            data-testid="doc-share-quick-search"
+          >
+            <QuickSearch
+              data={[]}
+              onFilter={(str) => {
+                setInputValue(str);
+                onFilter(str);
+              }}
+              inputValue={inputValue}
+              showInput={canShare}
+              loading={searchUsersQuery.isLoading}
+              renderElement={(user) => (
+                <DocShareModalInviteUserRow user={user} />
+              )}
+              onSelect={onSelect}
+              placeholder={t('Type a name or email')}
+            >
+              {!showMemberSection && inputValue !== '' && (
+                <QuickSearchGroup
+                  group={searchUserData}
+                  onSelect={onSelect}
+                  renderElement={(user) => (
+                    <DocShareModalInviteUserRow user={user} />
+                  )}
+                />
+              )}
+              {showMemberSection && (
+                <>
+                  {invitationsData.elements.length > 0 && (
+                    <QuickSearchGroup
+                      group={invitationsData}
+                      renderElement={(invitation) => (
+                        <DocShareInvitationItem
+                          doc={doc}
+                          invitation={invitation}
+                        />
+                      )}
+                    />
+                  )}
+
+                  <QuickSearchGroup
+                    group={membersData}
+                    renderElement={(access) => (
+                      <DocShareMemberItem doc={doc} access={access} />
+                    )}
+                  />
+                </>
+              )}
+            </QuickSearch>
+          </Box>
+        </Box>
+        <Box
+          $css={css`
+            flex-shrink: 0;
+          `}
+        >
+          <HorizontalSeparator />
+          <DocVisibility doc={doc} />
+          <HorizontalSeparator />
+          <Box $direction="row" $justify="space-between" $padding="base">
+            <Button
+              fullWidth={false}
+              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="tertiary"
+              icon={<span className="material-icons">add_link</span>}
+            >
+              {t('Copy link')}
+            </Button>
+            <Button onClick={onClose} color="primary">
+              {t('Ok')}
+            </Button>
+          </Box>
+        </Box>
+      </Box>
+    </Modal>
+  );
+};

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

@@ -0,0 +1,37 @@
+import { useTranslation } from 'react-i18next';
+import { css } from 'styled-components';
+
+import { Box, Icon, Text } from '@/components';
+import { User } from '@/core';
+import { SearchUserRow } from '@/features/users/components/SearchUserRow';
+
+type Props = {
+  user: User;
+};
+export const DocShareModalInviteUserRow = ({ user }: Props) => {
+  const { t } = useTranslation();
+  return (
+    <Box $width="100%" data-testid={`search-user-row-${user.email}`}>
+      <SearchUserRow
+        user={user}
+        right={
+          <Box
+            className="right-hover"
+            $direction="row"
+            $align="center"
+            $css={css`
+              font-family: Arial, Helvetica, sans-serif;
+              font-size: var(--c--theme--font--sizes--sm);
+              color: var(--c--theme--colors--greyscale-400);
+            `}
+          >
+            <Text $theme="primary" $variation="600">
+              {t('Add')}
+            </Text>
+            <Icon $theme="primary" $variation="600" iconName="add" />
+          </Box>
+        }
+      />
+    </Box>
+  );
+};

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

@@ -12,10 +12,34 @@ export const useTrans = () => {
     [Role.EDITOR]: t('Editor'),
   };
 
+  const getNotAllowedMessage = (
+    canUpdate: boolean,
+    isLastOwner: boolean,
+    isOtherOwner: boolean,
+  ) => {
+    if (!canUpdate) {
+      return undefined;
+    }
+
+    if (isLastOwner) {
+      return t(
+        'You are the sole owner of this group, make another member the group owner before you can change your own role or be removed from your document.',
+      );
+    }
+
+    if (isOtherOwner) {
+      return t('You cannot update the role or remove other owner.');
+    }
+
+    return undefined;
+  };
+
   return {
     transRole: (role: Role) => {
       return translatedRoles[role];
     },
     untitledDocument: t('Untitled document'),
+    translatedRoles,
+    getNotAllowedMessage,
   };
 };

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

@@ -57,3 +57,8 @@ export interface Doc {
     versions_retrieve: boolean;
   };
 }
+
+export enum DocDownloadFormat {
+  PDF = 'pdf',
+  DOCX = 'docx',
+}

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

@@ -1,8 +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, useEditorStore } from '@/features/docs/doc-editor';
+import { MAIN_LAYOUT_ID } from '@/layouts/conf';
 import { useResponsiveStore } from '@/stores';
 
 import { Heading } from './Heading';
@@ -46,7 +47,7 @@ export const TableContent = ({ headings }: TableContentProps) => {
       }
     };
 
-    window.addEventListener('scroll', () => {
+    document.getElementById(MAIN_LAYOUT_ID)?.addEventListener('scroll', () => {
       setTimeout(() => {
         handleScroll();
       }, 300);

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

@@ -1,6 +1,6 @@
 import { Button } from '@openfun/cunningham-react';
 import { t } from 'i18next';
-import React, { PropsWithChildren, useState } from 'react';
+import { PropsWithChildren, useState } from 'react';
 
 import { Box, DropButton, IconOptions, StyledLink, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
@@ -69,10 +69,7 @@ export const VersionItem = ({
             {isActive && versionId && (
               <DropButton
                 button={
-                  <IconOptions
-                    isOpen={isDropOpen}
-                    aria-label={t('Open the version options')}
-                  />
+                  <IconOptions aria-label={t('Open the version options')} />
                 }
                 onOpenChange={(isOpen) => setIsDropOpen(isOpen)}
                 isOpen={isDropOpen}

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

@@ -1,220 +1,103 @@
-import {
-  Column,
-  DataGrid,
-  SortModel,
-  usePagination,
-} from '@openfun/cunningham-react';
-import React, { useEffect, useState } from 'react';
+import { Button, Loader } from '@openfun/cunningham-react';
 import { useTranslation } from 'react-i18next';
-import { createGlobalStyle } from 'styled-components';
+import { InView } from 'react-intersection-observer';
 
-import { Card, StyledLink, Text, TextErrors } from '@/components';
-import { useCunninghamTheme } from '@/cunningham';
-import {
-  Doc,
-  DocsOrdering,
-  LinkReach,
-  currentDocRole,
-  isDocsOrdering,
-  useDocs,
-  useTrans,
-} from '@/features/docs/doc-management';
-import { useDate } from '@/hook/';
+import { Box, Card, Text } from '@/components';
 import { useResponsiveStore } from '@/stores';
 
-import { PAGE_SIZE } from '../conf';
+import { useInfiniteDocs } from '../../doc-management';
 
-import { DocsGridActions } from './DocsGridActions';
-
-const DocsGridStyle = createGlobalStyle`
-  & .c__datagrid thead{
-    position: sticky;
-    top: 0;
-    background: #fff;
-    z-index: 1;
-  }
-  & .c__pagination__goto{
-    display:none; 
-  }
-`;
-
-type SortModelItem = {
-  field: string;
-  sort: 'asc' | 'desc' | null;
-};
-
-function formatSortModel(sortModel: SortModelItem): DocsOrdering | undefined {
-  const { field, sort } = sortModel;
-  const orderingField = sort === 'desc' ? `-${field}` : field;
-
-  if (isDocsOrdering(orderingField)) {
-    return orderingField;
-  }
-}
+import { DocsGridItem } from './DocsGridItem';
+import { DocsGridLoader } from './DocsGridLoader';
 
 export const DocsGrid = () => {
-  const { colorsTokens } = useCunninghamTheme();
-  const { transRole } = useTrans();
   const { t } = useTranslation();
-  const { formatDate } = useDate();
-  const pagination = usePagination({
-    pageSize: PAGE_SIZE,
+
+  const { isDesktop } = useResponsiveStore();
+
+  const {
+    data,
+    isFetching,
+    isRefetching,
+    isLoading,
+    fetchNextPage,
+    hasNextPage,
+  } = useInfiniteDocs({
+    page: 1,
   });
-  const [sortModel, setSortModel] = useState<SortModel>([
-    {
-      field: 'updated_at',
-      sort: 'desc',
-    },
-  ]);
-  const { page, pageSize, setPagesCount } = pagination;
-  const [docs, setDocs] = useState<Doc[]>([]);
-  const { isMobile } = useResponsiveStore();
+  const loading = isFetching || isLoading;
 
-  const ordering = sortModel.length ? formatSortModel(sortModel[0]) : undefined;
-
-  const { data, isLoading, error } = useDocs({
-    page,
-    ordering,
-  });
-
-  useEffect(() => {
-    if (isLoading) {
+  const loadMore = (inView: boolean) => {
+    if (!inView || loading) {
       return;
     }
-
-    setDocs(data?.results || []);
-  }, [data?.results, t, isLoading]);
-
-  useEffect(() => {
-    setPagesCount(data?.count ? Math.ceil(data.count / pageSize) : 0);
-  }, [data?.count, pageSize, setPagesCount]);
-
-  const columns: Column<Doc>[] = [
-    {
-      headerName: '',
-      id: 'visibility',
-      size: 95,
-      renderCell: ({ row }) => {
-        return (
-          row.link_reach === LinkReach.PUBLIC && (
-            <StyledLink href={`/docs/${row.id}`}>
-              <Text
-                $weight="bold"
-                $background={colorsTokens()['primary-600']}
-                $color="white"
-                $padding="xtiny"
-                $radius="3px"
-              >
-                {t('Public')}
-              </Text>
-            </StyledLink>
-          )
-        );
-      },
-    },
-    {
-      headerName: t('Document name'),
-      field: 'title',
-      renderCell: ({ row }) => {
-        return (
-          <StyledLink href={`/docs/${row.id}`}>
-            <Text $weight="bold" $theme="primary">
-              {row.title}
-            </Text>
-          </StyledLink>
-        );
-      },
-    },
-    {
-      headerName: t('Created at'),
-      field: 'created_at',
-      renderCell: ({ row }) => {
-        return (
-          <StyledLink href={`/docs/${row.id}`}>
-            <Text $weight="bold">{formatDate(row.created_at)}</Text>
-          </StyledLink>
-        );
-      },
-    },
-    {
-      headerName: t('Updated at'),
-      field: 'updated_at',
-      renderCell: ({ row }) => {
-        return (
-          <StyledLink href={`/docs/${row.id}`}>
-            <Text $weight="bold">{formatDate(row.updated_at)}</Text>
-          </StyledLink>
-        );
-      },
-    },
-    {
-      headerName: t('Your role'),
-      id: 'your_role',
-      renderCell: ({ row }) => {
-        return (
-          <StyledLink href={`/docs/${row.id}`}>
-            <Text $weight="bold">
-              {transRole(currentDocRole(row.abilities))}
-            </Text>
-          </StyledLink>
-        );
-      },
-    },
-    {
-      headerName: t('Members'),
-      id: 'users_number',
-      renderCell: ({ row }) => {
-        return (
-          <StyledLink href={`/docs/${row.id}`}>
-            <Text $weight="bold">{row.accesses.length}</Text>
-          </StyledLink>
-        );
-      },
-    },
-    {
-      id: 'column-actions',
-      renderCell: ({ row }) => {
-        return <DocsGridActions doc={row} />;
-      },
-    },
-  ];
-
-  // Inverse columns for mobile to have the most important information first
-  if (isMobile) {
-    const tmpCol = columns[0];
-    columns[0] = columns[1];
-    columns[1] = tmpCol;
-  }
+    void fetchNextPage();
+  };
 
   return (
-    <Card
-      $padding={{ bottom: 'small', horizontal: 'big' }}
-      $margin={{ all: isMobile ? 'small' : 'big', top: 'none' }}
-      $overflow="auto"
-      aria-label={t(`Datagrid of the documents page {{page}}`, { page })}
-      $height="100%"
-    >
-      <DocsGridStyle />
-      <Text
-        $weight="bold"
-        as="h2"
-        $theme="primary"
-        $margin={{ bottom: 'small' }}
-      >
-        {t('Documents')}
-      </Text>
+    <Box $position="relative" $width="100%" $maxWidth="960px">
+      <DocsGridLoader isLoading={isRefetching} />
+      <Card data-testid="docs-grid" $padding="md">
+        <Text
+          as="h4"
+          $size="h4"
+          $weight="700"
+          $margin={{ top: '0px', bottom: 'xs' }}
+        >
+          {t('All docs')}
+        </Text>
 
-      {error && <TextErrors causes={error.cause} />}
+        <Box>
+          <Box $direction="row" $padding="xs" data-testid="docs-grid-header">
+            <Box $flex={6} $padding="3xs">
+              <Text $size="xs" $variation="600">
+                {t('Name')}
+              </Text>
+            </Box>
+            {isDesktop && (
+              <Box $flex={1} $padding="3xs">
+                <Text $size="xs" $variation="600">
+                  {t('Updated at')}
+                </Text>
+              </Box>
+            )}
 
-      <DataGrid
-        columns={columns}
-        rows={docs}
-        isLoading={isLoading}
-        pagination={pagination}
-        onSortModelChange={setSortModel}
-        sortModel={sortModel}
-        emptyPlaceholderLabel={t("You don't have any document yet.")}
-      />
-    </Card>
+            <Box $flex={1} $align="flex-end" $padding="3xs" />
+          </Box>
+
+          {/* Body */}
+          {data?.pages.map((currentPage) => {
+            return currentPage.results.map((doc) => (
+              <DocsGridItem doc={doc} key={doc.id} />
+            ));
+          })}
+        </Box>
+
+        {loading && (
+          <Box
+            data-testid="docs-grid-loader"
+            $padding="md"
+            $align="center"
+            $justify="center"
+            $width="100%"
+          >
+            <Loader />
+          </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/DocsGridActions.tsx

@@ -1,7 +1,7 @@
-import { Button } from '@openfun/cunningham-react';
-import React, { useState } from 'react';
+import { useModal } from '@openfun/cunningham-react';
 import { useTranslation } from 'react-i18next';
 
+import { DropdownMenu, DropdownMenuOption, Icon } from '@/components';
 import { Doc, ModalRemoveDoc } from '@/features/docs/doc-management';
 
 interface DocsGridActionsProps {
@@ -10,26 +10,31 @@ interface DocsGridActionsProps {
 
 export const DocsGridActions = ({ doc }: DocsGridActionsProps) => {
   const { t } = useTranslation();
-  const [isModalRemoveOpen, setIsModalRemoveOpen] = useState(false);
+  const deleteModal = useModal();
 
-  if (!doc.abilities.destroy) {
-    return null;
-  }
+  const options: DropdownMenuOption[] = [
+    {
+      label: t('Remove'),
+      icon: 'delete',
+      callback: () => deleteModal.open(),
+      disabled: !doc.abilities.destroy,
+      testId: `docs-grid-actions-remove-${doc.id}`,
+    },
+  ];
 
   return (
     <>
-      <Button
-        onClick={() => {
-          setIsModalRemoveOpen(true);
-        }}
-        color="tertiary-text"
-        icon={<span className="material-icons">delete</span>}
-        size="small"
-        style={{ padding: '0rem' }}
-        aria-label={t('Delete the document')}
-      />
-      {isModalRemoveOpen && (
-        <ModalRemoveDoc onClose={() => setIsModalRemoveOpen(false)} doc={doc} />
+      <DropdownMenu options={options}>
+        <Icon
+          data-testid={`docs-grid-actions-button-${doc.id}`}
+          iconName="more_horiz"
+          $theme="primary"
+          $variation="600"
+        />
+      </DropdownMenu>
+
+      {deleteModal.isOpen && (
+        <ModalRemoveDoc onClose={deleteModal.onClose} doc={doc} />
       )}
     </>
   );

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/router';
-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 { push } = useRouter();
-  const { isMobile } = useResponsiveStore();
-
-  const { mutate: createDoc } = useCreateDoc({
-    onSuccess: (doc) => {
-      void 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/DocsGridItem.tsx

@@ -0,0 +1,104 @@
+import { Button } from '@openfun/cunningham-react';
+import { DateTime } from 'luxon';
+import { css } from 'styled-components';
+
+import { Box, Icon, StyledLink, Text } from '@/components';
+import { useResponsiveStore } from '@/stores';
+
+import { Doc, LinkReach } from '../../doc-management';
+
+import { DocsGridActions } from './DocsGridActions';
+import { SimpleDocItem } from './SimpleDocItem';
+
+type DocsGridItemProps = {
+  doc: Doc;
+};
+export const DocsGridItem = ({ doc }: DocsGridItemProps) => {
+  const { isDesktop } = useResponsiveStore();
+
+  const isPublic = doc.link_reach === LinkReach.PUBLIC;
+  const isAuthenticated = doc.link_reach === LinkReach.AUTHENTICATED;
+  const isRestricted = doc.link_reach === LinkReach.RESTRICTED;
+  const sharedCount = doc.accesses.length - 1;
+  const isShared = sharedCount > 0;
+
+  return (
+    <Box
+      $direction="row"
+      $width="100%"
+      $align="center"
+      role="row"
+      $padding={{ vertical: 'xs', horizontal: 'sm' }}
+      $css={css`
+        cursor: pointer;
+        border-radius: 4px;
+        &:hover {
+          background-color: var(--c--theme--colors--greyscale-100);
+        }
+      `}
+    >
+      <StyledLink $css="flex: 7; align-items: center;" href={`/docs/${doc.id}`}>
+        <Box
+          data-testid={`docs-grid-name-${doc.id}`}
+          $flex={6}
+          $padding={{ right: 'base' }}
+        >
+          <SimpleDocItem doc={doc} />
+        </Box>
+        {isDesktop && (
+          <Box $flex={1}>
+            <Text $variation="500" $size="xs">
+              {DateTime.fromISO(doc.updated_at).toRelative()}
+            </Text>
+          </Box>
+        )}
+      </StyledLink>
+      <Box
+        $flex={1}
+        $direction="row"
+        $align="center"
+        $justify="flex-end"
+        $gap="10px"
+      >
+        {isDesktop && isPublic && (
+          <Button
+            onClick={(event) => {
+              event.preventDefault();
+              event.stopPropagation();
+            }}
+            size="nano"
+            icon={<Icon $variation="000" iconName="public" />}
+          >
+            {isShared ? sharedCount : undefined}
+          </Button>
+        )}
+        {isDesktop && !isPublic && isRestricted && isShared && (
+          <Button
+            onClick={(event) => {
+              event.preventDefault();
+              event.stopPropagation();
+            }}
+            color="tertiary"
+            size="nano"
+            icon={<Icon $variation="800" $theme="primary" iconName="group" />}
+          >
+            {sharedCount}
+          </Button>
+        )}
+        {isDesktop && !isPublic && isAuthenticated && (
+          <Button
+            onClick={(event) => {
+              event.preventDefault();
+              event.stopPropagation();
+            }}
+            size="nano"
+            icon={<Icon $variation="000" iconName="corporate_fare" />}
+          >
+            {sharedCount}
+          </Button>
+        )}
+        <DocsGridActions doc={doc} />
+      </Box>
+    </Box>
+  );
+};

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

@@ -0,0 +1,44 @@
+import { Loader } from '@openfun/cunningham-react';
+import { createGlobalStyle, css } from 'styled-components';
+
+import { Box } from '@/components';
+import { HEADER_HEIGHT } from '@/features/header/conf';
+
+const DocsGridLoaderStyle = createGlobalStyle`
+  body, main {
+    overflow: hidden!important;
+    overflow-y: hidden!important;
+  }
+`;
+
+type DocsGridLoaderProps = {
+  isLoading: boolean;
+};
+
+export const DocsGridLoader = ({ isLoading }: DocsGridLoaderProps) => {
+  if (!isLoading) {
+    return null;
+  }
+
+  return (
+    <>
+      <DocsGridLoaderStyle />
+      <Box
+        data-testid="grid-loader"
+        $align="center"
+        $justify="center"
+        $height="calc(100vh - 50px)"
+        $width="100%"
+        $maxWidth="960px"
+        $background="rgba(255, 255, 255, 0.3)"
+        $zIndex={998}
+        $position="fixed"
+        $css={css`
+          top: ${HEADER_HEIGHT}px;
+        `}
+      >
+        <Loader />
+      </Box>
+    </>
+  );
+};

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

@@ -0,0 +1,83 @@
+import { css } from 'styled-components';
+
+import { Box, Icon, Text } from '@/components';
+import { useCunninghamTheme } from '@/cunningham';
+import { Doc, LinkReach } 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';
+import { useResponsiveStore } from '@/stores';
+
+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 SimpleDocItemProps = {
+  doc: Doc;
+  isPinned?: boolean;
+  subText?: string;
+};
+
+export const SimpleDocItem = ({
+  doc,
+  isPinned = false,
+  subText,
+}: SimpleDocItemProps) => {
+  const { spacingsTokens } = useCunninghamTheme();
+  const { isDesktop } = useResponsiveStore();
+  const spacings = spacingsTokens();
+
+  const isPublic = doc?.link_reach === LinkReach.PUBLIC;
+  const isShared = !isPublic && doc.accesses.length > 1;
+  const accessCount = doc.accesses.length - 1;
+  const isSharedOrPublic = isShared || isPublic;
+
+  return (
+    <Box $direction="row" $gap={spacings.sm}>
+      <Box
+        $direction="row"
+        $align="center"
+        $css={css`
+          background-color: transparent;
+          filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.05));
+        `}
+      >
+        {isPinned ? <PinnedDocumentIcon /> : <SimpleFileIcon />}
+      </Box>
+      <Box>
+        <Text
+          aria-describedby="doc-title"
+          aria-label={doc.title}
+          $size="sm"
+          $variation="1000"
+          $weight="500"
+          $css={ItemTextCss}
+        >
+          {doc.title}
+        </Text>
+        <Box $direction="row" $align="center" $gap={spacings['3xs']}>
+          {!isDesktop && (
+            <>
+              {isPublic && <Icon iconName="public" $size="16px" />}
+              {isShared && <Icon iconName="group" $size="16px" />}
+              {isSharedOrPublic && accessCount > 0 && (
+                <Text $size="12px">{accessCount}</Text>
+              )}
+              {isSharedOrPublic && <Text $size="12px">·</Text>}
+            </>
+          )}
+
+          <Text $size="xs" $variation="500" $weight="500" $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>
+        </Box>
+      </Box>
+    </Box>
+  );
+};

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/members/invitation-list/api/useDeleteDocInvitation.ts

@@ -13,6 +13,10 @@ interface DeleteDocInvitationProps {
   invitationId: string;
 }
 
+interface RemoveDocInvitationError {
+  role?: string[];
+}
+
 export const deleteDocInvitation = async ({
   docId,
   invitationId,
@@ -34,7 +38,7 @@ export const deleteDocInvitation = async ({
 
 type UseDeleteDocInvitationOptions = UseMutationOptions<
   void,
-  APIError,
+  APIError<RemoveDocInvitationError>,
   DeleteDocInvitationProps
 >;
 
@@ -42,7 +46,11 @@ export const useDeleteDocInvitation = (
   options?: UseDeleteDocInvitationOptions,
 ) => {
   const queryClient = useQueryClient();
-  return useMutation<void, APIError, DeleteDocInvitationProps>({
+  return useMutation<
+    void,
+    APIError<RemoveDocInvitationError>,
+    DeleteDocInvitationProps
+  >({
     mutationFn: deleteDocInvitation,
     ...options,
     onSuccess: (data, variables, context) => {

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

@@ -17,6 +17,10 @@ interface UpdateDocInvitationProps {
   role: Role;
 }
 
+interface UpdateDocInvitationError {
+  role?: string[];
+}
+
 export const updateDocInvitation = async ({
   docId,
   invitationId,
@@ -43,7 +47,7 @@ type UseUpdateDocInvitation = Partial<Invitation>;
 
 type UseUpdateDocInvitationOptions = UseMutationOptions<
   Invitation,
-  APIError,
+  APIError<UpdateDocInvitationError>,
   UseUpdateDocInvitation
 >;
 
@@ -51,7 +55,11 @@ export const useUpdateDocInvitation = (
   options?: UseUpdateDocInvitationOptions,
 ) => {
   const queryClient = useQueryClient();
-  return useMutation<Invitation, APIError, UpdateDocInvitationProps>({
+  return useMutation<
+    Invitation,
+    APIError<UpdateDocInvitationError>,
+    UpdateDocInvitationProps
+  >({
     mutationFn: updateDocInvitation,
     ...options,
     onSuccess: (data, variables, context) => {

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/Burger/Burger.module.css

@@ -1,32 +0,0 @@
-.burgerIcon {
-  cursor: pointer;
-  transform: translate(-20%, 0%);
-}
-
-.burgerIcon path {
-  stroke-width: 40;
-  stroke-linecap: round;
-  fill: none;
-  transition: all 0.5s ease-in-out;
-}
-
-/* In menu form */
-.burgerIcon path:first-child,
-.burgerIcon path:last-child {
-  stroke-dasharray: 240px 910px;
-}
-
-.burgerIcon .middle_bar {
-  stroke-dasharray: 240px 240px;
-}
-
-/* In cross form */
-.open path:first-child,
-.open path:last-child {
-  stroke-dashoffset: -650px;
-}
-
-.open :nth-child(2) {
-  stroke-dasharray: 0 220px;
-  stroke-dashoffset: -120px;
-}

src/frontend/apps/impress/src/features/header/components/Burger/Burger.spec.tsx

@@ -1,18 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import React from 'react';
-
-import { Burger } from './Burger';
-
-describe('<Burger />', () => {
-  test('Burger interactions', () => {
-    const { rerender } = render(<Burger isOpen={true} />);
-
-    const burger = screen.getByRole('img');
-    expect(burger).toBeInTheDocument();
-    expect(burger.classList.contains('open')).toBeTruthy();
-
-    rerender(<Burger isOpen={false} />);
-
-    expect(burger.classList.contains('open')).not.toBeTruthy();
-  });
-});

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

@@ -1,31 +0,0 @@
-import { SVGProps } from 'react';
-
-import { Box } from '@/components';
-import { useCunninghamTheme } from '@/cunningham';
-
-import styles from './Burger.module.css';
-import BurgerIcon from './burger.svg';
-
-type BurgerProps = SVGProps<SVGSVGElement> & {
-  isOpen: boolean;
-};
-
-export const Burger = ({ isOpen, ...props }: BurgerProps) => {
-  const { colorsTokens } = useCunninghamTheme();
-
-  return (
-    <Box
-      $color={colorsTokens()['primary-text']}
-      $padding="none"
-      $justify="center"
-    >
-      <BurgerIcon
-        role="img"
-        className={`${styles.burgerIcon} ${isOpen ? styles.open : ''}`}
-        {...props}
-      />
-    </Box>
-  );
-};
-
-export default Burger;

src/frontend/apps/impress/src/features/header/components/Burger/burger.svg

@@ -1,10 +0,0 @@
-<svg viewBox="280 230 400 200" stroke="currentColor">
-  <path
-    d="M300,220 C300,220 520,220 540,220 C740,220 640,540 520,420 C440,340 300,200 300,200"
-  />
-  <path d="M300,320 L540,320" />
-  <path
-    d="M300,210 C300,210 520,210 540,210 C740,210 640,530 520,410 C440,330 300,190 300,190"
-    transform="translate(480, 320) scale(1, -1) translate(-480, -318)"
-  />
-</svg>

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

@@ -1,46 +0,0 @@
-import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { Box, DropButton } from '@/components';
-import { ButtonLogin } from '@/core';
-import { useCunninghamTheme } from '@/cunningham';
-import { LanguagePicker } from '@/features/language';
-
-import { Burger } from './Burger/Burger';
-
-export const DropdownMenu = () => {
-  const { colorsTokens } = useCunninghamTheme();
-  const [isDropOpen, setIsDropOpen] = useState(false);
-  const { t } = useTranslation();
-
-  return (
-    <DropButton
-      button={
-        <Burger
-          isOpen={isDropOpen}
-          width={30}
-          height={30}
-          aria-controls="menu"
-          aria-label={t('Open the header menu')}
-        />
-      }
-      onOpenChange={(isOpen) => setIsDropOpen(isOpen)}
-      isOpen={isDropOpen}
-    >
-      <Box $align="center" $direction="column">
-        <Box
-          $width="100%"
-          $align="center"
-          $height="36px"
-          $justify="center"
-          $css={`&:hover{background:${colorsTokens()['primary-150']}}`}
-          $hasTransition
-          $radius="2px"
-        >
-          <LanguagePicker />
-        </Box>
-        <ButtonLogin />
-      </Box>
-    </DropButton>
-  );
-};

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

@@ -1,90 +1,106 @@
+import { Button } from '@openfun/cunningham-react';
 import Image from 'next/image';
-import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { css } from 'styled-components';
 
-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 { useLeftPanelStore } from '@/features/left-panel';
 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 { isPanelOpen, togglePanel } = useLeftPanelStore();
+  const { isDesktop } = useResponsiveStore();
+
+  const spacings = theme.spacingsTokens();
+  const colors = theme.colorsTokens();
 
   return (
     <Box
       as="header"
-      $justify="center"
-      $width="100%"
-      $zIndex="100"
-      $padding={{ vertical: 'xtiny' }}
-      $css="box-shadow: 0 1px 4px #00000040;"
+      $css={css`
+        display: flex;
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        z-index: 1000;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        height: ${HEADER_HEIGHT}px;
+        min-height: ${HEADER_HEIGHT}px;
+        padding: 0 ${spacings['base']};
+        background-color: ${colors['greyscale-000']};
+        border-bottom: 1px solid ${colors['greyscale-200']};
+      `}
     >
-      <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={`
+      {!isDesktop && (
+        <Button
+          size="medium"
+          onClick={togglePanel}
+          aria-label={t('Open the header menu')}
+          color="primary-text"
+          icon={<Icon iconName={isPanelOpen ? 'close' : 'menu'} />}
+        />
+      )}
+
+      <StyledLink href="/">
+        <Box
+          $align="center"
+          $gap={spacings['3xs']}
+          $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"
+          >
+            {t('Docs')}
+          </Text>
+          <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>
+          >
+            BETA
+          </Text>
         </Box>
-        {isSmallMobile ? (
-          <Box $direction="row" $gap="2rem">
-            <LaGaufre />
-            <DropdownMenu />
-          </Box>
-        ) : (
-          <Box $align="center" $gap="2vw" $direction="row">
-            <ButtonLogin />
-            <LanguagePicker />
-            <LaGaufre />
-          </Box>
-        )}
-      </Box>
+      </StyledLink>
+      {!isDesktop ? (
+        <Box $direction="row" $gap={spacings['sm']}>
+          <LaGaufre />
+        </Box>
+      ) : (
+        <Box $align="center" $gap={spacings['sm']} $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/language/LanguagePicker.tsx

@@ -1,4 +1,5 @@
 import { Select } from '@openfun/cunningham-react';
+import { Settings } from 'luxon';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
@@ -34,6 +35,7 @@ const SelectStyled = styled(Select)<{ $isSmall?: boolean }>`
 export const LanguagePicker = () => {
   const { t, i18n } = useTranslation();
   const { preload: languages } = i18n.options;
+  Settings.defaultLocale = i18n.language;
 
   const optionsPicker = useMemo(() => {
     return (languages || []).map((lang) => ({

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

@@ -0,0 +1,81 @@
+import { PropsWithChildren } from 'react';
+import { createGlobalStyle, css } from 'styled-components';
+
+import { Box, SeparatedSection } from '@/components';
+import { ButtonLogin } from '@/core';
+import { useCunninghamTheme } from '@/cunningham';
+import { HEADER_HEIGHT } from '@/features/header/conf';
+import { LanguagePicker } from '@/features/language';
+import { useResponsiveStore } from '@/stores';
+
+import { useLeftPanelStore } from '../stores';
+
+import { LeftPanelHeader } from './LeftPanelHeader';
+
+const MobileLeftPanelStyle = createGlobalStyle`
+  body {
+    overflow: hidden;
+  }
+`;
+
+export const LeftPanel = ({ children }: PropsWithChildren) => {
+  const { isDesktop } = useResponsiveStore();
+  const { isPanelOpen } = useLeftPanelStore();
+  const theme = useCunninghamTheme();
+  const colors = theme.colorsTokens();
+  const spacings = theme.spacingsTokens();
+
+  return (
+    <>
+      {isDesktop && (
+        <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']};
+        `}
+        >
+          <LeftPanelHeader>{children}</LeftPanelHeader>
+        </Box>
+      )}
+
+      {!isDesktop && (
+        <>
+          {isPanelOpen && <MobileLeftPanelStyle />}
+          <Box
+            $hasTransition
+            $css={css`
+              z-index: 999;
+              width: 100dvw;
+              height: calc(100dvh - 52px);
+              border-right: 1px solid var(--c--theme--colors--greyscale-200);
+              position: fixed;
+              transform: translateX(${isPanelOpen ? '0' : '-100dvw'});
+              background-color: var(--c--theme--colors--greyscale-000);
+            `}
+          >
+            <Box
+              data-testid="left-panel-mobile"
+              $css={css`
+                width: 100%;
+                justify-content: center;
+                align-items: center;
+                gap: ${spacings['base']};
+              `}
+            >
+              <LeftPanelHeader>{children}</LeftPanelHeader>
+              <SeparatedSection showSeparator={false}>
+                <Box $justify="center" $align="center" $gap={spacings['sm']}>
+                  <ButtonLogin />
+                  <LanguagePicker />
+                </Box>
+              </SeparatedSection>
+            </Box>
+          </Box>
+        </>
+      )}
+    </>
+  );
+};

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

@@ -0,0 +1,55 @@
+import { Button } from '@openfun/cunningham-react';
+import { t } from 'i18next';
+import { useRouter } from 'next/navigation';
+import { PropsWithChildren } from 'react';
+
+import { Box, Icon, SeparatedSection } from '@/components';
+import { useCreateDoc } from '@/features/docs';
+
+import { useLeftPanelStore } from '../stores';
+
+export const LeftPanelHeader = ({ children }: PropsWithChildren) => {
+  const router = useRouter();
+  const { togglePanel } = useLeftPanelStore();
+
+  const { mutate: createDoc } = useCreateDoc({
+    onSuccess: (doc) => {
+      router.push(`/docs/${doc.id}`);
+      togglePanel();
+    },
+  });
+
+  const goToHome = () => {
+    router.push('/');
+    togglePanel();
+  };
+
+  const createNewDoc = () => {
+    createDoc({ title: t('Untitled document') });
+  };
+
+  return (
+    <Box $width="100%">
+      <SeparatedSection>
+        <Box
+          $padding={{ horizontal: 'sm' }}
+          $width="100%"
+          $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}
+    </Box>
+  );
+};

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

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

src/frontend/apps/impress/src/features/left-panel/index.ts

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

src/frontend/apps/impress/src/features/left-panel/stores/index.ts

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

src/frontend/apps/impress/src/features/left-panel/stores/useLeftPanelStore.tsx

@@ -0,0 +1,11 @@
+import { create } from 'zustand';
+
+interface LeftPanelState {
+  isPanelOpen: boolean;
+  togglePanel: () => void;
+}
+
+export const useLeftPanelStore = create<LeftPanelState>((set) => ({
+  isPanelOpen: false,
+  togglePanel: () => set((state) => ({ isPanelOpen: !state.isPanelOpen })),
+}));

src/frontend/apps/impress/src/features/users/components/SearchUserRow.tsx

@@ -0,0 +1,47 @@
+import { Box, Text } from '@/components';
+import {
+  QuickSearchItemContent,
+  QuickSearchItemContentProps,
+} from '@/components/quick-search/QuickSearchItemContent';
+import { User } from '@/core';
+import { useCunninghamTheme } from '@/cunningham';
+
+import { UserAvatar } from './UserAvatar';
+
+type Props = {
+  user: User;
+  alwaysShowRight?: boolean;
+  right?: QuickSearchItemContentProps['right'];
+};
+
+export const SearchUserRow = ({
+  user,
+  right,
+  alwaysShowRight = false,
+}: Props) => {
+  const hasFullName = user.full_name != null && user.full_name !== '';
+  const { spacingsTokens } = useCunninghamTheme();
+  const spacings = spacingsTokens();
+
+  return (
+    <QuickSearchItemContent
+      right={right}
+      alwaysShowRight={alwaysShowRight}
+      left={
+        <Box $direction="row" $align="center" $gap={spacings['2xs']}>
+          <UserAvatar user={user} />
+          <Box $direction="column">
+            <Text $size="sm" $weight="500" $variation="1000">
+              {hasFullName ? user.full_name : user.email}
+            </Text>
+            {hasFullName && (
+              <Text $size="xs" $variation="600">
+                {user.email}
+              </Text>
+            )}
+          </Box>
+        </Box>
+      }
+    />
+  );
+};

src/frontend/apps/impress/src/features/users/components/UserAvatar.tsx

@@ -0,0 +1,67 @@
+import { css } from 'styled-components';
+
+import { Box } from '@/components';
+import { User } from '@/core';
+import { tokens } from '@/cunningham';
+
+const colors = tokens.themes.default.theme.colors;
+
+const avatarsColors = [
+  colors['blue-500'],
+  colors['brown-500'],
+  colors['cyan-500'],
+  colors['gold-500'],
+  colors['green-500'],
+  colors['olive-500'],
+  colors['orange-500'],
+  colors['pink-500'],
+  colors['purple-500'],
+  colors['yellow-500'],
+];
+
+type Props = {
+  user: User;
+};
+
+export const UserAvatar = ({ user }: Props) => {
+  const name = user.full_name || user.email;
+  const splitName = name.split(' ');
+
+  const getColorFromName = () => {
+    let hash = 0;
+    for (let i = 0; i < name.length; i++) {
+      hash = name.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    return avatarsColors[Math.abs(hash) % avatarsColors.length];
+  };
+  return (
+    <Box
+      $background={getColorFromName()}
+      $width="24px"
+      $height="24px"
+      $direction="row"
+      $align="center"
+      $justify="center"
+      $radius="50%"
+      $css={css`
+        color: rgba(255, 255, 255, 0.9);
+        border: 1px solid rgba(255, 255, 255, 0.5);
+      `}
+    >
+      <Box
+        $direction="row"
+        $css={css`
+          text-align: center;
+          font-style: normal;
+          font-weight: 600;
+          font-family: Arial, Helvetica, sans-serif; // Can't use marianne font because it's impossible to center with this font
+          font-size: 10px;
+          text-transform: uppercase;
+        `}
+      >
+        {splitName[0]?.charAt(0)}
+        {splitName?.[1]?.charAt(0)}
+      </Box>
+    </Box>
+  );
+};

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

@@ -1,36 +1,64 @@
 import { PropsWithChildren } from 'react';
+import { css } from 'styled-components';
 
 import { Box } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 import { Footer } from '@/features/footer';
 import { Header } from '@/features/header';
+import { HEADER_HEIGHT } from '@/features/header/conf';
+import { LeftPanel } from '@/features/left-panel';
+import { MAIN_LAYOUT_ID } from '@/layouts/conf';
+import { useResponsiveStore } from '@/stores';
 
-interface MainLayoutProps {
+type MainLayoutProps = {
+  backgroundColor?: 'white' | 'grey';
   withoutFooter?: boolean;
-}
+};
 
 export function MainLayout({
   children,
-  withoutFooter,
+  backgroundColor = 'white',
+  withoutFooter = false,
 }: PropsWithChildren<MainLayoutProps>) {
+  const { isDesktop } = useResponsiveStore();
   const { colorsTokens } = useCunninghamTheme();
 
+  const colors = colorsTokens();
+
   return (
-    <Box>
-      <Box $minHeight="100vh">
-        <Header />
-        <Box $css="flex: 1;" $direction="row">
-          <Box
-            as="main"
-            $minHeight="100vh"
-            $width="100%"
-            $background={colorsTokens()['primary-bg']}
-          >
-            {children}
-          </Box>
+    <div>
+      <Header />
+      <Box
+        $direction="row"
+        $margin={{ top: `${HEADER_HEIGHT}px` }}
+        $width="100%"
+      >
+        <LeftPanel />
+        <Box
+          as="main"
+          id={MAIN_LAYOUT_ID}
+          $align="center"
+          $flex={1}
+          $width="100%"
+          $height={`calc(100dvh - ${HEADER_HEIGHT}px)`}
+          $padding={{
+            vertical: isDesktop ? 'base' : 'xs',
+            horizontal: isDesktop ? '6xl' : 'xs',
+          }}
+          $background={
+            backgroundColor === 'white'
+              ? colors['greyscale-000']
+              : colors['greyscale-050']
+          }
+          $css={css`
+            overflow-y: auto;
+            overflow-x: clip;
+          `}
+        >
+          {children}
         </Box>
       </Box>
       {!withoutFooter && <Footer />}
-    </Box>
+    </div>
   );
 }

src/frontend/apps/impress/src/layouts/conf.ts

@@ -0,0 +1 @@
+export const MAIN_LAYOUT_ID = `mainContent`;

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

@@ -28,6 +28,7 @@ export function DocLayout() {
       <Head>
         <meta name="robots" content="noindex" />
       </Head>
+
       <MainLayout withoutFooter>
         <DocPage id={id} />
       </MainLayout>

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

@@ -1,15 +1,20 @@
 import type { ReactElement } from 'react';
 
-import { DocsGridContainer } from '@/features/docs/docs-grid';
+import { Box } from '@/components';
+import { DocsGrid } from '@/features/docs/docs-grid/components/DocsGrid';
 import { MainLayout } from '@/layouts';
 import { NextPageWithLayout } from '@/types/next';
 
 const Page: NextPageWithLayout = () => {
-  return <DocsGridContainer />;
+  return (
+    <Box $width="100%" $align="center">
+      <DocsGrid />
+    </Box>
+  );
 };
 
 Page.getLayout = function getLayout(page: ReactElement) {
-  return <MainLayout>{page}</MainLayout>;
+  return <MainLayout backgroundColor="grey">{page}</MainLayout>;
 };
 
 export default Page;

src/frontend/apps/impress/src/stores/useResponsiveStore.tsx

@@ -4,41 +4,67 @@ export type ScreenSize = 'small-mobile' | 'mobile' | 'tablet' | 'desktop';
 
 export interface UseResponsiveStore {
   isMobile: boolean;
+  isTablet: boolean;
   isSmallMobile: boolean;
   screenSize: ScreenSize;
   screenWidth: number;
   setScreenSize: (size: ScreenSize) => void;
+  isDesktop: boolean;
   initializeResizeListener: () => () => void;
 }
 
 const initialState = {
   isMobile: false,
   isSmallMobile: false,
+  isTablet: false,
+  isDesktop: false,
   screenSize: 'desktop' as ScreenSize,
   screenWidth: 0,
 };
 
 export const useResponsiveStore = create<UseResponsiveStore>((set) => ({
   isMobile: initialState.isMobile,
+  isTablet: initialState.isTablet,
   isSmallMobile: initialState.isSmallMobile,
   screenSize: initialState.screenSize,
   screenWidth: initialState.screenWidth,
   setScreenSize: (size: ScreenSize) => set(() => ({ screenSize: size })),
+  isDesktop: initialState.isDesktop,
   initializeResizeListener: () => {
     const resizeHandler = () => {
       const width = window.innerWidth;
       if (width < 560) {
         set({
+          isDesktop: false,
           screenSize: 'small-mobile',
           isMobile: true,
+          isTablet: false,
           isSmallMobile: true,
         });
       } else if (width < 768) {
-        set({ screenSize: 'mobile', isMobile: true, isSmallMobile: false });
+        set({
+          isDesktop: false,
+          screenSize: 'mobile',
+          isTablet: false,
+          isMobile: true,
+          isSmallMobile: false,
+        });
       } else if (width >= 768 && width < 1024) {
-        set({ screenSize: 'tablet', isMobile: false, isSmallMobile: false });
+        set({
+          isDesktop: false,
+          screenSize: 'tablet',
+          isTablet: true,
+          isMobile: false,
+          isSmallMobile: false,
+        });
       } else {
-        set({ screenSize: 'desktop', isMobile: false, isSmallMobile: false });
+        set({
+          isDesktop: true,
+          screenSize: 'desktop',
+          isTablet: false,
+          isMobile: false,
+          isSmallMobile: false,
+        });
       }
 
       set({ screenWidth: width });

src/frontend/yarn.lock

@@ -2425,6 +2425,127 @@
     "@opentelemetry/instrumentation" "^0.49 || ^0.50 || ^0.51 || ^0.52.0"
     "@opentelemetry/sdk-trace-base" "^1.22"
 
+"@radix-ui/primitive@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.1.0.tgz#42ef83b3b56dccad5d703ae8c42919a68798bbe2"
+  integrity sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==
+
+"@radix-ui/react-compose-refs@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz#656432461fc8283d7b591dcf0d79152fae9ecc74"
+  integrity sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==
+
+"@radix-ui/react-context@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.1.1.tgz#82074aa83a472353bb22e86f11bcbd1c61c4c71a"
+  integrity sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==
+
+"@radix-ui/react-dialog@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.1.2.tgz#d9345575211d6f2d13e209e84aec9a8584b54d6c"
+  integrity sha512-Yj4dZtqa2o+kG61fzB0H2qUvmwBA2oyQroGLyNtBj1beo1khoQ3q1a2AO8rrQYjd8256CO9+N8L9tvsS+bnIyA==
+  dependencies:
+    "@radix-ui/primitive" "1.1.0"
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-context" "1.1.1"
+    "@radix-ui/react-dismissable-layer" "1.1.1"
+    "@radix-ui/react-focus-guards" "1.1.1"
+    "@radix-ui/react-focus-scope" "1.1.0"
+    "@radix-ui/react-id" "1.1.0"
+    "@radix-ui/react-portal" "1.1.2"
+    "@radix-ui/react-presence" "1.1.1"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-slot" "1.1.0"
+    "@radix-ui/react-use-controllable-state" "1.1.0"
+    aria-hidden "^1.1.1"
+    react-remove-scroll "2.6.0"
+
+"@radix-ui/react-dismissable-layer@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.1.tgz#cbdcb739c5403382bdde5f9243042ba643883396"
+  integrity sha512-QSxg29lfr/xcev6kSz7MAlmDnzbP1eI/Dwn3Tp1ip0KT5CUELsxkekFEMVBEoykI3oV39hKT4TKZzBNMbcTZYQ==
+  dependencies:
+    "@radix-ui/primitive" "1.1.0"
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-use-callback-ref" "1.1.0"
+    "@radix-ui/react-use-escape-keydown" "1.1.0"
+
+"@radix-ui/react-focus-guards@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.1.tgz#8635edd346304f8b42cae86b05912b61aef27afe"
+  integrity sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==
+
+"@radix-ui/react-focus-scope@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.0.tgz#ebe2891a298e0a33ad34daab2aad8dea31caf0b2"
+  integrity sha512-200UD8zylvEyL8Bx+z76RJnASR2gRMuxlgFCPAe/Q/679a/r0eK3MBVYMb7vZODZcffZBdob1EGnky78xmVvcA==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-use-callback-ref" "1.1.0"
+
+"@radix-ui/react-id@1.1.0", "@radix-ui/react-id@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.1.0.tgz#de47339656594ad722eb87f94a6b25f9cffae0ed"
+  integrity sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==
+  dependencies:
+    "@radix-ui/react-use-layout-effect" "1.1.0"
+
+"@radix-ui/react-portal@1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.1.2.tgz#51eb46dae7505074b306ebcb985bf65cc547d74e"
+  integrity sha512-WeDYLGPxJb/5EGBoedyJbT0MpoULmwnIPMJMSldkuiMsBAv7N1cRdsTWZWht9vpPOiN3qyiGAtbK2is47/uMFg==
+  dependencies:
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-use-layout-effect" "1.1.0"
+
+"@radix-ui/react-presence@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.1.1.tgz#98aba423dba5e0c687a782c0669dcd99de17f9b1"
+  integrity sha512-IeFXVi4YS1K0wVZzXNrbaaUvIJ3qdY+/Ih4eHFhWA9SwGR9UDX7Ck8abvL57C4cv3wwMvUE0OG69Qc3NCcTe/A==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-use-layout-effect" "1.1.0"
+
+"@radix-ui/react-primitive@2.0.0", "@radix-ui/react-primitive@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz#fe05715faa9203a223ccc0be15dc44b9f9822884"
+  integrity sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==
+  dependencies:
+    "@radix-ui/react-slot" "1.1.0"
+
+"@radix-ui/react-slot@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.1.0.tgz#7c5e48c36ef5496d97b08f1357bb26ed7c714b84"
+  integrity sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.0"
+
+"@radix-ui/react-use-callback-ref@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz#bce938ca413675bc937944b0d01ef6f4a6dc5bf1"
+  integrity sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==
+
+"@radix-ui/react-use-controllable-state@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz#1321446857bb786917df54c0d4d084877aab04b0"
+  integrity sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==
+  dependencies:
+    "@radix-ui/react-use-callback-ref" "1.1.0"
+
+"@radix-ui/react-use-escape-keydown@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.0.tgz#31a5b87c3b726504b74e05dac1edce7437b98754"
+  integrity sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==
+  dependencies:
+    "@radix-ui/react-use-callback-ref" "1.1.0"
+
+"@radix-ui/react-use-layout-effect@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz#3c2c8ce04827b26a39e442ff4888d9212268bd27"
+  integrity sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==
+
 "@react-aria/breadcrumbs@^3.5.16", "@react-aria/breadcrumbs@^3.5.19":
   version "3.5.19"
   resolved "https://registry.yarnpkg.com/@react-aria/breadcrumbs/-/breadcrumbs-3.5.19.tgz#e0a67e0e7017089fa0ee5eadd51a6da505b94cd4"
@@ -5171,6 +5292,13 @@ argparse@^2.0.1:
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
   integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
 
+aria-hidden@^1.1.1:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/aria-hidden/-/aria-hidden-1.2.4.tgz#b78e383fdbc04d05762c78b4a25a501e736c4522"
+  integrity sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==
+  dependencies:
+    tslib "^2.0.0"
+
 aria-query@5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.3.0.tgz#650c569e41ad90b51b3d7df5e5eed1c7549c103e"
@@ -5742,6 +5870,16 @@ clsx@^2.0.0, clsx@^2.1.1:
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
   integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
 
+cmdk@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/cmdk/-/cmdk-1.0.4.tgz#cbddef6f5ade2378f85c80a0b9ad9a8a712779b5"
+  integrity sha512-AnsjfHyHpQ/EFeAnG216WY7A5LiYCoZzCSygiLvfXC3H3LFGCprErteUcszaVluGOhuOTbJS3jWHrSDYPBBygg==
+  dependencies:
+    "@radix-ui/react-dialog" "^1.1.2"
+    "@radix-ui/react-id" "^1.1.0"
+    "@radix-ui/react-primitive" "^2.0.0"
+    use-sync-external-store "^1.2.2"
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
@@ -10713,6 +10851,11 @@ react-icons@^5.2.1:
   resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-5.3.0.tgz#ccad07a30aebd40a89f8cfa7d82e466019203f1c"
   integrity sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==
 
+react-intersection-observer@9.13.1:
+  version "9.13.1"
+  resolved "https://registry.yarnpkg.com/react-intersection-observer/-/react-intersection-observer-9.13.1.tgz#6c61a75801162491c6348bad09967f2caf445584"
+  integrity sha512-tSzDaTy0qwNPLJHg8XZhlyHTgGW6drFKTtvjdL+p6um12rcnp8Z5XstE+QNBJ7c64n5o0Lj4ilUleA41bmDoMw==
+
 react-is@18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
@@ -10761,7 +10904,7 @@ react-remove-scroll-bar@^2.3.6:
     react-style-singleton "^2.2.1"
     tslib "^2.0.0"
 
-react-remove-scroll@^2.6.0:
+react-remove-scroll@2.6.0, react-remove-scroll@^2.6.0:
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.6.0.tgz#fb03a0845d7768a4f1519a99fdb84983b793dc07"
   integrity sha512-I2U4JVEsQenxDAKaVa3VZ/JeJZe0/2DxPWL8Tj8yLKctQJQiZM52pn/GWFpSp8dftjM3pSAHVJZscAnC/y+ySQ==
@@ -12474,6 +12617,11 @@ use-composed-ref@^1.3.0:
   resolved "https://registry.yarnpkg.com/use-composed-ref/-/use-composed-ref-1.3.0.tgz#3d8104db34b7b264030a9d916c5e94fbe280dbda"
   integrity sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==
 
+use-debounce@10.0.4:
+  version "10.0.4"
+  resolved "https://registry.yarnpkg.com/use-debounce/-/use-debounce-10.0.4.tgz#2135be498ad855416c4495cfd8e0e130bd33bb24"
+  integrity sha512-6Cf7Yr7Wk7Kdv77nnJMf6de4HuDE4dTxKij+RqE9rufDsI6zsbjyAxcH5y2ueJCQAnfgKbzXbZHYlkFwmBlWkw==
+
 use-isomorphic-layout-effect@^1.1.1, use-isomorphic-layout-effect@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"
@@ -12494,7 +12642,7 @@ use-sidecar@^1.1.2:
     detect-node-es "^1.1.0"
     tslib "^2.0.0"
 
-use-sync-external-store@^1, use-sync-external-store@^1.2.0:
+use-sync-external-store@^1, use-sync-external-store@^1.2.0, use-sync-external-store@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz#c3b6390f3a30eba13200d2302dcdf1e7b57b2ef9"
   integrity sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==