save

AntoLC · AntoLC · commit e729d455bce7 · 2025-11-04T18:02:07.000+01:00
diff --git a/src/frontend/apps/impress/src/components/DropButton.tsx b/src/frontend/apps/impress/src/components/DropButton.tsx
@@ -31,7 +31,7 @@ const StyledButton = styled(Button)<StyledButtonProps>`
   font-weight: 500;
   font-size: 0.938rem;
   padding: 0;
-  ${({ $css }) => $css};
+  border-radius: 4px;
   &:hover {
     background-color: var(
       --c--components--button--primary-text--background--color-hover
@@ -41,6 +41,7 @@ const StyledButton = styled(Button)<StyledButtonProps>`
     box-shadow: 0 0 0 2px var(--c--theme--colors--primary-400);
     border-radius: 4px;
   }
+  ${({ $css }) => $css};
 `;
 
 export interface DropButtonProps {
diff --git a/src/frontend/apps/impress/src/components/Icon.tsx b/src/frontend/apps/impress/src/components/Icon.tsx
@@ -13,7 +13,7 @@ export const Icon = ({
   iconName,
   disabled,
   variant = 'outlined',
-  $variation,
+  $variation = 'text',
   ...textProps
 }: IconProps) => {
   const hasLabel = 'aria-label' in textProps || 'aria-labelledby' in textProps;
@@ -41,15 +41,19 @@ type IconOptionsProps = TextType & {
   isHorizontal?: boolean;
 };
 
-export const IconOptions = ({ isHorizontal, ...props }: IconOptionsProps) => {
+export const IconOptions = ({
+  isHorizontal,
+  $css,
+  ...props
+}: IconOptionsProps) => {
   return (
     <Icon
-      {...props}
       iconName={isHorizontal ? 'more_horiz' : 'more_vert'}
       $css={css`
         user-select: none;
-        ${props.$css}
+        ${$css}
       `}
+      {...props}
     />
   );
 };
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
@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import { createReactInlineContentSpec } from '@blocknote/react';
 import { useRouter } from 'next/router';
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { css } from 'styled-components';
 
 import { BoxButton, Text } from '@/components';
@@ -28,9 +28,16 @@ export const InterlinkingLinkInlineContent = createReactInlineContentSpec(
   {
     render: ({ inlineContent, updateInlineContent }) => {
       const { data: doc } = useDoc({ id: inlineContent.props.docId });
+      const lastUpdatedTitleRef = useRef<string | null>(null);
 
       useEffect(() => {
-        if (doc?.title && doc.title !== inlineContent.props.title) {
+        if (
+          doc?.title &&
+          doc.title !== inlineContent.props.title &&
+          lastUpdatedTitleRef.current !== doc.title
+        ) {
+          lastUpdatedTitleRef.current = doc.title;
+
           updateInlineContent({
             type: 'interlinkingLinkInline',
             props: {
@@ -66,7 +73,7 @@ const LinkSelected = ({ url, title }: LinkSelectedProps) => {
       onClick={handleClick}
       draggable="false"
       $css={css`
