💄(frontend) update search ui to fit the design mockup

The search ui has been updated to fit the design mockup. It includes: - the search feature - the move doc modal - the interlinking search part
2026-08-17 21:25:43 +02:00 · 2026-06-10 16:44:49 +02:00
parent 359fb42605
commit 7edbd4efcb
18 changed files with 143 additions and 103 deletions
@@ -445,7 +445,6 @@ test.describe('Doc Editor', () => {
      .first();

    await expect(searchContainerRow).toContainText('😀');
-    await expect(searchContainerRow.locator('svg').first()).toBeHidden();

    await input.pressSequentially('-child');

@@ -208,7 +208,9 @@ test.describe('Doc grid move', () => {
    await page.getByRole('menuitem', { name: 'Move into a doc' }).click();

    await expect(
-      page.getByRole('dialog').getByRole('heading', { name: 'Move' }),
+      page
+        .getByRole('dialog')
+        .getByRole('heading', { name: 'Choose a new parent doc' }),
    ).toBeVisible();

    const input = page.getByRole('combobox', { name: 'Quick search input' });
@@ -296,7 +298,9 @@ test.describe('Doc grid move', () => {
    await page.getByRole('menuitem', { name: 'Move into a doc' }).click();

    await expect(
-      page.getByRole('dialog').getByRole('heading', { name: 'Move' }),
+      page
+        .getByRole('dialog')
+        .getByRole('heading', { name: 'Choose a new parent doc' }),
    ).toBeVisible();

    const input = page.getByRole('combobox', { name: 'Quick search input' });
@@ -365,7 +369,9 @@ test.describe('Doc grid move', () => {
    await page.getByRole('menuitem', { name: 'Move into a doc' }).click();

    await expect(
-      page.getByRole('dialog').getByRole('heading', { name: 'Move' }),
+      page
+        .getByRole('dialog')
+        .getByRole('heading', { name: 'Choose a new parent doc' }),
    ).toBeVisible();

    await input.click();
@@ -33,11 +33,11 @@ test.describe('Document search', () => {
    await page.getByTestId('search-docs-button').click();

    await expect(
-      page.getByLabel('Search modal').locator('img[alt=""]'),
+      page.getByRole('listbox', { name: 'Suggestions' }).locator('img'),
    ).toBeVisible();

    await expect(
-      page.getByRole('heading', { name: 'Search docs' }),
+      page.getByRole('heading', { name: 'Search for a document' }),
    ).toBeVisible();

    const inputSearch = page.getByPlaceholder('Type the name of a document');
@@ -48,7 +48,6 @@ test.describe('Document search', () => {

    const listSearch = page.getByRole('listbox').getByRole('group');
    const rowdoc = listSearch.getByRole('option').first();
-    await expect(rowdoc.getByText('keyboard_return')).toBeVisible();
    await expect(rowdoc.getByText(/just now/)).toBeVisible();

    await expect(
@@ -83,7 +82,7 @@ test.describe('Document search', () => {

    await page.keyboard.press('Control+k');
    await expect(
-      page.getByRole('heading', { name: 'Search docs' }),
+      page.getByRole('heading', { name: 'Search for a document' }),
    ).toBeVisible();

    await page.keyboard.press('Escape');
@@ -96,7 +95,7 @@ test.describe('Document search', () => {
    await page.keyboard.press('Control+k');
    await expect(page.getByRole('textbox', { name: 'Edit URL' })).toBeVisible();
    await expect(
-      page.getByLabel('Search modal').getByText('search'),
+      page.getByRole('heading', { name: 'Search for a document' }),
    ).toBeHidden();
  });

@@ -150,31 +149,44 @@ test.describe('Document search', () => {

    // Display only current doc results
    const updatedResultsList = page.getByRole('listbox');
+    // Top parent are not displayed - only children
    await expect(
      updatedResultsList.getByRole('option', { name: secondDocTitle }),
-    ).toBeVisible();
+    ).toBeHidden();
    await expect(
      updatedResultsList.getByRole('option', { name: secondChildDocTitle }),
    ).toBeVisible();
+    // Breadcrumb not displayed
+    await expect(
+      updatedResultsList
+        .getByRole('option', { name: secondChildDocTitle })
+        .getByText(secondDocTitle),
+    ).toBeHidden();
    await expect(
      updatedResultsList.getByRole('option', { name: firstDocTitle }),
    ).toBeHidden();

    // Click on the filter to show all docs
-    const filters = page.getByTestId('doc-search-filters');
-    await filters.click();
-    await filters.getByRole('button', { name: 'Current doc' }).click();
-    await page.getByRole('menuitemcheckbox', { name: 'All docs' }).click();
+    await page
+      .getByLabel('Search results controls')
+      .getByText('All docs')
+      .click();

    // Expect to see all docs in the results list
+    await expect(
+      updatedResultsList.getByRole('option', { name: firstDocTitle }),
+    ).toBeVisible();
    await expect(
      updatedResultsList.getByRole('option', { name: secondDocTitle }),
    ).toBeVisible();
    await expect(
      updatedResultsList.getByRole('option', { name: secondChildDocTitle }),
    ).toBeVisible();
+    // Breadcrumb with top parent is displayed
    await expect(
-      updatedResultsList.getByRole('option', { name: firstDocTitle }),
+      updatedResultsList
+        .getByRole('option', { name: secondChildDocTitle })
+        .getByText(secondDocTitle),
    ).toBeVisible();

    await page.getByRole('button', { name: 'close' }).click();
@@ -188,6 +200,7 @@ test.describe('Document search', () => {

    const docUrl = page.url();

+    // Another unauthenticated should be able to search in the current doc
    const { otherPage, cleanup } = await connectOtherUserToDoc({
      browserName,
      docUrl,
@@ -204,7 +217,7 @@ test.describe('Document search', () => {
    const otherPageResultsList = otherPage.getByRole('listbox');
    await expect(
      otherPageResultsList.getByRole('option', { name: secondDocTitle }),
-    ).toBeVisible();
+    ).toBeHidden();
    await expect(
      otherPageResultsList.getByRole('option', { name: secondChildDocTitle }),
    ).toBeVisible();
@@ -0,0 +1,6 @@
+<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M2.66667 1.33325C3.03486 1.33325 3.33333 1.63173 3.33333 1.99992V5.72636C3.33333 6.25679 3.5442 6.76535 3.91927 7.14042C4.29434 7.5155 4.8029 7.72636 5.33333 7.72636H11.724L9.52865 5.53105C9.2683 5.2707 9.2683 4.84869 9.52865 4.58834C9.789 4.32799 10.211 4.32799 10.4714 4.58834L13.8047 7.92167C13.8366 7.95355 13.8651 7.98872 13.89 8.02649C13.9065 8.05148 13.9208 8.07744 13.9336 8.10396C13.948 8.1339 13.9608 8.16484 13.9707 8.19706C13.9749 8.21078 13.9778 8.22482 13.9811 8.23873C13.9929 8.28832 14 8.33984 14 8.39303C14 8.42918 13.9964 8.46455 13.9909 8.49915C13.9862 8.52853 13.98 8.55773 13.9714 8.58639C13.9614 8.61933 13.9483 8.65087 13.9336 8.68144C13.9291 8.69088 13.9243 8.70017 13.9193 8.70943C13.9009 8.74342 13.8799 8.77568 13.8561 8.80579C13.8402 8.82595 13.8233 8.84576 13.8047 8.86438L10.4714 12.1977C10.211 12.4581 9.789 12.4581 9.52865 12.1977C9.2683 11.9374 9.2683 11.5154 9.52865 11.255L11.724 9.05969H5.33333C4.44928 9.05969 3.60168 8.70825 2.97656 8.08313C2.35144 7.45801 2 6.61042 2 5.72636L2 1.99992C2 1.63173 2.29848 1.33325 2.66667 1.33325Z"
+    fill="currentColor"
+  />
+</svg>
@@ -0,0 +1,6 @@
+<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M13.3333 2C13.7015 2 14 2.29848 14 2.66667V7.33333C14 8.21739 13.6486 9.06498 13.0234 9.6901C12.3983 10.3152 11.5507 10.6667 10.6667 10.6667H4.27604L6.47135 12.862C6.7317 13.1223 6.7317 13.5443 6.47135 13.8047C6.21101 14.065 5.789 14.065 5.52865 13.8047L2.19531 10.4714C2.17669 10.4527 2.15984 10.4329 2.14388 10.4128C2.12001 10.3826 2.0985 10.3505 2.08008 10.3164C2.07513 10.3072 2.0709 10.2978 2.06641 10.2884C2.05169 10.2578 2.03862 10.2263 2.02865 10.1934C2.01999 10.1647 2.01383 10.1355 2.00911 10.1061C2.00358 10.0715 2 10.0362 2 10C2 9.94687 2.00648 9.89525 2.01823 9.8457C2.02154 9.83174 2.02508 9.8178 2.0293 9.80404C2.03919 9.77181 2.05196 9.74088 2.06641 9.71094C2.07918 9.68441 2.09353 9.65845 2.11003 9.63346C2.13495 9.59569 2.16344 9.56052 2.19531 9.52865L5.52865 6.19531C5.789 5.93496 6.21101 5.93496 6.47135 6.19531C6.7317 6.45566 6.7317 6.87767 6.47135 7.13802L4.27604 9.33333H10.6667C11.1971 9.33333 11.7057 9.12247 12.0807 8.7474C12.4558 8.37232 12.6667 7.86377 12.6667 7.33333V2.66667C12.6667 2.29848 12.9651 2 13.3333 2Z"
+    fill="currentColor"
+  />
+</svg>
@@ -1,3 +1,6 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9 18L3 12L9 6L10.4 7.4L6.8 11H19V7H21V13H6.8L10.4 16.6L9 18Z" fill="#222631"/>
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M9 18L3 12L9 6L10.4 7.4L6.8 11H19V7H21V13H6.8L10.4 16.6L9 18Z"
+    fill="currentColor"
+  />
 </svg>
@@ -1,3 +1,6 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14 21L12.575 19.575L16.175 16H5V4H7V14H16.175L12.575 10.4L13.975 8.975L20 15L14 21Z" fill="#222631"/>
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M14 21L12.575 19.575L16.175 16H5V4H7V14H16.175L12.575 10.4L13.975 8.975L20 15L14 21Z"
+    fill="currentColor"
+  />
 </svg>
@@ -46,7 +46,7 @@ export const FilterDropdown = ({
        $direction="row"
        $align="center"
      >
-        <Text $weight={400} $variation="tertiary" $theme="neutral">
+        <Text $weight={400} $variation="tertiary" $theme="neutral" $size="sm">
          {selectedOption?.label ?? options[0].label}
        </Text>
        <Icon
@@ -1,7 +1,7 @@
 import { Command } from 'cmdk';
 import { ReactNode } from 'react';

-import { Box, Text } from '@/components';
+import { Text } from '@/components';

 import { QuickSearchData } from './QuickSearch';
 import { QuickSearchItem } from './QuickSearchItem';
@@ -18,7 +18,7 @@ export const QuickSearchGroup = <T,>({
  renderElement,
 }: Props<T>) => {
  return (
-    <Box>
+    <>
      <Text
        className="--docs--quick-search-group-title"
        as="h2"
@@ -76,6 +76,6 @@ export const QuickSearchGroup = <T,>({
          </Text>
        )}
      </Command.Group>
-    </Box>
+    </>
  );
 };
@@ -2,12 +2,12 @@ import { Command } from 'cmdk';
 import { PropsWithChildren, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';

+import SearchSVG from '@/assets/icons/ui-kit/zoom-rounded.svg';
 import { HorizontalSeparator } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 import { useFocusStore } from '@/stores';

 import { Box } from '../Box';
-import { Icon } from '../Icon';

 type QuickSearchInputProps = {
  inputValue?: string;
@@ -49,9 +49,14 @@ export const QuickSearchInput = ({
        $align="center"
        className="quick-search-input"
        $gap={spacingsTokens['xxs']}
-        $padding={{ horizontal: 'base', vertical: 'xxs' }}
+        $padding={{ horizontal: 'base', vertical: 'xs' }}
      >
-        <Icon iconName="search" $variation="secondary" aria-hidden="true" />
+        <SearchSVG
+          aria-hidden="true"
+          width={24}
+          height={24}
+          color="var(--c--contextuals--content--semantic--neutral--secondary)"
+        />
        <Command.Input
          ref={inputRef}
          autoFocus={true}
@@ -66,7 +71,7 @@ export const QuickSearchInput = ({
          data-testid="quick-search-input"
        />
      </Box>
-      {separator && <HorizontalSeparator $margin={{ top: 'base' }} />}
+      {separator && <HorizontalSeparator $margin={{ top: '2xs' }} />}
    </>
  );
 };
@@ -22,7 +22,7 @@ export const QuickSearchItemContent = ({
      className="--docs--quick-search-item-content"
      $direction="row"
      $align="center"
-      $padding={{ horizontal: '2xs', vertical: '4xs' }}
+      $padding={{ horizontal: 'xs', vertical: '3xs' }}
      $justify="space-between"
      $minHeight="34px"
      $width="100%"
@@ -1,8 +0,0 @@
-<svg viewBox="0 0 18 23" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    d="M4.57954 5.93282C4.44486 5.79021 4.37793 5.61484 4.37793 5.41299C4.37793 5.21112 4.44495 5.03795 4.58154 4.90136C4.72456 4.75833 4.90437 4.6875 5.11367 4.6875H12.8964C13.0991 4.6875 13.2722 4.75857 13.408 4.90133C13.5508 5.03718 13.6219 5.21027 13.6219 5.41299C13.6219 5.61613 13.5506 5.7918 13.409 5.93387C13.273 6.07732 13.0996 6.14873 12.8964 6.14873H5.11367C4.90437 6.14873 4.72456 6.0779 4.58154 5.93487L4.57954 5.93282ZM4.57954 9.51144C4.44486 9.36882 4.37793 9.19346 4.37793 8.9916C4.37793 8.78973 4.44495 8.61656 4.58154 8.47997C4.72456 8.33695 4.90437 8.26611 5.11367 8.26611H12.8964C13.0991 8.26611 13.2722 8.33719 13.408 8.47995C13.5508 8.61579 13.6219 8.78888 13.6219 8.9916C13.6219 9.19475 13.5506 9.37042 13.409 9.51249C13.273 9.65593 13.0996 9.72734 12.8964 9.72734H5.11367C4.90437 9.72734 4.72456 9.65651 4.58154 9.51348L4.57954 9.51144ZM4.57954 13.1003C4.44561 12.9585 4.37793 12.7869 4.37793 12.5907C4.37793 12.3831 4.44414 12.204 4.57954 12.0606L4.58151 12.0586C4.72453 11.9155 4.90437 11.8447 5.11367 11.8447H8.79482C9.00363 11.8447 9.18092 11.9153 9.3177 12.0596C9.46006 12.2024 9.53057 12.3819 9.53057 12.5907C9.53057 12.7887 9.45812 12.9609 9.31671 13.1024C9.17936 13.2397 9.00235 13.306 8.79482 13.306H5.11367C4.90609 13.306 4.72695 13.2397 4.58358 13.1043L4.57954 13.1003ZM1.09476 0.851519C1.65317 0.285946 2.47955 0.0117188 3.55508 0.0117188H14.4447C15.52 0.0117188 16.3433 0.28583 16.895 0.851748C17.4529 1.41698 17.7234 2.24966 17.7234 3.33145V18.8866C17.7234 19.975 17.4531 20.8082 16.8945 21.3668C16.3427 21.9256 15.5196 22.1961 14.4447 22.1961H3.55508C2.47988 22.1961 1.65367 21.9255 1.09521 21.367C0.543652 20.8083 0.276367 19.9747 0.276367 18.8866V3.33145C0.276367 2.24984 0.543796 1.41679 1.09476 0.851519ZM15.5624 20.0351C15.2958 20.3085 14.8959 20.4452 14.3627 20.4452H3.63711C3.10391 20.4452 2.70059 20.3085 2.42715 20.0351L2.49875 19.9652L2.49786 19.9643L2.42715 20.0351C2.16055 19.7616 2.02725 19.3686 2.02725 18.8559V3.36221C2.02725 2.84951 2.16055 2.45645 2.42715 2.18301C2.70059 1.90273 3.10391 1.7626 3.63711 1.7626H14.3627C14.8959 1.7626 15.2958 1.90273 15.5624 2.18301C15.8358 2.45645 15.9726 2.84951 15.9726 3.36221V18.8559C15.9726 19.3686 15.8358 19.7616 15.5624 20.0351Z"
-    fill="#3A3A3A"
-  />
-</svg>
@@ -7,18 +7,19 @@ import { useEffect, useId, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';

+import DocIcon from '@/assets/icons/ui-kit/doc.svg';
+import ArrowIcon from '@/assets/icons/ui-kit/keyboard_return.svg';
 import {
  Box,
  Card,
-  Icon,
  QuickSearch,
  QuickSearchItemContent,
  Text,
 } from '@/components';
-import FoundPageIcon from '@/docs/doc-editor/assets/doc-found.svg';
 import { DocsBlockNoteEditor } from '@/docs/doc-editor/types';
 import { Doc, getEmojiAndTitle, useTrans } from '@/docs/doc-management';
-import { DocSearchContent, DocSearchTarget } from '@/docs/doc-search';
+import { DocSearchContent } from '@/docs/doc-search';
+import { useDocSearchFilterStore } from '@/docs/doc-search/stores/useDocSearchFilterStore';
 import { useResponsiveStore } from '@/stores';

 import { InterlinkingLinkInlineContentType } from './InterlinkingLinkInlineContent';
@@ -55,6 +56,16 @@ export const SearchPage = ({
  const modalRef = useRef<HTMLDivElement>(null);
  const dropdownId = useId();
  const [popoverOpened, setPopoverOpened] = useState(false);
+  const { setFilter } = useDocSearchFilterStore();
+
+  /**
+   * When the search page is opened, we set the search
+   * target to 'current' to limit the search to the current
+   * document and its sub-documents.
+   */
+  useEffect(() => {
+    setFilter('current');
+  }, [setFilter]);

  /**
   * createReactInlineContentSpec add automatically the focus after
@@ -210,6 +221,9 @@ export const SearchPage = ({
                  .quick-search-container & [cmdk-group] {
                    margin-top: 0 !important;
                  }
+                  & h2 {
+                    padding: var(--c--globals--spacings--sm);
+                  }
                  & > div {
                    margin-top: var(--c--globals--spacings--0);
                    & [cmdk-group-heading] {
@@ -249,7 +263,6 @@ export const SearchPage = ({
                <DocSearchContent
                  groupName={t('Link a doc')}
                  search={search}
-                  target={DocSearchTarget.CURRENT}
                  parentPath={treeContext?.root?.path}
                  isSearchNotMandatory
                  onSelect={(doc) => {
@@ -295,24 +308,32 @@ export const SearchPage = ({
                              {emoji ? (
                                <Text $size="18px">{emoji}</Text>
                              ) : (
-                                <FoundPageIcon
-                                  width="100%"
-                                  style={{ maxHeight: '24px' }}
+                                <DocIcon
+                                  aria-hidden="true"
+                                  width="24px"
+                                  height="24px"
+                                  color="var(--c--contextuals--content--semantic--neutral--primary)"
                                />
                              )}
                            </Box>

                            <Text
                              $size="sm"
-                              $color="var(--c--globals--colors--gray-1000)"
+                              $color="var(--c--contextuals--content--semantic--neutral--primary)"
                              spellCheck="false"
+                              $weight="500"
                            >
                              {titleWithoutEmoji}
                            </Text>
                          </Box>
                        }
                        right={
-                          <Icon iconName="keyboard_return" spellCheck="false" />
+                          <ArrowIcon
+                            aria-hidden="true"
+                            width="24px"
+                            height="24px"
+                            color="var(--c--contextuals--content--semantic--neutral--tertiary)"
+                          />
                        }
                      />
                    );
@@ -1,11 +1,11 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';

 import { APIError, errorCauses, fetchAPI } from '@/api';
+import { KEY_LIST_SEARCH_DOC } from '@/docs/doc-search/api/useSearchDocs';

 import { Doc } from '../types';

 import { KEY_LIST_DOC } from './useDocs';
-import { KEY_LIST_SEARCH_DOC } from './useSearchDocs';

 export type CreateChildDocParam = Pick<Doc, 'title'> & {
  parentId: string;
@@ -5,11 +5,11 @@ import {
 } from '@tanstack/react-query';

 import { APIError, errorCauses, fetchAPI } from '@/api';
+import { KEY_LIST_SEARCH_DOC } from '@/docs/doc-search/api/useSearchDocs';

 import { Doc } from '../types';

 import { KEY_LIST_DOC } from './useDocs';
-import { KEY_LIST_SEARCH_DOC } from './useSearchDocs';

 type CreateDocParams = {
  title?: string;
@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';

-import ArrowSVG from '@/assets/icons/ui-kit/subdirectory_arrow_right.svg';
+import ArrowSVG from '@/assets/icons/ui-kit/arrow-corner-down-right.svg';
 import { Box, Text } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
 import { useDate } from '@/hooks/useDate';
@@ -105,16 +105,7 @@ export const SimpleDocItem = ({
        {(showDate || breadcrumb) && (
          <Box $direction="row" $align="center" aria-hidden="true">
            {breadcrumb && (
-              <Box
-                $direction="row"
-                $align="center"
-                $gap="3xs"
-                $css={css`
-                  & > svg {
-                    margin-top: -2px;
-                  }
-                `}
-              >
+              <Box $direction="row" $align="center" $gap="3xs">
                <ArrowSVG
                  width="16px"
                  height="16px"
@@ -2,16 +2,18 @@ import {
  Button,
  Modal,
  ModalSize,
+  VariantType,
  useModal,
+  useToastProvider,
 } from '@gouvfr-lasuite/cunningham-react';
 import { TreeViewMoveModeEnum } from '@gouvfr-lasuite/ui-kit';
 import dynamic from 'next/dynamic';
 import { useState } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import { createGlobalStyle, css } from 'styled-components';
 import { useDebouncedCallback } from 'use-debounce';

-import { Box, ButtonCloseModal, HorizontalSeparator, Text } from '@/components';
+import { Box, ButtonCloseModal, Text } from '@/components';
 import { QuickSearch } from '@/components/quick-search';
 import { Doc, useMoveDoc, useTrans } from '@/docs/doc-management';
 import { DocSearchContent } from '@/docs/doc-search';
@@ -48,16 +50,17 @@ export const DocMoveModalStyle = createGlobalStyle`
      overflow-y: auto;
    }

-    div.c__modal__title {
-      padding: 0;
-      margin-bottom: 0;
+    &:has(.quick-search-container) > div.c__modal__title {
+      padding-top: var(--c--globals--spacings--sm);
+      padding-bottom: var(--c--globals--spacings--xs);
+      padding-inline: var(--c--globals--spacings--base);
    }
    .c__modal__footer {
      margin-top: 0rem;
      border-top: 1px solid var(--c--contextuals--border--surface--primary);
    }
-    .quick-search-input{
-      padding-inline: var(--c--globals--spacings--md);
+    .quick-search-input {
+      padding: var(--c--globals--spacings--xxs) var(--c--globals--spacings--base);
    }
    .quick-search-container [cmdk-item] {
      border-radius: 4px;
@@ -83,21 +86,21 @@ export const DocMoveModal = ({
  const [loading, setLoading] = useState(false);
  const [docSelected, setDocSelected] = useState<Doc>();
  const { untitledDocument } = useTrans();
-  const docTitle = doc.title || untitledDocument;
  const docTargetTitle = docSelected?.title || untitledDocument;
  const modalConfirmation = useModal();
  const modalRequest = useModal();
-  const { mutate: moveDoc } = useMoveDoc();
+  const { mutateAsync: moveDoc } = useMoveDoc();
  const [search, setSearch] = useState('');
  const { isDesktop, isTablet, isMobile } = useResponsiveStore();
  const isModal = (isDesktop || isTablet) && !isMobile;
  const handleInputSearch = useDebouncedCallback(setSearch, 700);
+  const { toast } = useToastProvider();

  const handleSelect = (docSelected: Doc) => {
    setDocSelected(docSelected);
  };

-  const handleMoveDoc = () => {
+  const handleMoveDoc = async () => {
    modalConfirmation.onClose();
    if (!docSelected?.id) {
      return;
@@ -107,7 +110,19 @@ export const DocMoveModal = ({
      sourceDocumentId: doc.id,
      targetDocumentId: docSelected.id,
      position: TreeViewMoveModeEnum.FIRST_CHILD,
-    });
+    })
+      .then(() => {
+        toast(
+          t(`The document has been moved successfully.`),
+          VariantType.SUCCESS,
+        );
+      })
+      .catch(() => {
+        toast(
+          t(`An error occurred while moving the document.`),
+          VariantType.ERROR,
+        );
+      });
  };

  return (
@@ -141,7 +156,7 @@ export const DocMoveModal = ({
                  return;
                }

-                handleMoveDoc();
+                void handleMoveDoc();
              }}
              disabled={!docSelected}
            >
@@ -158,41 +173,17 @@ export const DocMoveModal = ({
          </Box>
        }
        title={
-          <Box>
+          <>
+            <Text as="h2" $margin="0" $size="s" $align="flex-start">
+              {t('Choose a new parent doc')}
+            </Text>
            <Box $position="absolute" $css="top: 4px; right: 4px;">
              <ButtonCloseModal
-                aria-label={t('Close the move modal')}
-                onClick={() => onClose()}
+                aria-label={t('Close the search modal')}
+                onClick={onClose}
              />
            </Box>
-            <Text
-              as="h2"
-              $margin="0"
-              $size="h6"
-              $align="flex-start"
-              $padding={{ horizontal: 'md', top: 'md' }}
-            >
-              {t('Move')}
-            </Text>
-            <Box $margin={{ top: 'sm' }} $padding={{ horizontal: 'md' }}>
-              <Text
-                $size="sm"
-                $variation="secondary"
-                $display="inline"
-                $weight="normal"
-                $textAlign="left"
-              >
-                <Trans
-                  i18nKey="Choose the new location for <strong>{{title}}</strong>."
-                  values={{
-                    title: docTitle,
-                  }}
-                  components={{ strong: <strong /> }}
-                />
-              </Text>
-            </Box>
-            <HorizontalSeparator />
-          </Box>
+          </>
        }
      >
        <Box
@@ -210,7 +201,7 @@ export const DocMoveModal = ({
          }}
        >
          <QuickSearch
-            placeholder={t('Search for a doc')}
+            placeholder={t('Search for a doc...')}
            loading={loading}
            onFilter={handleInputSearch}
          >
@@ -148,6 +148,10 @@ const MainContent = ({
      $css={css`
        overflow-y: auto;
        overflow-x: clip;
+
+        &:focus-visible {
+          outline: none;
+        }
      `}
      {...props}
    >