From 732daba9b2ff85be0a1a7509cdf3f208d0b0ed67 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/8] =?UTF-8?q?=F0=9F=A9=B9(frontend)=20do=20not=20display?=
 =?UTF-8?q?=20emoji=20as=20page=20icon=20on=20main=20pages?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We decided to not display the leading emoji
as page icon on the main pages to keep consistency
in the document list.
---
 .../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 41a753a47..f964cf5f2 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"
@@ -71,7 +67,6 @@ export const SimpleDocItem = ({
           />
         ) : (
           <DocIcon
-            emoji={emoji}
             defaultIcon={
               <SimpleFileIcon
                 aria-hidden="true"
@@ -91,7 +86,7 @@ export const SimpleDocItem = ({
           $css={ItemTextCss}
           data-testid="doc-title"
         >
-          {displayTitle}
+          {doc.title || untitledDocument}
         </Text>
         {(!isDesktop || showAccesses) && (
           <Box

From f39463d41c0b4ee57d5c824b99f145b0ed66c1cc 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/8] =?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

This allows users to easily add emojis easily to
their documents from the tree, enhancing the
overall user experience.
---
 .../doc-editor/components/EmojiPicker.tsx     |   2 +-
 .../components/custom-blocks/index.ts         |   1 +
 .../docs/doc-editor/components/index.ts       |   1 +
 .../docs/doc-header/components/DocTitle.tsx   |  45 +---
 .../doc-management/components/DocIcon.tsx     | 108 +++++++-
 .../components/SimpleDocItem.tsx              |   1 +
 .../__tests__/useDocTitleUpdate.test.tsx      | 241 ++++++++++++++++++
 .../docs/doc-management/hooks/index.ts        |   1 +
 .../hooks/useDocTitleUpdate.tsx               |  78 ++++++
 .../doc-tree/components/DocSubPageItem.tsx    |   9 +-
 .../impress/src/stores/useBroadcastStore.tsx  |   6 +-
 11 files changed, 436 insertions(+), 57 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-editor/components/custom-blocks/index.ts b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/index.ts
index 7aad893b8..3e7ac610a 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/index.ts
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-blocks/index.ts
@@ -3,3 +3,4 @@ export * from './CalloutBlock';
 export * from './DividerBlock';
 export * from './PdfBlock';
 export * from './UploadLoaderBlock';
+export { default as emojidata } from './initEmojiCallout';
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/index.ts b/src/frontend/apps/impress/src/features/docs/doc-editor/components/index.ts
index 643b57fa4..3a390c331 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/index.ts
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/index.ts
@@ -1,2 +1,3 @@
 export * from './DocEditor';
+export * from './EmojiPicker';
 export * from './custom-blocks/';
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 42fea4289..0c5ba2e3a 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';
@@ -8,14 +7,12 @@ import { Box, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 import {
   Doc,
-  KEY_DOC,
-  KEY_LIST_DOC,
   useDocStore,
+  useDocTitleUpdate,
   useIsCollaborativeEditable,
   useTrans,
-  useUpdateDoc,
 } from '@/docs/doc-management';
-import { useBroadcastStore, useResponsiveStore } from '@/stores';
+import { useResponsiveStore } from '@/stores';
 
 interface DocTitleProps {
   doc: Doc;
@@ -54,47 +51,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 559b63200..ff3c710a5 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,8 +1,18 @@
-import { Text, TextType } from '@/components';
+import React from 'react';
+import { createPortal } from 'react-dom';
+
+import { Box, Icon, TextType } from '@/components';
+import { EmojiPicker, emojidata } from '@/docs/doc-editor/';
+
+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 = ({
@@ -11,22 +21,92 @@ export const DocIcon = ({
   $size = 'sm',
   $variation = '1000',
   $weight = '400',
+  emojiPicker = false,
+  docId,
+  title,
+  onEmojiUpdate,
   ...textProps
 }: DocIconProps) => {
-  if (!emoji) {
-    return <>{defaultIcon}</>;
-  }
+  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);
+  };
+
+  const handleClickOutside = () => {
+    setOpenEmojiPicker(false);
+  };
 
   return (
-    <Text
-      {...textProps}
-      $size={$size}
-      $variation={$variation}
-      $weight={$weight}
-      aria-hidden="true"
-      data-testid="doc-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"
+            data-testid="doc-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 f964cf5f2..19e113ed5 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
@@ -75,6 +75,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/index.ts b/src/frontend/apps/impress/src/features/docs/doc-management/hooks/index.ts
index 930e2d498..fbcfdc6fb 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-management/hooks/index.ts
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/hooks/index.ts
@@ -1,6 +1,7 @@
 export * from './useCollaboration';
 export * from './useCopyDocLink';
 export * from './useCreateChildDocTree';
+export * from './useDocTitleUpdate';
 export * from './useDocUtils';
 export * from './useIsCollaborativeEditable';
 export * from './useTrans';
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 0b0ee0384..b231c27d7 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
@@ -164,7 +164,14 @@ export const DocSubPageItem = (props: TreeViewNodeProps<Doc>) => {
           `}
         >
           <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 16ff75cb3b6a6a872afa5fc8924747b022a43863 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/8] =?UTF-8?q?=E2=9C=A8(frontend)=20can=20remove=20emoji?=
 =?UTF-8?q?=20in=20the=20tree=20item=20actions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add action button to remove emoji
from a document title from the document tree.
---
 .../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 1ab8b2c84..b81efed18 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 ac9fc8b7de99cf22b0cb898c51dfcbd16c524399 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/8] =?UTF-8?q?=F0=9F=A9=B9(frontend)=20handle=20properly?=
 =?UTF-8?q?=20emojis=20in=20interlinking?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Emoji in interlinking were not replacing
the default icon when present.
---
 .../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 681138e35b762d073220e4a7f4c104cef770e552 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/8] =?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 ff3c710a5..e7fb81dc5 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
@@ -37,6 +37,10 @@ export const DocIcon = ({
     left: number;
   }>({ top: 0, left: 0 });
 
+  if (!emojiPicker && !emoji) {
+    return defaultIcon;
+  }
+
   const toggleEmojiPicker = (e: React.MouseEvent) => {
     if (emojiPicker) {
       e.stopPropagation();

From 65f506203ee0f3347f4363aa522d28a06e03f544 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/8] =?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

We can now add emojis to the document title using
the EmojiPicker component.
---
 CHANGELOG.md                                  |   5 +
 .../doc-editor/components/EmojiPicker.tsx     |   2 +-
 .../InterlinkingLinkInlineContent.tsx         |  13 +-
 .../docs/doc-header/components/DocTitle.tsx   | 121 ++++++++++++------
 .../docs/doc-header/components/DocToolBox.tsx |  18 +++
 .../doc-management/assets/simple-document.svg |   2 -
 .../components/SimpleDocItem.tsx              |  18 +--
 .../docs/doc-management/components/index.ts   |   1 +
 .../apps/impress/src/i18n/translations.json   |  35 ++++-
 9 files changed, 155 insertions(+), 60 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b644f79eb..3af4c8599 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -49,6 +49,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
 
@@ -62,6 +65,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 0c5ba2e3a..7617c2339 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
@@ -7,11 +7,14 @@ import { Box, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 import {
   Doc,
+  DocIcon,
+  getEmojiAndTitle,
   useDocStore,
   useDocTitleUpdate,
   useIsCollaborativeEditable,
   useTrans,
 } from '@/docs/doc-management';
+import SimpleFileIcon from '@/features/docs/doc-management/assets/simple-document.svg';
 import { useResponsiveStore } from '@/stores';
 
 interface DocTitleProps {
@@ -50,18 +53,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) => {
@@ -72,43 +83,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/SimpleDocItem.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/components/SimpleDocItem.tsx
index 19e113ed5..517f26893 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;
@@ -66,16 +64,12 @@ export const SimpleDocItem = ({
             color={colorsTokens['primary-500']}
           />
         ) : (
-          <DocIcon
-            defaultIcon={
-              <SimpleFileIcon
-                aria-hidden="true"
-                data-testid="doc-simple-icon"
-                color={colorsTokens['primary-500']}
-              />
-            }
-            $size="25px"
-            docId={doc.id}
+          <SimpleFileIcon
+            width="32px"
+            height="32px"
+            aria-hidden="true"
+            data-testid="doc-simple-icon"
+            color={colorsTokens['primary-500']}
           />
         )}
       </Box>
diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/components/index.ts b/src/frontend/apps/impress/src/features/docs/doc-management/components/index.ts
index a3a6a6cef..58c03fd14 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-management/components/index.ts
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/components/index.ts
@@ -1,3 +1,4 @@
+export * from './DocIcon';
 export * from './DocPage403';
 export * from './ModalRemoveDoc';
 export * from './SimpleDocItem';
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 aba36c69793621c210d43e96768135a08b98780c 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/8] =?UTF-8?q?=F0=9F=90=9B(frontend)=20emoji-picker=20fix?=
 =?UTF-8?q?=20lack=20of=20overlay?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The EmojiPicker component now displays an overlay
when opened, it fixes an issue when multiple pickers
are present on the same page and we click on one of them,
the others were not closing.
---
 .../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 b76cee1fd..208787ffb 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
@@ -90,6 +90,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 e7fb81dc5..691e394e9 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
@@ -76,7 +76,7 @@ export const DocIcon = ({
 
   return (
     <>
-      <Box ref={iconRef} onClick={toggleEmojiPicker} $position="relative">
+      <Box ref={iconRef} onClick={toggleEmojiPicker} color="tertiary-text">
         {!emoji ? (
           defaultIcon
         ) : (
@@ -107,6 +107,7 @@ export const DocIcon = ({
               emojiData={emojidata}
               onEmojiSelect={handleEmojiSelect}
               onClickOutside={handleClickOutside}
+              withOverlay={true}
             />
           </div>,
           document.body,

From 8ff19142003026b964e9047ee95c6dfcc7ce0565 Mon Sep 17 00:00:00 2001
From: Olivier Laurendeau <o.laurendeau@gmail.com>
Date: Mon, 22 Sep 2025 15:50:22 +0200
Subject: [PATCH 8/8] =?UTF-8?q?fixup!=20=E2=9C=A8(frontend)=20add=20EmojiP?=
 =?UTF-8?q?icker=20in=20DocumentTitle?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                  |  8 ++++---
 .../InterlinkingLinkInlineContent.tsx         | 23 ++++++++++---------
 .../docs/doc-header/components/DocTitle.tsx   | 21 +++++++++++------
 .../docs/doc-header/components/DocToolBox.tsx |  2 +-
 .../doc-management/components/DocIcon.tsx     |  8 +++----
 .../docs/doc-management/components/index.ts   |  1 +
 .../docs/doc-management/hooks/index.ts        |  1 +
 .../hooks/useDocTitleUpdate.tsx               |  3 +--
 .../doc-tree/components/DocSubPageItem.tsx    |  2 +-
 .../components/DocTreeItemActions.tsx         |  2 +-
 10 files changed, 41 insertions(+), 30 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3af4c8599..3620daf45 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@ and this project adheres to
 ### Added
 
 - ✨(frontend) add pdf block to the editor #1293
+- ✨(frontend) add an EmojiPicker in the document tree and title #1381
 
 ### Changed
 
@@ -44,14 +45,15 @@ and this project adheres to
 - 🐛(frontend) exclude h4-h6 headings from table of contents #1441
 - 🔒(frontend) prevent readers from changing callout emoji #1449
 
+## Removed
+
+- 🔥(frontend) remove emoji buttons in doc grid #1419
+
 ## [3.7.0] - 2025-09-12
 
 ### 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
 
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 e452c47bd..a36d36b67 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,7 +3,7 @@ import { createReactInlineContentSpec } from '@blocknote/react';
 import { useEffect } from 'react';
 import { css } from 'styled-components';
 
-import { Box, Icon, StyledLink, Text } from '@/components';
+import { Icon, StyledLink, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 import SelectedPageIcon from '@/docs/doc-editor/assets/doc-selected.svg';
 import { getEmojiAndTitle, useDoc } from '@/docs/doc-management';
@@ -73,19 +73,20 @@ const LinkSelected = ({ url, title }: LinkSelectedProps) => {
         transition: background-color 0.2s ease-in-out;
       `}
     >
-      <Box
-        $display="inline-block"
+      {emoji ? (
+        <Icon iconName={emoji} $size="16px" />
+      ) : (
+        <SelectedPageIcon width={11.5} />
+      )}
+      <Text
+        $weight="500"
+        spellCheck="false"
+        $size="16px"
+        $display="inline"
         $css={css`
-          margin-right: 0.3rem;
+          margin-left: 0.3rem;
         `}
       >
-        {emoji ? (
-          <Icon iconName={emoji} $size="16px" />
-        ) : (
-          <SelectedPageIcon width={11.5} />
-        )}
-      </Box>
-      <Text $weight="500" spellCheck="false" $size="16px" $display="inline">
         {titleWithoutEmoji}
       </Text>
     </StyledLink>
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 7617c2339..b187f595d 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
@@ -65,7 +65,7 @@ const DocTitleInput = ({ doc }: DocTitleProps) => {
     (inputText: string) => {
       const sanitizedTitle = updateDocTitle(
         doc,
-        emoji ? `${emoji} ${inputText.trim()}` : inputText.trim(),
+        emoji ? `${emoji} ${inputText}` : inputText,
       );
       const { titleWithoutEmoji: sanitizedTitleWithoutEmoji } =
         getEmojiAndTitle(sanitizedTitle);
@@ -90,26 +90,33 @@ const DocTitleInput = ({ doc }: DocTitleProps) => {
     <Box
       $direction="row"
       $align="flex-end"
-      $gap={spacingsTokens['s']}
+      $gap={spacingsTokens['xs']}
       $minHeight="40px"
     >
       <Tooltip content={t('Document emoji')} aria-hidden={true} placement="top">
         <Box
           $css={css`
-            height: 58px;
+            height: 36px;
+            padding: 4px;
+            padding-top: 3px;
             cursor: pointer;
+            &:hover {
+              background-color: ${colorsTokens['greyscale-100']};
+              border-radius: 4px;
+            }
+            transition: background-color 0.2s ease-in-out;
           `}
         >
           <DocIcon
-            emojiPicker
+            withEmojiPicker={doc.abilities.partial_update}
             docId={doc.id}
             title={doc.title}
             emoji={emoji}
-            $size="50px"
+            $size="25px"
             defaultIcon={
               <SimpleFileIcon
-                width="50px"
-                height="50px"
+                width="25px"
+                height="25px"
                 aria-hidden="true"
                 aria-label={t('Simple document icon')}
                 color={colorsTokens['primary-500']}
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 24eacbee9..a973f66b8 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
@@ -136,7 +136,7 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
       },
       testId: `docs-actions-${doc.is_favorite ? 'unpin' : 'pin'}-${doc.id}`,
     },
-    ...(emoji
+    ...(emoji && doc.abilities.partial_update
       ? [
           {
             label: t('Remove emoji'),
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 691e394e9..f2652cecb 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
@@ -8,7 +8,7 @@ import { useDocTitleUpdate } from '../hooks/useDocTitleUpdate';
 
 type DocIconProps = TextType & {
   emoji?: string | null;
-  emojiPicker?: boolean;
+  withEmojiPicker?: boolean;
   defaultIcon: React.ReactNode;
   docId?: string;
   title?: string;
@@ -17,11 +17,11 @@ type DocIconProps = TextType & {
 
 export const DocIcon = ({
   emoji,
+  withEmojiPicker = false,
   defaultIcon,
   $size = 'sm',
   $variation = '1000',
   $weight = '400',
-  emojiPicker = false,
   docId,
   title,
   onEmojiUpdate,
@@ -37,12 +37,12 @@ export const DocIcon = ({
     left: number;
   }>({ top: 0, left: 0 });
 
-  if (!emojiPicker && !emoji) {
+  if (!withEmojiPicker && !emoji) {
     return defaultIcon;
   }
 
   const toggleEmojiPicker = (e: React.MouseEvent) => {
-    if (emojiPicker) {
+    if (withEmojiPicker) {
       e.stopPropagation();
       e.preventDefault();
 
diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/components/index.ts b/src/frontend/apps/impress/src/features/docs/doc-management/components/index.ts
index 58c03fd14..d88be14cc 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-management/components/index.ts
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/components/index.ts
@@ -2,3 +2,4 @@ export * from './DocIcon';
 export * from './DocPage403';
 export * from './ModalRemoveDoc';
 export * from './SimpleDocItem';
+export * from './DocIcon';
diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/hooks/index.ts b/src/frontend/apps/impress/src/features/docs/doc-management/hooks/index.ts
index fbcfdc6fb..5a71305e4 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-management/hooks/index.ts
+++ b/src/frontend/apps/impress/src/features/docs/doc-management/hooks/index.ts
@@ -5,3 +5,4 @@ export * from './useDocTitleUpdate';
 export * from './useDocUtils';
 export * from './useIsCollaborativeEditable';
 export * from './useTrans';
+export * from './useDocTitleUpdate';
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
index d9f5119a8..7d4987412 100644
--- 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
@@ -47,6 +47,7 @@ export const useDocTitleUpdate = (options?: UseDocUpdateOptions) => {
 
       // When blank we set to untitled
       if (!sanitizedTitle) {
+        updateDoc({ id: doc.id, title: '' });
         return '';
       }
 
@@ -63,9 +64,7 @@ export const useDocTitleUpdate = (options?: UseDocUpdateOptions) => {
   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],
   );
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 b231c27d7..05e6ea5f0 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
@@ -166,9 +166,9 @@ export const DocSubPageItem = (props: TreeViewNodeProps<Doc>) => {
           <Box $width="16px" $height="16px">
             <DocIcon
               emoji={emoji}
+              withEmojiPicker={doc.abilities.partial_update}
               defaultIcon={<SubPageIcon />}
               $size="sm"
-              emojiPicker
               docId={doc.id}
               title={doc.title}
             />
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 b81efed18..65b9e8cf2 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
@@ -92,7 +92,7 @@ export const DocTreeItemActions = ({
     },
     ...(!isRoot
       ? [
-          ...(emoji
+          ...(emoji && doc.abilities.partial_update
             ? [
                 {
                   label: t('Remove emoji'),