-        display: inline;
+        display: contents;
         padding: 0.1rem 0.4rem;
         border-radius: 4px;
         & svg {
diff --git a/src/frontend/apps/impress/src/features/docs/doc-header/components/BoutonShare.tsx b/src/frontend/apps/impress/src/features/docs/doc-header/components/BoutonShare.tsx
@@ -76,7 +76,7 @@ export const BoutonShare = ({
 
   return (
     <Button
-      color="tertiary-text"
+      color="primary-text"
       onClick={open}
       size="medium"
       disabled={isDisabled}
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
@@ -55,8 +55,16 @@ const DocTitleEmojiPicker = ({ doc }: DocTitleProps) => {
   const { colorsTokens } = useCunninghamTheme();
   const { emoji } = getEmojiAndTitle(doc.title ?? '');
 
+  if (!emoji) {
+    return null;
+  }
+
   return (
-    <Tooltip content={t('Document emoji')} aria-hidden={true} placement="top">
+    <Tooltip
+      content={t('Edit document emoji')}
+      aria-hidden={true}
+      placement="top"
+    >
       <Box
         $css={css`
           padding: 4px;
@@ -70,11 +78,17 @@ const DocTitleEmojiPicker = ({ doc }: DocTitleProps) => {
         `}
       >
         <DocIcon
+          buttonProps={{
+            $width: '32px',
+            $height: '32px',
+            $justify: 'space-between',
+            $align: 'center',
+          }}
           withEmojiPicker={doc.abilities.partial_update}
           docId={doc.id}
           title={doc.title}
           emoji={emoji}
-          $size="25px"
+          $size="23px"
           defaultIcon={
             <SimpleFileIcon
               width="25px"
@@ -94,7 +108,6 @@ const DocTitleInput = ({ doc }: DocTitleProps) => {
   const { isDesktop } = useResponsiveStore();
   const { t } = useTranslation();
   const { colorsTokens } = useCunninghamTheme();
-  const { spacingsTokens } = useCunninghamTheme();
   const { isTopRoot } = useDocUtils(doc);
   const { untitledDocument } = useTrans();
   const { emoji, titleWithoutEmoji } = getEmojiAndTitle(doc.title ?? '');
@@ -139,19 +152,9 @@ const DocTitleInput = ({ doc }: DocTitleProps) => {
       className="--docs--doc-title"
       $direction="row"
       $align="center"
-      $gap={spacingsTokens['xs']}
+      $gap="4px"
       $minHeight="40px"
     >
-      {isTopRoot && (
-        <SimpleFileIcon
-          width="25px"
-          height="25px"
-          aria-hidden="true"
-          aria-label={t('Simple document icon')}
-          color={colorsTokens['primary-500']}
-          style={{ flexShrink: '0' }}
-        />
-      )}
       {!isTopRoot && <DocTitleEmojiPicker doc={doc} />}
 
       <Tooltip content={t('Rename')} aria-hidden={true} placement="top">
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
@@ -60,7 +60,7 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
   const selectHistoryModal = useModal();
   const modalShare = useModal();
 
-  const { isSmallMobile, isDesktop } = useResponsiveStore();
+  const { isSmallMobile, isMobile } = useResponsiveStore();
   const copyDocLink = useCopyDocLink(doc.id);
   const { mutate: duplicateDoc } = useDuplicateDoc({
     onSuccess: (data) => {
@@ -90,28 +90,20 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
   const { updateDocEmoji } = useDocTitleUpdate();
 
   const options: DropdownMenuOption[] = [
-    ...(isSmallMobile
-      ? [
-          {
-            label: t('Share'),
-            icon: 'group',
-            callback: modalShare.open,
-          },
-          {
-            label: t('Export'),
-            icon: 'download',
-            callback: () => {
-              setIsModalExportOpen(true);
-            },
-            show: !!ModalExport,
-          },
-          {
-            label: t('Copy link'),
-            icon: 'add_link',
-            callback: copyDocLink,
-          },
-        ]
-      : []),
+    {
+      label: t('Share'),
+      icon: 'group',
+      callback: modalShare.open,
+      show: isSmallMobile,
+    },
+    {
+      label: t('Export'),
+      icon: 'download',
+      callback: () => {
+        setIsModalExportOpen(true);
+      },
+      show: !!ModalExport && isSmallMobile,
+    },
     {
       label: doc.is_favorite ? t('Unpin') : t('Pin'),
       icon: 'push_pin',
@@ -124,25 +116,38 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
       },
       testId: `docs-actions-${doc.is_favorite ? 'unpin' : 'pin'}-${doc.id}`,
     },
-    ...(emoji && doc.abilities.partial_update && !isTopRoot
-      ? [
-          {
-            label: t('Remove emoji'),
-            icon: 'emoji_emotions',
-            callback: () => {
-              updateDocEmoji(doc.id, doc.title ?? '', '');
-            },
-          },
-        ]
-      : []),
     {
       label: t('Version history'),
       icon: 'history',
       disabled: !doc.abilities.versions_list,
       callback: () => {
         selectHistoryModal.open();
       },
-      show: isDesktop,
+      show: !isMobile,
+      showSeparator: isTopRoot ? true : false,
+    },
+    {
+      label: t('Remove emoji'),
+      icon: 'emoji_emotions',
+      callback: () => {
+        updateDocEmoji(doc.id, doc.title ?? '', '');
+      },
+      showSeparator: true,
+      show: !!emoji && doc.abilities.partial_update && !isTopRoot,
+    },
+    {
+      label: t('Add emoji'),
+      icon: 'emoji_emotions',
+      callback: () => {
+        updateDocEmoji(doc.id, doc.title ?? '', '📄');
+      },
+      showSeparator: true,
+      show: !emoji && doc.abilities.partial_update && !isTopRoot,
+    },
+    {
+      label: t('Copy link'),
+      icon: 'add_link',
+      callback: copyDocLink,
     },
     {
       label: t('Copy as {{format}}', { format: 'Markdown' }),
@@ -158,6 +163,7 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
         void copyCurrentEditorToClipboard('html');
       },
       show: isFeatureFlagActivated('CopyAsHTML'),
+      showSeparator: true,
     },
     {
       label: t('Duplicate'),
@@ -170,6 +176,7 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
           canSave: doc.abilities.partial_update,
         });
       },
+      showSeparator: true,
     },
     {
       label: isChild ? t('Delete sub-document') : t('Delete document'),
@@ -224,25 +231,22 @@ export const DocToolBox = ({ doc }: DocToolBoxProps) => {
             aria-label={t('Export the document')}
           />
         )}
-        <DropdownMenu options={options} label={t('Open the document options')}>
-          <IconOptions
-            aria-hidden="true"
-            isHorizontal
-            $theme="primary"
-            $padding={{ all: 'xs' }}
-            $css={css`
-              border-radius: 4px;
-              &:hover {
-                background-color: ${colorsTokens['greyscale-100']};
-              }
-              ${isSmallMobile
-                ? css`
-                    padding: 10px;
-                    border: 1px solid ${colorsTokens['greyscale-300']};
-                  `
-                : ''}
-            `}
-          />
+        <DropdownMenu
+          options={options}
+          label={t('Open the document options')}
+          buttonCss={css`
+            padding: ${spacingsTokens['xs']};
+            &:hover {
+              background-color: ${colorsTokens['greyscale-100']};
+            }
+            ${isSmallMobile
+              ? css`
+                  border: 1px solid ${colorsTokens['greyscale-300']};
+                `
+              : ''}
+          `}
+        >
+          <IconOptions aria-hidden="true" isHorizontal $theme="primary" />
         </DropdownMenu>
       </Box>
 
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
@@ -1,12 +1,13 @@
 import { MouseEvent, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 
-import { BoxButton, Icon, TextType } from '@/components';
+import { BoxButton, BoxButtonType, Text, TextType } from '@/components';
 import { EmojiPicker, emojidata } from '@/docs/doc-editor/';
 
 import { useDocTitleUpdate } from '../hooks/useDocTitleUpdate';
 
 type DocIconProps = TextType & {
+  buttonProps?: BoxButtonType;
   emoji?: string | null;
   defaultIcon: React.ReactNode;
   docId?: string;
@@ -16,6 +17,7 @@ type DocIconProps = TextType & {
 };
 
 export const DocIcon = ({
+  buttonProps,
   emoji,
   defaultIcon,
   $size = 'sm',
@@ -81,21 +83,21 @@ export const DocIcon = ({
         ref={iconRef}
         onClick={toggleEmojiPicker}
         color="tertiary-text"
+        {...buttonProps}
       >
         {!emoji ? (
           defaultIcon
         ) : (
-          <Icon
+          <Text
             {...textProps}
-            iconName={emoji}
             $size={$size}
             $variation={$variation}
             $weight={$weight}
             aria-hidden="true"
             data-testid="doc-emoji-icon"
           >
             {emoji}
-          </Icon>
+          </Text>
         )}
       </BoxButton>
       {openEmojiPicker &&
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocVisibility.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocVisibility.tsx
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
