From f624facd73073618346e55d6b412b4d41752e70c Mon Sep 17 00:00:00 2001
From: Olivier Laurendeau <o.laurendeau@gmail.com>
Date: Mon, 15 Sep 2025 12:34:38 +0200
Subject: [PATCH 1/7] :adhesive_bandage:(frontend) on main pages do not display
 leading emoji as page icon

Following discussion on
https://github.com/suitenumerique/docs/pull/1358#issuecomment-3274118890
---
 .../docs/doc-management/components/SimpleDocItem.tsx     | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/components/SimpleDocItem.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/components/SimpleDocItem.tsx
index cdccc0470..8443f21a7 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-management/components/SimpleDocItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/components/SimpleDocItem.tsx
@@ -4,7 +4,7 @@ import { css } from 'styled-components';
 
 import { Box, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
-import { Doc, getEmojiAndTitle, useTrans } from '@/docs/doc-management';
+import { Doc, useTrans } from '@/docs/doc-management';
 import { useResponsiveStore } from '@/stores';
 
 import PinnedDocumentIcon from '../assets/pinned-document.svg';
@@ -38,10 +38,6 @@ export const SimpleDocItem = ({
   const { isDesktop } = useResponsiveStore();
   const { untitledDocument } = useTrans();
 
-  const { emoji, titleWithoutEmoji: displayTitle } = getEmojiAndTitle(
-    doc.title || untitledDocument,
-  );
-
   return (
     <Box
       $direction="row"
@@ -68,7 +64,6 @@ export const SimpleDocItem = ({
           />
         ) : (
           <DocIcon
-            emoji={emoji}
             defaultIcon={
               <SimpleFileIcon
                 aria-hidden="true"
@@ -88,7 +83,7 @@ export const SimpleDocItem = ({
           $css={ItemTextCss}
           data-testid="doc-title"
         >
-          {displayTitle}
+          {doc.title || untitledDocument}
         </Text>
         {(!isDesktop || showAccesses) && (
           <Box

From c9e979b3b173527c129db09b18dd986d677cc18b Mon Sep 17 00:00:00 2001
From: Olivier Laurendeau <o.laurendeau@gmail.com>
Date: Mon, 15 Sep 2025 15:26:55 +0200
Subject: [PATCH 2/7] =?UTF-8?q?=E2=9C=A8(frontend)=20add=20an=20EmojiPicke?=
 =?UTF-8?q?r=20in=20the=20document=20tree?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

As discussed here https://github.com/suitenumerique/docs/pull/1358#issuecomment-3275631165
---
 .../doc-editor/components/EmojiPicker.tsx     |   2 +-
 .../docs/doc-header/components/DocTitle.tsx   |  51 +---
 .../doc-management/components/DocIcon.tsx     | 107 +++++++-
 .../components/SimpleDocItem.tsx              |   1 +
 .../__tests__/useDocTitleUpdate.test.tsx      | 241 ++++++++++++++++++
 .../hooks/useDocTitleUpdate.tsx               |  78 ++++++
 .../doc-tree/components/DocSubPageItem.tsx    |   9 +-
 .../impress/src/stores/useBroadcastStore.tsx  |   6 +-
 8 files changed, 433 insertions(+), 62 deletions(-)
 create mode 100644 src/frontend/apps/impress/src/features/docs/doc-management/hooks/__tests__/useDocTitleUpdate.test.tsx
 create mode 100644 src/frontend/apps/impress/src/features/docs/doc-management/hooks/useDocTitleUpdate.tsx

diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/EmojiPicker.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/EmojiPicker.tsx
index de4a5c90a..7469b2a09 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/EmojiPicker.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/EmojiPicker.tsx
@@ -19,7 +19,7 @@ export const EmojiPicker = ({
   const { i18n } = useTranslation();
 
   return (
-    <Box $position="absolute" $zIndex={1000} $margin="2rem 0 0 0">
+    <Box>
       <Picker
         data={emojiData}
         locale={i18n.resolvedLanguage}
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 c1e9fb244..5d6f5568b 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
@@ -1,4 +1,3 @@
-import { useTreeContext } from '@gouvfr-lasuite/ui-kit';
 import { Tooltip } from '@openfun/cunningham-react';
 import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -6,15 +5,9 @@ import { css } from 'styled-components';
 
 import { Box, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
-import {
-  Doc,
-  KEY_DOC,
-  KEY_LIST_DOC,
-  useDocStore,
-  useTrans,
-  useUpdateDoc,
-} from '@/docs/doc-management';
-import { useBroadcastStore, useResponsiveStore } from '@/stores';
+import { Doc, useDocStore, useTrans } from '@/docs/doc-management';
+import { useDocTitleUpdate } from '@/features/docs/doc-management/hooks/useDocTitleUpdate';
+import { useResponsiveStore } from '@/stores';
 
 interface DocTitleProps {
   doc: Doc;
@@ -50,47 +43,17 @@ const DocTitleInput = ({ doc }: DocTitleProps) => {
   const { t } = useTranslation();
   const { colorsTokens } = useCunninghamTheme();
   const [titleDisplay, setTitleDisplay] = useState(doc.title);
-  const treeContext = useTreeContext<Doc>();
 
   const { untitledDocument } = useTrans();
 
-  const { broadcast } = useBroadcastStore();
-
-  const { mutate: updateDoc } = useUpdateDoc({
-    listInvalideQueries: [KEY_DOC, KEY_LIST_DOC],
-    onSuccess(updatedDoc) {
-      // Broadcast to every user connected to the document
-      broadcast(`${KEY_DOC}-${updatedDoc.id}`);
-
-      if (!treeContext) {
-        return;
-      }
-
-      if (treeContext.root?.id === updatedDoc.id) {
-        treeContext?.setRoot(updatedDoc);
-      } else {
-        treeContext?.treeData.updateNode(updatedDoc.id, updatedDoc);
-      }
-    },
-  });
+  const { updateDocTitle } = useDocTitleUpdate();
 
   const handleTitleSubmit = useCallback(
     (inputText: string) => {
-      let sanitizedTitle = inputText.trim();
-      sanitizedTitle = sanitizedTitle.replace(/(\r\n|\n|\r)/gm, '');
-
-      // When blank we set to untitled
-      if (!sanitizedTitle) {
-        setTitleDisplay('');
-      }
-
-      // If mutation we update
-      if (sanitizedTitle !== doc.title) {
-        setTitleDisplay(sanitizedTitle);
-        updateDoc({ id: doc.id, title: sanitizedTitle });
-      }
+      const sanitizedTitle = updateDocTitle(doc, inputText.trim());
+      setTitleDisplay(sanitizedTitle);
     },
-    [doc.id, doc.title, updateDoc],
+    [doc, updateDocTitle],
   );
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
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 0bcc3aa5a..5fb048634 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,10 +1,20 @@
+import React from 'react';
+import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
 
-import { Text, TextType } from '@/components';
+import { Box, Icon, TextType } from '@/components';
+
+import { EmojiPicker } from '../../doc-editor/components/EmojiPicker';
+import emojidata from '../../doc-editor/components/custom-blocks/initEmojiCallout';
+import { useDocTitleUpdate } from '../hooks/useDocTitleUpdate';
 
 type DocIconProps = TextType & {
   emoji?: string | null;
+  emojiPicker?: boolean;
   defaultIcon: React.ReactNode;
+  docId?: string;
+  title?: string;
+  onEmojiUpdate?: (emoji: string) => void;
 };
 
 export const DocIcon = ({
@@ -13,24 +23,93 @@ export const DocIcon = ({
   $size = 'sm',
   $variation = '1000',
   $weight = '400',
+  emojiPicker = false,
+  docId,
+  title,
+  onEmojiUpdate,
   ...textProps
 }: DocIconProps) => {
   const { t } = useTranslation();
+  const { updateDocEmoji } = useDocTitleUpdate();
+
+  const iconRef = React.useRef<HTMLDivElement>(null);
+
+  const [openEmojiPicker, setOpenEmojiPicker] = React.useState<boolean>(false);
+  const [pickerPosition, setPickerPosition] = React.useState<{
+    top: number;
+    left: number;
+  }>({ top: 0, left: 0 });
+
+  const toggleEmojiPicker = (e: React.MouseEvent) => {
+    if (emojiPicker) {
+      e.stopPropagation();
+      e.preventDefault();
+
+      if (!openEmojiPicker && iconRef.current) {
+        const rect = iconRef.current.getBoundingClientRect();
+        setPickerPosition({
+          top: rect.bottom + window.scrollY + 8,
+          left: rect.left + window.scrollX,
+        });
+      }
+
+      setOpenEmojiPicker(!openEmojiPicker);
+    }
+  };
+
+  const handleEmojiSelect = ({ native }: { native: string }) => {
+    setOpenEmojiPicker(false);
+
+    // Update document emoji if docId is provided
+    if (docId && title !== undefined) {
+      updateDocEmoji(docId, title ?? '', native);
+    }
+
+    // Call the optional callback
+    onEmojiUpdate?.(native);
+  };
 
-  if (!emoji) {
-    return <>{defaultIcon}</>;
-  }
+  const handleClickOutside = () => {
+    setOpenEmojiPicker(false);
+  };
 
   return (
-    <Text
-      {...textProps}
-      $size={$size}
-      $variation={$variation}
-      $weight={$weight}
-      aria-hidden="true"
-      aria-label={t('Document emoji icon')}
-    >
-      {emoji}
-    </Text>
+    <>
+      <Box ref={iconRef} onClick={toggleEmojiPicker} $position="relative">
+        {!emoji ? (
+          defaultIcon
+        ) : (
+          <Icon
+            {...textProps}
+            iconName={emoji}
+            $size={$size}
+            $variation={$variation}
+            $weight={$weight}
+            aria-hidden="true"
+            aria-label={t('Document emoji icon')}
+          >
+            {emoji}
+          </Icon>
+        )}
+      </Box>
+      {openEmojiPicker &&
+        createPortal(
+          <div
+            style={{
+              position: 'absolute',
+              top: pickerPosition.top,
+              left: pickerPosition.left,
+              zIndex: 1000,
+            }}
+          >
+            <EmojiPicker
+              emojiData={emojidata}
+              onEmojiSelect={handleEmojiSelect}
+              onClickOutside={handleClickOutside}
+            />
+          </div>,
+          document.body,
+        )}
+    </>
   );
 };
diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/components/SimpleDocItem.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/components/SimpleDocItem.tsx
index 8443f21a7..1872497f3 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-management/components/SimpleDocItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/components/SimpleDocItem.tsx
@@ -72,6 +72,7 @@ export const SimpleDocItem = ({
               />
             }
             $size="25px"
+            docId={doc.id}
           />
         )}
       </Box>
diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/hooks/__tests__/useDocTitleUpdate.test.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/hooks/__tests__/useDocTitleUpdate.test.tsx
new file mode 100644
index 000000000..60aab7c2f
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/hooks/__tests__/useDocTitleUpdate.test.tsx
@@ -0,0 +1,241 @@
+import { act, renderHook } from '@testing-library/react';
+import fetchMock from 'fetch-mock';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { Doc } from '../../types';
+import { useDocTitleUpdate } from '../useDocTitleUpdate';
+
+// Mock useBroadcastStore
+vi.mock('@/stores', () => ({
+  useBroadcastStore: () => ({
+    broadcast: vi.fn(),
+  }),
+}));
+
+// Mock useTreeContext
+vi.mock('@gouvfr-lasuite/ui-kit', () => ({
+  useTreeContext: vi.fn(() => ({
+    root: { id: 'test-doc-id', title: 'Test Document' },
+    setRoot: vi.fn(),
+    treeData: {
+      updateNode: vi.fn(),
+    },
+  })),
+  TreeProvider: ({ children }: { children: React.ReactNode }) => children,
+}));
+
+// Mock useUpdateDoc
+const mockMutate = vi.fn();
+let mockOnSuccess: ((data: any) => void) | undefined;
+let mockOnError: ((error: any) => void) | undefined;
+let _mockOnMutate: ((variables: any) => void) | undefined;
+
+vi.mock('@/docs/doc-management', async () => {
+  const actual = await vi.importActual('@/docs/doc-management');
+  return {
+    ...actual,
+    useUpdateDoc: vi.fn((config) => {
+      mockOnSuccess = config?.onSuccess;
+      mockOnError = config?.onError;
+      _mockOnMutate = config?.onMutate;
+
+      return {
+        mutate: mockMutate,
+        isLoading: false,
+        isError: false,
+        error: null,
+        isSuccess: false,
+        data: undefined,
+      };
+    }),
+    KEY_DOC: 'doc',
+    KEY_LIST_DOC: 'list-doc',
+  };
+});
+
+// Create a simple wrapper for tests
+const TestWrapper = ({ children }: { children: React.ReactNode }) => {
+  return <>{children}</>;
+};
+
+describe('useDocTitleUpdate', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    fetchMock.restore();
+  });
+
+  it('should return the correct functions and state', () => {
+    const { result } = renderHook(() => useDocTitleUpdate(), {
+      wrapper: TestWrapper,
+    });
+
+    expect(result.current.updateDocTitle).toBeDefined();
+    expect(result.current.updateDocEmoji).toBeDefined();
+    expect(typeof result.current.updateDocTitle).toBe('function');
+    expect(typeof result.current.updateDocEmoji).toBe('function');
+  });
+
+  describe('updateDocTitle', () => {
+    it('should call updateDoc with sanitized title', () => {
+      const { result } = renderHook(() => useDocTitleUpdate(), {
+        wrapper: TestWrapper,
+      });
+
+      act(() => {
+        result.current.updateDocTitle(
+          { id: 'test-doc-id', title: '' } as Doc,
+          '  My Document  \n\r',
+        );
+      });
+
+      expect(mockMutate).toHaveBeenCalledWith({
+        id: 'test-doc-id',
+        title: 'My Document',
+      });
+    });
+
+    it('should handle empty title and not call updateDoc', () => {
+      const { result } = renderHook(() => useDocTitleUpdate(), {
+        wrapper: TestWrapper,
+      });
+
+      act(() => {
+        result.current.updateDocTitle(
+          { id: 'test-doc-id', title: '' } as Doc,
+          '',
+        );
+      });
+
+      expect(mockMutate).not.toHaveBeenCalledWith({
+        id: 'test-doc-id',
+        title: '',
+      });
+    });
+
+    it('should remove newlines and carriage returns', () => {
+      const { result } = renderHook(() => useDocTitleUpdate(), {
+        wrapper: TestWrapper,
+      });
+
+      act(() => {
+        result.current.updateDocTitle(
+          { id: 'test-doc-id', title: '' } as Doc,
+          'Title\nwith\r\nnewlines',
+        );
+      });
+
+      expect(mockMutate).toHaveBeenCalledWith({
+        id: 'test-doc-id',
+        title: 'Titlewithnewlines',
+      });
+    });
+  });
+
+  describe('updateDocEmoji', () => {
+    it('should call updateDoc with emoji and title without existing emoji', () => {
+      const { result } = renderHook(() => useDocTitleUpdate(), {
+        wrapper: TestWrapper,
+      });
+
+      act(() => {
+        result.current.updateDocEmoji('test-doc-id', 'My Document', '🚀');
+      });
+
+      expect(mockMutate).toHaveBeenCalledWith({
+        id: 'test-doc-id',
+        title: '🚀 My Document',
+      });
+    });
+
+    it('should replace existing emoji with new one', () => {
+      const { result } = renderHook(() => useDocTitleUpdate(), {
+        wrapper: TestWrapper,
+      });
+
+      act(() => {
+        result.current.updateDocEmoji('test-doc-id', '📝 My Document', '🚀');
+      });
+
+      expect(mockMutate).toHaveBeenCalledWith({
+        id: 'test-doc-id',
+        title: '🚀 My Document',
+      });
+    });
+
+    it('should handle title with only emoji', () => {
+      const { result } = renderHook(() => useDocTitleUpdate(), {
+        wrapper: TestWrapper,
+      });
+
+      act(() => {
+        result.current.updateDocEmoji('test-doc-id', '📝', '🚀');
+      });
+
+      expect(mockMutate).toHaveBeenCalledWith({
+        id: 'test-doc-id',
+        title: '🚀 ',
+      });
+    });
+
+    it('should handle empty title', () => {
+      const { result } = renderHook(() => useDocTitleUpdate(), {
+        wrapper: TestWrapper,
+      });
+
+      act(() => {
+        result.current.updateDocEmoji('test-doc-id', '', '🚀');
+      });
+
+      expect(mockMutate).toHaveBeenCalledWith({
+        id: 'test-doc-id',
+        title: '🚀 ',
+      });
+    });
+  });
+
+  describe('onSuccess callback', () => {
+    it('should call onSuccess when provided', async () => {
+      const onSuccess = vi.fn();
+      renderHook(() => useDocTitleUpdate({ onSuccess }), {
+        wrapper: TestWrapper,
+      });
+
+      // Simulate successful mutation
+      const updatedDoc = { id: 'test-doc-id', title: 'Updated Document' };
+
+      if (mockOnSuccess) {
+        mockOnSuccess(updatedDoc);
+      }
+
+      expect(onSuccess).toHaveBeenCalledWith(updatedDoc);
+    });
+  });
+
+  describe('onError callback', () => {
+    it('should call onError when provided', async () => {
+      const onError = vi.fn();
+      renderHook(() => useDocTitleUpdate({ onError }), {
+        wrapper: TestWrapper,
+      });
+
+      const error = new Error('Update failed');
+
+      if (mockOnError) {
+        mockOnError(error);
+      }
+
+      expect(onError).toHaveBeenCalledWith(error);
+    });
+  });
+
+  describe('mutation configuration', () => {
+    it('should configure useUpdateDoc with correct parameters', () => {
+      renderHook(() => useDocTitleUpdate(), {
+        wrapper: TestWrapper,
+      });
+
+      // The mock should have been called with the correct parameters
+      expect(mockMutate).toBeDefined();
+    });
+  });
+});
diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/hooks/useDocTitleUpdate.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/hooks/useDocTitleUpdate.tsx
new file mode 100644
index 000000000..d9f5119a8
--- /dev/null
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/hooks/useDocTitleUpdate.tsx
@@ -0,0 +1,78 @@
+import { useTreeContext } from '@gouvfr-lasuite/ui-kit';
+import { useCallback } from 'react';
+
+import {
+  Doc,
+  KEY_DOC,
+  KEY_LIST_DOC,
+  getEmojiAndTitle,
+  useUpdateDoc,
+} from '@/docs/doc-management';
+import { useBroadcastStore } from '@/stores';
+
+interface UseDocUpdateOptions {
+  onSuccess?: (updatedDoc: Doc) => void;
+  onError?: (error: Error) => void;
+}
+
+export const useDocTitleUpdate = (options?: UseDocUpdateOptions) => {
+  const { broadcast } = useBroadcastStore();
+  const treeContext = useTreeContext<Doc>();
+
+  const { mutate: updateDoc, ...mutationResult } = useUpdateDoc({
+    listInvalideQueries: [KEY_DOC, KEY_LIST_DOC],
+    onSuccess: (updatedDoc) => {
+      // Broadcast to every user connected to the document
+      broadcast(`${KEY_DOC}-${updatedDoc.id}`);
+
+      if (treeContext) {
+        if (treeContext.root?.id === updatedDoc.id) {
+          treeContext?.setRoot(updatedDoc);
+        } else {
+          treeContext?.treeData.updateNode(updatedDoc.id, updatedDoc);
+        }
+      }
+
+      options?.onSuccess?.(updatedDoc);
+    },
+    onError: (error) => {
+      console.warn('updateDocTitle error', error);
+      options?.onError?.(error);
+    },
+  });
+
+  const updateDocTitle = useCallback(
+    (doc: Doc, title: string) => {
+      const sanitizedTitle = title.trim().replace(/(\r\n|\n|\r)/gm, '');
+
+      // When blank we set to untitled
+      if (!sanitizedTitle) {
+        return '';
+      }
+
+      // If mutation we update
+      if (sanitizedTitle !== doc.title) {
+        updateDoc({ id: doc.id, title: sanitizedTitle });
+      }
+
+      return sanitizedTitle;
+    },
+    [updateDoc],
+  );
+
+  const updateDocEmoji = useCallback(
+    (docId: string, title: string, emoji: string) => {
+      const { titleWithoutEmoji } = getEmojiAndTitle(title);
+      console.log('updateDocEmoji', `${emoji} ${titleWithoutEmoji}`);
+      updateDoc({ id: docId, title: `${emoji} ${titleWithoutEmoji}` });
+      console.log('updateDocEmoji done');
+    },
+    [updateDoc],
+  );
+
+  return {
+    ...mutationResult,
+    updateDocTitle,
+    updateDocEmoji,
+  };
+};
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 d9b7ecfcb..f456b6044 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
@@ -134,7 +134,14 @@ export const DocSubPageItem = (props: TreeViewNodeProps<Doc>) => {
           $minHeight="24px"
         >
           <Box $width="16px" $height="16px">
-            <DocIcon emoji={emoji} defaultIcon={<SubPageIcon />} $size="sm" />
+            <DocIcon
+              emoji={emoji}
+              defaultIcon={<SubPageIcon />}
+              $size="sm"
+              emojiPicker
+              docId={doc.id}
+              title={doc.title}
+            />
           </Box>
 
           <Box
diff --git a/src/frontend/apps/impress/src/stores/useBroadcastStore.tsx b/src/frontend/apps/impress/src/stores/useBroadcastStore.tsx
index 7e8812f76..74b85b0d9 100644
--- a/src/frontend/apps/impress/src/stores/useBroadcastStore.tsx
+++ b/src/frontend/apps/impress/src/stores/useBroadcastStore.tsx
@@ -78,11 +78,13 @@ export const useBroadcastStore = create<BroadcastState>((set, get) => ({
     }));
   },
   broadcast: (taskLabel) => {
-    const { task } = get().tasks[taskLabel];
-    if (!task) {
+    if (!get().tasks[taskLabel]) {
       console.warn(`Task ${taskLabel} is not defined`);
       return;
     }
+
+    const { task } = get().tasks[taskLabel];
+
     task.push([`broadcast: ${taskLabel}`]);
   },
 }));

From c571ecbfc7ea97fc8246ff65c6157cce5d4513de Mon Sep 17 00:00:00 2001
From: Olivier Laurendeau <o.laurendeau@gmail.com>
Date: Mon, 15 Sep 2025 15:43:11 +0200
Subject: [PATCH 3/7] =?UTF-8?q?=E2=9C=A8(frontend)=20add=20a=20remove=20em?=
 =?UTF-8?q?oji=20button=20in=20the=20tree=20item=20menu?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

As proposed here https://github.com/suitenumerique/docs/pull/1358#issuecomment-3275631165
---
 .../components/DocTreeItemActions.tsx         | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTreeItemActions.tsx b/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTreeItemActions.tsx
index 1c3e0c747..43517c7cc 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTreeItemActions.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-tree/components/DocTreeItemActions.tsx
@@ -13,11 +13,13 @@ import {
   Doc,
   ModalRemoveDoc,
   Role,
+  getEmojiAndTitle,
   useCopyDocLink,
   useCreateChildDoc,
   useDuplicateDoc,
 } from '@/docs/doc-management';
 
+import { useDocTitleUpdate } from '../../doc-management/hooks/useDocTitleUpdate';
 import { useDetachDoc } from '../api/useDetach';
 import MoveDocIcon from '../assets/doc-extract-bold.svg';
 
@@ -44,6 +46,7 @@ export const DocTreeItemActions = ({
   const copyLink = useCopyDocLink(doc.id);
   const { mutate: detachDoc } = useDetachDoc();
   const treeContext = useTreeContext<Doc | null>();
+
   const { mutate: duplicateDoc } = useDuplicateDoc({
     onSuccess: (duplicatedDoc) => {
       // Reset the tree context root will reset the full tree view.
@@ -52,6 +55,13 @@ export const DocTreeItemActions = ({
     },
   });
 
+  // Emoji Management
+  const { emoji } = getEmojiAndTitle(doc.title ?? '');
+  const { updateDocEmoji } = useDocTitleUpdate();
+  const removeEmoji = () => {
+    updateDocEmoji(doc.id, doc.title ?? '', '');
+  };
+
   const handleDetachDoc = () => {
     if (!treeContext?.root) {
       return;
@@ -82,6 +92,15 @@ export const DocTreeItemActions = ({
     },
     ...(!isRoot
       ? [
+          ...(emoji
+            ? [
+                {
+                  label: t('Remove emoji'),
+                  icon: <Icon iconName="emoji_emotions" $size="24px" />,
+                  callback: removeEmoji,
+                },
+              ]
+            : []),
           {
             label: t('Move to my docs'),
             isDisabled: doc.user_role !== Role.OWNER,

From 688bd6c8e14afbe6a6bdb5ccd92b50b524bb4ba1 Mon Sep 17 00:00:00 2001
From: Olivier Laurendeau <o.laurendeau@gmail.com>
Date: Mon, 15 Sep 2025 15:54:17 +0200
Subject: [PATCH 4/7] =?UTF-8?q?=E2=9C=A8(frontend)=20handle=20properly=20e?=
 =?UTF-8?q?mojis=20in=20interlinking?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Interlinking/InterlinkingLinkInlineContent.tsx   | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

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 395a77a75..5bf0cd6a2 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
@@ -3,10 +3,10 @@ import { createReactInlineContentSpec } from '@blocknote/react';
 import { useEffect } from 'react';
 import { css } from 'styled-components';
 
-import { StyledLink, Text } from '@/components';
+import { Box, Icon, StyledLink, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 import SelectedPageIcon from '@/docs/doc-editor/assets/doc-selected.svg';
-import { useDoc } from '@/docs/doc-management';
+import { getEmojiAndTitle, useDoc } from '@/docs/doc-management';
 
 export const InterlinkingLinkInlineContent = createReactInlineContentSpec(
   {
@@ -52,6 +52,8 @@ interface LinkSelectedProps {
 const LinkSelected = ({ url, title }: LinkSelectedProps) => {
   const { colorsTokens } = useCunninghamTheme();
 
+  const { emoji, titleWithoutEmoji } = getEmojiAndTitle(title);
+
   return (
     <StyledLink
       href={url}
@@ -71,9 +73,11 @@ const LinkSelected = ({ url, title }: LinkSelectedProps) => {
         transition: background-color 0.2s ease-in-out;
       `}
     >
-      <SelectedPageIcon width={11.5} />
+      <Box $display="inline-block" $css={css`margin-right: 0.3rem; `}>
+        {emoji ? <Icon iconName={emoji} $size="16px" /> : <SelectedPageIcon width={11.5}/>}
+      </Box>
       <Text $weight="500" spellCheck="false" $size="16px" $display="inline">
-        {title}
+        {titleWithoutEmoji}
       </Text>
     </StyledLink>
   );

From b82dce16e12892e334baad6f7bfe4ef1cc5823e3 Mon Sep 17 00:00:00 2001
From: Olivier Laurendeau <o.laurendeau@gmail.com>
Date: Mon, 15 Sep 2025 17:06:46 +0200
Subject: [PATCH 5/7] =?UTF-8?q?fixup!=20=E2=9C=A8(frontend)=20add=20an=20E?=
 =?UTF-8?q?mojiPicker=20in=20the=20document=20tree?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/features/docs/doc-management/components/DocIcon.tsx   | 4 ++++
 1 file changed, 4 insertions(+)

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 5fb048634..7a4af3d9b 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
@@ -29,6 +29,10 @@ export const DocIcon = ({
   onEmojiUpdate,
   ...textProps
 }: DocIconProps) => {
+  if (!emojiPicker && !emoji) {
+    return defaultIcon;
+  }
+
   const { t } = useTranslation();
   const { updateDocEmoji } = useDocTitleUpdate();
 

From bd6682fdb845b3333b98a23ac149b763f257bfeb Mon Sep 17 00:00:00 2001
From: Olivier Laurendeau <o.laurendeau@gmail.com>
Date: Mon, 15 Sep 2025 18:55:35 +0200
Subject: [PATCH 6/7] =?UTF-8?q?=E2=9C=A8(frontend)=20add=20EmojiPicker=20i?=
 =?UTF-8?q?n=20DocumentTitle?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

As discussed in https://github.com/suitenumerique/docs/pull/1358
---
 CHANGELOG.md                                  |   5 +
 .../doc-editor/components/EmojiPicker.tsx     |   2 +-
 .../InterlinkingLinkInlineContent.tsx         |  13 +-
 .../docs/doc-header/components/DocTitle.tsx   | 128 ++++++++++++------
 .../docs/doc-header/components/DocToolBox.tsx |  18 +++
 .../doc-management/assets/simple-document.svg |   2 -
 .../doc-management/components/DocIcon.tsx     |   8 +-
 .../components/SimpleDocItem.tsx              |  18 +--
 .../apps/impress/src/i18n/translations.json   |  35 ++++-
 9 files changed, 164 insertions(+), 65 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 773a3b36e..0c00ca38f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,9 @@ and this project adheres to
 ### Added
 
 - ✨(api) add API route to fetch document content #1206
+- ✨(frontend) doc emojis improvements #1381
+  - add an EmojiPicker in the document tree and document title
+  - remove emoji buttons in menus
 
 ### Changed
 
@@ -30,6 +33,8 @@ and this project adheres to
   - ✨unify tab focus style for better visual consistency #1341
   - ♿hide decorative icons, label menus, avoid accessible name… #1362
 - ♻️(tilt) use helm dev-backend chart
+- 🩹(frontend) on main pages do not display leading emoji as page icon #1381
+- 🩹(frontend) handle properly emojis in interlinking #1381
 
 ### Removed
 
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/EmojiPicker.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/EmojiPicker.tsx
index 7469b2a09..de4a5c90a 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/EmojiPicker.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/EmojiPicker.tsx
@@ -19,7 +19,7 @@ export const EmojiPicker = ({
   const { i18n } = useTranslation();
 
   return (
-    <Box>
+    <Box $position="absolute" $zIndex={1000} $margin="2rem 0 0 0">
       <Picker
         data={emojiData}
         locale={i18n.resolvedLanguage}
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 5bf0cd6a2..e452c47bd 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
@@ -73,8 +73,17 @@ const LinkSelected = ({ url, title }: LinkSelectedProps) => {
         transition: background-color 0.2s ease-in-out;
       `}
     >
-      <Box $display="inline-block" $css={css`margin-right: 0.3rem; `}>
-        {emoji ? <Icon iconName={emoji} $size="16px" /> : <SelectedPageIcon width={11.5}/>}
+      <Box
+        $display="inline-block"
+        $css={css`
+          margin-right: 0.3rem;
+        `}
+      >
+        {emoji ? (
+          <Icon iconName={emoji} $size="16px" />
+        ) : (
+          <SelectedPageIcon width={11.5} />
+        )}
       </Box>
       <Text $weight="500" spellCheck="false" $size="16px" $display="inline">
         {titleWithoutEmoji}
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 5d6f5568b..372bca749 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
@@ -5,10 +5,18 @@ import { css } from 'styled-components';
 
 import { Box, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
-import { Doc, useDocStore, useTrans } from '@/docs/doc-management';
+import {
+  Doc,
+  getEmojiAndTitle,
+  useDocStore,
+  useTrans,
+} from '@/docs/doc-management';
+import SimpleFileIcon from '@/features/docs/doc-management/assets/simple-document.svg';
 import { useDocTitleUpdate } from '@/features/docs/doc-management/hooks/useDocTitleUpdate';
 import { useResponsiveStore } from '@/stores';
 
+import { DocIcon } from '../../doc-management/components/DocIcon';
+
 interface DocTitleProps {
   doc: Doc;
 }
@@ -42,18 +50,26 @@ const DocTitleInput = ({ doc }: DocTitleProps) => {
   const { isDesktop } = useResponsiveStore();
   const { t } = useTranslation();
   const { colorsTokens } = useCunninghamTheme();
-  const [titleDisplay, setTitleDisplay] = useState(doc.title);
+  const { emoji, titleWithoutEmoji } = getEmojiAndTitle(doc.title ?? '');
+  const { spacingsTokens } = useCunninghamTheme();
 
   const { untitledDocument } = useTrans();
+  const [titleDisplay, setTitleDisplay] = useState(titleWithoutEmoji);
 
   const { updateDocTitle } = useDocTitleUpdate();
 
   const handleTitleSubmit = useCallback(
     (inputText: string) => {
-      const sanitizedTitle = updateDocTitle(doc, inputText.trim());
-      setTitleDisplay(sanitizedTitle);
+      const sanitizedTitle = updateDocTitle(
+        doc,
+        emoji ? `${emoji} ${inputText.trim()}` : inputText.trim(),
+      );
+      const { titleWithoutEmoji: sanitizedTitleWithoutEmoji } =
+        getEmojiAndTitle(sanitizedTitle);
+
+      setTitleDisplay(sanitizedTitleWithoutEmoji);
     },
-    [doc, updateDocTitle],
+    [doc, updateDocTitle, emoji],
   );
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
@@ -64,43 +80,75 @@ const DocTitleInput = ({ doc }: DocTitleProps) => {
   };
 
   useEffect(() => {
-    setTitleDisplay(doc.title);
-  }, [doc]);
+    setTitleDisplay(titleWithoutEmoji);
+  }, [doc, titleWithoutEmoji]);
 
   return (
-    <Tooltip content={t('Rename')} aria-hidden={true} placement="top">
-      <Box
-        as="span"
-        role="textbox"
-        className="--docs--doc-title-input"
-        contentEditable
-        defaultValue={titleDisplay || undefined}
-        onKeyDownCapture={handleKeyDown}
-        suppressContentEditableWarning={true}
-        aria-label={`${t('Document title')}`}
-        aria-multiline={false}
-        onBlurCapture={(event) =>
-          handleTitleSubmit(event.target.textContent || '')
-        }
-        $color={colorsTokens['greyscale-1000']}
-        $minHeight="40px"
-        $padding={{ right: 'big' }}
-        $css={css`
-          &[contenteditable='true']:empty:not(:focus):before {
-            content: '${untitledDocument}';
-            color: grey;
-            pointer-events: none;
-            font-style: italic;
+    <Box
+      $direction="row"
+      $align="flex-end"
+      $gap={spacingsTokens['s']}
+      $minHeight="40px"
+    >
+      <Tooltip content={t('Document emoji')} aria-hidden={true} placement="top">
+        <Box
+          $css={css`
+            height: 58px;
+            cursor: pointer;
+          `}
+        >
+          <DocIcon
+            emojiPicker
+            docId={doc.id}
+            title={doc.title}
+            emoji={emoji}
+            $size="50px"
+            defaultIcon={
+              <SimpleFileIcon
+                width="50px"
+                height="50px"
+                aria-hidden="true"
+                aria-label={t('Simple document icon')}
+                color={colorsTokens['primary-500']}
+              />
+            }
+          />
+        </Box>
+      </Tooltip>
+
+      <Tooltip content={t('Rename')} aria-hidden={true} placement="top">
+        <Box
+          as="span"
+          role="textbox"
+          className="--docs--doc-title-input"
+          contentEditable
+          defaultValue={titleDisplay || undefined}
+          onKeyDownCapture={handleKeyDown}
+          suppressContentEditableWarning={true}
+          aria-label={`${t('Document title')}`}
+          aria-multiline={false}
+          onBlurCapture={(event) =>
+            handleTitleSubmit(event.target.textContent || '')
           }
-          font-size: ${isDesktop
-            ? css`var(--c--theme--font--sizes--h2)`
-            : css`var(--c--theme--font--sizes--sm)`};
-          font-weight: 700;
-          outline: none;
-        `}
-      >
-        {titleDisplay}
-      </Box>
-    </Tooltip>
+          $color={colorsTokens['greyscale-1000']}
+          $padding={{ right: 'big' }}
+          $css={css`
+            &[contenteditable='true']:empty:not(:focus):before {
+              content: '${untitledDocument}';
+              color: grey;
+              pointer-events: none;
+              font-style: italic;
+            }
+            font-size: ${isDesktop
+              ? css`var(--c--theme--font--sizes--h2)`
+              : css`var(--c--theme--font--sizes--sm)`};
+            font-weight: 700;
+            outline: none;
+          `}
+        >
+          {titleDisplay}
+        </Box>
+      </Tooltip>
+    </Box>
   );
 };
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 7d5eacfed..24eacbee9 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
@@ -20,6 +20,7 @@ import {
   KEY_DOC,
   KEY_LIST_DOC,
   ModalRemoveDoc,
+  getEmojiAndTitle,
   useCopyDocLink,
   useCreateFavoriteDoc,
   useDeleteFavoriteDoc,
@@ -33,6 +34,7 @@ import {
 import { useAnalytics } from '@/libs';
 import { useResponsiveStore } from '@/stores';
 
+import { useDocTitleUpdate } from '../../doc-management/hooks/useDocTitleUpdate';
 import { useCopyCurrentEditorToClipboard } from '../hooks/useCopyCurrentEditorToClipboard';
 
 const ModalExport = Export?.ModalExport;
@@ -92,6 +94,13 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
     });
   }, [selectHistoryModal.isOpen, queryClient]);
 
+  // Emoji Management
+  const { emoji } = getEmojiAndTitle(doc.title ?? '');
+  const { updateDocEmoji } = useDocTitleUpdate();
+  const removeEmoji = () => {
+    updateDocEmoji(doc.id, doc.title ?? '', '');
+  };
+
   const options: DropdownMenuOption[] = [
     ...(isSmallMobile
       ? [
@@ -127,6 +136,15 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
       },
       testId: `docs-actions-${doc.is_favorite ? 'unpin' : 'pin'}-${doc.id}`,
     },
+    ...(emoji
+      ? [
+          {
+            label: t('Remove emoji'),
+            icon: 'emoji_emotions',
+            callback: removeEmoji,
+          },
+        ]
+      : []),
     {
       label: t('Version history'),
       icon: 'history',
diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/assets/simple-document.svg b/src/frontend/apps/impress/src/features/docs/doc-management/assets/simple-document.svg
index ee656f0d4..bddcff8a1 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-management/assets/simple-document.svg
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/assets/simple-document.svg
@@ -1,6 +1,4 @@
 <svg
-  width="33"
-  height="33"
   viewBox="0 0 33 33"
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
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 7a4af3d9b..c783f6399 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
@@ -29,10 +29,6 @@ export const DocIcon = ({
   onEmojiUpdate,
   ...textProps
 }: DocIconProps) => {
-  if (!emojiPicker && !emoji) {
-    return defaultIcon;
-  }
-
   const { t } = useTranslation();
   const { updateDocEmoji } = useDocTitleUpdate();
 
@@ -44,6 +40,10 @@ export const DocIcon = ({
     left: number;
   }>({ top: 0, left: 0 });
 
+  if (!emojiPicker && !emoji) {
+    return defaultIcon;
+  }
+
   const toggleEmojiPicker = (e: React.MouseEvent) => {
     if (emojiPicker) {
       e.stopPropagation();
diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/components/SimpleDocItem.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/components/SimpleDocItem.tsx
index 1872497f3..8c9be0758 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-management/components/SimpleDocItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/components/SimpleDocItem.tsx
@@ -10,8 +10,6 @@ import { useResponsiveStore } from '@/stores';
 import PinnedDocumentIcon from '../assets/pinned-document.svg';
 import SimpleFileIcon from '../assets/simple-document.svg';
 
-import { DocIcon } from './DocIcon';
-
 const ItemTextCss = css`
   overflow: hidden;
   text-overflow: ellipsis;
@@ -63,16 +61,12 @@ export const SimpleDocItem = ({
             color={colorsTokens['primary-500']}
           />
         ) : (
-          <DocIcon
-            defaultIcon={
-              <SimpleFileIcon
-                aria-hidden="true"
-                aria-label={t('Simple document icon')}
-                color={colorsTokens['primary-500']}
-              />
-            }
-            $size="25px"
-            docId={doc.id}
+          <SimpleFileIcon
+            width="32px"
+            height="32px"
+            aria-hidden="true"
+            aria-label={t('Simple document icon')}
+            color={colorsTokens['primary-500']}
           />
         )}
       </Box>
diff --git a/src/frontend/apps/impress/src/i18n/translations.json b/src/frontend/apps/impress/src/i18n/translations.json
index 662694431..3ddbc64d1 100644
--- a/src/frontend/apps/impress/src/i18n/translations.json
+++ b/src/frontend/apps/impress/src/i18n/translations.json
@@ -62,6 +62,7 @@
       "Document access mode": "Doare moned ar restr",
       "Document accessible to any connected person": "Restr a c'hall bezañ tizhet gant ne vern piv a vefe kevreet",
       "Document duplicated successfully!": "Restr eilet gant berzh!",
+      "Document emoji": "Emoju ar restr",
       "Document owner": "Perc'henn ar restr",
       "Document sections": "Kevrennoù ar restr",
       "Document visibility": "Gwelusted ar restr",
@@ -162,6 +163,7 @@
       "Reading": "Lenn hepken",
       "Remove": "Dilemel",
       "Remove access": "Dilemel ar moned",
+      "Remove emoji": "Dilemel ar emoju",
       "Rename": "Adenvel",
       "Rephrase": "Adformulenniñ",
       "Request access": "Goulenn mont e-barzh",
@@ -285,6 +287,7 @@
       "Docs: Your new companion to collaborate on documents efficiently, intuitively, and securely.": "Pages: Ihr neuer Begleiter für eine effiziente, intuitive und sichere Zusammenarbeit bei Dokumenten.",
       "Document accessible to any connected person": "Dokument für jeden angemeldeten Benutzer zugänglich",
       "Document duplicated successfully!": "Dokument erfolgreich dupliziert!",
+      "Document emoji": "Dokument-Emoji",
       "Document owner": "Besitzer des Dokuments",
       "Docx": "Docx",
       "Download": "Herunterladen",
@@ -370,6 +373,7 @@
       "Reading": "Lesen",
       "Remove": "Löschen",
       "Remove access": "Zugriff entziehen",
+      "Remove emoji": "Emoji entfernen",
       "Rename": "Umbenennen",
       "Rephrase": "Umformulieren",
       "Request access": "Zugriff anfragen",
@@ -434,7 +438,8 @@
       "Share with {{count}} users_one": "Share with {{count}} user",
       "Shared with {{count}} users_many": "Shared with {{count}} users",
       "Shared with {{count}} users_one": "Shared with {{count}} user",
-      "Shared with {{count}} users_other": "Shared with {{count}} users"
+      "Shared with {{count}} users_other": "Shared with {{count}} users",
+      "Remove emoji": "Remove emoji"
     }
   },
   "es": {
@@ -488,6 +493,7 @@
       "Docs transforms your documents into knowledge bases thanks to subpages, powerful search and the ability to pin your important documents.": "Docs transforma sus documentos en bases de conocimiento gracias a las subpáginas, una potente herramienta de  búsqueda y la capacidad de marcar como favorito sus documentos más importantes.",
       "Docs: Your new companion to collaborate on documents efficiently, intuitively, and securely.": "Docs: su nuevo compañero para colaborar en documentos de forma eficiente, intuitiva y segura.",
       "Document accessible to any connected person": "Documento accesible a cualquier persona conectada",
+      "Document emoji": "Emoji del documento",
       "Document owner": "Propietario del documento",
       "Docx": "Docx",
       "Download": "Descargar",
@@ -560,6 +566,7 @@
       "Reader": "Lector",
       "Reading": "Lectura",
       "Remove": "Eliminar",
+      "Remove emoji": "Eliminar emoji",
       "Rename": "Cambiar el nombre",
       "Rephrase": "Reformular",
       "Request access": "Solicitar acceso",
@@ -681,6 +688,7 @@
       "Document access mode": "Mode d'accès au document",
       "Document accessible to any connected person": "Document accessible à toute personne connectée",
       "Document duplicated successfully!": "Document dupliqué avec succès !",
+      "Document emoji": "Emoji du document",
       "Document emoji icon": "Émoticônes du document",
       "Document owner": "Propriétaire du document",
       "Document role text": "Texte du rôle du document",
@@ -790,6 +798,7 @@
       "Reading": "Lecture seule",
       "Remove": "Supprimer",
       "Remove access": "Supprimer l'accès",
+      "Remove emoji": "Supprimer l'emoji",
       "Rename": "Renommer",
       "Rephrase": "Reformuler",
       "Request access": "Demander l'accès",
@@ -903,6 +912,7 @@
       "Docs transforms your documents into knowledge bases thanks to subpages, powerful search and the ability to pin your important documents.": "Docs trasforma i tuoi documenti in piattaforme di conoscenza grazie alle sotto-pagine, alla ricerca potente e alla capacità di fissare i tuoi documenti importanti.",
       "Docs: Your new companion to collaborate on documents efficiently, intuitively, and securely.": "Docs: Il tuo nuovo compagno di collaborare sui documenti in modo efficiente, intuitivo e sicuro.",
       "Document accessible to any connected person": "Documento accessibile a qualsiasi persona collegata",
+      "Document emoji": "Emoji del documento",
       "Document owner": "Proprietario del documento",
       "Docx": "Docx",
       "Download": "Scarica",
@@ -966,6 +976,7 @@
       "Reader": "Lettore",
       "Reading": "Leggendo",
       "Remove": "Rimuovi",
+      "Remove emoji": "Rimuovi emoji",
       "Rename": "Rinomina",
       "Rephrase": "Riformula",
       "Restore": "Ripristina",
@@ -1054,6 +1065,7 @@
       "Docs transforms your documents into knowledge bases thanks to subpages, powerful search and the ability to pin your important documents.": "Documentatie transformeert uw documenten in een kennisbasis, dankzij subpagina's, krachtig zoeken en de mogelijkheid om uw belangrijke documenten te pinnen.",
       "Docs: Your new companion to collaborate on documents efficiently, intuitively, and securely.": "Docs: Je nieuwe metgezel om efficiënt, intuïtief en veilig samen te werken aan documenten.",
       "Document accessible to any connected person": "Document is toegankelijk voor ieder verbonden persoon",
+      "Document emoji": "Document emoji",
       "Document owner": "Document eigenaar",
       "Docx": "Docx",
       "Download": "Download",
@@ -1124,6 +1136,7 @@
       "Reader": "Lezer",
       "Reading": "Lezen",
       "Remove": "Verwijderen",
+      "Remove emoji": "Emoji verwijderen",
       "Rename": "Hernoemen",
       "Rephrase": "Herschrijf",
       "Restore": "Herstel",
@@ -1173,7 +1186,11 @@
       "home-content-open-source-part3": "Docs is het resultaat van een gezamenlijke inspanning geleid door de Franse 🇫🇷🥖 <1>(DINUM)</1> en Duitse 🇩🇪🥨 <5>(ZenDiS)</5> overheden."
     }
   },
-  "pt": { "translation": {} },
+  "pt": {
+    "translation": {
+      "Remove emoji": "Remover emoji"
+    }
+  },
   "ru": {
     "translation": {
       "\"{{email}}\" is already invited to the document.": "\"{{email}}\" уже имеет приглашение для этого документа.",
@@ -1245,6 +1262,7 @@
       "Document access mode": "Режим доступа к документу",
       "Document accessible to any connected person": "Документ доступен всем, кто присоединится",
       "Document duplicated successfully!": "Документ успешно дублирован!",
+      "Document emoji": "Эмодзи документа",
       "Document emoji icon": "Значок эмодзи документа",
       "Document owner": "Владелец документа",
       "Document role text": "Текст роли документа",
@@ -1354,6 +1372,7 @@
       "Reading": "Чтение",
       "Remove": "Удалить",
       "Remove access": "Отменить доступ",
+      "Remove emoji": "Убрать эмодзи",
       "Rename": "Переименовать",
       "Rephrase": "Переформулировать",
       "Request access": "Запрос доступа",
@@ -1428,6 +1447,7 @@
   "sl": {
     "translation": {
       "Load more": "Naloži več",
+      "Remove emoji": "Odstrani emoji",
       "Untitled document": "Dokument brez naslova"
     }
   },
@@ -1461,7 +1481,8 @@
       "This file is flagged as unsafe.": "Denna fil är flaggad som osäker.",
       "Too many requests. Please wait 60 seconds.": "För många förfrågningar. Vänligen vänta 60 sekunder.",
       "Use as prompt": "Använd som prompt",
-      "Warning": "Varning"
+      "Warning": "Varning",
+      "Remove emoji": "Ta bort emoji"
     }
   },
   "tr": {
@@ -1488,6 +1509,7 @@
       "Docs": "Docs",
       "Docs Logo": "Docs logosu",
       "Document accessible to any connected person": "Bağlanan herhangi bir kişi tarafından erişilebilen belge",
+      "Document emoji": "Belge emojisi",
       "Docx": "Docx",
       "Download": "İndir",
       "Download anyway": "Yine de indir",
@@ -1531,7 +1553,8 @@
       "Version history": "Sürüm geçmişi",
       "Warning": "Uyarı",
       "Write": "Yaz",
-      "Your {{format}} was downloaded succesfully": "{{format}} indirildi"
+      "Your {{format}} was downloaded succesfully": "{{format}} indirildi",
+      "Remove emoji": "Emoji kaldır"
     }
   },
   "uk": {
@@ -1605,6 +1628,7 @@
       "Document access mode": "Режим доступу до документа",
       "Document accessible to any connected person": "Документ, доступний для будь-якої особи, що приєдналася",
       "Document duplicated successfully!": "Документ успішно продубльовано!",
+      "Document emoji": "Емодзі документа",
       "Document emoji icon": "Піктограма emoji документа",
       "Document owner": "Власник документа",
       "Document role text": "Текст ролі документа",
@@ -1714,6 +1738,7 @@
       "Reading": "Читання",
       "Remove": "Видалити",
       "Remove access": "Вилучити доступ",
+      "Remove emoji": "Видалити емодзі",
       "Rename": "Перейменувати",
       "Rephrase": "Перефразувати",
       "Request access": "Запит доступу",
@@ -1834,6 +1859,7 @@
       "Docs transforms your documents into knowledge bases thanks to subpages, powerful search and the ability to pin your important documents.": "Docs 通过子页面、强大的搜索功能以及固定重要文档的能力，将您的文档转化为知识库。",
       "Docs: Your new companion to collaborate on documents efficiently, intuitively, and securely.": "Docs 为您提供高效、直观且安全的文档协作解决方案。",
       "Document accessible to any connected person": "任何来访的人都可以访问文档",
+      "Document emoji": "文档表情符号",
       "Document owner": "文档所有者",
       "Docx": "Doc",
       "Download": "下载",
@@ -1904,6 +1930,7 @@
       "Reader": "阅读者",
       "Reading": "阅读中",
       "Remove": "移除",
+      "Remove emoji": "移除表情符号",
       "Rename": "重命名",
       "Rephrase": "改写",
       "Restore": "恢复",

From 54aeeaa4923bd21f6e3fb90a8a00c86de619b4bd Mon Sep 17 00:00:00 2001
From: Olivier Laurendeau <o.laurendeau@gmail.com>
Date: Mon, 15 Sep 2025 21:35:59 +0200
Subject: [PATCH 7/7] :bug:(frontend) emoji-picker fix lack of overlay

---
 .../doc-editor/components/EmojiPicker.tsx     | 27 ++++++++++++++++++-
 .../components/custom-blocks/CalloutBlock.tsx |  1 +
 .../doc-management/components/DocIcon.tsx     |  3 ++-
 3 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/EmojiPicker.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/EmojiPicker.tsx
index de4a5c90a..c9246f658 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/EmojiPicker.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/EmojiPicker.tsx
@@ -9,16 +9,18 @@ interface EmojiPickerProps {
   emojiData: EmojiMartData;
   onClickOutside: () => void;
   onEmojiSelect: ({ native }: { native: string }) => void;
+  withOverlay?: boolean;
 }
 
 export const EmojiPicker = ({
   emojiData,
   onClickOutside,
   onEmojiSelect,
+  withOverlay = false,
 }: EmojiPickerProps) => {
   const { i18n } = useTranslation();
 
-  return (
+  const pickerContent = (
     <Box $position="absolute" $zIndex={1000} $margin="2rem 0 0 0">
       <Picker
         data={emojiData}
@@ -30,4 +32,27 @@ export const EmojiPicker = ({
       />
     </Box>
   );
+
+  if (withOverlay) {
+    return (
+      <>
+        {/* Overlay transparent pour fermer en cliquant à l'extérieur */}
+        <div
+          style={{
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            width: '100vw',
+            height: '100vh',
+            zIndex: 999,
+            backgroundColor: 'transparent',
+          }}
+          onClick={onClickOutside}
+        />
+        {pickerContent}
+      </>
+    );
+  }
+
+  return pickerContent;
 };
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/CalloutBlock.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/CalloutBlock.tsx
index d5de55713..9ab7daf9e 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/CalloutBlock.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/CalloutBlock.tsx
@@ -82,6 +82,7 @@ export const CalloutBlock = createReactBlockSpec(
               emojiData={emojidata}
               onClickOutside={onClickOutside}
               onEmojiSelect={onEmojiSelect}
+              withOverlay={true}
             />
           )}
           <Box as="p" className="inline-content" ref={contentRef} />
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 c783f6399..849f536df 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
@@ -79,7 +79,7 @@ export const DocIcon = ({
 
   return (
     <>
-      <Box ref={iconRef} onClick={toggleEmojiPicker} $position="relative">
+      <Box ref={iconRef} onClick={toggleEmojiPicker} color="tertiary-text">
         {!emoji ? (
           defaultIcon
         ) : (
@@ -110,6 +110,7 @@ export const DocIcon = ({
               emojiData={emojidata}
               onEmojiSelect={handleEmojiSelect}
               onClickOutside={handleClickOutside}
+              withOverlay={true}
             />
           </div>,
           document.body,