🐛(frontend) open the emoji picker when adding a document emoji

Previously, picking an emoji required two clicks; now the picker opens on click and updates only on selection.

Author: Ovgodd

CHANGELOG.md

@@ -87,6 +87,7 @@ and this project adheres to
 
 ### Fixed
 
+- 🐛(frontend) open the emoji picker when adding a document emoji
 - 🐛(documentation) fix minio port and keycloak realm in the k8s guide #2751
 - 🐛(collaboration) bound the calls yhub makes to the backend with a timeout,
   `YHUB_BACKEND_REQUEST_TIMEOUT_MS`, 5s by default #2753

src/frontend/apps/e2e/__tests__/app-impress/doc-header.spec.ts

@@ -218,16 +218,10 @@ test.describe('Doc Header', () => {
     // Emoji picker should be hidden initially
     await expect(emojiPicker).toBeHidden();
 
-    // Add emoji
+    // Add emoji opens the picker; the document stays unchanged until a choice
     await expect(removeEmoji).toBeHidden();
     await addEmoji.click();
-    // The 1 April the emoji is a fish
-    await expect(emojiPicker).toHaveText(/📄|🐟/);
-
-    // Change emoji
-    await emojiPicker.click({
-      delay: 100,
-    });
+    await expect(emojiPicker).toBeHidden();
     await page.getByRole('button', { name: '😀' }).first().click();
     await expect(emojiPicker).toHaveText('😀');
 

src/frontend/apps/impress/src/features/docs/doc-header/__tests__/DocHeaderEmoji.spec.tsx

@@ -1,85 +1,71 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { beforeEach, describe, expect, test, vi } from 'vitest';
 
 import { AppWrapper } from '@/tests/utils';
 
 const mockUpdateDocEmoji = vi.fn();
-const mockUpdateDocTitle = vi.fn((_doc: unknown, title: string) => title);
 
 vi.mock('@/docs/doc-management', async () => {
   const actual = await vi.importActual('@/docs/doc-management');
   return {
     ...actual,
     useDocTitleUpdate: () => ({
       updateDocEmoji: mockUpdateDocEmoji,
-      updateDocTitle: mockUpdateDocTitle,
+      updateDocTitle: (_doc: unknown, title: string) => title,
     }),
   };
 });
 
+vi.mock('@/components/Emoji/EmojiPicker', () => ({
+  EmojiPicker: ({
+    onEmojiSelect,
+  }: {
+    onEmojiSelect: (emoji: { native: string }) => void;
+  }) => (
+    <button type="button" onClick={() => onEmojiSelect({ native: '😀' })}>
+      😀
+    </button>
+  ),
+}));
+
 import { DocHeader } from '../components/DocHeader';
 
 const doc = {
   id: 'doc-1',
   title: 'My document',
-  is_favorite: false,
-  nb_accesses_direct: 1,
-  abilities: {
-    versions_list: true,
-    destroy: true,
-    partial_update: true,
-    duplicate: true,
-    accesses_view: true,
-  },
+  abilities: { partial_update: true },
 } as any;
 
-describe('DocHeader - Add emoji (April Fools easter egg)', () => {
+describe('DocHeader - Add emoji', () => {
   beforeEach(() => {
-    vi.useFakeTimers();
     mockUpdateDocEmoji.mockClear();
-    mockUpdateDocTitle.mockClear();
-  });
-
-  afterEach(() => {
-    vi.useRealTimers();
   });
 
-  [
-    { emoji: '🐟', date: '2026-04-01' },
-    { emoji: '📄', date: '2026-03-30' },
-    { emoji: '📄', date: '2026-04-02' },
-  ].forEach(({ emoji, date }) => {
-    test(`uses ${emoji} emoji on ${date}`, () => {
-      vi.setSystemTime(new Date(date));
+  test('opens the picker without setting a default emoji', async () => {
+    const user = userEvent.setup();
+    render(<DocHeader doc={doc} />, { wrapper: AppWrapper });
 
-      render(<DocHeader doc={doc} />, { wrapper: AppWrapper });
+    await user.click(screen.getByRole('button', { name: 'Add emoji' }));
 
-      fireEvent.click(screen.getByRole('button', { name: 'Add emoji' }));
-
-      expect(mockUpdateDocEmoji).toHaveBeenCalledWith(
-        'doc-1',
-        'My document',
-        emoji,
-      );
-    });
+    expect(screen.getByRole('button', { name: '😀' })).toBeVisible();
+    expect(mockUpdateDocEmoji).not.toHaveBeenCalled();
   });
 
-  test('preserves a title changed immediately before adding an emoji', () => {
-    vi.setSystemTime(new Date('2026-03-30'));
-
-    render(<DocHeader doc={{ ...doc, title: '' }} />, {
-      wrapper: AppWrapper,
-    });
+  test('sets the chosen emoji, keeping a title edited just before', async () => {
+    const user = userEvent.setup();
+    render(<DocHeader doc={{ ...doc, title: '' }} />, { wrapper: AppWrapper });
 
     const titleInput = screen.getByRole('textbox', { name: 'Document title' });
+    await user.click(titleInput);
     titleInput.textContent = 'My new document';
-    fireEvent.blur(titleInput);
-    fireEvent.click(screen.getByRole('button', { name: 'Add emoji' }));
+    await user.click(screen.getByRole('button', { name: 'Add emoji' }));
+    await user.click(screen.getByRole('button', { name: '😀' }));
 
     expect(mockUpdateDocEmoji).toHaveBeenCalledWith(
       'doc-1',
       'My new document',
-      '📄',
+      '😀',
     );
   });
 });

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

@@ -1,18 +1,20 @@
 import { Button } from '@gouvfr-lasuite/ui-components';
-import { useEffect, useRef } from 'react';
+import { MouseEvent, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
 
 import RemoveEmojiSVG from '@/assets/icons/ui-kit/face-remove.svg';
 import AddEmojiSVG from '@/assets/icons/ui-kit/face.svg';
-import { Box, HorizontalSeparator } from '@/components';
+import { Box, EmojiPicker, HorizontalSeparator } from '@/components';
+import { getEmojidata } from '@/components/Emoji/initEmojiCallout';
 import {
   Doc,
   getEmojiAndTitle,
   useDocTitleUpdate,
   useDocUtils,
 } from '@/docs/doc-management';
 import { useIsOffline } from '@/features/service-worker/hooks/useOffline';
+import { useFocusStore } from '@/stores';
 
 import { AlertOffline } from './AlertOffline';
 import { AlertRestore } from './AlertRestore';
@@ -34,6 +36,31 @@ export const DocHeader = ({ doc }: DocHeaderProps) => {
   const { isTopRoot } = useDocUtils(doc);
   const displayEmojiButton = doc.abilities.partial_update && !isTopRoot;
   const latestTitleRef = useRef(doc.title ?? '');
+  const [isEmojiPickerOpen, setIsEmojiPickerOpen] = useState(false);
+  const { addLastFocus, restoreFocus } = useFocusStore();
+
+  const closeEmojiPicker = () => {
+    setIsEmojiPickerOpen(false);
+    restoreFocus();
+  };
+
+  const onEmojiSelect = ({ native }: { native: string }) => {
+    updateDocEmoji(doc.id, latestTitleRef.current, native);
+    closeEmojiPicker();
+  };
+
+  const handleEmojiButtonClick = (
+    event: MouseEvent<HTMLButtonElement> | MouseEvent<HTMLAnchorElement>,
+  ) => {
+    if (emoji) {
+      updateDocEmoji(doc.id, latestTitleRef.current, '');
+      return;
+    }
+
+    event.stopPropagation();
+    addLastFocus(event.currentTarget);
+    setIsEmojiPickerOpen(true);
+  };
 
   useEffect(() => {
     latestTitleRef.current = doc.title ?? '';
@@ -71,23 +98,13 @@ export const DocHeader = ({ doc }: DocHeaderProps) => {
           {isOffline && <AlertOffline />}
         </Box>
         <Box $gap="sm">
-          <Box>
+          <Box $position="relative">
             {displayEmojiButton && (
               <Button
                 className="--docs--doc-header-emoji-button"
                 size="nano"
-                onClick={() => {
-                  const today = new Date();
-                  const isAprilFools =
-                    today.getMonth() === 3 && today.getDate() === 1;
-                  emoji
-                    ? updateDocEmoji(doc.id, latestTitleRef.current, '')
-                    : updateDocEmoji(
-                        doc.id,
-                        latestTitleRef.current,
-                        isAprilFools ? '🐟' : '📄',
-                      );
-                }}
+                onClick={handleEmojiButtonClick}
+                aria-expanded={emoji ? undefined : isEmojiPickerOpen}
                 aria-label={emoji ? t('Remove emoji') : t('Add emoji')}
                 color="neutral"
                 variant="tertiary"
@@ -103,6 +120,14 @@ export const DocHeader = ({ doc }: DocHeaderProps) => {
                 {emoji ? t('Remove emoji') : t('Add emoji')}
               </Button>
             )}
+            {isEmojiPickerOpen && (
+              <EmojiPicker
+                emojiData={getEmojidata()}
+                onClickOutside={closeEmojiPicker}
+                onEmojiSelect={onEmojiSelect}
+                withOverlay={true}
+              />
+            )}
           </Box>
           <DocTitle
             doc={doc}