fixup! ✨(frontend) add EmojiPicker in DocumentTitle

Author: olaurendeau

CHANGELOG.md

@@ -21,6 +21,12 @@ and this project adheres to
   - ♿ remove redundant aria-label on hidden icons and update tests #1432
   - ♿ improve semantic structure and aria roles of leftpanel #1431
   - ♿ add default background to left panel for better accessibility #1423
+  - ♿ improve NVDA navigation in DocShareModal #1396
+- ✨(frontend) doc emojis improvements #1381
+  - add an EmojiPicker in the document tree and document title
+  - remove emoji buttons in menus
+- 🩹(frontend) on main pages do not display leading emoji as page icon #1381
+- 🩹(frontend) handle properly emojis in interlinking #1381
 
 ### Fixed
 
@@ -30,20 +36,11 @@ and this project adheres to
 - 🐛(frontend) fix legacy role computation #1376
 - 🐛(frontend) scroll back to top when navigate to a document #1406
 
-### Changed
-
-- ♿(frontend) improve accessibility:
-  - ♿improve NVDA navigation in DocShareModal #1396
-
-
 ## [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
 
@@ -57,8 +54,6 @@ 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
 

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

@@ -36,7 +36,7 @@ export const EmojiPicker = ({
   if (withOverlay) {
     return (
       <>
-        {/* Overlay transparent pour fermer en cliquant à l'extérieur */}
+        {/* Transparent overlay to close by clicking outside */}
         <div
           style={{
             position: 'fixed',

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>

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

@@ -11,12 +11,10 @@ import {
   useDocStore,
   useTrans,
 } from '@/docs/doc-management';
+import { DocIcon, useDocTitleUpdate } from '@/features/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;
 }
@@ -62,7 +60,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);
@@ -87,26 +85,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']}

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'),

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

@@ -2,15 +2,15 @@ import React from 'react';
 import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
 
-import { Box, Icon, TextType } from '@/components';
+import { Box, Text, 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;
+  withEmojiPicker?: boolean;
   defaultIcon: React.ReactNode;
   docId?: string;
   title?: string;
@@ -19,17 +19,16 @@ type DocIconProps = TextType & {
 
 export const DocIcon = ({
   emoji,
+  withEmojiPicker = false,
   defaultIcon,
   $size = 'sm',
   $variation = '1000',
   $weight = '400',
-  emojiPicker = false,
   docId,
   title,
   onEmojiUpdate,
   ...textProps
 }: DocIconProps) => {
-
   const { t } = useTranslation();
   const { updateDocEmoji } = useDocTitleUpdate();
 
@@ -41,12 +40,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();
 
@@ -84,9 +83,8 @@ export const DocIcon = ({
         {!emoji ? (
           defaultIcon
         ) : (
-          <Icon
+          <Text
             {...textProps}
-            iconName={emoji}
             $size={$size}
             $variation={$variation}
             $weight={$weight}
@@ -95,7 +93,7 @@ export const DocIcon = ({
             data-testid="doc-emoji-icon"
           >
             {emoji}
-          </Icon>
+          </Text>
         )}
       </Box>
       {openEmojiPicker &&

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

@@ -64,7 +64,6 @@ export const SimpleDocItem = ({
             color={colorsTokens['primary-500']}
           />
         ) : (
-
           <SimpleFileIcon
             width="32px"
             height="32px"

src/frontend/apps/impress/src/features/docs/doc-management/components/index.ts

@@ -1,3 +1,4 @@
 export * from './DocPage403';
 export * from './ModalRemoveDoc';
 export * from './SimpleDocItem';
+export * from './DocIcon';

src/frontend/apps/impress/src/features/docs/doc-management/hooks/index.ts

@@ -4,3 +4,4 @@ export * from './useCreateChildDocTree';
 export * from './useDocUtils';
 export * from './useIsCollaborativeEditable';
 export * from './useTrans';
+export * from './useDocTitleUpdate';

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],
   );