From 66f83db0e50101f3a4a148240569381ff532e2cc Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Wed, 5 Nov 2025 10:14:10 +0100
Subject: [PATCH 1/4] =?UTF-8?q?=E2=9C=A8(frontend)=20add=20"Add=20Emoji"?=
 =?UTF-8?q?=20button=20to=20doc=20options=20menu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add "Add Emoji" button to doc options menu
- Remove default emoji when none selected
- Improve doc options styling
---
 .../__tests__/app-impress/doc-header.spec.ts  |  27 ++++-
 .../__tests__/app-impress/doc-tree.spec.ts    |   2 +-
 .../docs/doc-header/components/DocTitle.tsx   |  31 ++---
 .../docs/doc-header/components/DocToolBox.tsx | 112 +++++++++---------
 4 files changed, 102 insertions(+), 70 deletions(-)

diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts
index 89f052864..99635176f 100644
--- a/src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts
+++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts
@@ -68,9 +68,18 @@ test.describe('Doc Header', () => {
     await createDoc(page, 'doc-update-emoji', browserName, 1);
 
     const emojiPicker = page.locator('.--docs--doc-title').getByRole('button');
+    const optionMenu = page.getByLabel('Open the document options');
+    const addEmojiMenuItem = page.getByRole('menuitem', { name: 'Add emoji' });
+    const removeEmojiMenuItem = page.getByRole('menuitem', {
+      name: 'Remove emoji',
+    });
 
     // Top parent should not have emoji picker
     await expect(emojiPicker).toBeHidden();
+    await optionMenu.click();
+    await expect(addEmojiMenuItem).toBeHidden();
+    await expect(removeEmojiMenuItem).toBeHidden();
+    await page.keyboard.press('Escape');
 
     const { name: docChild } = await createRootSubPage(
       page,
@@ -80,13 +89,23 @@ test.describe('Doc Header', () => {
 
     await verifyDocName(page, docChild);
 
-    await expect(emojiPicker).toBeVisible();
+    // Emoji picker should be hidden initially
+    await expect(emojiPicker).toBeHidden();
+
+    // Add emoji
+    await optionMenu.click();
+    await expect(removeEmojiMenuItem).toBeHidden();
+    await addEmojiMenuItem.click();
+    await expect(emojiPicker).toHaveText('📄');
+
+    // Change emoji
     await emojiPicker.click({
       delay: 100,
     });
     await page.getByRole('button', { name: '😀' }).first().click();
     await expect(emojiPicker).toHaveText('😀');
 
+    // Update title
     const docTitle = page.getByRole('textbox', { name: 'Document title' });
     await docTitle.fill('Hello Emoji World');
     await docTitle.blur();
@@ -95,6 +114,12 @@ test.describe('Doc Header', () => {
     // Check the tree
     const row = await getTreeRow(page, 'Hello Emoji World');
     await expect(row.getByText('😀')).toBeVisible();
+
+    // Remove emoji
+    await optionMenu.click();
+    await expect(addEmojiMenuItem).toBeHidden();
+    await removeEmojiMenuItem.click();
+    await expect(emojiPicker).toBeHidden();
   });
 
   test('it deletes the doc', async ({ page, browserName }) => {
diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-tree.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-tree.spec.ts
index 422231f71..0e3bf49cc 100644
--- a/src/frontend/apps/e2e/__tests__/app-impress/doc-tree.spec.ts
+++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-tree.spec.ts
@@ -352,7 +352,7 @@ test.describe('Doc Tree', () => {
     await page.getByRole('menuitem', { name: 'Remove emoji' }).click();
 
     await expect(row.getByText('😀')).toBeHidden();
-    await expect(titleEmojiPicker).not.toHaveText('😀');
+    await expect(titleEmojiPicker).toBeHidden();
   });
 });
 
diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx
index c3d669181..33905caa7 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx
@@ -55,8 +55,16 @@ const DocTitleEmojiPicker = ({ doc }: DocTitleProps) => {
   const { colorsTokens } = useCunninghamTheme();
   const { emoji } = getEmojiAndTitle(doc.title ?? '');
 
+  if (!emoji) {
+    return null;
+  }
+
   return (
-    <Tooltip content={t('Document emoji')} aria-hidden={true} placement="top">
+    <Tooltip
+      content={t('Edit document emoji')}
+      aria-hidden={true}
+      placement="top"
+    >
       <Box
         $css={css`
           padding: 4px;
@@ -70,11 +78,17 @@ const DocTitleEmojiPicker = ({ doc }: DocTitleProps) => {
         `}
       >
         <DocIcon
+          buttonProps={{
+            $width: '32px',
+            $height: '32px',
+            $justify: 'space-between',
+            $align: 'center',
+          }}
           withEmojiPicker={doc.abilities.partial_update}
           docId={doc.id}
           title={doc.title}
           emoji={emoji}
-          $size="25px"
+          $size="23px"
           defaultIcon={
             <SimpleFileIcon
               width="25px"
@@ -94,7 +108,6 @@ const DocTitleInput = ({ doc }: DocTitleProps) => {
   const { isDesktop } = useResponsiveStore();
   const { t } = useTranslation();
   const { colorsTokens } = useCunninghamTheme();
-  const { spacingsTokens } = useCunninghamTheme();
   const { isTopRoot } = useDocUtils(doc);
   const { untitledDocument } = useTrans();
   const { emoji, titleWithoutEmoji } = getEmojiAndTitle(doc.title ?? '');
@@ -139,19 +152,9 @@ const DocTitleInput = ({ doc }: DocTitleProps) => {
       className="--docs--doc-title"
       $direction="row"
       $align="center"
-      $gap={spacingsTokens['xs']}
+      $gap="4px"
       $minHeight="40px"
     >
-      {isTopRoot && (
-        <SimpleFileIcon
-          width="25px"
-          height="25px"
-          aria-hidden="true"
-          aria-label={t('Simple document icon')}
-          color={colorsTokens['primary-500']}
-          style={{ flexShrink: '0' }}
-        />
-      )}
       {!isTopRoot && <DocTitleEmojiPicker doc={doc} />}
 
       <Tooltip content={t('Rename')} aria-hidden={true} placement="top">
diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx
index f131f4e72..823e34a4f 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/DocToolBox.tsx
@@ -60,7 +60,7 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
   const selectHistoryModal = useModal();
   const modalShare = useModal();
 
-  const { isSmallMobile, isDesktop } = useResponsiveStore();
+  const { isSmallMobile, isMobile } = useResponsiveStore();
   const copyDocLink = useCopyDocLink(doc.id);
   const { mutate: duplicateDoc } = useDuplicateDoc({
     onSuccess: (data) => {
@@ -90,28 +90,20 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
   const { updateDocEmoji } = useDocTitleUpdate();
 
   const options: DropdownMenuOption[] = [
-    ...(isSmallMobile
-      ? [
-          {
-            label: t('Share'),
-            icon: 'group',
-            callback: modalShare.open,
-          },
-          {
-            label: t('Export'),
-            icon: 'download',
-            callback: () => {
-              setIsModalExportOpen(true);
-            },
-            show: !!ModalExport,
-          },
-          {
-            label: t('Copy link'),
-            icon: 'add_link',
-            callback: copyDocLink,
-          },
-        ]
-      : []),
+    {
+      label: t('Share'),
+      icon: 'group',
+      callback: modalShare.open,
+      show: isSmallMobile,
+    },
+    {
+      label: t('Export'),
+      icon: 'download',
+      callback: () => {
+        setIsModalExportOpen(true);
+      },
+      show: !!ModalExport && isSmallMobile,
+    },
     {
       label: doc.is_favorite ? t('Unpin') : t('Pin'),
       icon: 'push_pin',
@@ -124,17 +116,6 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
       },
       testId: `docs-actions-${doc.is_favorite ? 'unpin' : 'pin'}-${doc.id}`,
     },
-    ...(emoji && doc.abilities.partial_update && !isTopRoot
-      ? [
-          {
-            label: t('Remove emoji'),
-            icon: 'emoji_emotions',
-            callback: () => {
-              updateDocEmoji(doc.id, doc.title ?? '', '');
-            },
-          },
-        ]
-      : []),
     {
       label: t('Version history'),
       icon: 'history',
@@ -142,7 +123,31 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
       callback: () => {
         selectHistoryModal.open();
       },
-      show: isDesktop,
+      show: !isMobile,
+      showSeparator: isTopRoot ? true : false,
+    },
+    {
+      label: t('Remove emoji'),
+      icon: 'emoji_emotions',
+      callback: () => {
+        updateDocEmoji(doc.id, doc.title ?? '', '');
+      },
+      showSeparator: true,
+      show: !!emoji && doc.abilities.partial_update && !isTopRoot,
+    },
+    {
+      label: t('Add emoji'),
+      icon: 'emoji_emotions',
+      callback: () => {
+        updateDocEmoji(doc.id, doc.title ?? '', '📄');
+      },
+      showSeparator: true,
+      show: !emoji && doc.abilities.partial_update && !isTopRoot,
+    },
+    {
+      label: t('Copy link'),
+      icon: 'add_link',
+      callback: copyDocLink,
     },
     {
       label: t('Copy as {{format}}', { format: 'Markdown' }),
@@ -158,6 +163,7 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
         void copyCurrentEditorToClipboard('html');
       },
       show: isFeatureFlagActivated('CopyAsHTML'),
+      showSeparator: true,
     },
     {
       label: t('Duplicate'),
@@ -170,6 +176,7 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
           canSave: doc.abilities.partial_update,
         });
       },
+      showSeparator: true,
     },
     {
       label: isChild ? t('Delete sub-document') : t('Delete document'),
@@ -224,25 +231,22 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
             aria-label={t('Export the document')}
           />
         )}
-        <DropdownMenu options={options} label={t('Open the document options')}>
-          <IconOptions
-            aria-hidden="true"
-            isHorizontal
-            $theme="primary"
-            $padding={{ all: 'xs' }}
-            $css={css`
-              border-radius: 4px;
-              &:hover {
-                background-color: ${colorsTokens['greyscale-100']};
-              }
-              ${isSmallMobile
-                ? css`
-                    padding: 10px;
-                    border: 1px solid ${colorsTokens['greyscale-300']};
-                  `
-                : ''}
-            `}
-          />
+        <DropdownMenu
+          options={options}
+          label={t('Open the document options')}
+          buttonCss={css`
+            padding: ${spacingsTokens['xs']};
+            &:hover {
+              background-color: ${colorsTokens['greyscale-100']};
+            }
+            ${isSmallMobile
+              ? css`
+                  border: 1px solid ${colorsTokens['greyscale-300']};
+                `
+              : ''}
+          `}
+        >
+          <IconOptions aria-hidden="true" isHorizontal $theme="primary" />
         </DropdownMenu>
       </Box>
 

From a9b77fb9a7af6e37edcae88968de26aa16d7baee Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Wed, 5 Nov 2025 15:53:12 +0100
Subject: [PATCH 2/4] =?UTF-8?q?=F0=9F=92=84(frontend)=20visual=20improveme?=
 =?UTF-8?q?nts=20around=20the=20Icon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

With time some visual inconsistencies have crept
into the DropButton and Icon component.
This commit aims to harmonize the appearance
with the design system.
---
 CHANGELOG.md                                  |  2 ++
 .../__tests__/app-impress/doc-grid.spec.ts    |  2 ++
 .../impress/src/components/DropButton.tsx     |  3 ++-
 .../apps/impress/src/components/Icon.tsx      | 12 ++++++++----
 .../src/cunningham/cunningham-style.css       |  5 +++++
 .../InterlinkingLinkInlineContent.tsx         |  2 +-
 .../doc-header/components/BoutonShare.tsx     |  2 +-
 .../doc-management/components/DocIcon.tsx     | 10 ++++++----
 .../doc-share/components/DocVisibility.tsx    | 12 +++++++++++-
 .../doc-tree/components/DocSubPageItem.tsx    | 19 ++++++++-----------
 .../apps/impress/src/i18n/translations.json   |  8 ++++----
 11 files changed, 50 insertions(+), 27 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index efc2c7328..0d931c0d0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -27,6 +27,8 @@ and this project adheres to
 - 🐛(backend) fix s3 version_id validation
 - 🐛(frontend) retry check media status after page reload #1555
 - 🐛(frontend) fix Interlinking memory leak #1560
+- 🐛(frontend) button new doc UI fix #1557
+- 🐛(frontend) interlinking UI fix #1557
 
 ## [3.8.2] - 2025-10-17
 
diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-grid.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-grid.spec.ts
index 61535fffe..2bdb9d8e6 100644
--- a/src/frontend/apps/e2e/__tests__/app-impress/doc-grid.spec.ts
+++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-grid.spec.ts
@@ -134,6 +134,8 @@ test.describe('Document grid item options', () => {
   test('it deletes the document', async ({ page, browserName }) => {
     const [docTitle] = await createDoc(page, `delete doc`, browserName);
 
+    await verifyDocName(page, docTitle);
+
     await page.goto('/');
 
     await expect(page.getByText(docTitle)).toBeVisible();
diff --git a/src/frontend/apps/impress/src/components/DropButton.tsx b/src/frontend/apps/impress/src/components/DropButton.tsx
index 30172b426..09772b4b4 100644
--- a/src/frontend/apps/impress/src/components/DropButton.tsx
+++ b/src/frontend/apps/impress/src/components/DropButton.tsx
@@ -31,7 +31,7 @@ const StyledButton = styled(Button)<StyledButtonProps>`
   font-weight: 500;
   font-size: 0.938rem;
   padding: 0;
-  ${({ $css }) => $css};
+  border-radius: 4px;
   &:hover {
     background-color: var(
       --c--components--button--primary-text--background--color-hover
@@ -41,6 +41,7 @@ const StyledButton = styled(Button)<StyledButtonProps>`
     box-shadow: 0 0 0 2px var(--c--theme--colors--primary-400);
     border-radius: 4px;
   }
+  ${({ $css }) => $css};
 `;
 
 export interface DropButtonProps {
diff --git a/src/frontend/apps/impress/src/components/Icon.tsx b/src/frontend/apps/impress/src/components/Icon.tsx
index fd1458a82..f5c0baa1a 100644
--- a/src/frontend/apps/impress/src/components/Icon.tsx
+++ b/src/frontend/apps/impress/src/components/Icon.tsx
@@ -13,7 +13,7 @@ export const Icon = ({
   iconName,
   disabled,
   variant = 'outlined',
-  $variation,
+  $variation = 'text',
   ...textProps
 }: IconProps) => {
   const hasLabel = 'aria-label' in textProps || 'aria-labelledby' in textProps;
@@ -41,15 +41,19 @@ type IconOptionsProps = TextType & {
   isHorizontal?: boolean;
 };
 
-export const IconOptions = ({ isHorizontal, ...props }: IconOptionsProps) => {
+export const IconOptions = ({
+  isHorizontal,
+  $css,
+  ...props
+}: IconOptionsProps) => {
   return (
     <Icon
-      {...props}
       iconName={isHorizontal ? 'more_horiz' : 'more_vert'}
       $css={css`
         user-select: none;
-        ${props.$css}
+        ${$css}
       `}
+      {...props}
     />
   );
 };
diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-style.css b/src/frontend/apps/impress/src/cunningham/cunningham-style.css
index bc4e5e248..54d0c67d0 100644
--- a/src/frontend/apps/impress/src/cunningham/cunningham-style.css
+++ b/src/frontend/apps/impress/src/cunningham/cunningham-style.css
@@ -44,6 +44,11 @@
   contain: content;
 }
 
+.c__button--medium {
+  min-height: var(--c--components--button--medium-height);
+  height: auto;
+}
+
 /**
  * Modal
 */
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/InterlinkingLinkInlineContent.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/InterlinkingLinkInlineContent.tsx
index 769d6c15e..747e6e7cf 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/InterlinkingLinkInlineContent.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/InterlinkingLinkInlineContent.tsx
@@ -77,7 +77,7 @@ const LinkSelected = ({ url, title }: LinkSelectedProps) => {
       onClick={handleClick}
       draggable="false"
       $css={css`
-        display: inline;
+        display: contents;
         padding: 0.1rem 0.4rem;
         border-radius: 4px;
         & svg {
diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/BoutonShare.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/BoutonShare.tsx
index c0e31db59..c821e5ac3 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-header/components/BoutonShare.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-header/components/BoutonShare.tsx
@@ -76,7 +76,7 @@ export const BoutonShare = ({
 
   return (
     <Button
-      color="tertiary-text"
+      color="primary-text"
       onClick={open}
       size="medium"
       disabled={isDisabled}
diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/components/DocIcon.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/components/DocIcon.tsx
index c7a77366c..5c68b1cad 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-management/components/DocIcon.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/components/DocIcon.tsx
@@ -1,12 +1,13 @@
 import { MouseEvent, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 
-import { BoxButton, Icon, TextType } from '@/components';
+import { BoxButton, BoxButtonType, Text, TextType } from '@/components';
 import { EmojiPicker, emojidata } from '@/docs/doc-editor/';
 
 import { useDocTitleUpdate } from '../hooks/useDocTitleUpdate';
 
 type DocIconProps = TextType & {
+  buttonProps?: BoxButtonType;
   emoji?: string | null;
   defaultIcon: React.ReactNode;
   docId?: string;
@@ -16,6 +17,7 @@ type DocIconProps = TextType & {
 };
 
 export const DocIcon = ({
+  buttonProps,
   emoji,
   defaultIcon,
   $size = 'sm',
@@ -81,13 +83,13 @@ export const DocIcon = ({
         ref={iconRef}
         onClick={toggleEmojiPicker}
         color="tertiary-text"
+        {...buttonProps}
       >
         {!emoji ? (
           defaultIcon
         ) : (
-          <Icon
+          <Text
             {...textProps}
-            iconName={emoji}
             $size={$size}
             $variation={$variation}
             $weight={$weight}
@@ -95,7 +97,7 @@ export const DocIcon = ({
             data-testid="doc-emoji-icon"
           >
             {emoji}
-          </Icon>
+          </Text>
         )}
       </BoxButton>
       {openEmojiPicker &&
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocVisibility.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocVisibility.tsx
index 3f621f8db..baf35a304 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocVisibility.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocVisibility.tsx
@@ -147,6 +147,11 @@ export const DocVisibility = ({ doc }: DocVisibilityProps) => {
             arrowCss={css`
               color: ${colorsTokens['primary-800']} !important;
             `}
+            buttonCss={css`
+              &:hover {
+                background-color: unset;
+              }
+            `}
             disabled={!canManage}
             showArrow={true}
             topMessage={
@@ -184,6 +189,11 @@ export const DocVisibility = ({ doc }: DocVisibilityProps) => {
           <Box $direction="row" $align="center" $gap={spacingsTokens['3xs']}>
             <DropdownMenu
               testId="doc-access-mode"
+              buttonCss={css`
+                &:hover {
+                  background-color: unset;
+                }
+              `}
               disabled={!canManage}
               showArrow={true}
               options={linkRoleOptions}
@@ -196,7 +206,7 @@ export const DocVisibility = ({ doc }: DocVisibilityProps) => {
               }
               label={t('Document access mode')}
             >
-              <Text $weight="initial" $variation="600">
+              <Text $weight="initial" $variation="600" $theme="primary">
                 {linkModeTranslations[docLinkRole]}
               </Text>
             </DropdownMenu>
diff --git a/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx b/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx
index 7e07f8b7a..d5156cbb0 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocSubPageItem.tsx
@@ -149,6 +149,14 @@ export const DocSubPageItem = (props: TreeViewNodeProps<Doc>) => {
       `}
     >
       <TreeViewItem {...props} onClick={handleActivate}>
+        <DocIcon
+          emoji={emoji}
+          withEmojiPicker={doc.abilities.partial_update}
+          defaultIcon={<SubPageIcon color={colorsTokens['primary-400']} />}
+          $size="sm"
+          docId={doc.id}
+          title={doc.title}
+        />
         <BoxButton
           onClick={(e) => {
             e.stopPropagation();
@@ -166,17 +174,6 @@ export const DocSubPageItem = (props: TreeViewNodeProps<Doc>) => {
             min-width: 0;
           `}
         >
-          <Box>
-            <DocIcon
-              emoji={emoji}
-              withEmojiPicker={doc.abilities.partial_update}
-              defaultIcon={<SubPageIcon color={colorsTokens['primary-400']} />}
-              $size="sm"
-              docId={doc.id}
-              title={doc.title}
-            />
-          </Box>
-
           <Box
             $direction="row"
             $align="center"
diff --git a/src/frontend/apps/impress/src/i18n/translations.json b/src/frontend/apps/impress/src/i18n/translations.json
index e05bf7445..e1b212a38 100644
--- a/src/frontend/apps/impress/src/i18n/translations.json
+++ b/src/frontend/apps/impress/src/i18n/translations.json
@@ -351,7 +351,7 @@
       "Move to my docs": "In \"Meine Dokumente\" verschieben",
       "My docs": "Meine Dokumente",
       "Name": "Name",
-      "New doc": "Neues Dokument",
+      "New doc": "Neues Dok",
       "No active search": "Keine aktive Suche",
       "No document found": "Kein Dokument gefunden",
       "No documents found": "Keine Dokumente gefunden",
@@ -543,7 +543,7 @@
       "More docs": "Más documentos",
       "My docs": "Mis documentos",
       "Name": "Nombre",
-      "New doc": "Nuevo documento",
+      "New doc": "Nuevo doc",
       "No active search": "Ninguna búsqueda activa",
       "No document found": "No se ha encontrado ningún documento",
       "No documents found": "No se han encontrado documentos",
@@ -975,7 +975,7 @@
       "More docs": "Altri documenti",
       "My docs": "I miei documenti",
       "Name": "Nome",
-      "New doc": "Nuovo documento",
+      "New doc": "Nuovo doc",
       "No active search": "Nessuna ricerca attiva",
       "No document found": "Nessun documento trovato",
       "No documents found": "Nessun documento trovato",
@@ -1187,7 +1187,7 @@
       "Move to my docs": "Verplaatsen naar mijn documenten",
       "My docs": "Mijn documenten",
       "Name": "Naam",
-      "New doc": "Nieuw document",
+      "New doc": "Nieuw doc",
       "New sub-doc": "Nieuw subdocument",
       "No active search": "Geen actieve zoekactie",
       "No document found": "Geen documenten gevonden",

From b91840c819241c32a87c95bc3ccaf873eb9ed1b5 Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Fri, 7 Nov 2025 09:54:10 +0100
Subject: [PATCH 3/4] =?UTF-8?q?=F0=9F=A9=B9(frontend)=20set=20correctly=20?=
 =?UTF-8?q?query=20data=20when=20401?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When receiving a 401 error, we should set the
auth query data to null, not to an object
with user: null and authenticated: false.
This ensures that components relying on the
auth state can correctly interpret the
unauthenticated status.
---
 .../apps/impress/src/features/auth/api/useAuthQuery.tsx      | 2 +-
 src/frontend/apps/impress/src/pages/docs/[id]/index.tsx      | 5 +----
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/frontend/apps/impress/src/features/auth/api/useAuthQuery.tsx b/src/frontend/apps/impress/src/features/auth/api/useAuthQuery.tsx
index 0b3fe070c..592ce4c78 100644
--- a/src/frontend/apps/impress/src/features/auth/api/useAuthQuery.tsx
+++ b/src/frontend/apps/impress/src/features/auth/api/useAuthQuery.tsx
@@ -44,7 +44,7 @@ export function useAuthQuery(
     staleTime: 1000 * 60 * 15, // 15 minutes
     retry: (failureCount, error) => {
       // we assume that a 401 means the user is not logged in
-      if (error.status == 401) {
+      if (error.status === 401) {
         return false;
       }
       return failureCount < DEFAULT_QUERY_RETRY;
diff --git a/src/frontend/apps/impress/src/pages/docs/[id]/index.tsx b/src/frontend/apps/impress/src/pages/docs/[id]/index.tsx
index 7b4659130..81c3d18c7 100644
--- a/src/frontend/apps/impress/src/pages/docs/[id]/index.tsx
+++ b/src/frontend/apps/impress/src/pages/docs/[id]/index.tsx
@@ -176,10 +176,7 @@ const DocPage = ({ id }: DocProps) => {
 
       if (error.status === 401) {
         if (authenticated) {
-          queryClient.setQueryData([KEY_AUTH], {
-            user: null,
-            authenticated: false,
-          });
+          queryClient.setQueryData([KEY_AUTH], null);
         }
         setAuthUrl();
       }

From e5581e52f7e9895fafe0c4425888a029cbba4450 Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Fri, 7 Nov 2025 15:31:05 +0100
Subject: [PATCH 4/4] =?UTF-8?q?=E2=99=BB=EF=B8=8F(frontend)=20better=20han?=
 =?UTF-8?q?dling=20css=20doc=20states?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We simplify the way we handle different doc
states (deleted / readonly) in the CSS, we avoid
props drilling and are more component focused.
---
 .../app-impress/doc-trashbin.spec.ts          |  4 ++++
 .../app-impress/doc-visibility.spec.ts        |  4 ++++
 .../doc-editor/components/BlockNoteEditor.tsx | 19 +++++++++++--------
 .../docs/doc-editor/components/DocEditor.tsx  | 18 +++++++++++-------
 .../InterlinkingLinkInlineContent.tsx         |  4 ++++
 .../src/features/docs/doc-editor/styles.tsx   | 16 ++++++----------
 6 files changed, 40 insertions(+), 25 deletions(-)

diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-trashbin.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-trashbin.spec.ts
index 5a445a608..babd52274 100644
--- a/src/frontend/apps/e2e/__tests__/app-impress/doc-trashbin.spec.ts
+++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-trashbin.spec.ts
@@ -119,6 +119,10 @@ test.describe('Doc Trashbin', () => {
     await row.getByText(subDocName).click();
     await verifyDocName(page, subDocName);
 
+    await expect(
+      page.locator('.--docs--editor-container.--docs--doc-deleted'),
+    ).toBeVisible();
+
     await expect(page.getByLabel('Alert deleted document')).toBeVisible();
     await expect(page.getByRole('button', { name: 'Share' })).toBeDisabled();
     await expect(page.locator('.bn-editor')).toHaveAttribute(
diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-visibility.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-visibility.spec.ts
index 88881e439..d240c7bf2 100644
--- a/src/frontend/apps/e2e/__tests__/app-impress/doc-visibility.spec.ts
+++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-visibility.spec.ts
@@ -260,6 +260,10 @@ test.describe('Doc Visibility: Public', () => {
     await expect(card).toBeVisible();
     await expect(card.getByText('Reader')).toBeVisible();
 
+    await expect(
+      otherPage.locator('.--docs--editor-container.--docs--doc-readonly'),
+    ).toBeVisible();
+
     const otherEditor = await getEditor({ page: otherPage });
     await expect(otherEditor).toHaveAttribute('contenteditable', 'false');
     await expect(otherEditor.getByText('Hello Public Viewonly')).toBeVisible();
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx
index e2ee1543c..4d23e1be9 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx
@@ -28,6 +28,7 @@ import {
   useUploadStatus,
 } from '../hook';
 import { useEditorStore } from '../stores';
+import { cssEditor } from '../styles';
 import { DocsBlockNoteEditor } from '../types';
 import { randomColor } from '../utils';
 
@@ -169,7 +170,7 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => {
   }, [setEditor, editor]);
 
   return (
-    <Box ref={refEditorContainer}>
+    <Box ref={refEditorContainer} $css={cssEditor}>
       {errorAttachment && (
         <Box $margin={{ bottom: 'big', top: 'none', horizontal: 'large' }}>
           <TextErrors
@@ -225,12 +226,14 @@ export const BlockNoteReader = ({ initialContent }: BlockNoteReaderProps) => {
   useHeadings(editor);
 
   return (
-    <BlockNoteView
-      editor={editor}
-      editable={false}
-      theme="light"
-      formattingToolbar={false}
-      slashMenu={false}
-    />
+    <Box $css={cssEditor}>
+      <BlockNoteView
+        editor={editor}
+        editable={false}
+        theme="light"
+        formattingToolbar={false}
+        slashMenu={false}
+      />
+    </Box>
   );
 };
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx
index 1ec11e913..a2d04ba29 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import { useEffect } from 'react';
 import { css } from 'styled-components';
 
@@ -12,8 +13,6 @@ import { TableContent } from '@/docs/doc-table-content/';
 import { useSkeletonStore } from '@/features/skeletons';
 import { useResponsiveStore } from '@/stores';
 
-import { cssEditor } from '../styles';
-
 import { BlockNoteEditor, BlockNoteReader } from './BlockNoteEditor';
 
 interface DocEditorContainerProps {
@@ -55,10 +54,13 @@ export const DocEditorContainer = ({
         >
           <Box $css="flex:1;" $position="relative" $width="100%">
             <Box
-              $padding={{ top: 'md' }}
+              $padding={{ top: 'md', bottom: '2rem' }}
               $background="white"
-              $css={cssEditor(readOnly, isDeletedDoc)}
-              className="--docs--editor-container"
+              className={clsx('--docs--editor-container', {
+                '--docs--doc-readonly': readOnly,
+                '--docs--doc-deleted': isDeletedDoc,
+              })}
+              $height="100%"
             >
               {docEditor}
             </Box>
@@ -77,7 +79,9 @@ export const DocEditor = ({ doc }: DocEditorProps) => {
   const { isDesktop } = useResponsiveStore();
   const { provider, isReady } = useProviderStore();
   const { isEditable, isLoading } = useIsCollaborativeEditable(doc);
-  const readOnly = !doc.abilities.partial_update || !isEditable || isLoading;
+  const isDeletedDoc = !!doc.deleted_at;
+  const readOnly =
+    !doc.abilities.partial_update || !isEditable || isLoading || isDeletedDoc;
   const { setIsSkeletonVisible } = useSkeletonStore();
   const isProviderReady = isReady && provider;
 
@@ -117,7 +121,7 @@ export const DocEditor = ({ doc }: DocEditorProps) => {
             <BlockNoteEditor doc={doc} provider={provider} />
           )
         }
-        isDeletedDoc={!!doc.deleted_at}
+        isDeletedDoc={isDeletedDoc}
         readOnly={readOnly}
       />
     </>
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/InterlinkingLinkInlineContent.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/InterlinkingLinkInlineContent.tsx
index 747e6e7cf..28166de12 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/InterlinkingLinkInlineContent.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/InterlinkingLinkInlineContent.tsx
@@ -89,6 +89,10 @@ const LinkSelected = ({ url, title }: LinkSelectedProps) => {
           background-color: ${colorsTokens['greyscale-100']};
         }
         transition: background-color 0.2s ease-in-out;
+
+        .--docs--doc-deleted & {
+          pointer-events: none;
+        }
       `}
     >
       {emoji ? (
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx
index cb6c3a535..3bade52bc 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx
@@ -1,12 +1,13 @@
 import { css } from 'styled-components';
 
-export const cssEditor = (readonly: boolean, isDeletedDoc: boolean) => css`
+export const cssEditor = css`
   &,
   & > .bn-container,
   & .ProseMirror {
     height: 100%;
-    padding-bottom: 2rem;
+  }
 
+  & .ProseMirror {
     /**
      * WCAG Accessibility contrast fixes for BlockNote editor
      */
@@ -131,13 +132,6 @@ export const cssEditor = (readonly: boolean, isDeletedDoc: boolean) => css`
       .bn-block-outer:not([data-prev-depth-changed]):before {
       border-left: none;
     }
-
-    ${isDeletedDoc &&
-    `
-      .node-interlinkingLinkInline button {
-        pointer-events: none;
-      }
-    `}
   }
 
   & .bn-editor {
@@ -187,8 +181,10 @@ export const cssEditor = (readonly: boolean, isDeletedDoc: boolean) => css`
   }
 
   @media screen and (width <= 560px) {
+    .--docs--doc-readonly & .bn-editor {
+      padding-left: 10px;
+    }
     & .bn-editor {
-      ${readonly && `padding-left: 10px;`}
       padding-right: 10px;
     }
     .bn-side-menu[data-block-type='heading'][data-level='1'] {