✨(frontend) add EmojiPicker in DocumentTitle

As discussed in #1358

Author: olaurendeau

CHANGELOG.md

@@ -14,6 +14,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
 
@@ -27,6 +30,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
 

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}

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}

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>
   );
 };

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

src/frontend/apps/impress/src/features/docs/doc-management/assets/simple-document.svg

@@ -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();

src/frontend/apps/impress/src/features/docs/doc-management/components/DocIcon.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>