fixup! ✨(frontend) add EmojiPicker in DocumentTitle

Author: olaurendeau

CHANGELOG.md

@@ -17,6 +17,9 @@ and this project adheres to
   - ♿ add document visible in list and openable via enter key #1365
   - ♿ add pdf outline property to enable bookmarks display #1368
   - ♿ hide decorative icons from assistive tech with aria-hidden #1404
+- ✨(frontend) doc emojis improvements #1381
+  - add an EmojiPicker in the document tree and document title
+  - remove emoji buttons in menus
 
 ### Fixed
 
@@ -31,15 +34,11 @@ and this project adheres to
 - ♿(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
 

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

@@ -10,7 +10,7 @@ import { useDocTitleUpdate } from '../hooks/useDocTitleUpdate';
 
 type DocIconProps = TextType & {
   emoji?: string | null;
-  emojiPicker?: boolean;
+  withEmojiPicker?: boolean;
   defaultIcon: React.ReactNode;
   docId?: string;
   title?: string;
@@ -19,11 +19,11 @@ type DocIconProps = TextType & {
 
 export const DocIcon = ({
   emoji,
+  withEmojiPicker = false,
   defaultIcon,
   $size = 'sm',
   $variation = '1000',
   $weight = '400',
-  emojiPicker = false,
   docId,
   title,
   onEmojiUpdate,
@@ -40,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();
 

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

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}
             />

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