✨(frontend) add create sub-documents button

We added a sub button to create sub-documents
from the New button. This sub button is only visible
when the user is in a document, and it allows them to
create a new document that is a child of the current
document.

Author: AntoLC

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

@@ -31,6 +31,22 @@ test.describe('Doc Create', () => {
     await expect(docsGrid.getByText(docTitle)).toBeVisible();
   });
 
+  test('it creates a sub doc from the submenu "New" button', async ({
+    page,
+    browserName,
+  }) => {
+    await createDoc(page, 'my-new-button-sub-doc', browserName, 1);
+
+    await page.getByLabel('Open new document options').click();
+    await page.getByRole('menuitem', { name: 'New sub-doc' }).click();
+
+    const input = page.getByRole('textbox', { name: 'Document title' });
+    await expect(input).toHaveText('', { timeout: 10000 });
+    await expect(
+      page.locator('.c__tree-view--row-content').getByText('Untitled document'),
+    ).toBeVisible();
+  });
+
   test('it creates a sub doc from slash menu editor', async ({
     page,
     browserName,

src/frontend/apps/impress/src/assets/icons/ui-kit/doc-new-subdoc.svg

@@ -7,10 +7,13 @@ import { useTranslation } from 'react-i18next';
 import { Text } from '@/components';
 import { useConfig } from '@/core/config/api/useConfig';
 import ArrowDownIcon from '@/icons/arrow-drop-down.svg';
+import SubDocIcon from '@/icons/doc-new-subdoc.svg';
 import PlusIcon from '@/icons/doc-plus.svg';
 import UploadIcon from '@/icons/upload-arrow.svg';
 
+import { useCreateChildDoc } from '../api/useCreateChildDoc';
 import { useImport } from '../hooks/useImport';
+import { useDocStore } from '../stores/useDocStore';
 
 interface NewDocButtonProps {
   onClose?: () => void;
@@ -55,6 +58,7 @@ export const NewDocButton = ({ onClose }: NewDocButtonProps) => {
 export function DropdownArrow() {
   const router = useRouter();
   const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const { currentDoc } = useDocStore();
   const { t } = useTranslation();
   const {
     getInputProps,
@@ -66,21 +70,38 @@ export function DropdownArrow() {
       void router.push(`/docs/${doc.id}/`);
     },
   });
+  const { mutate: createChildDoc } = useCreateChildDoc({
+    onSuccess: (newDoc) => {
+      void router.push(`/docs/${newDoc.id}`);
+    },
+  });
 
   const toggleMenu = useCallback(() => {
     setIsMenuOpen((open) => !open);
   }, []);
 
   const options = useMemo<DropdownMenuItem[]>(
     () => [
+      {
+        label: t('New sub-doc'),
+        icon: <SubDocIcon aria-hidden="true" width="24" height="24" />,
+        callback: () => {
+          if (currentDoc) {
+            createChildDoc({
+              parentId: currentDoc.id,
+            });
+          }
+        },
+        isHidden: !currentDoc,
+      },
       {
         label: t('Import a document'),
         icon: <UploadIcon aria-hidden="true" width="24" height="24" />,
         callback: openImport,
         isHidden: !isImportEnabled,
       },
     ],
-    [t, openImport, isImportEnabled],
+    [t, openImport, currentDoc, createChildDoc, isImportEnabled],
   );
 
   return (