✨(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.

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

@@ -0,0 +1,10 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M15.2002 1C16.0236 0.999999 16.7026 0.998987 17.2529 1.04395C17.8145 1.08989 18.3314 1.18852 18.8164 1.43555C19.5687 1.81898 20.181 2.43128 20.5645 3.1836C20.8116 3.66883 20.9101 4.18609 20.9561 4.74805C21.001 5.29842 21.001 5.97635 21.001 6.79981V17.2002C21.001 18.0237 21.001 18.7016 20.9561 19.252C20.9101 19.8139 20.8116 20.3312 20.5645 20.8164C20.181 21.5687 19.5687 22.181 18.8164 22.5645C18.3314 22.8115 17.8145 22.9101 17.2529 22.9561C16.7026 23.001 16.0236 23 15.2002 23H8.74609C7.94682 23 7.2864 23 6.74805 22.9561C6.18623 22.9101 5.66969 22.8115 5.18457 22.5645C4.43192 22.181 3.81903 21.5681 3.43555 20.8154C3.1885 20.3303 3.08985 19.8138 3.04395 19.252C3.01118 18.8508 3.00309 18.6188 3.00098 17.499C3.00017 16.947 3.44787 16.5 4 16.5C4.55228 16.5 4.9998 16.9477 5.00098 17.5C5.00333 18.5996 5.01129 18.7608 5.03809 19.0889C5.07389 19.5273 5.13809 19.7518 5.21777 19.9082C5.40949 20.2844 5.71557 20.5905 6.0918 20.7822C6.2482 20.8619 6.47271 20.9271 6.91113 20.9629C7.36117 20.9997 7.94342 21 8.7998 21H15.2002C16.0565 21 16.6398 20.9997 17.0898 20.9629C17.5274 20.9271 17.7519 20.8618 17.9082 20.7822C18.2842 20.5905 18.5905 20.2842 18.7822 19.9082C18.8619 19.7518 18.9271 19.5271 18.9629 19.0889C18.9997 18.6388 19.001 18.0566 19.001 17.2002V6.79981C19.001 5.94341 18.9997 5.36117 18.9629 4.91113C18.9271 4.47291 18.8619 4.24819 18.7822 4.0918C18.5905 3.71577 18.2842 3.40947 17.9082 3.21778C17.7519 3.13822 17.5274 3.07291 17.0898 3.03711C16.6398 3.00035 16.0565 3 15.2002 3H10.001C9.44869 3 9.00098 2.55229 9.00098 2C9.00098 1.44772 9.44869 1 10.001 1H15.2002Z"
+    fill="currentColor"
+  />
+  <path
+    d="M4 1C4.55228 1 5 1.44772 5 2V10C5 10.2652 5.10543 10.5195 5.29297 10.707C5.48051 10.8946 5.73478 11 6 11H9.58594L8.29297 9.70703C7.90245 9.31651 7.90245 8.68349 8.29297 8.29297C8.68349 7.90245 9.31651 7.90245 9.70703 8.29297L12.707 11.293C12.7548 11.3408 12.7976 11.3935 12.835 11.4502C12.8597 11.4877 12.8812 11.5266 12.9004 11.5664C12.9222 11.6116 12.9412 11.6584 12.9561 11.707C12.9623 11.7273 12.9668 11.748 12.9717 11.7686C12.9893 11.8429 13 11.9202 13 12C13 12.0563 12.9933 12.1112 12.9844 12.165C12.9772 12.2078 12.9688 12.2503 12.9561 12.292C12.9412 12.3407 12.9222 12.3874 12.9004 12.4326C12.8936 12.4468 12.8864 12.4607 12.8789 12.4746C12.851 12.5262 12.8184 12.5745 12.7822 12.6201C12.7586 12.6498 12.7345 12.6796 12.707 12.707L9.70703 15.707C9.31651 16.0976 8.68349 16.0976 8.29297 15.707C7.90245 15.3165 7.90245 14.6835 8.29297 14.293L9.58594 13H6C5.20435 13 4.44151 12.6837 3.87891 12.1211C3.3163 11.5585 3 10.7957 3 10V2C3 1.44772 3.44772 1 4 1Z"
+    fill="currentColor"
+  />
+</svg>

src/frontend/apps/impress/src/features/docs/doc-management/components/NewDocButton.tsx

@@ -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,6 +70,11 @@ 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);
@@ -73,6 +82,18 @@ export function DropdownArrow() {
 
   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" />,
@@ -80,7 +101,7 @@ export function DropdownArrow() {
         isHidden: !isImportEnabled,
       },
     ],
-    [t, openImport, isImportEnabled],
+    [t, openImport, currentDoc, createChildDoc, isImportEnabled],
   );
 
   return (